/* hug kiosk · designmerker oversatt fra design/utkast-6/Kiosk*.dc.html.
   Ingen stiler skrives inline i malene; alt bor her.
   Kiosken bruker aldri gult (design/utkast-6/NOTATER.md, «prinsipper»). */

:root {
  /* flate og tekst */
  --flate: #F7F5F2;
  --flate-kort: #FFFFFF;
  --tekst: #1A1D21;
  --tekst-dempet: #6B7280;
  --tekst-svak: #9CA3AF;
  --kant: #E5E7EB;
  --kant-sterk: #D1D5DB;
  --merke: #E4002B;
  --logo: #E82737; /* logoen i deploy/zitadel (H69) */

  /* tilstandsfarger · rekkefolge som i tegnforklaringen */
  --sover: #1F3B8A;
  --sover-flate: #E3E9F7;
  --sover-markor: #1F3B8A;
  --sover-ikon: #FFFFFF;

  --vaken: #4F7FE0;
  --vaken-flate: #EAF1FF;
  --vaken-markor: #CFE0FF;
  --vaken-ikon: #1F3B8A;

  /* Blaagronn, ikke gressgronn: skilles fra alarmrodt ogsaa ved rod-gronn
     fargeblindhet (deutan ΔE 9,3, kontrast mot flaten over 3:1). */
  --bevegelse: #16936B;
  --bevegelse-flate: #DDF3EC;
  --bevegelse-markor: #16936B;
  --bevegelse-ikon: #FFFFFF;
  --bevegelse-dempet: #0E6B4E;
  --bevegelse-tone: rgba(22, 147, 107, 0.14);

  --stille: #1A1D21;
  --stille-flate: #FFFFFF;
  --stille-markor: #FFFFFE;
  --stille-ikon: #6B7280;

  --alarm: #D4291F;
  --alarm-flate: #FBE3E1;
  --alarm-tone: rgba(212, 41, 31, 0.10);
  --alarm-kant: rgba(212, 41, 31, 0.45);

  --ingen-data: #E5E7EB;
  --ingen-data-flate: #F7F7F8;
  --ingen-data-markor: rgba(107, 114, 128, 0.14);
  --ingen-data-ikon: #6B7280;

  --ubrukt-markor: #F3F4F6;
  --ubrukt-ikon: #9CA3AF;

  --avatar: #5B8DEF;
  --stripe-av: rgba(0, 0, 0, 0.08);
  --spor: #BFD3FA;
  --ytterdor: #8B1A1A;

  /* mal og form
     Kiosken tegnes for 1920 × 1080 og skaleres med skjermen: --u er én
     designpiksel. Paa 1440 × 900 er --u 0,75px, paa 3840 × 2160 er den 2px. */
  --u: max(0.5px, min(calc(100vw / 1920), calc(100vh / 1080)));
  --topp-hoyde: 84px;
  --kant-venstre: 12px;
  --runding: 14px;
  --runding-stor: 20px;
  --skygge: 0 1px 2px rgba(0, 0, 0, 0.04);

  /* mellomrom */
  --rom-1: 4px;
  --rom-2: 8px;
  --rom-3: 12px;
  --rom-4: 16px;
  --rom-5: 20px;
  --rom-6: 24px;
  --rom-7: 28px;
  --rom-8: 40px;

  /* skriftstorrelser · lest paa to til tre meter */
  --sz-legende: 12px;
  --sz-tegn-detalj: 14px;
  --sz-stripe: 15px;
  --sz-liten: 17px;
  --sz-detalj: 18px;
  --sz-mellom: 20px;
  --sz-brodtekst: 22px;
  --sz-tilstand: 24px;
  --sz-navn: 26px;
  --sz-alarm: 30px;
  --sz-stor: 34px;
  --sz-svaer: 40px;
  --sz-kode: 132px;

  --skrift: -apple-system, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--flate);
  color: var(--tekst);
  font-family: var(--skrift);
  -webkit-font-smoothing: antialiased;
}

/* Alle maal under er i designpiksler (--u) for 1920 × 1080, lest paa to til
   tre meter. Minste tekst er 20 designpiksler; tilstandsordet er 44. */
.skjerm {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--flate);
  color: var(--tekst);
  display: flex;
  flex-direction: column;
}

/* ---------- topplinje ---------- */

.topp {
  height: calc(104 * var(--u));
  background: var(--flate-kort);
  border-bottom: calc(2 * var(--u)) solid var(--kant);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(48 * var(--u));
  flex-shrink: 0;
}

.topp-venstre { display: flex; align-items: center; gap: calc(28 * var(--u)); min-width: 0; }
.topp-hoyre { display: flex; align-items: center; gap: calc(16 * var(--u)); flex-shrink: 0; }

.merke {
  font-size: var(--sz-stor);
  font-weight: 800;
  color: var(--merke);
  letter-spacing: -1px;
  line-height: 1;
}
.merke-prikk { font-size: 13px; vertical-align: top; }
.skjerm .merke { font-size: calc(52 * var(--u)); }
.skjerm .merke-prikk { font-size: calc(20 * var(--u)); }

.sone-navn { font-size: calc(40 * var(--u)); font-weight: 800; color: var(--tekst); line-height: 1.1; white-space: nowrap; }
.sone-under { font-size: calc(26 * var(--u)); font-weight: 500; color: var(--tekst-dempet); line-height: 1.3; white-space: nowrap; }
.klokke { font-size: calc(44 * var(--u)); font-weight: 800; color: var(--tekst); white-space: nowrap; font-variant-numeric: tabular-nums; }
.topp-ikon svg { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }

/* ---------- innhold ---------- */

.innhold {
  padding: calc(24 * var(--u)) calc(48 * var(--u)) calc(24 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
}
.innhold--tett { gap: calc(16 * var(--u)); }
.innhold--midt { align-items: center; justify-content: center; }

/* ---------- banner over rutenettet ---------- */

.banner {
  border-radius: calc(18 * var(--u));
  padding: calc(20 * var(--u)) calc(32 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(28 * var(--u));
  flex-shrink: 0;
  overflow: hidden;
}
.banner--tett { padding: calc(14 * var(--u)) calc(32 * var(--u)); }

/* Alarm er hele feltet i rodt med hvit tekst: kjennes igjen paa lyshet og
   trekant, ikke bare paa fargetone. */
.banner--alarm {
  background: var(--alarm);
  color: var(--flate-kort);
}
.banner--oppfolging {
  background: var(--alarm-tone);
  border: calc(3 * var(--u)) solid var(--alarm-kant);
  border-left: calc(16 * var(--u)) solid var(--alarm);
}
.banner--flere {
  background: var(--alarm-tone);
  border: calc(3 * var(--u)) solid var(--alarm-kant);
  border-left: calc(16 * var(--u)) solid var(--alarm);
}
.banner--forvarsel {
  background: var(--flate-kort);
  border: calc(3 * var(--u)) solid var(--kant-sterk);
  border-left: calc(16 * var(--u)) solid var(--tekst-dempet);
}
.banner--frakoblet {
  background: var(--ingen-data-markor);
  border: calc(3 * var(--u)) solid var(--kant-sterk);
  border-left: calc(16 * var(--u)) solid var(--tekst-dempet);
}
.banner--rolig {
  background: var(--flate-kort);
  box-shadow: var(--skygge);
  gap: calc(24 * var(--u));
}
.banner--base {
  background: var(--flate-kort);
  border: calc(2 * var(--u)) solid var(--kant);
  justify-content: space-between;
}

.banner-ikon {
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.banner-ikon svg { width: 58%; height: 58%; }
.banner-ikon--liten { width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
.banner-ikon--alarm { background: var(--alarm); }
.banner--alarm .banner-ikon--alarm { background: var(--flate-kort); }
.banner-ikon--gra { background: var(--tekst-dempet); }
.banner-ikon--rolig { background: var(--bevegelse-tone); }

.banner-midt { display: flex; flex-direction: column; gap: calc(4 * var(--u)); flex-grow: 1; min-width: 0; }
.banner-rad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(24 * var(--u)); flex-grow: 1; min-width: 0; }
.banner-hvem { font-size: calc(48 * var(--u)); font-weight: 800; color: var(--tekst); white-space: nowrap; }
.banner-hva {
  font-size: calc(48 * var(--u));
  font-weight: 800;
  color: var(--alarm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banner--alarm .banner-hvem,
.banner--alarm .banner-hva,
.banner--alarm .banner-eier,
.banner--alarm .banner-rad-tekst { color: var(--flate-kort); }
.banner-hva--gra { color: var(--tekst-dempet); }
.banner-notis { font-size: calc(26 * var(--u)); font-weight: 500; color: var(--tekst-dempet); }
.banner-hoyre {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  align-items: flex-end;
  flex: 0 1 auto;
  max-width: 42%;
  min-width: 0;
  text-align: right;
}
.banner-eier { font-size: calc(30 * var(--u)); font-weight: 800; color: var(--tekst); }
.banner-rad-tekst { font-size: calc(24 * var(--u)); font-weight: 500; color: var(--tekst-dempet); }
.banner-tittel { font-size: calc(38 * var(--u)); font-weight: 800; color: var(--tekst); }
.banner-under { font-size: calc(26 * var(--u)); font-weight: 400; color: var(--tekst-dempet); }
.banner-stor { font-size: calc(40 * var(--u)); font-weight: 800; color: var(--tekst); }
.banner-advarsel { font-size: calc(28 * var(--u)); font-weight: 700; color: var(--tekst-dempet); }
.banner-hoyre-tekst {
  font-size: calc(28 * var(--u));
  font-weight: 700;
  color: var(--tekst);
  line-height: 1.3;
  max-width: calc(620 * var(--u));
  text-align: right;
  flex-shrink: 0;
}

/* flere alarmer: stablet liste i ett felt */
.alarmliste { display: flex; flex-direction: column; gap: calc(12 * var(--u)); flex-grow: 1; min-width: 0; }
.alarmliste-tittel {
  font-size: calc(24 * var(--u));
  font-weight: 800;
  color: var(--alarm);
  letter-spacing: 1px;
}
.alarmliste-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 0 calc(20 * var(--u)); min-width: 0; }
.alarmliste-ikon {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  border-radius: 999px;
  background: var(--alarm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.alarmliste-ikon svg { width: 60%; height: 60%; }
.alarmliste-flere { font-size: calc(30 * var(--u)); font-weight: 800; color: var(--alarm); }
.alarmliste-hvem { font-size: calc(40 * var(--u)); font-weight: 800; color: var(--tekst); white-space: nowrap; }
.alarmliste-hva { font-size: calc(40 * var(--u)); font-weight: 800; color: var(--alarm); flex: 1 1 0; min-width: calc(300 * var(--u)); }
.alarmliste-eier { font-size: calc(28 * var(--u)); font-weight: 700; color: var(--tekst); max-width: 46%; margin-left: auto; text-align: right; }

/* ---------- rutenett av beboerkort ---------- */

.rutenett {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: calc(20 * var(--u));
  flex-grow: 1;
  min-height: 0;
}
.rutenett--base { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24 * var(--u)); }

.kort {
  min-width: 0;
  min-height: 0;
  border: calc(3 * var(--u)) solid transparent;
  border-left: calc(16 * var(--u)) solid var(--ingen-data);
  border-radius: calc(18 * var(--u));
  padding: calc(18 * var(--u)) calc(24 * var(--u));
  box-shadow: var(--skygge);
  overflow: hidden;
  background: var(--ingen-data-flate);
}
.kort-indre {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: calc(10 * var(--u));
  min-width: 0;
}
.rutenett--base .kort { padding: calc(28 * var(--u)) calc(32 * var(--u)); }


.kort--sover { background: var(--sover-flate); border-left-color: var(--sover); }
.kort--vaken_i_sengen { background: var(--vaken-flate); border-left-color: var(--vaken); }
.kort--bevegelse { background: var(--bevegelse-flate); border-left-color: var(--bevegelse); }
/* Ingen bevegelse og ute: hvitt kort med mork ramme rundt, slik at det skiller
   seg fra graatt «ingen data» paa lyshet og form, ikke paa fargetone. */
.kort--ingen_bevegelse,
.kort--ute { background: var(--stille-flate); border-color: var(--kant-sterk); border-left-color: var(--stille); }
.kort--ukjent,
.kort--uten_kontakt,
.kort--delvis_data { background: var(--ingen-data-flate); border-left-color: var(--ingen-data); }
.kort--rom_ikke_i_bruk,
.kort--fravaerende { background: var(--ingen-data-flate); border-left-color: var(--ingen-data); }
.kort--rom_ikke_i_bruk { box-shadow: none; border-style: dashed; border-left-style: solid; border-color: var(--kant-sterk); border-left-color: var(--ingen-data); }
/* Alarm: hele kortet rodt, hvit tekst. Synlig paa avstand og for fargeblinde. */
.kort--alarm {
  background: var(--alarm);
  border-color: var(--alarm);
  color: var(--flate-kort);
}

.kort-topp { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 calc(12 * var(--u)); min-width: 0; }
.kort-navn {
  font-size: calc(46 * var(--u));
  font-weight: 800;
  color: var(--tekst);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.kort-navn--tom { color: var(--tekst-dempet); font-weight: 700; font-size: calc(30 * var(--u)); }
.kort-rom {
  font-size: calc(28 * var(--u));
  font-weight: 700;
  color: var(--tekst-dempet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.kort-status { display: flex; align-items: center; gap: calc(16 * var(--u)); min-width: 0; }
.markor {
  width: calc(68 * var(--u));
  height: calc(68 * var(--u));
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ingen-data-markor);
}
.markor svg { width: 62%; height: 62%; }
.markor--sover { background: var(--sover-markor); }
.markor--vaken_i_sengen { background: var(--vaken-markor); }
.markor--bevegelse { background: var(--bevegelse-markor); }
.markor--ingen_bevegelse,
.markor--ute { background: var(--stille-markor); border: calc(3 * var(--u)) solid var(--stille); }
.markor--alarm { background: var(--flate-kort); }
.markor--rom_ikke_i_bruk { background: var(--ubrukt-markor); }

.kort-tilstand {
  font-size: calc(44 * var(--u));
  font-weight: 800;
  color: var(--tekst);
  line-height: 1.08;
  overflow-wrap: normal; /* aldri «Bevege lse»: hele ord, ellers maa kortet vike */
}
.kort-tilstand--alarm { color: var(--flate-kort); }
.kort-detalj {
  font-size: calc(26 * var(--u));
  font-weight: 500;
  color: var(--tekst-dempet);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  flex-shrink: 0;
}
.kort-gammel-kort,
.kort-kortord,
.kort-romkort { display: none; }
.ledd { white-space: nowrap; }
.kort--alarm .kort-navn,
.kort--alarm .kort-rom,
.kort--alarm .kort-detalj { color: var(--flate-kort); }

/* romstripe nederst */
.stripe { display: flex; align-items: center; gap: calc(6 * var(--u)); flex-shrink: 0; margin-top: auto; }
.stripe-rom { display: flex; flex-direction: column; gap: calc(4 * var(--u)); flex: 1 1 auto; min-width: 0; }
.stripe-felt { height: calc(16 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--stripe-av); }
.stripe-navn {
  font-size: calc(20 * var(--u));
  font-weight: 500;
  color: var(--tekst-dempet);
  letter-spacing: -0.2px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stripe-rom--tent .stripe-navn { font-weight: 800; color: var(--tekst); }
.stripe-rom--tent .stripe-felt { background: var(--ingen-data); }
.stripe-rom--tent.stripe-rom--sover .stripe-felt { background: var(--sover); }
.stripe-rom--tent.stripe-rom--vaken_i_sengen .stripe-felt { background: var(--vaken); }
.stripe-rom--tent.stripe-rom--bevegelse .stripe-felt { background: var(--bevegelse); }
.stripe-rom--tent.stripe-rom--alarm .stripe-felt { background: var(--flate-kort); }
.stripe-rom--tent.stripe-rom--ingen_bevegelse .stripe-felt,
.stripe-rom--tent.stripe-rom--ute .stripe-felt {
  background: var(--flate-kort);
  border: calc(3 * var(--u)) solid var(--stille);
}
.kort--alarm .stripe-felt { background: rgba(255, 255, 255, 0.28); }
.kort--alarm .stripe-navn,
.kort--alarm .stripe-rom--tent .stripe-navn { color: var(--flate-kort); }

/* Kortet vet sin egen hoyde. Med flere alarmer i feltet over, eller mange
   beboere, blir kortene lavere. Da gir de fra seg innhold i fast rekkefolge,
   alltid hele linjer: romnavnene i stripen, stripen, den andre
   detaljlinjen, detaljen, og til slutt legger kortet seg paa én linje.
   Tilstandsordet og navnet klippes aldri; ordet brytes heller over to
   linjer med mindre skrift. Et gammelt kort beholder alltid «Ingen nye data
   siden …».

   Sporringene maaler innholdsboksen (uten ramme og polstring). 1em er 10
   designpiksler (font-size her). Hoydene er summen av linjene: navn 51,
   tilstand 95 (to linjer) eller 68, detalj 34 per linje, stripe 44 eller 16
   uten navn, mellomrom 10. Reglene staar etter kortreglene slik at de
   vinner. */
.kort { container: kort / size; font-size: calc(10 * var(--u)); }
@container kort (max-height: 28.8em) {
  .stripe-navn { display: none; }
}
@container kort (max-height: 26em) {
  .stripe { display: none; }
}
@container kort (max-height: 23.4em) {
  .kort-detalj { -webkit-line-clamp: 1; }
}
/* Mindre ikon og ord; detaljen bare paa gamle kort. */
@container kort (max-height: 20em) {
  .kort-detalj { display: none; }
  .kort--gammel .kort-detalj { display: -webkit-box; }
  .markor { width: 4.4em; height: 4.4em; }
  .kort-status { gap: 1em; }
  .kort-tilstand { font-size: 3.2em; }
}
/* Smale kort (mange kolonner, eller 16:10-skjerm der kortene er hoye men
   smale): tilstandsordet og ikonet krymper etter bredden, saa ord aldri
   deles. Hoydereglene under kan gjoere dem enda mindre. */
@container kort (max-width: 34em) {
  .kort-tilstand { font-size: 2.8em; }
  .markor { width: 4.4em; height: 4.4em; }
  .kort-status { gap: 1em; }
  .kort-navn { font-size: 3.6em; }
}
@container kort (max-height: 15em) {
  .kort-navn { font-size: 3.2em; }
  .kort-rom { font-size: 2em; }
  .markor { width: 3.6em; height: 3.6em; }
  .kort-tilstand { font-size: 2.6em; line-height: 1.05; }
  .kort--gammel .kort-detalj { font-size: 2.2em; }
}
/* Lave alarmkort: tittelen staar helt i alarmfeltet over. Faar den ikke
   plass her, viser kortet ordet fra tegnforklaringen («Alarm») i stedet for
   en tittel som klippes. Gjelder bare kort med alarmen i feltet. */
@container kort (max-height: 15em) {
  .kort--i-feltet .kort-tilstand { display: none; }
  .kort--i-feltet .kort-kortord { display: block; font-size: 2.8em; font-weight: 800; color: var(--flate-kort); white-space: nowrap; }
}
/* Gammelt kort med plass til to linjer: «Ingen nye data siden …» erstatter
   den gamle tilstanden, aldri omvendt. */
@container kort (max-height: 12.5em) {
  .kort--gammel .kort-status { display: none; }
}
/* Én linje: navnet til venstre, ikon og tilstand (inntil to linjer) til
   hoyre. Ord deles aldri midt i. Et alarmkort viser bare trekanten her
   naar alarmen staar i alarmfeltet over med tittel, rom og navn
   (kort--i-feltet); ellers beholder kortet tittelen. «Rom ikke i bruk»
   viser bare streken; navnet «Ingen beboer» sier det samme. Et gammelt
   kort viser «Ingen nye data siden …» i stedet for tilstanden. Bare navn
   som er lengre enn drøyt halve kortet, avkortes. */
@container kort (max-height: 8.6em) {
  .kort-indre { flex-direction: row; align-items: center; gap: 1.2em; }
  /* Plassen fordeles slik: tilstanden (eller «Ingen data · HH:MM») og
     romnummeret krymper aldri; bare navnet faar «…» naar det er trangt. */
  .kort-topp { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 0 0.6em; align-items: baseline; justify-content: flex-start; }
  .kort-navn { font-size: 3em; flex: 0 1 auto; min-width: 0; }
  .kort-rom { display: none; }
  .kort-navn { flex-shrink: 0; }
  .kort-romkort { display: block; flex: 0 0 auto; font-size: 2em; font-weight: 700; color: var(--tekst-dempet); white-space: nowrap; }
  .kort--alarm .kort-romkort { color: var(--flate-kort); }
  .kort-status { flex: 0 0 auto; gap: 0.8em; }
  .markor { width: 3.2em; height: 3.2em; }
  .kort-tilstand { font-size: 2.2em; line-height: 1.05; overflow-wrap: normal; white-space: nowrap; }
  .kort--i-feltet .kort-tilstand,
  .kort--rom_ikke_i_bruk .kort-tilstand { display: none; }
  /* En alarm som ikke staar i feltet (feltet er fullt, eller sakslisten
     henger etter), faar ordet fra tegnforklaringen; hele tittelen faar
     ikke plass paa én linje, og den skal aldri klippes. */
  .kort--alarm:not(.kort--i-feltet) .kort-tilstand { display: none; }
  .kort--alarm:not(.kort--i-feltet) .kort-kortord { display: block; font-size: 2.4em; font-weight: 800; color: var(--flate-kort); white-space: nowrap; }
  .kort--gammel .kort-detalj { display: none; }
  .kort--gammel .kort-gammel-kort { display: block; flex: 0 0 auto; font-size: 2.2em; font-weight: 600; color: var(--tekst-dempet); white-space: nowrap; }
}
/* Kort paa én linje under 48em (fire soner, fire kolonner): romnummeret og
   initialene staar alltid; med bare initialer er romnummeret det som
   skiller to «M», ogsaa i Helvikskogs format «H0301». Ikonet viker foerst,
   og ordet blir litt mindre; kortfargen og ordet viser tilstanden. */
@container kort (max-height: 8.6em) and (max-width: 48em) {
  .markor { display: none; }
  .kort-tilstand,
  .kort-kortord,
  .kort--gammel .kort-gammel-kort { font-size: 2em; }
}

/* Kolonnene velges av serveren (velgKolonner) etter antall kort og soner. */
.rutenett--k1 { grid-template-columns: minmax(0, 1fr); }
.rutenett--k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rutenett--k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rutenett--k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rutenett--k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rutenett--k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---------- flere soner paa én skjerm ---------- */

.soner {
  display: grid;
  gap: calc(24 * var(--u));
  flex-grow: 1;
  min-height: 0;
}
.soner--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.soner--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.soner--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }

.sonepanel {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.sonepanel-topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  border-bottom: calc(4 * var(--u)) solid var(--tekst);
  padding-bottom: calc(4 * var(--u));
  flex-shrink: 0;
}
.sonepanel-navn {
  font-size: calc(36 * var(--u));
  font-weight: 800;
  color: var(--tekst);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sonepanel-status {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(26 * var(--u));
  font-weight: 800;
  color: var(--tekst-dempet);
  white-space: nowrap;
}
.sonepanel-status svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.sonepanel--frakoblet .sonepanel-topp { border-bottom-color: var(--tekst-dempet); }

/* Alarmfeltet i et panel: hoyresiden legger seg under, saa hvem og hva
   faar hele bredden. */
.sonepanel .banner { flex-wrap: wrap; gap: calc(8 * var(--u)) calc(20 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)); }
.sonepanel .banner-ikon { width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
.sonepanel .banner-hvem,
.sonepanel .banner-hva { font-size: calc(40 * var(--u)); }
.sonepanel .banner-hoyre { flex-basis: 100%; max-width: 100%; align-items: flex-start; text-align: left; }
.sonepanel .banner-tittel { font-size: calc(30 * var(--u)); }
.sonepanel .banner-under { font-size: calc(22 * var(--u)); }
.sonepanel .banner-stor { font-size: calc(32 * var(--u)); }
.sonepanel .banner-advarsel { font-size: calc(24 * var(--u)); }
.sonepanel .banner-hoyre-tekst { flex-basis: 100%; max-width: 100%; text-align: left; font-size: calc(22 * var(--u)); }
.sonepanel .alarmliste-hvem,
.sonepanel .alarmliste-hva { font-size: calc(32 * var(--u)); }
.sonepanel .alarmliste-eier { font-size: calc(22 * var(--u)); flex-basis: 100%; max-width: none; margin-left: calc(76 * var(--u)); text-align: left; }
.sonepanel .alarmliste-rad { flex-wrap: wrap; row-gap: 0; }
.sonepanel .rutenett { gap: calc(10 * var(--u)); grid-auto-rows: minmax(0, 1fr); }
/* Mindre polstring i panelene: containerreglene maaler innholdsboksen, saa
   kortene faar mer plass til innhold, ikke mindre skrift. */
.sonepanel .kort { padding: calc(10 * var(--u)) calc(20 * var(--u)); }
.sonepanel .banner--rolig,
.sonepanel .banner--base { flex-wrap: nowrap; padding: calc(8 * var(--u)) calc(16 * var(--u)); }
.sonepanel .banner--rolig .banner-ikon { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.sonepanel .banner--rolig .banner-tittel,
.sonepanel .banner--base .banner-tittel { font-size: calc(24 * var(--u)); }
.sonepanel .banner--rolig .banner-under,
.sonepanel .banner--base .banner-rad-tekst { display: none; }
.skjerm--soner .tegn-detalj { display: none; }
.skjerm--soner .tegnforklaring { flex-wrap: wrap; }

/* Kortene faar ikke plass: antall per tilstand, med samme ikon som kortene. */
.telling { display: flex; flex-direction: column; gap: calc(10 * var(--u)); flex-shrink: 0; }
.telling-tittel { font-size: calc(24 * var(--u)); font-weight: 700; color: var(--tekst-dempet); }
.telling-rader { display: flex; flex-wrap: nowrap; gap: calc(10 * var(--u)) calc(28 * var(--u)); }
.telling .tegn-ord { font-size: calc(30 * var(--u)); font-variant-numeric: tabular-nums; }
.sonepanel .alarmliste-flere { font-size: calc(24 * var(--u)); }
.sonepanel .alarmliste .banner-rad-tekst { display: none; }
.sonepanel .telling .tegn-ord { font-size: calc(26 * var(--u)); }
.sonepanel .telling-rader { gap: calc(6 * var(--u)) calc(20 * var(--u)); }

/* Plankartet i et panel: bare kartet, uten hoyrespalten. */
.sonepanel .plan-flate { flex-direction: column; gap: calc(8 * var(--u)); }
.sonepanel .plan-hoyre { display: none; }
.sonepanel .plan-ramme { zoom: 0.5; padding: 0; }
@media (min-width: 1800px) and (min-height: 1000px) { .sonepanel .plan-ramme { zoom: 0.68; } }
@media (min-width: 2500px) and (min-height: 1400px) { .sonepanel .plan-ramme { zoom: 0.9; } }
@media (min-width: 3600px) and (min-height: 2000px) { .sonepanel .plan-ramme { zoom: 1.36; } }
.soner--3 .sonepanel .plan-ramme,
.soner--4 .sonepanel .plan-ramme { zoom: 0.45; }
.sonepanel .banner--forvarsel .banner-rad-tekst { display: none; }

/* ---------- bevegelse siste 24 timer (H44 del 3) ----------
   Én celle per time, eldst til venstre, «nå» til hoyre. Fargene er de
   samme som tilstandene: i sengen som «Sover», i rommene som «Bevegelse»,
   ute som «Ute». Ukjent er skravert graatt, aldri tolket som fravaer. */

/* Stripen vokser med ledig plass i kortet (opptil 4em), og krymper til en
   tynn linje naar kortet er lavt. */
.dogn { flex: 1 1 auto; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: calc(4 * var(--u)); min-height: min-content; }
.dogn-felt { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: calc(2 * var(--u)); flex: 1 1 auto; min-height: 1.2em; max-height: 4em; }
.dogn-merker { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); }
.dogn-merke { font-size: calc(20 * var(--u)); font-weight: 600; color: var(--tekst-dempet); white-space: nowrap; overflow: visible; }
.dogn-merke:last-child { text-align: right; direction: rtl; }
.dogn-time { border-radius: calc(3 * var(--u)); background: var(--stripe-av); }
.dogn-time--seng { background: var(--sover); }
.dogn-time--inne { background: var(--bevegelse); }
.dogn-time--ute { background: var(--flate-kort); box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--stille); }
/* Ukjent: tydelige skraastreker (over 3:1 mot kortflatene), ikke en tom flate. */
.dogn-time--ukjent {
  background: repeating-linear-gradient(135deg, var(--tekst-dempet) 0 calc(3 * var(--u)), var(--flate-kort) calc(3 * var(--u)) calc(7 * var(--u)));
}
.kort--alarm .dogn-merke { color: var(--flate-kort); }
/* Paa rodt kort ligger stripen paa en hvit plate, saa cellene skilles paa
   lyshet ogsaa ved rod-gronn fargeblindhet. */
.kort--alarm .dogn-felt { background: var(--flate-kort); padding: calc(3 * var(--u)); border-radius: calc(4 * var(--u)); }
.kort--gammel .dogn-time { background: var(--stripe-av); box-shadow: none; }
/* Stripen er viktigere enn detaljlinjen: med stripe gaar detaljen ned til
   én linje foer klokkeslettene forsvinner. Paa lave kort (20 beboere) blir
   stripen tynn og uten klokkeslett, men den staar til kortet legger seg
   paa én linje. Tegnforklaringen sier hva den viser. */
@container kort (max-height: 30em) {
  .kort-indre:has(.dogn) .kort-detalj { -webkit-line-clamp: 1; }
}
@container kort (max-height: 26em) {
  .stripe.dogn { display: flex; }
}
@container kort (max-height: 24em) {
  .dogn-merker { display: none; }
}
/* Alarmkortet har lang tittel (ofte to linjer) og alt staar i feltet over:
   der viker stripen tidligere enn paa andre kort. */
.kort--alarm .dogn-merker { display: none; }
@container kort (max-height: 26em) {
  .kort--alarm .stripe.dogn { display: none; }
}
@container kort (max-height: 12em) {
  .kort-indre:has(.dogn) { gap: 0.6em; }
  .kort:not(.kort--alarm) .kort-indre:has(.dogn) .kort-tilstand { font-size: 2.4em; white-space: nowrap; }
  /* Alarmtittelen klippes aldri for stripens skyld: paa lave alarmkort
     viker stripen, og tittelen faar brytes. */
  .kort--alarm .stripe.dogn { display: none; }
}
@container kort (max-height: 8.6em) {
  .stripe.dogn { display: none; }
}
.dogn-forklaring { display: flex; align-items: center; gap: calc(10 * var(--u)) calc(24 * var(--u)); flex-wrap: wrap; padding: 0 calc(8 * var(--u)); flex-shrink: 0; }
.dogn-forklaring-tittel { font-size: calc(24 * var(--u)); font-weight: 800; color: var(--tekst); }
.dogn-forklaring-del { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 600; color: var(--tekst-dempet); }
.dogn-forklaring-del .dogn-time { display: inline-block; width: calc(22 * var(--u)); height: calc(22 * var(--u)); }

/* ---------- tegnforklaring ---------- */
/* Bare tilstandene som staar paa skjermen akkurat naa, i fast rekkefolge. */

.tegnforklaring {
  display: flex;
  gap: calc(6 * var(--u)) calc(32 * var(--u));
  align-items: center;
  padding: 0 calc(8 * var(--u));
  flex-wrap: wrap;
  flex-shrink: 0;
  overflow: hidden;
}
.tegn { display: flex; align-items: center; gap: calc(10 * var(--u)); min-width: 0; }
.tegn-markor {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ingen-data-markor);
}
.tegn-markor svg { width: 62%; height: 62%; }
.tegn-markor--sover { background: var(--sover-markor); }
.tegn-markor--vaken_i_sengen { background: var(--vaken-markor); }
.tegn-markor--bevegelse { background: var(--bevegelse-markor); }
.tegn-markor--ingen_bevegelse,
.tegn-markor--ute { background: var(--stille-markor); border: calc(3 * var(--u)) solid var(--stille); }
.tegn-markor--alarm { background: var(--alarm); }
.tegn-markor--rom_ikke_i_bruk { background: var(--ubrukt-markor); }
.tegn-markor--gammel { background: var(--ingen-data-markor); }
.tegn-ord { font-size: calc(26 * var(--u)); font-weight: 800; color: var(--tekst); white-space: nowrap; }
.tegn-detalj {
  font-size: calc(22 * var(--u));
  font-weight: 500;
  color: var(--tekst-dempet);
  white-space: nowrap;
}

/* ---------- plankart ---------- */
/* Selve kartet er tegnet i faste piksler (lerret 759 × 534) og forstorres
   trinnvis med zoom; resten av siden folger --u. */

.plan-flate { display: flex; gap: calc(40 * var(--u)); flex-grow: 1; min-height: 0; }
.plan-venstre { display: flex; flex-direction: column; gap: calc(12 * var(--u)); flex-grow: 1; min-width: 0; }
.plan-tittel { font-size: calc(40 * var(--u)); font-weight: 800; color: var(--tekst); white-space: nowrap; }
/* design/utkast-6 hadde denne linjen i oker (#8A5A00). Rettet: kiosken har aldri gult. */
.plan-undertittel { font-size: calc(28 * var(--u)); font-weight: 700; color: var(--tekst); }
.plan-ramme {
  background: var(--flate);
  border-radius: var(--runding);
  padding: 0 var(--rom-5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
}
@media (min-width: 1800px) and (min-height: 1000px) { .plan-ramme { zoom: 1.3; } }
@media (min-width: 2500px) and (min-height: 1400px) { .plan-ramme { zoom: 1.75; } }
@media (min-width: 3600px) and (min-height: 2000px) { .plan-ramme { zoom: 2.6; } }
@media (max-width: 1400px), (max-height: 860px) { .plan-ramme { zoom: 0.9; } }
.plan { position: relative; width: 759px; height: 534px; flex-shrink: 0; }

.plan-rom {
  position: absolute;
  background: var(--flate-kort);
  border: 3px solid var(--kant-sterk);
  border-radius: 18px;
}
.plan-rom--aktiv {
  background: var(--bevegelse-tone);
  border-color: var(--bevegelse);
}
.plan-rom-navn {
  position: absolute;
  left: 18px;
  top: 14px;
  font-size: var(--sz-brodtekst);
  font-weight: 700;
  color: var(--tekst-dempet);
}
.plan-rom--aktiv .plan-rom-navn { color: var(--tekst); }
.plan-sensor {
  position: absolute;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  border: 5px solid var(--avatar);
  background: var(--flate-kort);
}
.plan-ytterdor { position: absolute; width: 69px; height: 12px; background: var(--ytterdor); border-radius: 3px; }
.plan-ytterdor-navn { position: absolute; font-size: 19px; color: var(--tekst-dempet); }
.plan-spor { position: absolute; left: 0; top: 0; pointer-events: none; }
.plan-naa {
  position: absolute;
  width: 189px;
  text-align: center;
  font-size: var(--sz-mellom);
  font-weight: 700;
  color: var(--tekst);
  white-space: nowrap;
}
.plan-naa-detalj { font-size: var(--sz-detalj); font-weight: 500; color: var(--tekst-dempet); white-space: nowrap; }

.plan-hoyre { width: calc(520 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); flex-shrink: 0; }
.plan-bolk { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.plan-bolk-tittel {
  font-size: calc(22 * var(--u));
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--tekst-dempet);
}
.plan-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) 0;
  border-bottom: calc(2 * var(--u)) solid var(--kant);
}
.plan-rad-rom { font-size: calc(32 * var(--u)); font-weight: 800; color: var(--tekst); }
.plan-rad-tid { font-size: calc(32 * var(--u)); font-weight: 500; color: var(--tekst-dempet); font-variant-numeric: tabular-nums; }
.plan-forbehold { font-size: calc(24 * var(--u)); font-weight: 500; color: var(--tekst-dempet); line-height: 1.35; }
.plan-tegn { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.plan-tegn-rad { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.plan-tegn-prikk { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 999px; flex-shrink: 0; }
.plan-tegn-prikk--naa { background: var(--bevegelse); }
.plan-tegn-prikk--spor { background: var(--spor); }
.plan-tegn-prikk--sensor { border: calc(4 * var(--u)) solid var(--avatar); }
.plan-tegn-strek { width: calc(28 * var(--u)); height: calc(9 * var(--u)); border-radius: 3px; background: var(--ytterdor); }
.plan-tegn-tekst { font-size: calc(24 * var(--u)); font-weight: 500; color: var(--tekst); }
.plan-fyll { flex-grow: 1; }
.plan-retur {
  background: var(--flate-kort);
  color: var(--tekst);
  border: calc(2 * var(--u)) solid var(--kant-sterk);
  height: calc(72 * var(--u));
  padding: 0 calc(16 * var(--u));
  border-radius: calc(8 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  font-size: calc(26 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}
.plan-retur svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }

/* ---------- parringskode ---------- */

.paring { display: flex; flex-direction: column; align-items: center; gap: calc(28 * var(--u)); width: calc(1000 * var(--u)); max-width: 100%; }
.paring-ikon {
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  border-radius: 999px;
  background: var(--sover-flate);
  display: flex;
  align-items: center;
  justify-content: center;
}
.paring-ikon svg { width: 50%; height: 50%; }
.paring-tittel { font-size: calc(52 * var(--u)); font-weight: 800; color: var(--tekst); text-align: center; }
.paring-tekst {
  font-size: calc(28 * var(--u));
  font-weight: 400;
  color: var(--tekst-dempet);
  line-height: 1.4;
  text-align: center;
}
.paring-boks {
  background: var(--flate-kort);
  border: calc(2 * var(--u)) solid var(--kant);
  border-radius: var(--runding-stor);
  padding: calc(40 * var(--u)) calc(72 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
  max-width: 100%;
}
.paring-felt {
  font-size: calc(150 * var(--u));
  font-weight: 800;
  color: var(--tekst);
  letter-spacing: calc(10 * var(--u));
  line-height: 1;
  font-variant-numeric: tabular-nums;
  border: none;
  background: transparent;
  text-align: center;
  width: 100%;
  font-family: var(--skrift);
  text-transform: uppercase;
}
.paring-felt:focus { outline: 3px solid var(--avatar); outline-offset: 8px; }
.paring-hjelp { font-size: calc(28 * var(--u)); font-weight: 600; color: var(--tekst-dempet); }
.paring-fot { font-size: calc(24 * var(--u)); font-weight: 400; color: var(--tekst-dempet); text-align: center; }
.paring-knapp {
  background: var(--tekst);
  color: var(--flate-kort);
  border: none;
  height: calc(80 * var(--u));
  padding: 0 calc(56 * var(--u));
  border-radius: calc(8 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 700;
  font-family: var(--skrift);
  cursor: pointer;
}
.paring-feil {
  align-self: stretch;
  background: var(--alarm-tone);
  border: calc(3 * var(--u)) solid var(--alarm-kant);
  border-left: calc(16 * var(--u)) solid var(--alarm);
  border-radius: calc(18 * var(--u));
  padding: calc(16 * var(--u)) calc(24 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 700;
  color: var(--tekst);
}

/* ---------- fot ---------- */

.fot-notis {
  font-size: calc(26 * var(--u));
  font-weight: 600;
  color: var(--tekst-dempet);
  padding: 0 calc(8 * var(--u));
  flex-shrink: 0;
}

/* ---------- ikonfarger ---------- */
/* Ikonene arver farge fra sin egen markor, slik at fargemodellen bor ett sted. */

.ikon { flex-shrink: 0; }

.topp-ikon { color: var(--tekst-dempet); display: inline-flex; }

.markor,
.tegn-markor { color: var(--ingen-data-ikon); }
.markor--sover, .tegn-markor--sover { color: var(--sover-ikon); }
.markor--vaken_i_sengen, .tegn-markor--vaken_i_sengen { color: var(--vaken-ikon); }
.markor--bevegelse, .tegn-markor--bevegelse { color: var(--bevegelse-ikon); }
.markor--ingen_bevegelse, .tegn-markor--ingen_bevegelse,
.markor--ute, .tegn-markor--ute { color: var(--stille); }
.markor--alarm { color: var(--alarm); }
.tegn-markor--alarm { color: var(--flate-kort); }
.markor--rom_ikke_i_bruk, .tegn-markor--rom_ikke_i_bruk { color: var(--ubrukt-ikon); }

.banner-ikon { color: var(--flate-kort); }
.banner--alarm .banner-ikon--alarm { color: var(--alarm); }
.banner-ikon--rolig { color: var(--bevegelse-dempet); }
.alarmliste-ikon { color: var(--flate-kort); }
.paring-ikon { color: var(--sover); }
.plan-retur { color: var(--tekst); }

/* ---------- gammelt kort ---------- */
/* stale_etter er passert: kortet dempes, og teksten sier sist registrert.
   En gammel «Sover» skal aldri se fersk ut. Det gjelder ogsaa et gammelt
   alarmkort: det blir graatt med vilje, fordi tilstanden paa kortet er
   gammel. Aapne alarmer staar alltid i alarmfeltet over, som kommer fra
   sakene og ikke fra tilstandsraden. */

.kort--gammel {
  opacity: 0.62;
  background: var(--ingen-data-flate);
  border-color: transparent;
  border-left-color: var(--ingen-data);
  box-shadow: none;
}
.kort--gammel .markor {
  background: var(--ingen-data-markor);
  border: none;
  color: var(--ingen-data-ikon);
}
.kort--gammel .stripe-felt,
.kort--gammel .stripe-rom--tent .stripe-felt {
  background: var(--stripe-av);
  border: none;
}
.kort--alarm.kort--gammel .kort-navn,
.kort--alarm.kort--gammel .kort-tilstand { color: var(--tekst); }
.kort--alarm.kort--gammel .kort-rom,
.kort--alarm.kort--gammel .kort-detalj,
.kort--alarm.kort--gammel .stripe-navn { color: var(--tekst-dempet); }

/* ---------- sekundaermerke ---------- */
/* Liten noytral prikk ved siden av tilstandsordet. Aldri gul, aldri
   observasjon: observasjoner hoerer til appen og webben. */

.sekundaer {
  display: inline-block;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  margin-left: calc(10 * var(--u));
  border-radius: 999px;
  background: var(--tekst-dempet);
  vertical-align: middle;
}

/* ---------- smaa vinduer ---------- */
/* Veggskjermen er 16:9 eller 16:10. Smalere vinduer (en pc paa vaktrommet,
   en telefon) faar faerre kolonner og en side som ruller. */
@media (max-width: 1100px) {
  .skjerm { width: 100%; height: auto; min-height: 100vh; overflow: visible; }
  .skjerm { --u: max(0.6px, calc(100vw / 1100)); }
  .innhold { overflow: visible; }
  .rutenett, .rutenett--base, .rutenett[class*="rutenett--k"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .soner, .soner--2, .soner--3, .soner--4 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  /* Kortet faar hoyden fra innholdet her, saa det kan ikke ogsaa vaere en
     hoydecontainer; da ville det klappe sammen. */
  .kort { container-type: inline-size; }
  .tegnforklaring { overflow: visible; }
  .tegn { flex-wrap: wrap; }
  .tegn-detalj { white-space: normal; }
  .banner { flex-wrap: wrap; overflow: visible; }
  .banner-rad { flex-wrap: wrap; }
  .banner-hva, .banner-eier, .banner-hvem, .banner-rad-tekst { white-space: normal; }
  .banner-hoyre { flex-basis: 100%; max-width: 100%; align-items: flex-start; text-align: left; }
  .plan-flate { flex-direction: column; }
  .plan-ramme { justify-content: flex-start; overflow-x: auto; max-width: 100%; }
  .plan-hoyre { width: 100%; }
  .alarmliste-rad { flex-wrap: wrap; }
  .alarmliste-hva, .alarmliste-eier { white-space: normal; }
}
@media (max-width: 600px) {
  .skjerm { --u: 0.6px; }
  .skjerm .topp { height: auto; min-height: 64px; padding: 16px; flex-wrap: wrap; gap: 12px; }
  .innhold, .innhold--tett { padding: 16px; }
  .rutenett, .rutenett--base, .rutenett[class*="rutenett--k"] { grid-template-columns: minmax(0, 1fr); }
  .banner { padding: 16px; gap: 12px; }
  .banner-hoyre { width: 100%; align-items: flex-start; }
  .banner-hoyre-tekst { max-width: 100%; min-width: 0; flex-shrink: 1; text-align: left; }
  .plan-tittel { white-space: normal; }
}