/* Fargar og typografi hentet fra greatpeople.no (Poppins, sort/hvit, oransje
   #ec9b00 aksent, skarpe kanter - se README for detaljer om kilden). */
:root {
  --bg-0: #ffffff;
  --bg-1: #f7f7f7;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --border: #e3e3e3;
  --text: #171717;
  --text-muted: #6b6b6b;
  --text-faint: #9c9c9c;

  --aktiv: #ec9b00;
  --aktiv-soft: rgba(236, 155, 0, 0.12);
  --utfort: #1e73be;
  --utfort-soft: rgba(30, 115, 190, 0.12);
  --pa-vent: #767676;
  --pa-vent-soft: rgba(118, 118, 118, 0.12);
  --neutral: #cfcfcf;

  /* Egne, mørkere varianter KUN til tekst oppå de lyse *-soft-flatene. Merkefargen
     #ec9b00 mot sin egen lyse tint gir bare 2.1:1 kontrast - altfor svakt å lese på
     en vegghengt skjerm. Selve merkefargen (kantlinjer, prikker, aksenter) er uendret. */
  --aktiv-tekst: #8a5b00;
  --utfort-tekst: #175a94;
  --pa-vent-tekst: #5c5c5c;

  --palette-1: #4a6fa5;
  --palette-2: #7b4b94;
  --palette-3: #c1502e;
  --palette-4: #2b8a8a;
  --palette-5: #6b7a3f;
  --palette-6: #4b4e9e;
  --palette-7: #a3542c;
  --palette-8: #3d7a5c;

  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Manuell nattmodus (bryter i footeren, se temaBtn i app.js) - blåfargen er lysnet
   noe (#4a9eef i stedet for #1e73be) siden den opprinnelige er for mørk til å lese
   godt mot en mørk bakgrunn. */
:root[data-theme="dark"] {
  --bg-0: #121212;
  --bg-1: #1a1a1a;
  --surface: #1e1e1e;
  --surface-2: #242424;
  --border: #333333;
  --text: #f0f0f0;
  --text-muted: #a8a8a8;
  --text-faint: #767676;

  --utfort: #4a9eef;
  --utfort-soft: rgba(74, 158, 239, 0.16);
  --aktiv-soft: rgba(236, 155, 0, 0.16);
  --pa-vent: #a8a8a8;
  --pa-vent-soft: rgba(168, 168, 168, 0.16);

  /* I nattmodus er det motsatt problem - mot mørk bakgrunn er det de LYSE variantene
     som leses best, så her peker tekstfargene tilbake på selve merkefargene. */
  --aktiv-tekst: #f0ad20;
  --utfort-tekst: #4a9eef;
  --pa-vent-tekst: #b8b8b8;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--text);
}

body {
  background: var(--bg-0);
}

.board {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2vh, 28px) clamp(18px, 2.4vw, 40px);
  /* ekstra bunnmarg reservert til feirings- OG nyhetsbanneren (44px hver + 8px luft),
     permanent slik at statuslinjen aldri havner under dem når feiringsbanneret dukker
     opp oppå den alltid synlige nyhetslinjen */
  padding-bottom: calc(clamp(14px, 2vh, 28px) + 96px);
  gap: clamp(10px, 1.4vh, 16px);
}

/* ---------- Topbar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vw, 36px);
  flex-wrap: nowrap;
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 0 0 auto;
}

.brand-logo {
  height: clamp(22px, 2.6vh, 30px);
  width: auto;
  display: block;
}

.brand-divider {
  width: 1px;
  height: clamp(20px, 2.6vh, 28px);
  background: var(--border);
}

.brand h1 {
  font-size: clamp(0.92rem, 1.5vw, 1.45rem);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text);
}

.brand-bar {
  height: 4px;
  background: var(--aktiv);
  flex: 0 0 auto;
  margin: 0 clamp(-18px, -2.4vw, -40px);
}

.stats {
  display: flex;
  gap: clamp(5px, 1vw, 22px);
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.stat-card {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: clamp(0.22rem, 0.5vw, 0.35rem) clamp(0.5rem, 1vw, 1rem);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  flex: 0 1 auto;
}

.stat-card .value {
  font-size: clamp(0.92rem, 1.3vw, 1.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

/* Navn + dato tar mer plass enn et rent tall - holdt mindre enn de vanlige tallene
   slik at den ikke dominerer resten av statslinjen. */
.stat-card.bursdag .value {
  font-size: clamp(0.6rem, 0.78vw, 0.76rem);
  white-space: nowrap;
}

.stat-card .label {
  font-size: clamp(0.62rem, 0.78vw, 0.88rem);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Aksentfargene brukes på store, fete tall (ikke liten tekst på tint bakgrunn som i
   status-pillene), så merkefargene fungerer fint her. */
.stat-card.accent-aktiv .value { color: var(--aktiv); }
.stat-card.accent-utfort .value { color: var(--utfort); }

.clock-block {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 1vw, 1.1rem);
}

.vaer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding-right: clamp(0.45rem, 1vw, 1.1rem);
  border-right: 1px solid var(--border);
}

.vaer-rad {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.vaer-varsel {
  font-size: clamp(0.55rem, 0.7vw, 0.68rem);
  font-weight: 600;
  color: var(--utfort);
  white-space: nowrap;
}

.vaer-ikon {
  font-size: clamp(1.1rem, 1.8vw, 1.7rem);
  line-height: 1;
}

.vaer-temp {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: clamp(0.85rem, 1.3vw, 1.25rem);
  color: var(--text);
}

.clock-tid {
  text-align: right;
}

.clock {
  font-family: "Poppins", sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 1.9vw, 1.9rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}

.date {
  font-size: clamp(0.62rem, 0.85vw, 0.85rem);
  color: var(--text-muted);
  text-transform: capitalize;
  margin-top: 0.15rem;
  white-space: nowrap;
}

/* ---------- Lanes ---------- */

/* Post-it/busstider/kundenytt sto tidligere som løst fastplasserte widgets i nedre
   høyre hjørne, hver med sin egen hånd-utregnede bottom-verdi. Det ga to problemer:
   dekket ekte kort når en rådgiver sin kolonne endte opp der (Sara Göthe/Espen
   Steinsrud), og et forsøk på å reservere plass til dem etterlot mye synlig tomrom
   over dem siden de selv bare sto nederst. Nå er de en ordentlig stablet spalte
   (.side-stack) ved siden av .lanes i layouten, se .content-row under - ingen
   fastposisjonering eller magiske pixel-offsets lenger. */
.content-row {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: clamp(12px, 1.6vw, 24px);
}

.lanes {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(8px, 1.2vw, 20px);
  /* IKKE legg til padding-bottom her for å unngå at post-it/busstider/kundenytt
     overlapper kortene - forsøkt (200px) og reversert: tilpassKortStorrelseTilSkjerm()
     jobber allerede i overkant av det den klarer for å få alt til å vise uten
     skrolling, og mindre tilgjengelig høyde presset kort til å bli usynlig
     klippet av overflow:hidden i stedet for bare dekket av et panel - reelt
     datatap, verre enn det opprinnelige overlapp-problemet. */
}

.side-stack {
  flex: 0 0 260px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 16px);
}

/* Tetthet skalerer ned kort/avatar/skrift når det er mange rådgivere,
   slik at tavlen fortsatt får plass til alle uten å stole på skrolling. */
.lanes.density-compact { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.lanes.density-dense { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.lanes.density-compact .lane-header {
  padding: 8px 12px;
  gap: 0.5rem;
}

.lanes.density-compact .avatar {
  width: 26px;
  height: 26px;
  font-size: 0.68rem;
}

/* Rådgivernavnet er det første man leter etter på avstand - hevet 2026-09-02 fra
   0.82rem/0.74rem, som ga ~13px og ~12px på en 1080p-skjerm. */
.lanes.density-compact .lane-header .name {
  font-size: 0.95rem;
}

.lanes.density-compact .lane-body {
  padding: 8px;
  gap: 0.45rem;
}

.lanes.density-dense .lane-header {
  padding: 6px 10px;
  gap: 0.4rem;
}

.lanes.density-dense .avatar {
  width: 22px;
  height: 22px;
  font-size: 0.6rem;
}

.lanes.density-dense .lane-header .name {
  font-size: 0.85rem;
}

.lanes.density-dense .lane-count {
  font-size: 0.62rem;
  padding: 0.1rem 0.45rem;
}

.lanes.density-dense .lane-body {
  padding: 6px;
  gap: 0.35rem;
}

/* Kort-skala styrer hvor kompakt ETT kort er, uavhengig av tetthet (som styrer
   kolonner/rådgivere). app.js velger nivå etter hvor mange oppdrag den fulleste
   rådgiveren har.
   Endret 2026-09-02: det var tidligere fire nivåer, hvor de to tetteste presset
   teksten ned til ~10px og ~9px - uleselig på en vegghengt skjerm, og de var i
   praksis ALLTID i bruk fordi algoritmen prioriterte "alt inn samtidig" over
   lesbarhet. Nå finnes bare to nivåer, begge med lesbar tekst, og rotasjonen
   (initialiserRotasjon i app.js) tar over for det som ikke får plass. */
.lanes.card-scale-1 .card {
  padding: 0.42rem 0.6rem;
}

.lanes.card-scale-1 .card .tittel {
  font-size: 0.95rem;
}

.lanes.card-scale-1 .card .kunde {
  font-size: 0.82rem;
}

.lanes.card-scale-1 .card .tittel-rad {
  margin-bottom: 0.1rem;
}

.lanes.card-scale-1 .card .kunde-rad {
  margin-bottom: 0.3rem;
}

.lanes.card-scale-1 .lane-body {
  gap: 0.3rem;
}

/* Tetteste nivå - fortsatt lesbar tekst (0.85rem / 0.74rem). Får det fortsatt ikke
   plass her, roterer kolonnen mellom sider i stedet for å krympe videre. */
.lanes.card-scale-2 .card {
  padding: 0.28rem 0.5rem;
}

.lanes.card-scale-2 .card .tittel {
  font-size: 0.85rem;
  line-height: 1.25;
}

.lanes.card-scale-2 .card .tittel-rad {
  margin-bottom: 0.05rem;
}

.lanes.card-scale-2 .card .kunde {
  font-size: 0.74rem;
  line-height: 1.2;
}

.lanes.card-scale-2 .card .kunde-rad {
  margin-bottom: 0.18rem;
}

.lanes.card-scale-2 .status-pill {
  font-size: 0.66rem;
  padding: 0.08rem 0.4rem;
}

.lanes.card-scale-2 .card-right {
  font-size: 0.68rem;
}

.lanes.card-scale-2 .lane-body {
  gap: 0.22rem;
}

.lane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}

.lane-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: clamp(10px, 1.4vh, 16px) clamp(12px, 1.4vw, 18px);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.avatar {
  width: clamp(30px, 2.6vw, 38px);
  height: clamp(30px, 2.6vw, 38px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  color: #ffffff;
  flex: 0 0 auto;
}

.lane-header .name {
  font-weight: 600;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.lane-count {
  margin-left: auto;
  font-size: clamp(0.72rem, 0.9vw, 0.82rem);
  color: var(--text-muted);
  background: var(--bg-1);
  border: 1px solid var(--border);
  padding: 0.1rem 0.55rem;
  flex: 0 0 auto;
}

/* "1/2" osv. - vises kun når rådgiveren har flere oppdrag enn det får plass til
   samtidig og kolonnen roterer mellom sider, se initialiserRotasjon()/rullSider()
   i app.js. Tom span (ingen innhold) resten av tiden, tar ikke plass da. */
.lane-side {
  font-size: clamp(0.7rem, 0.85vw, 0.8rem);
  /* var --text-faint (2.75:1 mot hvitt) - for svakt til å leses på avstand */
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.lane-body {
  flex: 1 1 auto;
  min-height: 0;
  /* Ingen skrolling. app.js krymper kortene til de får plass (to nivåer), og roterer
     mellom sider hvis selv det tetteste nivået ikke holder - se initialiserRotasjon. */
  overflow: hidden;
  padding: clamp(10px, 1.2vh, 14px);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--bg-1);
  /* Rolig innblending når rotasjonen bytter side (se visSide i app.js) */
  transition: opacity 0.18s ease;
}

.lane-body.bytter-side {
  opacity: 0;
}

.lane-empty {
  color: var(--text-faint);
  font-size: 0.85rem;
  padding: 0.5rem 0.2rem;
}

/* ---------- Cards ---------- */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--neutral);
  padding: 0.7rem 0.85rem;
  flex: 0 0 auto;
}

.card.status-aktiv { border-left-color: var(--aktiv); }
.card.status-utfort { border-left-color: var(--utfort); opacity: 0.85; }
.card.status-paVent { border-left-color: var(--pa-vent); opacity: 0.85; }

/* Overlegg, ikke en del av flyten - tar aldri plass fra selve kortinnholdet, uansett
   hvor tett tilpassKortStorrelseTilSkjerm() pakker kortene sammen.
   Flyttet fra høyre til VENSTRE hjørne 2026-09-02: status-pillen ("Aktiv") ble flyttet
   opp på tittellinja samme dag, og lå da rett under "Ny"-merket i høyre hjørne. */
.ny-merke {
  position: absolute;
  top: -6px;
  left: -6px;
  background: var(--aktiv);
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.12rem 0.4rem;
  line-height: 1.2;
  z-index: 1;
}

/* Rolle (linje 1) og kundenavn (linje 2) - egne linjer, alltid synlige på alle
   tetthetsnivåer (se card-scale-* under). Kunde-linjen hadde tidligere display:none på
   tetthet 2-4 for å spare høyde, som gjorde at kundenavnet i praksis var usynlig på de
   fleste kort - fjernet 2026-09-02. Et forsøk på å rulle for lange linjer i stedet for
   å klippe med "..." ble reversert samme dag (for mye samtidig bevegelse på tavlen) -
   hver linje forkortes nå bare med "..." i de sjeldne tilfellene den ikke får plass. */
/* Status ("Aktiv") og prosent/dato ligger på SAMME linje som hhv. rolle og kunde
   (høyrestilt), i stedet for en egen meta-rad under - sparer en hel linjes høyde per
   kort. Tekstene krymper (min-width:0 + ellipsis) før pillen/prosenten gjør det, siden
   de sistnevnte alltid skal være fullt lesbare. */
.card .tittel-rad,
.card .kunde-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.card .tittel-rad {
  margin-bottom: 0.15rem;
}

/* Skriftstørrelsene er hevet 2026-09-02: tavlen henger på veggen og leses på avstand,
   men endte i praksis på ~10px tittel / ~9px kunde fordi tetthetsalgoritmen komprimerte
   så langt ned den kunne for å få ALT inn samtidig. Nå settes lesbarhet først, og
   rotasjonen (se initialiserRotasjon i app.js) tar seg av det som ikke får plass. */
.card .tittel {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: clamp(0.95rem, 1.05vw, 1.15rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.card .kunde {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(0.82rem, 0.9vw, 0.98rem);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: clamp(0.66rem, 0.78vw, 0.74rem);
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  white-space: nowrap;
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Tekstfargene er de mørkere *-tekst-variantene (se :root) - selve prikken beholder
   merkefargen, slik at fargekodingen er like tydelig som før. Prikken pulserte
   tidligere i det uendelige på hvert eneste aktive kort (50+ samtidig på tavlen);
   fjernet 2026-09-02 for å holde tavlen rolig. */
.status-pill.status-aktiv {
  color: var(--aktiv-tekst);
  background: var(--aktiv-soft);
}

.status-pill.status-aktiv::before {
  background: var(--aktiv);
}

.status-pill.status-utfort {
  color: var(--utfort-tekst);
  background: var(--utfort-soft);
}

.status-pill.status-utfort::before {
  background: var(--utfort);
}

.status-pill.status-paVent {
  color: var(--pa-vent-tekst);
  background: var(--pa-vent-soft);
}

.status-pill.status-paVent::before {
  background: var(--pa-vent);
}

.card-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: clamp(0.7rem, 0.82vw, 0.8rem);
  color: var(--text-muted);
  white-space: nowrap;
}

.card-right .fremdrift {
  background: var(--bg-1);
  border: 1px solid var(--border);
  padding: 0.1rem 0.5rem;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--aktiv);
}

.progress-bar {
  height: 3px;
  margin-top: 0.4rem;
  background: var(--border);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--aktiv);
}

/* I tetteste kort-modus (mange oppdrag på én rådgiver) prioriteres plass
   fremfor progresjonslinjen - prosenttallet i card-right vises fortsatt. */
.lanes.card-scale-2 .progress-bar {
  display: none;
}

/* ---------- Footer / status ---------- */

.statusbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.68rem, 0.8vw, 0.78rem);
  color: var(--text-faint);
}

.statusbar .dot { opacity: 0.5; }

.empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.1rem;
}

#emptyState[hidden] {
  display: none;
}

/* ---------- Gjeste-knapp ---------- */

.gjeste-knapp {
  position: fixed;
  left: 28px;
  bottom: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 50;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.gjeste-knapp:hover {
  border-color: var(--aktiv);
  transform: translateY(-1px);
}

/* Tema-knappen (mørk/lys) flyttet hit fra statusbar-bunnlinjen - deler .gjeste-knapp
   sin runde stil, plassert rett ved siden av. */
.tema-knapp {
  left: 76px;
}

/* ---------- Bilde-oppslag (admin) ---------- */

/* Under gjestevisning (1000) med vilje - et internt oppslag skal ikke vises til
   besøkende i gjestevinduet 11:00-11:30. Over nyhetsbanneret (1001) er uviktig her,
   siden bakgrunnen uansett dekker hele skjermen. */
.bilde-oppslag {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(10, 10, 10, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.bilde-oppslag.vis {
  opacity: 1;
  pointer-events: auto;
}

.bilde-oppslag[hidden] {
  display: none;
}

.bilde-oppslag img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ---------- Post-it ---------- */

.postit {
  flex: 0 0 auto;
  position: relative;
  min-height: 150px;
  background: #fde68a;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: rotate(-2deg);
  padding: 18px 12px 12px;
  transition: transform 0.2s ease;
}

.postit:hover,
.postit:focus-within {
  transform: rotate(0deg) scale(1.03);
}

.postit-pin {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

.postit-text {
  width: 100%;
  height: 130px;
  border: none;
  background: transparent;
  resize: none;
  cursor: default;
  font-family: "Caveat", "Poppins", cursive, sans-serif;
  font-size: 1.15rem; /* håndskrift-fonter virker mindre enn Poppins ved samme størrelse */
  font-weight: 700;
  color: #4a3b00;
  line-height: 1.3;
}

.postit-text::placeholder {
  color: rgba(74, 59, 0, 0.45);
}

.postit-text:focus {
  outline: none;
}

/* ---------- Busstider ---------- */

.busstider {
  flex: 0 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.busstider-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 0.76rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
  overflow: hidden;
}

.busstider-header > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.busstider-liste {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 24px;
  max-height: 180px; /* rundt 6 avganger - grense for at rutenett-innrykket nederst stemmer */
  overflow: hidden;
}

.buss-rad {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.buss-linje {
  flex: 0 0 auto;
  min-width: 2.1rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.68rem;
  color: #ffffff;
  background: var(--aktiv);
  padding: 0.05rem 0.3rem;
  white-space: nowrap;
}

.buss-destinasjon {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.buss-tid {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-weight: 600;
}

.buss-tom {
  font-size: 0.78rem;
  color: var(--text-faint);
}

/* ---------- Kundenytt (omtale av kunder i nyhetene) ---------- */

.kundenytt {
  flex: 0 0 auto;
  max-height: 140px; /* viser kun én sak av gangen (karusell), ikke flere stablet */
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  transform: translateX(120%);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kundenytt.vis {
  transform: translateX(0);
}

.kundenytt-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 0.76rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}

.panel-oppdatert {
  font-weight: 500;
  font-size: 0.66rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.kundenytt-liste {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 100px;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.kundenytt-liste.bytter { opacity: 0; }

.kundenytt-rad { display: flex; flex-direction: column; gap: 0.1rem; }

.kundenytt-selskap {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text); /* nøytral, ikke oransje - skal ikke lese som en feiring */
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.kundenytt-tittel {
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* kun én sak vises av gangen nå, så den får mer plass til å leses fullt ut */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kundenytt-kilde {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ---------- Teamskanal (siste meldinger fra Teams-gruppechatten) ---------- */

.teamskanal {
  flex: 0 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.teamskanal-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 0.76rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}

.teamskanal-liste {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.teamskanal-rad { display: flex; flex-direction: column; gap: 0.1rem; }

.teamskanal-topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.teamskanal-fra {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teamskanal-tid {
  font-size: 0.66rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.teamskanal-tekst {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.3;
  white-space: pre-wrap; /* hele meldingen skal med, ikke bare de første linjene */
  overflow-wrap: break-word;
}

/* ---------- Gjestevisning (Ctrl+Shift+G) ---------- */

/* Gjestesiden er det besøkende og kunder ser (skrus på manuelt - hurtigtast, knapp,
   eller fjernstyring fra /admin, se settGjestevisning i app.js). Formspråket er hentet
   fra greatpeople.no: Poppins i vekt
   500 på store overskrifter, skarpe kanter, hvit flate med sort tekst og oransje aksent,
   og et venstrestilt hero-utsagn i stedet for en midtstilt tallvegg. Ingen kandidat-
   eller kundenavn skal forekomme her - kun aggregerte tall. */
.gjestevisning {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg-0);
  display: grid;
  /* "auto"-rader + align-content:center ble forsøkt her for å fordele overskytende
     høyde jevnt i stedet for å presse alt inn i midt-raden - reversert (03.09.2026):
     ga tekst som overlappet på ekte skjerm, siden .gjeste-tjenester sin
     justify-content:space-evenly (flex:1 1 auto uten en fast foreldre-høyde å vokse
     inn i) regnet ut en annen - for lav - høyde enn det som faktisk ble rendret.
     1fr gir midt-raden en eksplisitt høyde å style etter, som er langt mer robust. */
  grid-template-rows: auto auto auto 1fr auto;
  gap: clamp(14px, 2.4vh, 34px);
  padding: clamp(22px, 3.4vh, 52px) clamp(26px, 4vw, 76px);
  /* Reservert plass til nyhetsbanneret (44px + litt luft) nederst, slik at
     .gjeste-bunn aldri havner under det rullende banneret - se .nyheter-banner. */
  padding-bottom: calc(clamp(22px, 3.4vh, 52px) + 56px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  overflow: hidden;
}

.gjestevisning.vis {
  opacity: 1;
  pointer-events: auto;
}

.gjeste-topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.gjeste-logo {
  height: clamp(30px, 3.4vh, 46px);
}

/* Selve utsagnet - samme setning og vekt som hero-en på greatpeople.no */
.gjeste-hero h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
}

.gjeste-ingress {
  margin: clamp(0.5rem, 1.2vh, 1rem) 0 0;
  font-size: clamp(1.1rem, 1.9vw, 2rem);
  font-weight: 500;
  color: var(--aktiv);
}

.gjeste-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 34px);
}

/* Aksentstrek på toppen i stedet for en hel ramme - roligere, og de store tallene får
   stå for seg selv slik de gjør på nettsiden. */
.gjeste-stat {
  padding: clamp(12px, 1.8vh, 22px) clamp(14px, 1.4vw, 22px);
  background: var(--surface);
  border-top: 3px solid var(--aktiv);
  border-bottom: 1px solid var(--border);
}

.gjeste-stat .verdi {
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gjeste-stat .etikett {
  margin-top: 0.45rem;
  font-size: clamp(0.78rem, 1vw, 1rem);
  color: var(--text-muted);
}

.gjeste-midt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.95fr);
  gap: clamp(14px, 2vw, 34px);
  min-height: 0;
}

.gjeste-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: clamp(14px, 2vh, 26px) clamp(16px, 1.8vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border);
  /* Ytterste sikkerhetsnett - uansett hva som en dag overraskende blir for høyt inni et
     panel, skal det ALDRI kunne renne ut og overlappe raden under (se 03.09.2026-feilen
     i .gjeste-tjenester li). Klipt innhold i en boks er en langt mindre synlig feil enn
     tekst som legger seg oppå neste seksjon. */
  overflow: hidden;
}

.gjeste-panel h2 {
  margin: 0 0 clamp(0.7rem, 1.6vh, 1.3rem);
  font-size: clamp(0.95rem, 1.2vw, 1.25rem);
  font-weight: 500;
  color: var(--text);
}

.gjeste-tjenester ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(0.3rem, 0.9vh, 0.8rem);
  flex: 1 1 auto;
  min-height: 0;
}

/* justify-content:space-evenly (tidligere) fordeler bare LUFTEN mellom elementene -
   den krymper aldri selve elementene når det er for lite plass, så teksten rant rett
   forbi boksens kant og oppå "Vi er eksperter..."-raden under på en trangere skjerm
   enn det som ble testet her (03.09.2026). flex:1 1 0 + min-height:0 gjør at de tre
   punktene faktisk deler OG krymper likt innenfor boksens høyde, med overflow:hidden
   som siste sikkerhetsnett - klipping er en langt mindre synlig feil enn overlapp. */
.gjeste-tjenester li {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 0 clamp(0.7rem, 1vw, 1.1rem);
  border-left: 3px solid var(--aktiv);
  overflow: hidden;
}

.gjeste-tjeneste-navn {
  display: block;
  font-size: clamp(1rem, 1.35vw, 1.4rem);
  font-weight: 500;
  color: var(--text);
}

.gjeste-tjeneste-tekst {
  display: block;
  margin-top: 0.2rem;
  font-size: clamp(0.78rem, 0.95vw, 0.98rem);
  color: var(--text-muted);
  line-height: 1.4;
}

.gjeste-graf {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(4px, 0.6vw, 10px);
  flex: 1 1 auto;
  min-height: 0;
}

.gjeste-graf-soyle {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gjeste-graf-track {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.gjeste-graf-bar {
  width: 100%;
  max-width: 30px;
  background: var(--aktiv);
  min-height: 3px;
  transition: height 0.6s ease;
}

.gjeste-graf-tall {
  font-size: clamp(0.68rem, 0.85vw, 0.9rem);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.3rem;
  font-variant-numeric: tabular-nums;
}

.gjeste-graf-etikett {
  margin-top: 0.4rem;
  font-size: clamp(0.62rem, 0.78vw, 0.82rem);
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Praktisk info for besøkende - rutetabellen, roterer gjennom akkurat de samme
   holdeplassene/linjene som det interne panelet (se hentTransportPanelData i app.js).
   Siste nytt flyttet ut herfra til det rullende bunnbanneret (for trangt til å leses
   godt i en liste ved siden av alt annet) - se .nyheter-banner. */
.gjeste-avganger {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 1 1 auto;
  min-height: 0;
  gap: clamp(0.4rem, 1vh, 0.7rem);
}

.gjeste-avgang {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(0.78rem, 0.95vw, 0.95rem);
}

.gjeste-avgang-linje {
  flex: 0 0 auto;
  min-width: 1.9rem;
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.66rem, 0.8vw, 0.78rem);
  color: #ffffff;
  background: var(--aktiv);
  padding: 0.12rem 0.4rem;
}

.gjeste-avgang-destinasjon {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.gjeste-avgang-tid {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.gjeste-bunn {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 34px);
  padding-top: clamp(10px, 1.6vh, 20px);
  border-top: 1px solid var(--border);
}

.gjeste-trender-kort {
  flex: 1 1 auto;
  min-width: 0;
}

.gjeste-trender-kort h2 {
  margin: 0 0 clamp(0.5rem, 1.1vh, 0.9rem);
  font-size: clamp(0.95rem, 1.2vw, 1.25rem);
  font-weight: 500;
  color: var(--text);
}

.gjeste-trender-liste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 30px);
}

.gjeste-trend {
  padding-right: clamp(6px, 0.8vw, 12px);
}

/* Nøytral farge (ikke oransje) - dette er bransjefakta, ikke våre egne tall, og skal
   lese seg tydelig annerledes enn gjeste-stat sine egne prestasjonstall. */
.gjeste-trend .tall {
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gjeste-trend .tekst {
  margin-top: 0.3rem;
  font-size: clamp(0.7rem, 0.85vw, 0.88rem);
  color: var(--text-muted);
  line-height: 1.35;
}

.gjeste-nettside {
  flex: 0 0 auto;
  font-size: clamp(0.85rem, 1.1vw, 1.15rem);
  font-weight: 500;
  color: var(--aktiv);
  white-space: nowrap;
}

.gjeste-vaer-klokke {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  flex: 0 0 auto;
}

/* Klokke/vær-blokken gjenbruker samme HTML og grunnklasser (.vaer, .clock, .date, osv.)
   som den tette interne tavlen - men her ved siden av en 5rem-overskrift ser tallene
   fra den tette tavlen helt bortkomne ut. Skalerer dem opp til gjestesidens egen
   "hero"-skala i stedet for å dele skala med det trange admin-oppsettet. */
.gjeste-vaer-klokke .clock {
  font-size: clamp(1.8rem, 3.2vw, 3.4rem);
}

.gjeste-vaer-klokke .date {
  font-size: clamp(0.85rem, 1.15vw, 1.2rem);
  margin-top: 0.3rem;
}

.gjeste-vaer-klokke .vaer-ikon {
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
}

.gjeste-vaer-klokke .vaer-temp {
  font-size: clamp(1.4rem, 2vw, 2rem);
}

.gjeste-vaer-klokke .vaer-varsel {
  font-size: clamp(0.72rem, 0.95vw, 0.88rem);
}

.gjeste-vaer-rad {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.4vw, 1.4rem);
}

.gjeste-varsel-liste {
  display: flex;
  gap: clamp(0.5rem, 0.9vw, 0.9rem);
}

.gjeste-varsel-dag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: clamp(0.35rem, 0.6vh, 0.55rem) clamp(0.6rem, 0.9vw, 0.9rem);
  border: 1px solid var(--border);
}

.gjeste-varsel-dag .ukedag {
  font-size: clamp(0.72rem, 0.9vw, 0.88rem);
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
}

.gjeste-varsel-dag .ikon {
  font-size: clamp(1.3rem, 1.8vw, 1.8rem);
  line-height: 1;
}

.gjeste-varsel-dag .temp {
  font-size: clamp(0.72rem, 0.9vw, 0.88rem);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- Feiring (kandidat landet / ny kunde) - egen linje, over nyhetslinjen ---------- */

.feiring {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 44px;
  height: 44px;
  z-index: 100;
  overflow: hidden;
  background: none;
  pointer-events: none;
  display: flex;
  align-items: center;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feiring.vis {
  transform: translateY(0);
}

/* display:flex over slår ellers ut den native [hidden]-skjulingen (se .skjerm-navngi[hidden]) */
.feiring[hidden] {
  display: none;
}

.feiring-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: feiring-rull 30s linear infinite;
  will-change: transform;
}

.feiring-tekst {
  display: inline-flex;
  align-items: center;
}

.feiring-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding-right: 6vw;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--aktiv);
  letter-spacing: 0.01em;
}

@keyframes feiring-rull {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Nyheter (NRK/TV2-overskrifter) - egen linje nederst, under feiringslinjen ---------- */

.nyheter-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  /* Høyere enn .gjestevisning (z-index:1000) med vilje - nyhetsbanneret skal vises for
     besøkende også, i motsetning til feiring/bursdag-banneret som kan nevne
     kandidat-/kundenavn og derfor MÅ holde seg bak gjestesiden. */
  z-index: 1001;
  overflow: hidden;
  background: none;
  pointer-events: none;
  display: flex;
  align-items: center;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nyheter-banner.vis {
  transform: translateY(0);
}

/* display:flex over slår ellers ut den native [hidden]-skjulingen (se .skjerm-navngi[hidden]) */
.nyheter-banner[hidden] {
  display: none;
}

.nyheter-banner-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: feiring-rull 33s linear infinite;
  will-change: transform;
}

.nyheter-banner-tekst {
  display: inline-flex;
  align-items: center;
}

.nyheter-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding-right: 6vw;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  letter-spacing: 0.01em;
}

.nyheter-kilde-logo {
  height: 1.1em;
  width: 1.1em;
  object-fit: contain;
  flex: none;
}

/* ---------- Skjerm-navngivning (førstegangsoppsett per fysisk skjerm) ---------- */

.skjerm-navngi {
  position: fixed;
  inset: 0;
  z-index: 2000; /* over absolutt alt - må besvares før noe annet er relevant */
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* display:flex over slår ellers ut den native [hidden]-skjulingen */
.skjerm-navngi[hidden] {
  display: none;
}

.skjerm-navngi-boks {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2rem;
  width: min(420px, 90vw);
  text-align: center;
}

.skjerm-navngi-boks h2 {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
}

.skjerm-navngi-boks p {
  margin: 0 0 1.2rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.skjerm-navngi-boks input {
  display: block;
  width: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.9rem;
  color: var(--text);
  background: var(--bg-0);
}

.skjerm-navngi-boks button {
  background: var(--aktiv);
  color: #ffffff;
  border: none;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.4rem;
  cursor: pointer;
}

/* ---------- Bursdag (midt på skjermen, kun på selve dagen) ---------- */

.bursdag-banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 50%;
  height: 76px;
  z-index: 200; /* over alt annet, inkludert kundenytt/postit - dette er en engangsfeiring */
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #fff3d6, #ffe0a3, #fff3d6);
  border-top: 3px solid var(--aktiv);
  border-bottom: 3px solid var(--aktiv);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(-50%) scale(0.92);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bursdag-banner.vis {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.bursdag-banner-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: bursdag-rull 25s linear infinite;
  will-change: transform;
}

.bursdag-banner-tekst {
  display: inline-block;
  padding-right: 6vw;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: #4a3b00; /* fast mørk farge - banneret har egen lys bakgrunn uansett tema */
  letter-spacing: 0.01em;
}

@keyframes bursdag-rull {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 720px) {
  html, body { overflow-y: auto; }
  .board { height: auto; min-height: 100vh; }
  .lanes { grid-template-columns: 1fr; }
  .lane { max-height: 60vh; }
  .stats { display: none; }
  .postit { right: 170px; bottom: 108px; width: 160px; }
  .busstider { right: 12px; bottom: 276px; width: 150px; }
  .kundenytt { right: 12px; bottom: 144px; width: 150px; max-height: 120px; }
  .feiring-item { font-size: 0.95rem; }
  .nyheter-item { font-size: 0.95rem; }
  .gjeste-stat { flex-basis: 45%; }
  .gjeste-trender-liste { grid-template-columns: repeat(2, 1fr); }
  .gjeste-vaer-klokke { position: static; align-items: center; margin-top: 0.6rem; }
  .gjeste-knapp { left: 12px; bottom: 12px; width: 34px; height: 34px; }
  .tema-knapp { left: 54px; }
  .bursdag-banner { height: 56px; }
  .bursdag-banner-tekst { font-size: 1.1rem; }
}