/* Vaage Utleige — admin-mockup
 *
 * Paletten er Brun Byggs egen, hentet fra brunbygg.no: varm lin som
 * bakgrunn, kulldyp mørk til tekst og bånd, teglrød aksent fra logoen, og
 * den dype grønnen som også ligger i logomerket.
 *
 * Bevisst IKKE Wilhelmsen-drakten (#11151b kullsvart med #f0a500 oransje).
 * Lyst grensesnitt er også riktigere her: dette er skjermer fulle av
 * deletabeller og antall, og de leses bedre på lys bunn.
 */

:root {
  /* Brun Byggs farger */
  --lin:        #f1eeea;
  --lin-mrk:    #e4ded6;
  --lin-lys:    #f8f6f4;
  --kull:       #1f2021;
  --kull-2:     #32333a;
  --kull-3:     #45464e;
  --tegl:       #a62c24;
  --tegl-mrk:   #8f1d17;
  --tegl-lys:   #f6e9e7;
  --gra:        #7c756b;
  --gra-lys:    #9d968c;

  /* Tilstander. Grønnen er fra logomerket, okeren er valgt for å ligge i
   * samme varme familie som teglrøden i stedet for å skrike gult. */
  --ok:         #04723d;
  --ok-lys:     #e6f1ea;
  --varsel:     #b4770e;
  --varsel-lys: #fbf1e0;
  --tap:        #8f1d17;
  --tap-lys:    #f9eae8;

  --panel:      #ffffff;
  --linje:      #e4ded6;
  --linje-mrk:  #d5cec4;

  --radius:     6px;
  --skygge:     0 1px 2px rgba(31, 32, 33, .05), 0 1px 3px rgba(31, 32, 33, .04);
  --skygge-2:   0 2px 4px rgba(31, 32, 33, .06), 0 4px 12px rgba(31, 32, 33, .06);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--lin);
  color: var(--kull);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- skall */

.skall {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}

.rail {
  background: var(--kull);
  color: var(--lin);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.merke {
  padding: 20px 18px 18px;
  border-bottom: 1px solid rgba(241, 238, 234, .1);
}

.merke .navn {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.merke .under {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--gra-lys);
}

/* Den røde streken låner logoens skrå vinkel uten å etterligne den */
.merke .strek {
  width: 34px;
  height: 3px;
  margin-top: 9px;
  background: var(--tegl);
  transform: skewX(-24deg);
}

.rail nav {
  padding: 10px 8px;
  flex: 1;
  overflow-y: auto;
}

.rail .gruppe {
  padding: 12px 10px 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gra);
}

.rail a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  margin: 1px 0;
  border-radius: var(--radius);
  color: #cfc9c1;
  text-decoration: none;
  font-size: 13.5px;
  border-left: 2px solid transparent;
  cursor: pointer;
}

.rail a:hover {
  background: rgba(241, 238, 234, .06);
  color: var(--lin);
}

.rail a.pa {
  background: rgba(166, 44, 36, .16);
  border-left-color: var(--tegl);
  color: #fff;
  font-weight: 500;
}

.rail .teller {
  min-width: 19px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--tegl);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.rail a.pa .teller { background: var(--tegl-mrk); }

.rail .demomerke {
  margin: 8px;
  padding: 9px 11px;
  border-radius: var(--radius);
  background: rgba(241, 238, 234, .06);
  font-size: 11px;
  line-height: 1.45;
  color: var(--gra-lys);
}

/* ---------------------------------------------------------------- flate */

.flate { min-width: 0; }

.topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 26px;
  background: var(--lin);
  border-bottom: 1px solid var(--linje);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topp h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.015em;
}

.topp .hint {
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--gra);
}

.innhold { padding: 22px 26px 60px; }

/* ---------------------------------------------------------------- kort */

.kort {
  background: var(--panel);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
}

.kort + .kort { margin-top: 16px; }

.kort > h2 {
  margin: 0;
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 620;
  border-bottom: 1px solid var(--linje);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.kort > h2 .bi {
  font-size: 12px;
  font-weight: 400;
  color: var(--gra);
}

.kropp { padding: 16px; }

.rist {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ---------------------------------------------------------------- tall */

.tallkort {
  background: var(--panel);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--skygge);
}

.tallkort .merkelapp {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gra);
}

.tallkort .tall {
  margin-top: 5px;
  font-size: 25px;
  font-weight: 680;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

.tallkort .fot {
  margin-top: 3px;
  font-size: 12px;
  color: var(--gra);
}

.tallkort.viktig { border-left: 3px solid var(--tegl); }
.tallkort.viktig .tall { color: var(--tegl); }
.tallkort.god    { border-left: 3px solid var(--ok); }
.tallkort.obs    { border-left: 3px solid var(--varsel); }

/* ---------------------------------------------------------------- tabell */

.tabellboks { overflow-x: auto; }

table.tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.tab th {
  text-align: left;
  padding: 8px 12px;
  background: var(--lin-lys);
  border-bottom: 1px solid var(--linje);
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--gra);
  white-space: nowrap;
}

table.tab td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--lin-mrk);
  vertical-align: top;
}

table.tab tbody tr:last-child td { border-bottom: 0; }
table.tab tbody tr:hover { background: var(--lin-lys); }

table.tab td.n,
table.tab th.n {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

table.tab .sub {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--gra);
}

table.tab tr.klikk { cursor: pointer; }
table.tab tr.klikk:hover { box-shadow: inset 3px 0 0 var(--tegl); }
table.tab tr.dempet td { color: var(--gra); }
table.tab tr.sum td {
  border-top: 2px solid var(--linje-mrk);
  font-weight: 640;
  background: var(--lin-lys);
}

.art {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gra);
}

/* ---------------------------------------------------------------- lapper */

.lapp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .015em;
  white-space: nowrap;
}

.lapp.ok     { background: var(--ok-lys);     color: var(--ok); }
.lapp.obs    { background: var(--varsel-lys); color: var(--varsel); }
.lapp.tap    { background: var(--tap-lys);    color: var(--tap); }
.lapp.tegl   { background: var(--tegl-lys);   color: var(--tegl); }
.lapp.ro     { background: var(--lin-mrk);    color: var(--kull-3); }
.lapp.kull   { background: var(--kull);       color: var(--lin); }

.prikk {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

.prikk.ok  { background: var(--ok); }
.prikk.obs { background: var(--varsel); }
.prikk.tap { background: var(--tap); }
.prikk.ro  { background: var(--gra-lys); }

/* ---------------------------------------------------------------- kanal */

/* Kanalen en henvendelse kom inn på. Hele poenget med innboksen er at
 * telefon, e-post, SMS og nettskjema havner i samme kø — så kanalen må
 * være lesbar på et halvt sekund. */
.kanal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}

.kanal.epost   { background: #e8eef5; color: #2c5480; }
.kanal.telefon { background: var(--ok-lys); color: var(--ok); }
.kanal.sms     { background: var(--varsel-lys); color: var(--varsel); }
.kanal.skjema  { background: var(--tegl-lys); color: var(--tegl); }
.kanal.internt { background: var(--lin-mrk); color: var(--kull-3); }

/* ---------------------------------------------------------------- knapper */

button, .knapp {
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  padding: 7px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--linje-mrk);
  background: var(--panel);
  color: var(--kull);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

button:hover, .knapp:hover { background: var(--lin-lys); border-color: var(--gra-lys); }

button.hoved {
  background: var(--tegl);
  border-color: var(--tegl);
  color: #fff;
}
button.hoved:hover { background: var(--tegl-mrk); border-color: var(--tegl-mrk); }

button.fare {
  background: var(--panel);
  border-color: var(--tap);
  color: var(--tap);
}
button.fare:hover { background: var(--tap-lys); }

button.flat { border-color: transparent; background: transparent; }
button.flat:hover { background: var(--lin-mrk); }

button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

button.liten, .knapp.liten { padding: 4px 9px; font-size: 12px; }

.knapperad { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------- varsler */

.melding {
  display: flex;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 13px;
  line-height: 1.5;
}

.melding .ikon { flex: 0 0 auto; font-size: 15px; line-height: 1.2; }

/* Bare tittelen er blokk. Gjorde man alle <strong> til blokk, ville fet
 * skrift midt i en setning brekke linja og etterlate hjemløse komma. */
.melding .tit { display: block; font-weight: 650; margin-bottom: 2px; }

.melding.ok     { background: var(--ok-lys);     border-color: #bcd9c8; color: #0a4527; }
.melding.obs    { background: var(--varsel-lys); border-color: #ecd6a8; color: #6b4703; }
.melding.tap    { background: var(--tap-lys);    border-color: #e6bfba; color: #6b1410; }
.melding.ro     { background: var(--lin-lys);    border-color: var(--linje); color: var(--kull-3); }

/* ---------------------------------------------------------------- stolper */

/* Lagerstolpen: eid materiell delt i ute / ledig / savnet. Tre felt i én
 * strek er lettere å lese enn tre tall på rad. */
.stolpe {
  display: flex;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--lin-mrk);
  min-width: 90px;
}

.stolpe i { display: block; height: 100%; }
.stolpe i.ute    { background: var(--kull-3); }
.stolpe i.ledig  { background: var(--ok); }
.stolpe i.savnet { background: var(--tap); }

.stolpetekst {
  margin-top: 4px;
  font-size: 11px;
  color: var(--gra);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- sak */

.tidslinje { position: relative; padding-left: 26px; }

.tidslinje::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--lin-mrk);
}

.hendelse { position: relative; padding: 0 0 18px; }
.hendelse:last-child { padding-bottom: 0; }

.hendelse::before {
  content: '';
  position: absolute;
  left: -21px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--gra-lys);
}

.hendelse.merk::before { border-color: var(--tegl); background: var(--tegl); }
.hendelse.god::before  { border-color: var(--ok); background: var(--ok); }

.hendelse .nar {
  font-size: 11.5px;
  color: var(--gra);
  font-variant-numeric: tabular-nums;
}

.hendelse .hva { margin-top: 1px; font-weight: 550; }

.hendelse .tekst {
  margin-top: 3px;
  padding: 9px 12px;
  background: var(--lin-lys);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.55;
}

.hendelse .tekst.utgaa { background: var(--tegl-lys); border-color: #ecd3d0; }

/* ---------------------------------------------------------------- innboks */

.kolonner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 16px;
  align-items: start;
}

.kokort {
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--lin-mrk);
  cursor: pointer;
}

.kokort:last-child { border-bottom: 0; }
.kokort:hover { background: var(--lin-lys); }

.kokort.valgt {
  background: var(--tegl-lys);
  box-shadow: inset 3px 0 0 var(--tegl);
}

.kokort .midt { min-width: 0; flex: 1; }

.kokort .fra {
  font-weight: 600;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.kokort .emne {
  margin-top: 1px;
  font-size: 13px;
  color: var(--kull-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kokort .meta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--gra);
}

.uleste { font-weight: 700; }

/* ---------------------------------------------------------------- diverse */

.mulighet {
  display: flex;
  gap: 11px;
  padding: 12px 15px;
  border: 1px dashed var(--linje-mrk);
  border-radius: var(--radius);
  background: var(--lin-lys);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--kull-3);
}

.fot {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--linje);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--gra);
}

.dempet { color: var(--gra); }
.n { font-variant-numeric: tabular-nums; }
.skjul { display: none !important; }

h3.avsnitt {
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gra);
}

.kort .avsnitt + table.tab { margin-bottom: 18px; }

/* ---------------------------------------------------------------- smalt */

@media (max-width: 900px) {
  .skall { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; }
  .rail nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .rail .gruppe { display: none; }
  .rail .demomerke { display: none; }
  .kolonner { grid-template-columns: 1fr; }
  .innhold, .topp { padding-left: 16px; padding-right: 16px; }
}

/* ================================================================ veiledning
 *
 * Tre lag, fra mykt til hardt: velkomstkort, veiviser som peker på ett
 * element, og «hva kan jeg trykke på» som nødutgang.
 */

.sperre {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(31, 32, 33, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.modal {
  background: var(--panel);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(31, 32, 33, .3);
  padding: 26px 28px;
  max-width: 520px;
}

.modal h2 {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 680;
  letter-spacing: -.015em;
}

/* Den skrå røde streken igjen, som i merket */
.modal h2::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 11px;
  background: var(--tegl);
  transform: skewX(-24deg);
}

.modal p { margin: 0 0 12px; line-height: 1.6; }
.modal .knapperad { margin-top: 18px; }

/* --- veiviseren --- */

/* Alt dempes mens ringen står, slik at ett element blir igjen. */
/* Veiviseren isolerer ett element, så her dempes resten — men mykt, og
 * UTEN grayscale. Gråtoning dreper status­fargene (rød, grønn, oker) som
 * hele designet hviler på, og da blir skjermen uleselig i stedet for rolig. */
body.vv-pa .skall { opacity: .58; }

body.vv-pa .vv-mal,
body.vv-pa .vv-mal * { filter: none; }

.vv-mal {
  position: relative;
  z-index: 210;
  outline: 3px solid var(--tegl);
  outline-offset: 3px;
  border-radius: 4px;
  background: var(--panel);
  animation: vvpuls 1.9s ease-in-out infinite;
}

@keyframes vvpuls {
  0%, 100% { outline-color: var(--tegl); }
  50%      { outline-color: rgba(166, 44, 36, .35); }
}

.vv-kort {
  position: fixed;
  z-index: 220;
  width: 370px;
  max-width: calc(100vw - 28px);
  background: var(--kull);
  color: var(--lin);
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(31, 32, 33, .38);
  padding: 16px 18px;
}

.vv-kort .vv-nr {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gra-lys);
}

.vv-kort h3 {
  margin: 5px 0 7px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.vv-kort p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #d8d2ca;
}

.vv-kort strong { color: #fff; }
.vv-kort .knapperad { margin-top: 14px; }

.vv-kort button {
  background: rgba(241, 238, 234, .1);
  border-color: rgba(241, 238, 234, .18);
  color: var(--lin);
}

.vv-kort button:hover { background: rgba(241, 238, 234, .17); }

.vv-kort button.hoved {
  background: var(--tegl);
  border-color: var(--tegl);
  color: #fff;
}

.vv-kort button.hoved:hover { background: var(--tegl-mrk); }

/* --- hva kan jeg trykke på --- */

/* Blinker opp alt interaktivt samtidig. Nødutgangen når man har rotet seg
 * bort, og et greit grep midt i et møte. */
body.vis-klikk .rail a,
body.vis-klikk .kokort,
body.vis-klikk table.tab tr.klikk,
body.vis-klikk button:not(:disabled),
body.vis-klikk [data-handling],
body.vis-klikk [data-gaa] {
  animation: klikkblink 1.3s ease-in-out 2;
  border-radius: 4px;
}

@keyframes klikkblink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(166, 44, 36, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(166, 44, 36, .5); }
}

@media (max-width: 900px) {
  .vv-kort { left: 14px !important; right: 14px; width: auto; }
}

/* ================================================================ omvisning
 *
 * Trykker, viser og forteller. Panelet står nede til høyre og flytter seg
 * til venstre hvis målet ligger under det.
 */

/* INGEN demping av sida under omvisningen.
 *
 * Første utgave la `filter: grayscale() opacity()` på hele skallet, slik
 * veiviseren gjør. Det er riktig der — du ser på ett element av gangen — men
 * galt her: omvisningen skal VISE skjermene mens den forteller, og da må
 * tabellene være lesbare. Ringen alene peker godt nok.
 */

.om-mal {
  position: relative;
  z-index: 210;
  outline: 3px solid var(--tegl);
  outline-offset: 2px;
  border-radius: 4px;
  /* Et varmt skjær i stedet for å dempe alt annet. Løfter målet fram uten
   * å gjøre resten uleselig. */
  box-shadow: 0 0 0 6px rgba(166, 44, 36, .12), 0 6px 22px rgba(31, 32, 33, .13);
  animation: ompuls 2.2s ease-in-out infinite;
}

@keyframes ompuls {
  0%, 100% { box-shadow: 0 0 0 6px rgba(166, 44, 36, .12), 0 6px 22px rgba(31, 32, 33, .13); }
  50%      { box-shadow: 0 0 0 9px rgba(166, 44, 36, .05), 0 6px 22px rgba(31, 32, 33, .10); }
}

.om-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 230;
  width: 390px;
  max-width: calc(100vw - 32px);
  background: var(--kull);
  color: var(--lin);
  border-radius: 9px;
  box-shadow: 0 12px 38px rgba(31, 32, 33, .42);
  padding: 15px 17px 16px;
}

.om-panel.venstre { right: auto; left: 20px; }

.om-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.om-panel .om-nr {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gra-lys);
}

.om-stolpe {
  height: 3px;
  margin: 10px 0 11px;
  border-radius: 2px;
  background: rgba(241, 238, 234, .13);
  overflow: hidden;
}

.om-stolpe i {
  display: block;
  height: 100%;
  background: var(--tegl);
  transition: width .45s ease;
}

.om-panel p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #d8d2ca;
  /* Panelet er hovedleseflata nå som sida ikke dempes — gi teksten plass
   * nok til at den sjelden må rulles. */
  max-height: 15em;
  overflow-y: auto;
}

.om-panel .knapperad { margin-top: 13px; }

.om-panel button {
  background: rgba(241, 238, 234, .1);
  border-color: rgba(241, 238, 234, .18);
  color: var(--lin);
}

.om-panel button:hover { background: rgba(241, 238, 234, .17); }

.om-panel button.hoved {
  background: var(--tegl);
  border-color: var(--tegl);
  color: #fff;
}

.om-panel button.hoved:hover { background: var(--tegl-mrk); }

.om-panel button.av { opacity: .55; }

.om-panel button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Klikket må synes. Et usynlig klikk ser ut som at ingenting skjedde. */
.om-klikk {
  position: fixed;
  z-index: 240;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid var(--tegl);
  background: rgba(166, 44, 36, .28);
  pointer-events: none;
  animation: omklikk .34s ease-out;
}

@keyframes omklikk {
  0%   { transform: scale(.3); opacity: 0; }
  45%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(.85); opacity: .8; }
}

@media (max-width: 900px) {
  .om-panel { left: 12px; right: 12px; width: auto; bottom: 12px; }
  .om-panel.venstre { left: 12px; right: 12px; }
}