/* ===== KEYCODE – bokning och CRM. Samma tokens som site.css (terminaltemat). ===== */
:root{
  color-scheme:dark;
  --bg:#05090b; --bg2:#0a1115; --bg3:#0f191e; --bd:#1b2a31; --bd2:#26363e;
  --fg:#e8efe9; --dim:#8fa3a9; --faint:#75868c;
  --amb:#f07a1a; --amb2:#ffb347;
  --ok:#3ddc84; --warn:#e3a008; --danger:#c8402f; --danger-t:#ff7a66;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-sm:6px; --r:10px; --r-lg:14px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; }
body{ margin:0; background:var(--bg); color:var(--fg); font:400 16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; min-height:100vh; }
body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:400; background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px); mix-blend-mode:multiply; opacity:.35; }
::selection{ background:var(--amb); color:#000; }
a{ color:var(--amb2); }
button,input,select,textarea{ font:inherit; color:inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--amb2); outline-offset:3px; }
h1,h2,h3,h4{ font-family:var(--mono); font-weight:800; letter-spacing:-.03em; margin:0; line-height:1.15; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mono{ font-family:var(--mono); }
.dim{ color:var(--dim); }
.faint{ color:var(--faint); }
.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,32px); }

/* Topp */
.top{ border-bottom:1px solid var(--bd); background:rgba(5,9,11,.92); position:sticky; top:0; z-index:50; backdrop-filter:blur(6px); }
.top .wrap{ display:flex; align-items:center; gap:16px; min-height:60px; flex-wrap:wrap; }
.logo{ font:800 17px var(--mono); color:var(--fg); text-decoration:none; letter-spacing:-.02em; }
.logo b{ color:var(--amb); }
.logo i{ font-style:normal; color:var(--amb); animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .logo i{ animation:none; } }
.top .sp{ flex:1; }
.who{ font:500 13px var(--mono); color:var(--dim); }
.who b{ color:var(--fg); }

/* Knappar och fält */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:var(--r-sm); border:1px solid var(--amb);
  background:var(--amb); color:#1a0d02; font:800 14px var(--mono); cursor:pointer; text-decoration:none; }
.btn:hover{ background:var(--amb2); border-color:var(--amb2); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn.ghost{ background:transparent; color:var(--amb2); }
.btn.ghost:hover{ background:rgba(240,122,26,.12); }
.btn.small{ min-height:34px; padding:6px 12px; font-size:12.5px; }
.btn.danger{ background:transparent; border-color:var(--danger); color:var(--danger-t); }
.btn.danger:hover{ background:rgba(200,64,47,.15); }
label{ display:block; font:600 13px var(--mono); color:var(--dim); margin:14px 0 6px; }
label .req{ color:var(--amb); }
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=search],input:not([type]),select,textarea{
  width:100%; padding:10px 12px; background:var(--bg2); border:1px solid var(--bd2); border-radius:var(--r-sm); color:var(--fg); }
textarea{ min-height:90px; resize:vertical; }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--amb); outline-offset:1px; border-color:var(--amb); }
.check{ display:flex; gap:10px; align-items:flex-start; font:400 14px var(--sans); color:var(--dim); margin:14px 0; }
.check input{ margin-top:4px; width:18px; height:18px; accent-color:var(--amb); flex:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.fel{ color:var(--danger-t); font-weight:700; }
.okmsg{ color:var(--ok); font-weight:700; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
@media (max-width:620px){ .row{ grid-template-columns:1fr; } }

/* Kort */
.card{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r-lg); padding:clamp(16px,3vw,26px); }
.pill{ display:inline-block; font:700 11.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:99px; border:1px solid var(--bd2); color:var(--dim); }
.pill.ok{ color:var(--ok); border-color:rgba(61,220,132,.4); }
.pill.warn{ color:var(--warn); border-color:rgba(227,160,8,.4); }
.pill.bad{ color:var(--danger-t); border-color:rgba(255,122,102,.4); }
.pill.amb{ color:var(--amb2); border-color:rgba(240,122,26,.5); }

/* ---------- Bokningssidan (Calendly-upplägg) ---------- */
.bok{ padding:clamp(20px,5vw,56px) 0 80px; }
.bok h1{ font-size:clamp(26px,4vw,38px); }
.bok .lead{ color:var(--dim); max-width:640px; margin:10px 0 28px; }
.pers{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
/* Four sellers: a row of four, two by two, or one column, never three and one. */
@media (max-width:1060px){ .pers{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .pers{ grid-template-columns:1fr; } }
.per{ display:flex; gap:14px; align-items:center; text-decoration:none; color:var(--fg); background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r-lg); padding:16px; transition:border-color .15s; }
.per:hover,.per:focus-visible{ border-color:var(--amb); }
.av{ width:56px; height:56px; border-radius:50%; object-fit:cover; background:var(--bg3); border:1px solid var(--bd2); flex:none; display:grid; place-items:center; font:800 18px var(--mono); color:var(--amb); }
.av.big{ width:72px; height:72px; font-size:22px; }
.per b{ display:block; font:800 16px var(--mono); }
.per small{ color:var(--dim); }
.per .go{ margin-left:auto; color:var(--amb); font:800 18px var(--mono); }
.per.team{ border-style:dashed; grid-column:1 / -1; }   /* first available on its own row, the sellers side by side below it */

.panel{ display:grid; grid-template-columns:minmax(220px,300px) 1fr; background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r-lg); overflow:hidden; }
.panel > aside{ padding:24px; border-right:1px solid var(--bd); }
.panel > section{ padding:24px; min-width:0; }
@media (max-width:820px){ .panel{ grid-template-columns:1fr; } .panel > aside{ border-right:0; border-bottom:1px solid var(--bd); } }
.meta{ list-style:none; padding:0; margin:16px 0 0; color:var(--dim); font:500 14px var(--mono); }
.meta li{ margin:6px 0; }
.meta li::before{ content:"> "; color:var(--amb); }
.back{ background:none; border:0; color:var(--amb2); cursor:pointer; padding:0; font:600 13px var(--mono); margin-bottom:14px; }
.typer{ display:grid; gap:10px; margin-top:6px; }
.typ{ text-align:left; background:var(--bg3); border:1px solid var(--bd2); border-radius:var(--r); padding:14px 16px; cursor:pointer; color:var(--fg); }
.typ:hover,.typ:focus-visible{ border-color:var(--amb); }
.typ b{ font:800 15px var(--mono); display:block; }

.valj{ display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:24px; }
@media (max-width:980px){ .valj{ grid-template-columns:1fr; } }
.cal-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cal-h b{ font:800 16px var(--mono); text-transform:capitalize; }
.cal-h button{ background:var(--bg3); border:1px solid var(--bd2); color:var(--fg); width:38px; height:38px; border-radius:50%; cursor:pointer; font:800 16px var(--mono); }
.cal-h button[disabled]{ opacity:.3; cursor:default; }
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal .wd{ text-align:center; font:700 11px var(--mono); color:var(--faint); text-transform:uppercase; padding:4px 0; }
.cal button{ aspect-ratio:1; border-radius:50%; border:0; background:transparent; color:var(--faint); font:600 14px var(--mono); cursor:default; min-width:0; }
.cal button.led{ background:rgba(240,122,26,.14); color:var(--amb2); cursor:pointer; font-weight:800; }
.cal button.led:hover{ background:rgba(240,122,26,.28); }
.cal button.vald{ background:var(--amb); color:#1a0d02; }
.cal button.idag{ box-shadow:inset 0 0 0 1px var(--bd2); }
.tz{ font:500 12.5px var(--mono); color:var(--faint); margin-top:12px; }
.tider h3{ font-size:14px; margin:4px 0 12px; text-transform:capitalize; }
.tider{ position:relative; display:flex; flex-direction:column; min-width:0; }
/* On wide screens the list fills its column down to the calendar's last line, where the docked Next button sits. */
.tider .lista{ display:grid; align-content:start; gap:8px; flex:1 1 0; min-height:240px; overflow:auto; overscroll-behavior:contain; scrollbar-width:none; padding:3px; margin:0 -3px; }
.tider .lista::-webkit-scrollbar{ display:none; }
/* No scrollbar (as on Apple devices): the edges fade where more times are hidden, and the column keeps the same
   inset to the card's right edge as to its bottom, so the docked button sits square in the corner. The 3 px padding
   keeps a keyboard focus ring from being cut off by the list's edge. */
.tider .lista.rullar{ padding-bottom:72px; }
.tider .lista.mer-upp{ -webkit-mask-image:linear-gradient(transparent, #000 18px); mask-image:linear-gradient(transparent, #000 18px); }
.tider .lista.mer-ned{ -webkit-mask-image:linear-gradient(#000 calc(100% - 18px), transparent); mask-image:linear-gradient(#000 calc(100% - 18px), transparent); }
.tider .lista.mer-upp.mer-ned{ -webkit-mask-image:linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image:linear-gradient(transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.valj .tz{ margin-bottom:0; }
@media (max-width:980px){ .tider .lista{ flex:none; min-height:0; max-height:360px; } }
.tid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0fr); column-gap:0; transition:grid-template-columns .5s var(--fjader), column-gap .5s var(--fjader); }
.tid.vald{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:8px; }
.tid button{ min-height:44px; background:transparent; border:1px solid var(--amb); color:var(--amb2); border-radius:var(--r-sm); font:800 14px var(--mono); cursor:pointer; }
.tid button:hover{ background:rgba(240,122,26,.12); }
.tid.vald button.t{ background:var(--bd2); border-color:var(--bd2); color:var(--fg); }
.klar{ text-align:center; padding:12px 0; }
.klar .bock{ font:800 44px var(--mono); color:var(--ok); }
.klar .meta{ display:inline-block; text-align:left; }
.laddar{ color:var(--faint); font:500 14px var(--mono); }
.laddar::after{ content:"_"; animation:blink 1.1s steps(1) infinite; }
.foot{ border-top:1px solid var(--bd); color:var(--faint); font:500 12.5px var(--mono); padding:18px 0 28px; }
.foot a{ color:var(--dim); }

/* ---------- CRM / mötesbokning ---------- */
.tabs{ display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--bd); margin:0 0 20px; scrollbar-width:thin; }
.tabs button{ background:none; border:0; border-bottom:2px solid transparent; color:var(--dim); padding:12px 14px; font:700 13.5px var(--mono); cursor:pointer; white-space:nowrap; }
.tabs button[aria-selected=true]{ color:var(--fg); border-bottom-color:var(--amb); }
.app{ padding:20px 0 60px; }
.kpis{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:18px; }
.kpi{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r); padding:14px; }
.kpi b{ display:block; font:800 26px var(--mono); color:var(--amb2); }
.kpi span{ font:600 12px var(--mono); color:var(--dim); text-transform:uppercase; letter-spacing:.05em; }
.tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.tbl th{ text-align:left; font:700 11.5px var(--mono); color:var(--faint); text-transform:uppercase; letter-spacing:.06em; padding:8px 10px; border-bottom:1px solid var(--bd2); }
.tbl td{ padding:9px 10px; border-bottom:1px solid var(--bd); vertical-align:top; }
.tbl tr.klick{ cursor:pointer; }
.tbl tr.klick:hover td{ background:var(--bg3); }
.tbl .num{ text-align:right; font-family:var(--mono); }
.scroll{ overflow-x:auto; }
.bar{ font:500 13px var(--mono); color:var(--dim); white-space:pre; line-height:1.5; overflow-x:auto; }
.bar b{ color:var(--amb); font-weight:500; }
.verktyg{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:14px; }
.verktyg > *{ width:auto; }
.verktyg input,.verktyg select{ width:auto; min-width:160px; }
.verktyg input[type=checkbox]{ min-width:0; }
.grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }
.kanban{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:10px; overflow-x:auto; padding-bottom:10px; }
.kol{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r); padding:10px; min-height:120px; }
.kol h3{ font-size:13px; display:flex; justify-content:space-between; color:var(--dim); margin:2px 2px 10px; }
.kol.over{ border-color:var(--amb); }
.affar{ background:var(--bg3); border:1px solid var(--bd2); border-radius:var(--r-sm); padding:10px; margin-bottom:8px; cursor:grab; }
.affar b{ display:block; font:700 13.5px var(--sans); }
.affar small{ color:var(--dim); font-family:var(--mono); }
dialog{ background:var(--bg2); color:var(--fg); border:1px solid var(--bd2); border-radius:var(--r-lg); padding:0; width:min(680px,calc(100vw - 24px)); max-height:calc(100vh - 40px); }
dialog::backdrop{ background:rgba(0,0,0,.7); }
dialog .in{ padding:22px; overflow:auto; max-height:calc(100vh - 40px); }
dialog .x{ float:right; background:none; border:0; color:var(--dim); font:800 20px var(--mono); cursor:pointer; }
.hist{ list-style:none; padding:0; margin:0; }
.hist li{ border-left:2px solid var(--bd2); padding:4px 0 10px 12px; margin-left:4px; }
.hist li small{ color:var(--faint); font-family:var(--mono); }
.hist li p{ margin:2px 0 0; white-space:pre-wrap; }
.vecka{ display:grid; grid-template-columns:repeat(5,minmax(150px,1fr)); gap:8px; overflow-x:auto; }
.vecka.helg{ grid-template-columns:repeat(7,minmax(130px,1fr)); }
.dag{ background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r); padding:8px; min-height:140px; }
.dag h4{ font:700 12.5px var(--mono); color:var(--dim); margin:0 0 8px; text-transform:capitalize; }
.dag .tidk{ display:block; width:100%; margin-bottom:5px; background:transparent; border:1px solid rgba(240,122,26,.6); color:var(--amb2); border-radius:var(--r-sm); padding:6px; font:700 12.5px var(--mono); cursor:pointer; text-align:left; }
.dag .tidk:hover{ background:rgba(240,122,26,.14); }
.dag .mote{ display:block; width:100%; margin-bottom:5px; background:var(--bg3); border:1px solid var(--bd2); border-left:3px solid var(--amb); border-radius:var(--r-sm); padding:6px; font:500 12px var(--sans); text-align:left; color:var(--fg); cursor:pointer; }
.dag .mote.avb{ border-left-color:var(--danger); opacity:.6; text-decoration:line-through; }
.dag .tom{ color:var(--faint); font:500 12px var(--mono); }
.hemlig{ font:800 20px var(--mono); letter-spacing:.12em; color:var(--amb2); background:var(--bg); border:1px dashed var(--amb); border-radius:var(--r-sm); padding:12px; word-break:break-all; }
.toast{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--bg3); border:1px solid var(--amb); color:var(--fg); padding:10px 16px; border-radius:var(--r); font:600 14px var(--mono); z-index:500; max-width:calc(100vw - 32px); }
/* Människokontrollen (Cloudflare Turnstile) i bokningen: rutan får plats på en mobil (300 px bred). */
.bok .manniska{ min-height:65px; margin:4px 0 2px; }
.bok .manniska.fel{ min-height:0; font-size:14px; }

/* ---- Hemsidans stil (keycode.se): CRT-yta, loggan med markör, glödande knappar ---- */
@keyframes blink{50%{opacity:0}}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:399;background:radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.3) 100%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:400;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.45}
@media print{body::before,body::after{display:none}}
.logo.bild{display:inline-flex;align-items:center}
.logo.bild img{height:24px;width:auto;display:block}
.logo-cur{font:800 18px var(--mono);color:var(--amb);margin-left:-10px;animation:blink 1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.logo-cur{animation:none}}

/* ===== Mallen B2: bokningssidan i hemsidans ljusa design (trygghetsblått sidhuvud, orange knappar, Hanken Grotesk) ===== */
:root{ color-scheme:light;
  --bg:#F6F9FB; --bg2:#FFFFFF; --bg3:#F3F6F9; --bd:#D6DFE7; --bd2:#C9D5DF; --fg:#17212B; --dim:#4B5B6B; --faint:#5F6E7C;
  --amb:#F28C28; --amb2:#176B87; --ok:#17705F; --warn:#9A6B0B; --danger:#C83E4D; --danger-t:#C83E4D;
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --rubrik:'Schibsted Grotesk','Hanken Grotesk',system-ui,sans-serif;
  --r-sm:10px; --r:14px; --r-lg:18px; }
body{ font-size:17px; }
body::before, body::after{ display:none !important; }
::selection{ background:#FFE3C4; color:var(--fg); }
h1,h2,h3,h4{ font-family:var(--rubrik); letter-spacing:-.02em; color:#102A43; }
:focus-visible{ outline:3px solid #176B87; }
.top{ background:#173B5C; border-bottom:1px solid #2A5274; backdrop-filter:none; }
.top .wrap{ min-height:72px; }
.logo.bild img{ height:52px; }
.logo-cur{ display:none; }
.who{ font:700 15px var(--sans); color:#E6EEF4; }
.btn{ font:700 16px var(--sans); border-width:2px; color:#17212B; border-radius:var(--r-sm); min-height:48px; padding:0 20px; }
.btn:hover{ background:#E07B17; border-color:#E07B17; }
.btn.ghost{ border-color:#176B87; color:#176B87; }
.btn.ghost:hover{ background:#E6F1F5; }
.btn.danger{ color:var(--danger); }
label{ font:700 15px var(--sans); color:var(--fg); }
label .req{ color:var(--danger); }
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=search],input:not([type]),select,textarea{ background:#fff; border:1.5px solid var(--bd2); border-radius:var(--r-sm); min-height:48px; font:500 16px var(--sans); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:#176B87; box-shadow:0 0 0 3px #E6F1F5; }
.check{ font-size:15px; }
.check input{ accent-color:#176B87; }
.card, .panel, .per{ box-shadow:0 1px 2px rgba(16,42,67,.06); }
.pill{ font-family:'JetBrains Mono', ui-monospace, monospace; }
.per b, .typ b, .cal-h b, .kpi b{ font-family:var(--rubrik); }
.per .go{ color:#176B87; font-family:var(--sans); }
.per:hover,.per:focus-visible,.typ:hover,.typ:focus-visible{ border-color:#176B87; }
.av{ color:#176B87; font-family:var(--sans); background:#E6F1F5; }
.meta{ font:500 15px var(--sans); }
.meta li::before{ content:"✓ "; color:#17705F; }
.back{ font:700 15px var(--sans); color:#176B87; }
.cal button{ font:600 15px var(--sans); color:#8A97A5; }
.cal button.led{ background:#E6F1F5; color:#176B87; }
.cal button.led:hover{ background:#CFE5EE; }
.cal button.vald{ background:#F28C28; color:#17212B; }
.cal .wd, .tz{ font-family:'JetBrains Mono', ui-monospace, monospace; }
.cal-h button{ background:#fff; font-family:var(--sans); }
.tid button{ font:700 15px var(--sans); border:1.5px solid #176B87; color:#176B87; }
.tid button:hover{ background:#E6F1F5; }
.tid.vald button.t{ background:#E6F1F5; border-color:#C9D5DF; color:var(--fg); }
.klar .bock{ color:#17705F; font-family:var(--sans); }
.laddar{ font-family:var(--sans); }
.laddar::after{ content:""; }
.foot{ font:500 14px var(--sans); background:#173B5C; color:#9FB2C3; border-top:0; }
.foot a{ color:#E6EEF4; }
.toast{ background:#102A43; color:#fff; border:0; font:600 15px var(--sans); }
.fel{ color:var(--danger); } .okmsg{ color:#17705F; }
.bok .mono{ font-family:var(--sans); font-weight:600; font-size:16px; color:var(--dim); }

/* ===== Booking: the Next button (2026-10-22). It grows in beside the chosen time; when that time scrolls out of the
   list it flies to the column's bottom right corner, level with the calendar's last line, and flies back when the time
   shows again (boka.js, nastaKnapp). The spring is sampled from a damped spring with about 4 % overshoot. ===== */
:root{ --fjader:cubic-bezier(.32,.72,0,1); }
@supports (transition-timing-function:linear(0,1)){
  :root{ --fjader:linear(0, 0.0496, 0.1669, 0.3149, 0.468, 0.6103, 0.7329, 0.8323, 0.9083, 0.9632, 1.0001, 1.0226, 1.0343, 1.0383, 1.0372, 1.0332, 1.0277, 1.0217, 1.0161, 1.0113, 1.0072, 1.0041, 1.0018, 1.0003, 0.9993, 0.9988, 0.9985, 0.9985, 1); }
}
button.nasta, .nasta-flyg{ box-sizing:border-box; min-width:0; min-height:44px; margin:0; padding:0 12px; overflow:hidden; white-space:nowrap; background:#F28C28; border:1.5px solid #F28C28; color:#17212B; border-radius:var(--r-sm); font:700 15px var(--sans); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -10px rgba(242,140,40,.95); }
button.nasta{ cursor:pointer; transition:transform .2s var(--fjader), background-color .15s, border-color .15s; }
button.nasta:hover{ background:#E07B17; border-color:#E07B17; }
button.nasta:active{ transform:scale(.96); }
button.nasta.in{ animation:nasta-in .5s var(--fjader) backwards; }
@keyframes nasta-in{ from{ transform:scale(.5); opacity:0; } }
button.nasta[data-lage="av"]{ visibility:hidden; }
button.nasta[data-lage="flyger"]{ opacity:0; }
.nasta .kl, .nasta-flyg .kl{ margin-left:8px; font-weight:600; opacity:.72; font-variant-numeric:tabular-nums; }
/* The dock: a white fade lets the times slide under the button instead of being cut off at its edge. */
.dockyta{ position:absolute; left:0; right:var(--dock-h,0px); bottom:0; padding-top:24px; background:linear-gradient(rgba(255,255,255,0), var(--bg2) 24px); pointer-events:none; opacity:0; transition:opacity .25s ease; }
.dockyta.pa{ opacity:1; }
.dockyta button.nasta{ display:block; width:100%; min-height:52px; pointer-events:auto; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 26px -12px rgba(242,140,40,1), 0 2px 6px rgba(16,42,67,.1); }
.dockyta:not(.pa) button.nasta{ pointer-events:none; }
.nasta-flyg{ position:fixed; left:0; top:0; z-index:60; display:grid; place-items:center; pointer-events:none; will-change:transform, width, height; }
.nasta-flyg > span{ grid-area:1 / 1; }
.nasta-flyg .fran{ opacity:calc(1 - var(--p, 0)); }
.nasta-flyg .till{ opacity:var(--p, 0); }
@media (prefers-reduced-motion:reduce){ .tid, .dockyta, button.nasta{ transition:none; } button.nasta.in{ animation:none; } }

/* ===== Visual sweep (2026-10-23): the booking page in the site's typefaces, an even grid of sellers and the footer at the
   bottom of the window. ===== */
.cal .wd, .tz{ font-family:var(--sans); letter-spacing:.04em; }
/* .pers columns: see the top of the file (four, two or one). */
.per.team{ border-style:solid; background:#F3F8FB; }
body{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
body > main, body > .wrap, body > #app{ flex:1 0 auto; }