/* ==========================================================================
   visafrianoter.se
   Palett och matt ligger i variabler overst. Byt dar, inte i reglerna nedan.
   ========================================================================== */

:root{
  --bg:        #0c0c0e;
  --bg-upp:    #16161a;
  --bg-kort:   #1c1c21;
  --linje:     #2c2c33;
  --text:      #ece8e1;
  --text-dov:  #9a958c;
  --accent:    #e0a542;
  --accent-dov:#8a6626;
  --papper:    #ffffff;

  --radie: 10px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  ui-sans-serif, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;

  --max: 1400px;

  /* lasarens matt: spaltbredden styr notstorleken och satts av app.js */
  --spalt: 1100px;
  --topp-h: 3.25rem;
  --kredit-h: 2rem;
  --luft: 1.6rem;      /* luft mellan tva notsystem */
  --kant: .6rem;       /* marginal mot skarmkanten. Litet, sa att ett system
                          som fyller bredden verkligen gor det */
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.vy[hidden], [hidden]{ display:none !important; }

kbd{
  font-family:var(--sans); font-size:.78em;
  background:var(--bg-kort); border:1px solid var(--linje);
  border-bottom-width:2px; border-radius:5px;
  padding:.12em .45em; color:var(--text);
}

.ikon{
  background:rgba(255,255,255,.05); color:var(--text);
  border:1px solid var(--linje); border-radius:var(--radie);
  width:2.2rem; height:2.2rem; font-size:1rem; cursor:pointer;
  display:grid; place-items:center; line-height:1; flex:none;
}
.ikon:hover{ border-color:var(--accent); color:var(--accent); }

/* ===================== STARTSIDA (skalet) ===================== */
/* Skalet foljer projektets design.md: riktning A, Familjen. Montserrat,
   marinbla grund, barnsten, vita kort med stamfargerna som rand. Variablerna
   ligger pa #index, sa att lasaren nedanfor behaller sin egen palett orord. */

#index{
  --navy:#0d1520; --navy-ljus:#1a2a40; --slate:rgba(34,48,68,.88);
  --amber:#e8a035;
  --vit:#ffffff; --text-ljus:#c9d2de; --text-dov2:#8fa0b3;
  --linje-ljus:rgba(255,255,255,.14);
  --kort-dov:#6b7684; --kort-meta:#4a5563; --kort-pill:#eef1f5; --rand-gra:#d9dee5;
  --S:#ffa8c8; --A:#ffe978; --T:#96d2ff; --B:#b0f096;
  --bredd:1180px;

  font-family:Montserrat,"Segoe UI",Arial,sans-serif;
  background:var(--navy); color:var(--vit);
  display:flex; flex-direction:column; min-height:100%; position:relative;
}

/* Fonden: en ljusning i toppen och ett svagt notlinjemonster bakom rubriken.
   Ingen bild, noten sjalv ar bildspraket. */
/* Ljusningen ar slut innan verktygsraden borjar (ca 300 px ner). Annars star
   radens navy-fond som en mork rektangel mot den ljusare toningen. */
.skal-fond{
  position:absolute; left:0; right:0; top:0; height:320px; pointer-events:none;
  background:radial-gradient(ellipse 70% 100% at 50% 0%, var(--navy-ljus) 0%, var(--navy) 100%);
}
.skal-fond::after{
  content:''; position:absolute; left:0; right:0; top:60px; height:200px; opacity:.07;
  background:repeating-linear-gradient(180deg, #fff 0 1px, transparent 1px 14px);
  -webkit-mask-image:linear-gradient(to bottom, #000 40%, transparent);
          mask-image:linear-gradient(to bottom, #000 40%, transparent);
}

/* Ingen navrad (beslut 2026-09-06). Stamfargerna ar kvar som ett litet marke
   ovanfor rubriken, sidans enda signatur. */
.marke-farger{ display:inline-flex; gap:3px; margin-bottom:14px; }
.marke-farger i{ display:block; width:6px; height:18px; border-radius:2px; }
.marke-farger i:nth-child(1){ background:var(--S); }
.marke-farger i:nth-child(2){ background:var(--A); }
.marke-farger i:nth-child(3){ background:var(--T); }
.marke-farger i:nth-child(4){ background:var(--B); }

/* Hjaltefaltet. Kompakt: personen i foajen vill at listan, inte at rubriken.
   Faltet finns for den som kommer fran nyhetsbrevet och aldrig sett tjansten. */
.hjalte{ position:relative; max-width:var(--bredd); margin:44px auto 0; padding:0 24px; text-align:center; }
.ogonbryn{
  margin:0; min-height:1em; font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--amber);
}
.hjalte h1{
  margin:14px 0 0; font-size:clamp(32px, 4.4vw, 52px); line-height:1.02;
  font-weight:800; letter-spacing:-.02em; color:var(--vit);
}
.ingress{
  margin:12px auto 0; max-width:560px; font-size:16px; line-height:1.5;
  font-weight:500; color:var(--text-ljus); text-wrap:pretty;
}

/* Verktygsraden: taggar till vanster, sok till hoger */
.innehall{
  position:relative; flex:1; width:100%;
  max-width:calc(var(--bredd) + 48px); margin:0 auto; padding:30px 24px 0;
}
/* Verktygsraden klistrar sig i overkant: rullar man bland sextio kort ska
   sok och taggar inte forsvinna uppat. Toningen later korten glida in under. */
.verktygsrad{
  position:sticky; top:0; z-index:4;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin:0 -24px 22px; padding:14px 24px 12px;
  background:linear-gradient(to bottom, var(--navy) 82%, rgba(13,21,32,0));
}
.hjalp-knapp{
  display:flex; align-items:center; gap:6px; flex:none; cursor:pointer;
  background:none; border:1px solid rgba(255,255,255,.22); border-radius:999px;
  color:#dbe3ec; font:inherit; font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:6px 12px; transition:.12s;
}
.hjalp-knapp:hover{ color:var(--vit); border-color:var(--amber); }
.filter{ display:flex; gap:6px; flex-wrap:wrap; flex:1 1 0; min-width:0; }
.chip{
  background:transparent; color:#dbe3ec; font:inherit; font-size:12px; font-weight:600;
  border:1px solid rgba(255,255,255,.22); border-radius:999px;
  padding:6px 10px; cursor:pointer; transition:.12s;
}
.chip:hover{ color:var(--vit); border-color:var(--amber); }
.chip.pa{ background:var(--amber); border-color:var(--amber); color:var(--navy); font-weight:700; }
/* Antalet per tagg doljs: raknaren i sokfaltet sager redan hur manga som visas,
   och utan siffrorna ryms hela verktygsraden pa en rad. */
.chip .antal{ display:none; }

/* Ordning: titel eller tonsattare */
.sortera{ display:flex; gap:2px; margin-left:auto; }
.sortera button{
  font:inherit; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dov2); background:none; border:0; cursor:pointer; padding:6px 8px; border-radius:6px;
}
.sortera button:hover{ color:var(--vit); }
.sortera button.pa{ color:var(--vit); background:rgba(255,255,255,.1); }

.sok-box{
  display:flex; align-items:center; gap:10px; width:210px; flex:none; max-width:100%;
  padding:0 16px; border-radius:999px; color:#9fb0c3;
  background:rgba(255,255,255,.08); border:1px solid var(--linje-ljus);
  transition:border-color .12s;
}
.sok-box:focus-within{ border-color:var(--amber); }
#sok{
  flex:1; min-width:0; background:none; border:0; outline:none;
  color:var(--vit); font:inherit; font-size:14px; padding:11px 0;
}
#sok::placeholder{ color:#9fb0c3; }
#sok::-webkit-search-cancel-button{ filter:invert(1); }
.sok-rakn{ font-size:12px; white-space:nowrap; }

/* Korten: frimarken av gulnat papper, lyfta fran den morka fonden med skugga.
   Overst incipiten, de forsta takterna i oversta stamman, forstorade sa att
   klav och forsta noterna gar att kanna igen. Titelblocket som anda star i
   klartext under visas inte som bild. Beslut 2026-09-06: ingen stamfargsrand. */
.rutnat{ display:grid; gap:20px 16px; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); scroll-margin-top:100px; }
.kort{
  --papper:#f5eedd; --papper-morkt:#ece2cb; --blak:#6e6047; --blak-dov:#4a4030;
  display:flex; flex-direction:column; color:var(--navy);
  background:linear-gradient(165deg, #f9f3e5 0%, var(--papper) 55%, var(--papper-morkt) 100%);
  border:0; border-radius:3px; overflow:hidden; text-align:left; cursor:pointer;
  font:inherit; padding:0;
  /* Skarp kant i guld och en halo bakom, som om arket lag pa en guldlame som
     lyser igenom. Skuggan nertill haller kvar kanslan av att det ligger pa
     bordet. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
             0 0 0 1px rgba(232,160,53,.55),
             0 0 18px rgba(232,160,53,.22),
             0 2px 4px rgba(0,0,0,.35), 0 14px 30px rgba(0,0,0,.5);
  transition:transform .15s ease, box-shadow .2s ease;
}
/* pekar man tands halon */
.kort:hover{
  transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
             0 0 0 1px rgba(232,160,53,.95),
             0 0 34px rgba(232,160,53,.45),
             0 4px 8px rgba(0,0,0,.35), 0 22px 44px rgba(0,0,0,.55);
}
.kort:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
.kort.forst{ outline:2px solid var(--amber); outline-offset:3px; }

.incipit{ position:relative; height:96px; overflow:hidden; flex:none; }
.incipit img{
  display:block; width:200%; height:auto; max-width:none;
  /* multiply: pappret tonar det vita, trycket forblir svart */
  mix-blend-mode:multiply; filter:sepia(.18) contrast(.96);
  transform:translateY(calc(var(--t, .18) * -100% + 6px));
}
.incipit::after{   /* hoger- och nederkant loses upp i pappret, inget hart klipp */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, rgba(245,238,221,0) 78%, var(--papper) 100%),
             linear-gradient(to bottom, rgba(245,238,221,0) 72%, var(--papper) 100%);
}
.kort-text{ padding:8px 13px 13px; }
/* Guld som ogonbrynet, men ett steg morkare: barnstenen (#e8a035) rakt av pa
   gulnat papper ger for lag kontrast for 14 px text. Samma ton, mer pigment. */
.kort-titel{
  font-size:14px; font-weight:700; line-height:1.2; margin:0; color:#b0701a;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.kort-tonsattare{
  margin:2px 0 0; color:var(--blak); font-size:12px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kort-meta{
  margin:8px 0 0; display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  font-size:10.5px; font-weight:600; color:var(--blak-dov);
}
.kort-meta span{ background:rgba(13,21,32,.07); border-radius:999px; padding:3px 8px; }
.kort-meta .sys{ background:none; padding:0; color:var(--blak); font-weight:500; }

/* Grupprubrik nar listan ar sorterad pa tonsattare */
.grupp{
  grid-column:1/-1; margin:14px 0 0; padding:0 2px 6px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--amber);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.grupp:first-child{ margin-top:0; }
.grupp small{ color:var(--text-dov2); letter-spacing:0; text-transform:none; font-weight:500; margin-left:8px; }

.tomt{ color:var(--text-dov2); padding:2rem 0; }

/* Sidfoten. Licensraden ar inte dekor: CPDL-licensens paragraf 2b kraver att
   det bearbetade verket i sin helhet star under samma licens, och det maste
   sagas dar en besokare faktiskt kan se det. */
.botten{
  position:relative; width:100%; max-width:calc(var(--bredd) + 48px);
  margin:56px auto 0; padding:0 24px 40px; scroll-margin-top:100px;
}
.botten-in{
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:40px;
  font-size:12px; line-height:1.55; color:var(--text-dov2);
}
.licensrad{ max-width:720px; }
.licensrad p{ margin:0; }
.licensrad b{ color:var(--vit); font-weight:600; }
.licensrad a{ color:var(--amber); }
.botten-tangenter{ margin:10px 0 0 !important; }
#index kbd{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:var(--vit); }
.upphov{ margin:0; white-space:nowrap; text-align:right; }
.upphov a{ color:var(--amber); text-decoration:none; }
.upphov a:hover{ text-decoration:underline; }

@media (max-width:760px){
  .hjalte{ margin-top:40px; padding:0 22px; }
  .ingress{ font-size:15px; }
  .innehall{ padding:26px 16px 0; }
  .verktygsrad{ flex-direction:column-reverse; align-items:stretch; gap:14px; }
  .sok-box{ width:100%; }
  .filter{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .filter::-webkit-scrollbar{ display:none; }
  .chip{ white-space:nowrap; }
  .rutnat{ grid-template-columns:1fr 1fr; gap:14px 12px; }
  .botten-in{ flex-direction:column; gap:14px; }
  .upphov{ text-align:left; white-space:normal; }
}

/* ===================== LÄSAREN ===================== */

/* Samma sans som skalet. Serifen som fanns har tidigare var ett avsteg
   ingen bett om (borttagen 2026-09-06). */
#lasare, .overlager{ position:fixed; inset:0; font-family:Montserrat, var(--sans); }
#lasare{ background:#0a0a0c; overflow:hidden; }

/* Hem-knappen: guldgul, med text, sa att den lases som en vag tillbaka till
   startsidan och inte som en del av verkets rubrik. */
.hem{
  display:flex; align-items:center; gap:.45rem; flex:none; height:2.2rem;
  padding:0 1rem 0 .8rem; border:0; border-radius:999px; cursor:pointer;
  background:var(--accent); color:#141210;
  font:inherit; font-size:.82rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  transition:filter .12s;
}
.hem:hover{ filter:brightness(1.08); }
.hem .pil{ font-size:1.05rem; line-height:1; }

/* Tre zoner: hem-knappen till vanster, titeln i mitten, reglagen till hoger.
   De yttre spalterna ar lika breda, sa titeln star mitt pa skarmen. */
.las-topp{
  position:fixed; top:0; left:0; right:0; height:var(--topp-h); z-index:10;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.6rem; padding:0 .7rem;
  background:rgba(12,12,14,.94); border-bottom:1px solid var(--linje);
  backdrop-filter:blur(8px);
  transition:transform .35s ease, opacity .35s ease;
}
/* pointer-events maste bort ocksa: utan det gar det att traffa knappar och
   reglage som inte syns, och da andras nagot utan att man forstar vad */
.las-topp.dold{ transform:translateY(-100%); opacity:0; pointer-events:none; }
/* Titel och tonsattare mitt i raden, oberoende av vad som ligger till vanster
   och hoger. Absolut placering, sa att knapparna pa sidorna inte skjuter den. */
.hem{ justify-self:start; }
.las-hoger{ justify-self:end; display:flex; align-items:center; gap:.45rem; min-width:0; }
.las-titel{
  max-width:34vw; min-width:0; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; line-height:1.15;
}
.las-titel strong{ font-size:.95rem; font-weight:700; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.las-titel span{ color:var(--text-dov); font-size:.76rem; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Fargnyckeln. Overstrykningen pa noten sager vilken rad som ar min, den har
   sager vilken farg som ar vilken stamma. */
.nyckel{ display:flex; gap:.4rem; align-items:center; }
.nyckel span{
  display:flex; align-items:center; gap:.25rem;
  font-size:.72rem; font-weight:600; color:var(--text-dov); letter-spacing:.04em;
}
.nyckel i{
  width:.85rem; height:.85rem; border-radius:3px; display:block;
  border:1px solid rgba(0,0,0,.35);
}

/* Reglaget for fargstyrkan. Finns i granssnittet just for att kunna stallas
   in framfor projektorn, dar den ratta nyansen faktiskt avgors. */
.fargreglage{
  display:flex; align-items:center; gap:.4rem; margin-left:.4rem;
  color:var(--text-dov); font-size:.72rem; letter-spacing:.04em;
}
.fargreglage input{ width:4.2rem; accent-color:var(--accent); cursor:pointer; }

.storlek{ margin-left:.4rem; display:flex; align-items:center; gap:.3rem; }
.storlek-vis{
  color:var(--text-dov); font-size:.78rem; text-align:center; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.raknare{
  color:var(--text); font-variant-numeric:tabular-nums; font-size:.8rem;
  background:rgba(255,255,255,.05); border:1px solid var(--linje);
  border-radius:999px; padding:.28rem .75rem; white-space:nowrap;
}

/* Den obrutna spalten. Ett notsystem per rad, i en enda rullning.
   Original-PDF:ens sidbrytningar finns inte kvar: varje system ar en egen
   bild, sa det gar inte att se var en sida tog slut. */
.spalt{
  position:absolute; inset:0;
  padding:calc(var(--topp-h) + var(--luft)) 0 calc(100vh - var(--topp-h) - 8rem);
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:var(--linje) transparent;
  cursor:pointer;
}
.spalt::-webkit-scrollbar{ width:8px; }
.spalt::-webkit-scrollbar-thumb{ background:var(--linje); border-radius:4px; }

.system{
  width:var(--spalt); max-width:calc(100vw - var(--kant) * 2);
  margin:0 auto var(--luft);
  position:relative; border-radius:6px; overflow:hidden;
  background:var(--papper);
  /* egen blandningsgrupp, sa att fargbanden multipliceras mot noten och
     inte mot den morka bakgrunden utanfor */
  isolation:isolate;
  outline:2px solid transparent; outline-offset:3px;
  transition:outline-color .3s ease, opacity .3s ease;
}
.system img{ display:block; width:100%; height:auto; }

/* Stamfargerna. Multiplikation ar optiskt samma sak som en overstrykningspenna:
   pappret tonas, men det svarta trycket forblir svart. Lagena kommer fran
   slice.py som andelar av bildhojden, sa de haller vid alla skalningar. */
.farg{
  position:absolute; left:0; right:0;
  mix-blend-mode:multiply; pointer-events:none;
  opacity:var(--fargstyrka, .45);
  transition:opacity .15s linear;
}

/* det system man sjunger just nu */
.system.aktiv{ outline-color:var(--accent); }
.system.passerad{ opacity:.45; }

/* Toning nertill. Nasta system tittar fram under det aktiva, och utan den har
   skulle det ligga och skava bakom knapparna. Nu loses det upp i bakgrunden. */
#lasare::after{
  content:''; position:fixed; left:0; right:0; bottom:0; z-index:10;
  height:calc(var(--kredit-h) + 5rem); pointer-events:none;
  background:linear-gradient(to top, #0a0a0c 58%, rgba(10,10,12,0));
}

/* Frammatningen. Ligger mittstalld nertill, i den luft som blir over nar ett
   system fyller bredden. Nasta ar primar, de andra tva stodjer. */
.styr{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--kredit-h) + .85rem); z-index:11;
  display:flex; align-items:center; gap:.5rem;
  transition:opacity .35s ease;
}
.styr.dold{ opacity:.18; }
.styr.dold:hover{ opacity:1; }

.knapp{
  display:flex; align-items:center; gap:.55rem;
  border-radius:999px; font:inherit; cursor:pointer;
  box-shadow:0 6px 28px rgba(0,0,0,.5);
  transition:transform .12s ease, filter .12s ease, opacity .2s ease;
  white-space:nowrap;
}
.knapp:active{ transform:scale(.96); }
.knapp[disabled]{ opacity:.28; cursor:default; transform:none; box-shadow:none; }

.knapp.primar{
  background:var(--accent); color:#141210; border:0;
  padding:.9rem 1.6rem; font-size:1.05rem; font-weight:600;
}
.knapp.primar:not([disabled]):hover{ filter:brightness(1.08); }

.knapp.sekundar{
  background:rgba(22,22,26,.92); color:var(--text);
  border:1px solid var(--linje); padding:.75rem 1.15rem; font-size:.92rem;
}
.knapp.sekundar:not([disabled]):hover{ border-color:var(--accent); color:var(--accent); }

.knapp .pil{ font-size:1.15rem; line-height:1; }

.kredit{
  position:fixed; left:0; right:0; bottom:0; z-index:12; height:var(--kredit-h);
  display:flex; align-items:center; justify-content:center;
  padding:0 1rem; font-size:.75rem; color:rgba(255,255,255,.75);
  background:rgba(10,10,12,.95); border-top:1px solid rgba(255,255,255,.12);
  text-align:center; pointer-events:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kredit b{ color:#fff; font-weight:600; }
.kredit a{ color:inherit; text-decoration:underline; pointer-events:auto; }
.kredit a:hover{ color:var(--accent); }
.kredit .fri{ color:var(--accent); }

/* ===================== ÖVERLAGER ===================== */

.overlager{
  position:fixed; inset:0; z-index:20;
  background:rgba(6,6,8,.9); backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center; padding:8vh 1rem;
}
.snabb-in{ width:min(46rem,100%); }
#snabb-sok{
  width:100%; background:var(--bg-kort); color:var(--text);
  border:1px solid var(--linje); border-radius:var(--radie);
  padding:.9rem 1.1rem; font:inherit; font-size:1.15rem;
}
#snabb-sok:focus{ outline:none; border-color:var(--accent); }
#snabb-traffar{ list-style:none; margin:.75rem 0 0; padding:0; max-height:58vh; overflow:auto; }
#snabb-traffar li{
  padding:.6rem .9rem; border-radius:var(--radie); cursor:pointer;
  display:flex; gap:.7rem; align-items:baseline;
}
#snabb-traffar li.aktiv{ background:var(--accent); color:#141210; }
#snabb-traffar li.aktiv small{ color:#4a3a18; }
#snabb-traffar small{ color:var(--text-dov); }

.hjalp-in{
  width:min(36rem,100%); background:var(--bg-kort);
  border:1px solid var(--linje); border-radius:var(--radie); padding:1.5rem 1.75rem;
}
.hjalp-in h2{ margin:0 0 1rem; font-size:1.2rem; font-weight:700; }
.hjalp-in dl{ display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.25rem; margin:0; }
.hjalp-in dt{ white-space:nowrap; }
.hjalp-in dd{ margin:0; color:var(--text-dov); }
.hjalp-fot{ margin:1.25rem 0 0; color:var(--text-dov); font-size:.85rem; }

/* ===================== SMÅSKÄRM ===================== */

@media (max-width:760px){
  .las-titel{ display:none; }
  .nyckel,.fargreglage{ display:none; }
  .styr{ gap:.4rem; }
  .knapp .etikett{ display:none; }
  .knapp.primar{ padding:.85rem 1.1rem; }
  .knapp.sekundar{ padding:.75rem .95rem; }
}

@media (prefers-reduced-motion:reduce){
  .las-topp,.system,.styr,.knapp{ transition:none; }
}