/* =========================================================================
   boisodertalje.se — enda stilmallen pa sajten.
   Ingen delad app.css, ingen delad app.js. Allt som behovs star har.
   Formsprak: teknisk handling. Harfina linjer, monospace pa allt som ar
   en uppgift (datum, klockslag, sifferrader), svart list upptill och
   nertill, barnstensgul som enda accent.
   ========================================================================= */

:root{
  --bl: #12161A;        /* black */
  --bl2:#2A3238;
  --dim:#66717A;
  --pap:#E6E9E6;        /* betong */
  --pap2:#DCE0DC;
  --ark:#F5F6F4;        /* ark */
  --lin:#C4CAC5;
  --lin2:#A9B1AB;
  --gul:#D99A12;        /* signal */
  --kan:#1F5F7A;        /* kanalen */
  --kan2:#14435A;
  --natt:#0E1216;       /* sidfot och tavla */
  --natt2:#1A2026;

  --h:'Archivo',"Helvetica Neue",Arial,sans-serif;
  --t:'Public Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --m:'IBM Plex Mono',ui-monospace,"DejaVu Sans Mono",monospace;
}

/* --- egen nollstallning, ingen ramverksreset ---------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--pap); color:var(--bl);
  font-family:var(--t); font-size:16.5px; line-height:1.62;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--h); font-weight:700; color:var(--bl);
  letter-spacing:-.015em; line-height:1.12; margin:0;
}
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; }
a{ color:var(--kan); text-decoration:none; }
a:hover{ color:var(--kan2); text-decoration:underline; text-underline-offset:3px; }
img{ max-width:100%; height:auto; display:block; }
figure{ margin:0; }
hr{ border:0; border-top:1px solid var(--lin); margin:0; }
table{ border-collapse:collapse; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--gul); outline-offset:2px; }

.dold{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:0;
}
.inre{ max-width:1220px; margin:0 auto; padding:0 22px; }
.stampel{
  font-family:var(--m); font-size:11.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--dim);
}

/* --- remsan langst upp -------------------------------------------------- */
.remsa{ background:var(--pap); border-bottom:1px solid var(--lin); }
.remsa__inre{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; min-height:32px; flex-wrap:wrap;
}
.remsa__fakta,.remsa__lankar a{
  font-family:var(--m); font-size:11.5px; letter-spacing:.10em;
  text-transform:uppercase; color:var(--dim);
}
.remsa__lankar{ display:flex; gap:18px; flex-wrap:wrap; list-style:none; }
.remsa__lankar a{ color:var(--bl2); }
.remsa__lankar a:hover{ color:var(--kan); text-decoration:none; border-bottom:1px solid var(--gul); }

/* --- huvudet ------------------------------------------------------------ */
.huvud{ background:var(--pap); border-bottom:2px solid var(--bl); }
.huvud__inre{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:26px; padding:26px 0 18px; flex-wrap:wrap;
}
.huvud__namn{
  display:block; font-family:var(--h); font-weight:800;
  font-size:clamp(30px,5.4vw,54px); line-height:.94; letter-spacing:-.035em;
  color:var(--bl);
}
.huvud__namn:hover{ text-decoration:none; color:var(--bl); }
.huvud__namn i{ font-style:normal; font-weight:500; color:var(--dim); }
.huvud__under{
  display:block; margin-top:9px; max-width:36ch;
  font-size:13.5px; line-height:1.45; color:var(--bl2);
}
.huvud__lage{ border-left:3px solid var(--gul); padding:2px 0 2px 14px; min-width:280px; margin:0; }
.huvud__lage div{ display:flex; gap:10px; align-items:baseline; padding:3px 0; }
.huvud__lage dt{
  font-family:var(--m); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); min-width:146px;
}
.huvud__lage dd{ margin:0; font-size:13.5px; }
.huvud__lage .datum{ font-family:var(--m); font-size:12px; color:var(--bl2); }
.huvud__vy{
  height:74px; background:var(--natt) url('/images/sd-band.png') center/cover no-repeat;
  border-bottom:1px solid var(--bl);
}

/* --- menyn -------------------------------------------------------------- */
.meny{ background:var(--ark); border-bottom:1px solid var(--lin); }
.meny__inre{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.meny__val{ display:flex; list-style:none; flex-wrap:wrap; }
.meny__val a{
  display:block; padding:13px 16px 12px; font-family:var(--m); font-size:13px;
  color:var(--bl2); border-bottom:2px solid transparent;
}
.meny__val a:hover{ color:var(--bl); text-decoration:none; border-bottom-color:var(--lin2); }
.meny__val a[aria-current]{ color:var(--bl); border-bottom-color:var(--gul); }
.meny__sok{ display:flex; align-items:center; }
.meny__sok input{
  width:150px; padding:7px 10px; border:1px solid var(--lin2); border-right:0;
  background:#fff; font-family:var(--m); font-size:12.5px; border-radius:0;
}
.meny__sok button{
  padding:7px 12px; border:1px solid var(--bl); background:var(--bl); color:#fff;
  font-family:var(--m); font-size:12.5px; cursor:pointer; border-radius:0;
}
.meny__sok button:hover{ background:var(--kan2); border-color:var(--kan2); }

.stomme{ padding:30px 0 42px; }

/* --- ingangen: rubrik over hela bredden, ritningen under ---------------- */
.ingang{ margin:0 0 34px; border-bottom:1px solid var(--lin); padding-bottom:26px; }
.ingang__stampel{
  font-family:var(--m); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid var(--bl);
  display:flex; gap:14px; flex-wrap:wrap;
}
.ingang__stampel b{ color:var(--gul); font-weight:500; }
.ingang__rubrik{
  font-size:clamp(28px,4.4vw,50px); line-height:1.03; letter-spacing:-.03em;
  margin:0 0 20px; max-width:26ch;
}
.ingang__rubrik a{ color:var(--bl); }
.ingang__rubrik a:hover{ color:var(--kan); text-decoration:none; }
.ingang__bild{ display:block; border:1px solid var(--lin); background:var(--ark); margin:0 0 20px; }
.ingang__text{ columns:2; column-gap:42px; font-size:16.5px; color:var(--bl2); max-width:none; }
.ingang__text p{ margin:0; }
.ingang__vidare{
  display:inline-block; margin-top:16px; font-family:var(--m); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bl2);
  border-bottom:1px solid var(--gul);
}
.ingang__vidare:hover{ color:var(--kan); text-decoration:none; }

/* --- tavlan: senast inlagt --------------------------------------------- */
.tavla{ background:var(--natt); color:#EDEFEC; margin:0 0 36px; }
.tavla__huvud{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:12px 20px; border-bottom:1px solid #2E373D; flex-wrap:wrap;
}
.tavla__huvud b{
  font-family:var(--m); font-weight:500; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gul);
}
.tavla__huvud span{ font-family:var(--m); font-size:11.5px; letter-spacing:.10em; color:#8C979E; text-transform:uppercase; }
.tavla__rad{
  display:grid; grid-template-columns:58px 118px 1fr 150px; align-items:center; gap:18px;
  padding:16px 20px; border-bottom:1px solid #232B31; color:#EDEFEC;
}
.tavla__rad:last-child{ border-bottom:0; }
.tavla__rad:hover{ background:var(--natt2); text-decoration:none; color:#EDEFEC; }
.tavla__rad:hover .tavla__titel{ color:var(--gul); }
.tavla__nr{ font-family:var(--m); font-size:12px; color:#5F6C74; letter-spacing:.08em; }
.tavla__tid{ font-family:var(--m); font-size:13px; color:var(--gul); letter-spacing:.04em; }
.tavla__titel{ font-family:var(--h); font-weight:600; font-size:clamp(17px,2vw,21px); line-height:1.22; letter-spacing:-.015em; }
.tavla--utan-amne .tavla__rad{ grid-template-columns:58px 140px 1fr; }
.tavla__amne{
  justify-self:end; font-family:var(--m); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:#8C979E; border:1px solid #38424A; padding:3px 9px; white-space:nowrap;
}

/* --- avsnittsrubrik: nummer, namn, punktlinje, lank -------------------- */
.avsnitt{ margin:0 0 36px; }
.avsnitt__huvud{ display:flex; align-items:baseline; gap:14px; margin:0 0 18px; }
.avsnitt__nr{ font-family:var(--m); font-size:12px; color:var(--gul); letter-spacing:.1em; }
.avsnitt__namn{ font-size:clamp(19px,2.4vw,25px); letter-spacing:-.02em; white-space:nowrap; }
.avsnitt__linje{ flex:1 1 auto; border-bottom:2px dotted var(--lin2); transform:translateY(-5px); min-width:20px; }
.avsnitt__alla{
  font-family:var(--m); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bl2); white-space:nowrap;
}
.avsnitt__alla:hover{ color:var(--kan); text-decoration:none; }

/* --- notiser ------------------------------------------------------------ */
.notislista{ border-top:1px solid var(--lin); }
.notis{
  display:grid; grid-template-columns:104px 1fr 190px; gap:24px; align-items:start;
  padding:18px 0; border-bottom:1px solid var(--lin);
}
.notis--utan-bild{ grid-template-columns:104px 1fr; }
.notis__datum{ font-family:var(--m); font-size:12.5px; color:var(--dim); padding-top:3px; }
.notis__rubrik{ font-size:20px; line-height:1.2; margin:0 0 7px; }
.notis__rubrik a{ color:var(--bl); }
.notis__rubrik a:hover{ color:var(--kan); text-decoration:none; }
.notis__text{ margin:0; font-size:15px; color:var(--bl2); max-width:70ch; }
.notis__bild{ border:1px solid var(--lin); background:var(--ark); }
.notis__bild img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

.korta{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--lin); }
.korta__val{
  display:block; padding:16px 22px 18px; border-right:1px solid var(--lin);
  border-bottom:1px solid var(--lin); color:var(--bl);
}
.korta__val:last-child{ border-right:0; }
.korta__val:hover{ background:var(--ark); text-decoration:none; color:var(--bl); }
.korta__datum{ display:block; font-family:var(--m); font-size:11.5px; color:var(--dim); margin-bottom:7px; letter-spacing:.06em; }
.korta__rubrik{ display:block; font-family:var(--h); font-weight:600; font-size:17px; line-height:1.24; letter-spacing:-.01em; }

/* --- lagesremsan -------------------------------------------------------- */
.lage{
  background:var(--ark); border-top:2px solid var(--bl); border-bottom:1px solid var(--lin);
  padding:20px 22px; margin:0 0 36px;
}
.lage__rubrik{ font-size:17px; margin:0 0 14px; letter-spacing:-.01em; }
.lage__celler{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.lage__cell{ border-left:2px solid var(--gul); padding-left:13px; }
.lage__cell dt{
  font-family:var(--m); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); margin-bottom:5px;
}
.lage__cell dd{ margin:0; font-size:15px; }
.lage__kalla{ margin:14px 0 0; font-family:var(--m); font-size:11px; color:var(--dim); letter-spacing:.04em; }

/* --- kvarteret: fyra rutor langst ner ----------------------------------- */
.kvarter{ border-top:2px solid var(--bl); padding:26px 0 0; }
.kvarter__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.kvarter__rubrik{
  font-family:var(--m); font-weight:500; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); margin:0 0 12px; padding-bottom:8px;
  border-bottom:1px solid var(--lin);
}
.kvarter ul{ list-style:none; }
.kvarter li{ margin:0 0 7px; font-size:14.5px; }
.kvarter li a{ color:var(--bl2); }
.kvarter li a:hover{ color:var(--kan); }
.kvarter__lank{
  font-family:var(--m); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--bl2); border-bottom:1px solid var(--gul);
}
.kvarter__lank:hover{ color:var(--kan); text-decoration:none; }
.datumpost{ margin:0 0 14px; }
.datumpost__nar{ display:block; font-family:var(--m); font-size:11.5px; color:var(--gul); letter-spacing:.06em; }
.datumpost__vad{ display:block; font-family:var(--h); font-weight:600; font-size:15px; line-height:1.25; margin:2px 0 3px; }
.datumpost__om{ font-size:13.5px; color:var(--dim); }
.erbjudande{ display:block; padding:12px 14px; border:1px solid var(--lin); background:var(--ark); margin:0 0 10px; color:var(--bl); }
.erbjudande:hover{ border-color:var(--bl); text-decoration:none; color:var(--bl); }
.erbjudande b{ display:block; font-family:var(--h); font-weight:600; font-size:15px; margin-bottom:3px; }
.erbjudande span{ font-size:13.5px; color:var(--dim); }
.siffror{ width:100%; }
.siffror th{
  text-align:left; font-family:var(--m); font-weight:400; font-size:11.5px;
  letter-spacing:.10em; text-transform:uppercase; color:var(--dim);
  padding:7px 10px 7px 0; border-bottom:1px solid var(--lin); vertical-align:baseline; width:46%;
}
.siffror td{ padding:7px 0; border-bottom:1px solid var(--lin); font-size:15px; }
.siffror td span{ display:block; font-family:var(--m); font-size:11px; color:var(--dim); }

/* --- artikeln ----------------------------------------------------------- */
.uppslag{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.artikel{
  background:var(--ark); border:1px solid var(--lin); border-top:3px solid var(--bl);
  padding:34px clamp(18px,4vw,48px) 40px; margin:0 0 26px;
}
.artikel__bild{ border:1px solid var(--lin); margin:0 0 24px; }
.artikel__rubrik{ font-size:clamp(27px,4vw,42px); line-height:1.06; letter-spacing:-.025em; margin:0 0 14px; max-width:26ch; }
.artikel__stampel{
  font-family:var(--m); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); border-bottom:1px solid var(--lin); padding:0 0 14px; margin:0 0 22px;
  display:flex; gap:14px; flex-wrap:wrap;
}
.artikel__brod{ font-size:17px; line-height:1.7; max-width:68ch; }
.artikel__brod h2{ font-size:22px; margin:30px 0 12px; padding:0 0 6px; border-bottom:1px solid var(--lin); }
.artikel__brod h3{ font-size:18px; margin:24px 0 10px; }
.artikel__brod ul,.artikel__brod ol{ margin:0 0 18px 20px; }
.artikel__brod li{ margin:0 0 8px; }
.artikel__brod img{ border:1px solid var(--lin); margin:8px 0 18px; }
.artikel__brod blockquote{ margin:20px 0; padding:4px 0 4px 18px; border-left:3px solid var(--gul); font-size:18px; color:var(--bl2); }
.artikel__brod a{ border-bottom:1px solid rgba(31,95,122,.35); }
.artikel__brod table{ width:100%; margin:0 0 18px; font-size:15px; }
.artikel__brod th,.artikel__brod td{ border:1px solid var(--lin); padding:8px 10px; text-align:left; }
.artikel__brod th{ background:var(--pap2); font-family:var(--m); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.artikel__taggar{ margin-top:24px; padding-top:14px; border-top:1px solid var(--lin); font-family:var(--m); font-size:12px; color:var(--dim); letter-spacing:.06em; }
.artikel__taggar span{ display:inline-block; border:1px solid var(--lin2); padding:2px 9px; margin:0 6px 6px 0; text-transform:uppercase; }

.betyg{ margin-top:26px; padding:16px 18px; background:var(--pap2); border:1px solid var(--lin); }
.betyg__fraga{ font-family:var(--m); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.betyg__stjarnor{ display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; margin:6px 0 4px; }
.betyg__stjarna{
  background:none; border:0; padding:0; cursor:pointer; font-size:24px; line-height:1;
  color:var(--lin2);
}
.betyg__stjarna[aria-pressed="true"],
.betyg__stjarnor:hover .betyg__stjarna:hover,
.betyg__stjarnor:hover .betyg__stjarna:hover ~ .betyg__stjarna{ color:var(--gul); }
.betyg__lage,.betyg__svar{ font-family:var(--m); font-size:12px; color:var(--dim); }
.betyg__svar{ margin-top:6px; color:var(--kan2); }

/* --- spalten under artikeln (fd hogerspalt) ---------------------------- */
.spalt{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; border-top:2px solid var(--bl); padding-top:22px; }
.spalt__rubrik{
  font-family:var(--m); font-weight:500; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--lin);
  padding:0 0 8px; margin:0 0 12px;
}
.spalt ul{ list-style:none; }
.spalt li{ margin:0 0 7px; font-size:14.5px; }
.spalt li a{ color:var(--bl2); }
.last{ display:flex; gap:12px; padding:0 0 12px; margin:0 0 12px; border-bottom:1px solid var(--lin); }
.last__ruta{ width:80px; height:45px; flex:0 0 80px; background-size:cover; background-position:center; border:1px solid var(--lin); }
.last__rubrik{ font-size:15px; line-height:1.25; margin:0 0 3px; }
.last__rubrik a{ color:var(--bl); }
.last__meta{ font-family:var(--m); font-size:11px; color:var(--dim); letter-spacing:.06em; }

/* --- listor: kategori, sok, kategorier --------------------------------- */
.sidhuvud{ border-top:2px solid var(--bl); padding:12px 0 14px; margin:0 0 20px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.sidhuvud h1{ font-size:clamp(22px,3vw,32px); letter-spacing:-.02em; }
.sidhuvud p{ margin:0; font-size:14px; color:var(--bl2); }

.rader{ border-top:1px solid var(--lin); }
.rad{ display:grid; grid-template-columns:150px minmax(0,1fr) 190px; gap:24px; padding:20px 0; border-bottom:1px solid var(--lin); align-items:start; }
.rad--utan-bild{ grid-template-columns:150px minmax(0,1fr); }
.rad__stampel{ font-family:var(--m); font-size:12px; letter-spacing:.06em; color:var(--dim); }
.rad__stampel span{ display:block; }
.rad__rubrik{ font-size:21px; line-height:1.2; margin:0 0 8px; }
.rad__rubrik a{ color:var(--bl); }
.rad__rubrik a:hover{ color:var(--kan); text-decoration:none; }
.rad__text{ margin:0; font-size:15px; color:var(--bl2); max-width:72ch; }
.rad__bild{ border:1px solid var(--lin); background:var(--ark); }
.rad__bild img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

.sidor{ display:flex; gap:6px; list-style:none; flex-wrap:wrap; margin:26px 0 0; }
.sidor a,.sidor b,.sidor span{
  display:block; padding:7px 12px; border:1px solid var(--lin2); background:var(--ark);
  font-family:var(--m); font-size:13px; font-weight:400; color:var(--bl2);
}
.sidor b{ background:var(--bl); color:#fff; border-color:var(--bl); }
.sidor span{ color:var(--lin2); }

.amnen{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--lin); border-left:1px solid var(--lin); }
.amnen__val{ display:block; padding:18px 20px; background:var(--ark); color:var(--bl);
  border-right:1px solid var(--lin); border-bottom:1px solid var(--lin); }
.amnen__val:hover{ background:#fff; text-decoration:none; color:var(--bl); }
.amnen__namn{ display:block; font-family:var(--h); font-weight:600; font-size:17px; letter-spacing:-.01em; }
.amnen__antal{ display:block; margin-top:4px; font-family:var(--m); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }

/* --- statiska sidor ----------------------------------------------------- */
.blad{
  background:var(--ark); border:1px solid var(--lin); border-top:3px solid var(--bl);
  padding:34px clamp(18px,4vw,48px) 40px; margin:0 0 26px;
}
.blad h1{ font-size:clamp(27px,4vw,42px); line-height:1.06; letter-spacing:-.025em; margin:0 0 14px; }
.blad__stampel{
  font-family:var(--m); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); border-bottom:1px solid var(--lin); padding:0 0 14px; margin:0 0 22px;
}
.blad__brod{ font-size:17px; line-height:1.7; max-width:68ch; }
.blad__brod h2{ font-size:22px; margin:30px 0 12px; padding:0 0 6px; border-bottom:1px solid var(--lin); }
.blad__brod h3{ font-size:18px; margin:24px 0 10px; }
.blad__brod ul,.blad__brod ol{ margin:0 0 18px 20px; }
.blad__brod li{ margin:0 0 8px; }
.blad__brod a{ border-bottom:1px solid rgba(31,95,122,.35); }
.blad__brod table{ width:100%; margin:0 0 18px; font-size:15px; }
.blad__brod th,.blad__brod td{ border:1px solid var(--lin); padding:8px 10px; text-align:left; }
.blad__brod th{ background:var(--pap2); font-family:var(--m); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

.almanacka{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:22px; }
.almanacka__post{ background:#fff; border:1px solid var(--lin); border-left:3px solid var(--gul); padding:18px 20px; }
.almanacka__nar{ font-family:var(--m); font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:var(--kan); }
.almanacka__post h2{ font-size:19px; margin:6px 0 8px; }
.almanacka__post p{ margin:0; font-size:15px; color:var(--bl2); }

.plansch{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:22px; }
.plansch img{ width:100%; border:1px solid var(--lin); }
.plansch figcaption{
  font-family:var(--m); font-size:12px; line-height:1.5; color:var(--dim);
  padding:8px 0 0; border-top:1px solid var(--lin); margin-top:8px;
}

.lapp{ padding:12px 14px; border-left:3px solid var(--gul); background:var(--pap2); margin:0 0 18px; font-size:15px; }
.lapp--ok{ border-left-color:#3B7A57; }
.lapp--fel{ border-left-color:#A33B2A; }
.lapp p{ margin:0; }

.formular{ max-width:620px; margin:0 0 30px; }
.formular__falt{ margin:0 0 16px; }
.formular label{
  display:block; margin:0 0 5px; font-family:var(--m); font-size:11.5px;
  letter-spacing:.10em; text-transform:uppercase; color:var(--dim);
}
.formular input,.formular select,.formular textarea{
  width:100%; padding:10px 12px; border:1px solid var(--lin2); border-radius:0;
  background:#fff; font-family:var(--t); font-size:15px;
}
.formular input:focus,.formular select:focus,.formular textarea:focus{
  outline:2px solid var(--gul); outline-offset:-2px; border-color:var(--bl);
}
.formular button{
  background:var(--bl); color:#fff; border:0; border-radius:0; cursor:pointer;
  font-family:var(--m); font-size:13px; letter-spacing:.10em; text-transform:uppercase; padding:12px 22px;
}
.formular button:hover{ background:var(--kan2); }

/* --- sidfoten: svart, som tavlan --------------------------------------- */
.sidfot{ background:var(--natt); color:#C8CFD2; margin-top:40px; padding:34px 0 22px; }
.sidfot__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:34px; }
.sidfot__rubrik{
  font-family:var(--m); font-weight:500; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gul); margin:0 0 12px;
}
.sidfot p{ font-size:14px; line-height:1.65; margin:0 0 10px; color:#AEB7BC; }
.sidfot ul{ list-style:none; }
.sidfot li{ margin:0 0 7px; font-size:14px; }
.sidfot a{ color:#C8CFD2; border-bottom:1px solid #333C43; }
.sidfot a:hover{ color:var(--gul); border-bottom-color:var(--gul); text-decoration:none; }
.sidfot__grannar{ margin-top:30px; border-top:1px solid #2A3238; padding-top:18px; display:flex; gap:26px; flex-wrap:wrap; }
.sidfot__granne{ flex:1 1 280px; color:#C8CFD2; border:0; }
.sidfot__granne b{ display:block; font-family:var(--h); font-size:15px; margin-bottom:3px; color:#EDEFEC; }
.sidfot__granne span{ font-size:13px; color:#8C979E; }
.sidfot__granne:hover{ text-decoration:none; }
.sidfot__granne:hover b{ color:var(--gul); }
.sidfot__slut{
  margin-top:22px; padding-top:14px; border-top:1px solid #2A3238;
  font-family:var(--m); font-size:11.5px; letter-spacing:.05em; color:#78838A;
}

/* --- kaklappen: en lapp i vanstra nederkanten, inte en list ------------- */
.kaklapp{
  position:fixed; right:20px; bottom:20px; z-index:40; max-width:340px;
  background:var(--natt); color:#D8DCD8; border-top:3px solid var(--gul);
  padding:16px 18px 14px;
}
.kaklapp p{ font-size:13.5px; line-height:1.55; margin:0 0 12px; }
.kaklapp a{ color:#D8DCD8; border-bottom:1px solid var(--gul); }
.kaklapp__knappar{ display:flex; gap:10px; }
.kaklapp button{
  cursor:pointer; font-family:var(--m); font-size:12px; letter-spacing:.06em;
  padding:8px 14px; border-radius:0;
}
.kaklapp__ja{ background:var(--gul); color:var(--bl); border:1px solid var(--gul); }
.kaklapp__nej{ background:transparent; color:#D8DCD8; border:1px solid #4A545B; }
.kaklapp__nej:hover{ border-color:#8C979E; }

/* --- skarmbredder ------------------------------------------------------- */
@media(max-width:1000px){
  .tavla__rad{ grid-template-columns:44px 104px 1fr; }
  .tavla--utan-amne .tavla__rad{ grid-template-columns:58px 140px 1fr; }
.tavla__amne{ display:none; }
  .kvarter__grid{ grid-template-columns:repeat(2,1fr); }
  .sidfot__grid{ grid-template-columns:1fr 1fr; }
  .amnen{ grid-template-columns:repeat(2,1fr); }
  .ingang__text{ columns:1; }
}
@media(max-width:760px){
  body{ font-size:16px; }
  .huvud__inre{ padding:20px 0 14px; }
  .huvud__lage{ min-width:0; width:100%; }
  .huvud__vy{ height:52px; }
  .meny__val a{ padding:11px 12px; font-size:12.5px; }
  .meny__sok{ width:100%; padding:0 0 10px; }
  .meny__sok input{ width:100%; }
  .ingang__rubrik{ max-width:none; }
  .tavla__rad{ grid-template-columns:1fr; gap:6px; padding:14px 16px; }
  .tavla__nr{ display:none; }
  .notis,.notis--utan-bild{ grid-template-columns:1fr; gap:10px; }
  .notis__bild{ order:-1; }
  .notis__datum{ padding-top:0; }
  .korta{ grid-template-columns:1fr; }
  .korta__val{ border-right:0; }
  .lage__celler{ grid-template-columns:1fr; gap:16px; }
  .kvarter__grid{ grid-template-columns:1fr; }
  .sidfot__grid{ grid-template-columns:1fr; gap:24px; }
  .spalt{ grid-template-columns:1fr; }
  .rad,.rad--utan-bild{ grid-template-columns:1fr; gap:10px; }
  .rad__bild{ order:-1; }
  .amnen{ grid-template-columns:1fr; }
  .almanacka,.plansch{ grid-template-columns:1fr; }
  .artikel,.blad{ padding:22px 18px 28px; }
  .avsnitt__namn{ white-space:normal; }
  .kaklapp{ left:12px; right:12px; bottom:12px; max-width:none; }
}