/* =====================================================================
   Vinsales — ramen. Delad av alla sidor.
   Tokens, typsnitt, bas, toppmeny, CTA-systemet, sektioner och sidfot.
   Sidspecifik CSS ligger inline på respektive sida.
   ===================================================================== */

:root{
  /* ---- ytor: blåskiffer, mättnaden faller jämnt utåt ---- */
  --bg:#15181D; --bg-sunken:#0E1014; --bg-panel:#1E2127; --bg-raised:#26292F; --bg-footer:#070809;
  /* ---- ytaccent: rör bara kanter, aldrig text ---- */
  --line:#283043; --line-strong:#323F5D;
  /* ---- förgrundsaccenter ---- */
  --accent:#E0A83E; --accent-hover:#F0BB56; --accent-ink:#15181D;
  --pa-guld:#533E0E;                /* dämpad text på guldbandet */
  /* Rankan på guldbandet går bakom texten och måste därför vara ljusare än den.
     Mörk ranka under mörk ingress ger 1,8:1 och äter upp texten; den här ger
     7,1:1 för ingressen och 11,5:1 för rubriken. */
  --ranka-pa-guld:#F2D79C;
  --secondary:#B8A4E3; --secondary-hover:#CBBBEE; --secondary-strek:#464258;
  --rose:#E8A9A0; --positive:#5FAE8A;
  /* ---- spårens toner: platta, framräknade mot --bg-panel ---- */
  --accent-wash:#33302A;    --accent-kant:#50442D;    --accent-regel:#9C7936;
  --secondary-wash:#2F2F3C; --secondary-kant:#464358; --secondary-regel:#8276A1;
  --rose-wash:#343034;      --rose-kant:#534446;      --rose-regel:#A17976;
  --positive-kant:#3F554A;
  /* Vinrankan ritas på guldbandet, där allt är omvänt. Egna toner, egna namn. */
  --vin-mark:#8A6A1E; --vin-rank:#5C4617; --vin-karna:#3A2A58;
  /* logotypplattor på --bg-raised, och banan när den ligger på grundytan */
  --logo-wash:#393631; --logo-kant:#534733; --bana:#624F2A;
  /* rankan i sidfotens djup: ljus nog att synas mot svärtan, mörk nog att
     texten står kvar ovanpå den */
  --ranka-sidfot:#2E2419;
  /* ---- text ---- */
  --ink:#F0EEE8; --ink-soft:#9B9A93; --ink-faint:#918F89;
  color-scheme:dark;
}
@font-face{font-family:'Fraunces';src:url('/fonts/Fraunces-display.woff2')format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('/fonts/Fraunces-Italic-display.woff2')format('woff2');font-weight:100 900;font-style:italic;font-display:swap;}
@font-face{font-family:'Schibsted Grotesk';src:url('/fonts/SchibstedGrotesk.woff2')format('woff2');font-weight:400 900;font-style:normal;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/IBMPlexMono-Regular.woff2')format('woff2');font-weight:400;font-style:normal;font-display:swap;}

*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
     font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:16px;line-height:1.6;}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);
             z-index:60;background:var(--bg);}
a{color:inherit;}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.02em;
         text-wrap:balance;margin:0;}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums;}
.wrap{max-width:1080px;margin:0 auto;
      padding-left:max(20px,env(safe-area-inset-left,0px));
      padding-right:max(20px,env(safe-area-inset-right,0px));}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;}

/* ===================== TOPPMENY ===================== */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
        /* panelen under listen positioneras mot den här */
        background:transparent;border-bottom:1px solid transparent;
        transition:background .2s ease,border-color .2s ease;}
.topbar.fast{background:var(--bg-sunken);border-bottom-color:var(--line);}
.topbar .wrap{display:flex;align-items:center;gap:10px 40px;min-height:68px;flex-wrap:wrap;}
.ordmarke{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:21px;
          letter-spacing:-.015em;text-decoration:none;flex:none;}
.ordmarke em{font-style:italic;color:var(--accent);}
.huvudmeny{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;}
.huvudmeny > li{position:relative;}
/* Menylänkarna får ett hårstreck vid hovring i stället för en platta.
   Plattan hör till knappar; en länk ska inte låna knappens form. */
.mlank{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 4px;
       font-size:15px;color:var(--ink-soft);text-decoration:none;background:none;border:0;
       font-family:inherit;cursor:pointer;transition:color .16s ease;}
.mlank::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;
              background:var(--line-strong);transform:scaleX(0);transform-origin:left center;
              transition:transform .2s ease;}
.mlank:hover,li:focus-within > .mlank{color:var(--ink);}
.mlank:hover::after,li:focus-within > .mlank::after{transform:scaleX(1);}
.huvudmeny > li + li{margin-left:16px;}
.pil{width:7px;height:7px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;
     transform:rotate(45deg) translate(-2px,-2px);opacity:.55;
     transition:transform .16s ease,opacity .16s ease;}
.mlank:hover .pil,li:focus-within .pil{opacity:1;}
.hogersida{margin-left:auto;display:flex;align-items:center;gap:0;}
.logga-in{font-size:15px;color:var(--ink-soft);text-decoration:none;padding:10px 2px;
          transition:color .16s ease;}
.logga-in:hover{color:var(--ink);}
.nav-strek{width:1px;height:22px;background:var(--line-strong);margin:0 20px;flex:none;}
.bara-mobil{display:none;}
.menyknapp{display:none;width:42px;height:38px;padding:0;margin-left:2px;background:none;
           border:1px solid var(--line-strong);border-radius:6px;cursor:pointer;
           flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.menyknapp span{display:block;width:17px;height:1.6px;border-radius:1px;background:var(--ink);
                transition:transform .2s ease,opacity .18s ease;}
.menyknapp[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg);}
.menyknapp[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menyknapp[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg);}

.panel{position:absolute;top:calc(100% + 10px);left:-4px;min-width:304px;z-index:51;
       background:var(--bg-panel);border:1px solid var(--line-strong);border-radius:12px;padding:8px 0;
       opacity:0;visibility:hidden;transform:translateY(-5px);
       transition:opacity .15s,transform .15s,visibility .15s;}
li:hover > .panel, .panel:focus-within, .panel.oppen{opacity:1;visibility:visible;transform:none;}
li:hover .pil, .mlank[aria-expanded="true"] .pil{transform:rotate(225deg) translate(-2px,-2px);}
.panel a{display:flex;align-items:flex-start;gap:13px;padding:11px 18px;text-decoration:none;}
.panel a:hover{background:var(--bg-raised);}
.panel .mi{width:19px;height:19px;flex:none;margin-top:2px;color:var(--ink-faint);}
.panel a:hover .mi{color:var(--ink-soft);}
.panel .t{font-size:14.5px;color:var(--ink);}
.panel .u{font-size:12.5px;color:var(--ink-faint);line-height:1.45;}
.panel hr{border:0;border-top:1px solid var(--line);margin:8px 0;}

/* ===================== CTA-SYSTEMET ===================== */
/* Primär: fylld guld. En per vy. — Sekundär: kontur. — Tertiär: lavendel textlänk.
   Inverterad: på guldbandet byter primären till mörk platta med guld text. */
/* font-family och cursor måste sättas ut: en <button> ärver varken typsnitt
   eller handpekare från body, till skillnad från en <a>. Utan dem renderas
   formulärets knapp i Arial och känns död under muspekaren. */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border-radius:5px;
     font-family:inherit;font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap;
     border:1px solid transparent;cursor:pointer;position:relative;
     transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;}
/* Knappen tänds genom att en ring slås upp utanför den — sigillets dubbelring i
   miniatyr. En glöd hade krävt box-shadow, och sådana har vi inte: ljuset i den
   här paletten görs med linjer och ton, inte med oskärpa. */
.btn::after{content:"";position:absolute;inset:-4px;border-radius:9px;pointer-events:none;
            border:1px solid transparent;transition:border-color .16s ease;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
/* Knappen byter fortfarande ton och får sin ring — bara utan övergång och utan
   lyft. Tillståndet ska synas; det är rörelsen som bads bort. */
@media(prefers-reduced-motion:reduce){
  .btn,.btn::after,.vidare{transition:none;}
  .btn:hover{transform:none;}
}
.btn-primar{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.btn-primar:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn-primar:hover::after{border-color:var(--accent-regel);}
.btn-sekundar{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-sekundar:hover{background:var(--bg-panel);border-color:var(--ink-faint);}
.btn-sekundar:hover::after{border-color:var(--line-strong);}
.btn-inverterad{background:var(--accent-ink);color:var(--accent);border-color:var(--accent-ink);}
.btn-inverterad:hover{background:var(--bg-footer);border-color:var(--bg-footer);}
.btn-inverterad:hover::after{border-color:var(--pa-guld);}
/* Fokusmarkeringen ligger på outline-offset 3px, alltså praktiskt taget där
   hovringsringen sitter. Två linjer så nära varandra läses som en suddig kant
   och gör fokus otydligt, så ringen står tillbaka när tangentbordet styr.
   Regeln måste stå efter varianterna ovan — samma specificitet, sist vinner. */
.btn:focus-visible::after{border-color:transparent;}
.btn-lg{padding:15px 28px;font-size:15.5px;}
.vidare{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--secondary);
        text-decoration:none;border-bottom:1px solid var(--secondary-strek);padding-bottom:1px;
        transition:color .16s ease,border-bottom-color .16s ease;}
.vidare:hover{color:var(--secondary-hover);border-bottom-color:var(--secondary-hover);}

/* ===================== SEKTIONER ===================== */
.band{background:var(--bg-sunken);border-block:1px solid var(--line);}
.sek{padding-block:clamp(60px,8.5vw,100px);}
.sek-smal{padding-block:clamp(44px,6vw,66px);}
/* Föräldralösa rader. Ett ensamt ord på sista raden läser som ett fel i
   sättningen, och en mätning av hela sajten hittade 36 sådana. text-wrap:pretty
   låter webbläsaren ombryta stycket så att sista raden bär sin vikt. Det är en
   hint, inte en garanti — därför mäts resultatet, inte bara regeln. */
p,li{text-wrap:pretty;}

.etikett{--prick:var(--line-strong);
         display:flex;align-items:center;gap:11px;font-size:13px;font-weight:600;
         color:var(--ink-soft);margin:0 0 16px;}
/* Märket före etiketten var ett stycke av biets flygbana. Biet är borta, och
   ett murgrönsblad i stället höll inte: under tjugo pixlar blir vilket treflikigt
   blad som helst en klump, och gravyrens streck blir gröt. Kvar blir ett
   hårstreck — tyst, och utan att låtsas vara något det inte är. Tonen går
   fortfarande via --prick, precis som när märket var prickar. */
.etikett::before{content:"";width:24px;height:1px;flex:none;background:var(--prick);}
.sek-rubrik{font-size:clamp(27px,3.7vw,37px);line-height:1.16;max-width:19ch;}
.sek-lede{font-size:16.5px;line-height:1.65;color:var(--ink-soft);max-width:56ch;margin:16px 0 0;}

/* ===================== MURGRÖNAN ===================== */
/* Gravyren ligger som en mask över en platt ton — samma mekanik som
   logotypplattorna. Formen kommer ur filen, färgen ur en token, så rankan byter
   ton med ytan den ligger på i stället för att bära en egen. Ingen opacitet:
   en dämpad ranka är en egen namngiven ton, inte en nedtonad guldton.
   Höjden följer bildens eget förhållande, så bara bredden behöver sättas.
   Rankan är alltid aria-hidden och ligger bakom texten: ett ornament i
   marginalen, aldrig innehåll. */
/* display:block behövs — rankan skrivs som ett <span>, och en inline-ruta tar
   varken bredd eller höjd. */
.ranka{display:block;background-color:var(--ranka-ton,var(--bana));aspect-ratio:2168/2109;
       -webkit-mask-image:url('/bilder/murgrona.svg');mask-image:url('/bilder/murgrona.svg');
       -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
       -webkit-mask-position:center;mask-position:center;
       -webkit-mask-size:contain;mask-size:contain;}
/* Utan mask blir rutan en fylld rektangel — värre än ingen ranka alls. */
@supports not ((-webkit-mask-image:url('/bilder/murgrona.svg')) or (mask-image:url('/bilder/murgrona.svg'))){
  .ranka{display:none;}
}

/* sidfot: tre spalter som fyller bredden, och en ranka som växer in ur hörnet.
   Sigillet som tidigare avslutade sidan är borta — rankan gör samma arbete, men
   i marginalen i stället för mitt i spalten. Den ligger i en egen djup ton:
   ljus nog att synas mot sidfotens svärta, mörk nog att texten står kvar ovanpå. */
footer{position:relative;overflow:hidden;background:var(--bg-footer);}
footer > .wrap{position:relative;z-index:1;}
.fot-ranka{position:absolute;z-index:0;right:-104px;bottom:-146px;
           width:min(34%,390px);--ranka-ton:var(--ranka-sidfot);
           transform:rotate(-14deg) scaleX(-1);pointer-events:none;}
.fot-topp{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:40px clamp(44px,7vw,96px);
          padding-block:84px 64px;}
.fot-brand{max-width:42ch;min-width:0;}
.fot-brand .ordmarke{font-size:25px;display:inline-block;margin-bottom:16px;}
.fot-brand .slogan{font-size:15px;line-height:1.65;color:var(--ink-soft);margin:0;}
.fot-kol{min-width:0;}
.fot-kol .etikett{margin-bottom:16px;}
.fot-kol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:14.5px;}
.fot-kol a{color:var(--ink-soft);text-decoration:none;white-space:nowrap;}
.fot-kol a:hover{color:var(--ink);}
.fot-kol a.mejl{color:var(--secondary);}
.fot-kol a.mejl:hover{color:var(--secondary-hover);}
/* Nederst en rad i stället för en mittställd fotnot: det juridiska till vänster,
   orten till höger. Raden bär sidans botten utan att något ornament behövs. */
.fot-botten{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
            border-top:1px solid var(--line);padding-block:30px 46px;}
.fot-legal{font-size:12.5px;line-height:1.7;color:var(--ink-faint);margin:0;}
.fot-ort{font-size:12.5px;line-height:1.7;color:var(--ink-faint);margin:0;}
@media(max-width:820px){
  .fot-topp{grid-template-columns:minmax(0,1fr) auto;gap:36px 40px;padding-block:64px 48px;}
  .fot-brand{grid-column:1 / -1;}
  .fot-ranka{width:300px;right:-90px;bottom:-110px;}
}
@media(max-width:520px){
  .fot-topp{grid-template-columns:minmax(0,1fr);}
  .fot-brand{grid-column:auto;}
  .fot-botten{flex-direction:column;align-items:flex-start;gap:8px;padding-block:26px 40px;}
  .fot-ranka{display:none;}
}

/* Under 900 px blir menyn en utfällbar panel: bara ordmärket och bokningsknappen
   ligger kvar i listen, resten fälls ut. Samma brytpunkt som flygbanorna. */
@media(max-width:900px){
  .topbar .wrap{flex-wrap:nowrap;gap:10px;min-height:58px;}
  .menyknapp{display:flex;}
  .logga-in-desktop{display:none;}
  .bara-mobil{display:block;}
  .ordmarke{font-size:19px;}
  .btn{padding:9px 15px;font-size:13.5px;}

  #huvudnav{position:absolute;left:0;right:0;top:100%;z-index:49;
            background:var(--bg-sunken);border-bottom:1px solid var(--line);
            max-height:0;overflow:hidden;visibility:hidden;
            transition:max-height .24s ease,visibility .24s;}
  /* Två alltid uppfällda paneler gör menyn hög. Den får använda hela skärmen
     under listen, så att en post inte kapas på mitten. */
  #huvudnav.oppen{max-height:calc(100vh - 58px);max-height:calc(100dvh - 58px);
                  overflow-y:auto;overscroll-behavior:contain;visibility:visible;}
  .huvudmeny{flex-direction:column;align-items:stretch;gap:0;
             padding:max(16px,env(safe-area-inset-left,0px)) 0 14px;}
  .huvudmeny > li{border-bottom:1px solid var(--line);}
  .huvudmeny > li:last-child{border-bottom:0;}
  .mlank{width:100%;justify-content:flex-start;border-radius:0;font-size:16px;
         padding:15px max(20px,env(safe-area-inset-left,0px));color:var(--ink);}
  .mlank:hover{background:var(--bg-panel);}
  /* Gruppnamnen är rubriker på mobil, inte klickbara rader — panelerna ligger
     ändå uppfällda. */
  .mgrupp{color:var(--ink-faint);font-size:12.5px;font-weight:600;letter-spacing:.05em;
          text-transform:uppercase;padding:16px max(20px,env(safe-area-inset-left,0px)) 4px;
          pointer-events:none;}
  .mgrupp::after{display:none;}

  /* Båda uppmaningarna ligger överst i menyn i stället för i listen, där den gula
     knappen annars trängdes ihop med hamburgaren. */
  .meny-cta{display:flex;gap:10px;border-bottom:1px solid var(--line);
            padding:14px max(20px,env(safe-area-inset-left,0px));}
  .meny-cta .btn{flex:1;padding:13px 14px;font-size:15px;}
  /* Alla knappar lämnar listen på mobil, oavsett variant — på /boka är den
     sekundär och stannade annars kvar bredvid hamburgaren. */
  .hogersida > .btn{display:none;}
  .pil{display:none;}
  /* undermenyn är alltid uppfälld på mobil — ingen nivå till att öppna */
  .panel{position:static;opacity:1;visibility:visible;transform:none;min-width:0;
         background:transparent;border:0;border-radius:0;padding:0 0 10px;box-shadow:none;}
  .panel a{padding:12px max(20px,env(safe-area-inset-left,0px)) 12px
           calc(max(20px,env(safe-area-inset-left,0px)) + 8px);}
  .panel hr{margin:6px max(20px,env(safe-area-inset-left,0px));}
}


/* ===================== DELADE KOMPONENTER ===================== */
/* så går det till — liggande rader, så de inte ekar tidslinjens fyra kolumner */
.ledger{margin-top:42px;border-top:1px solid var(--line);}
.ledger-rad{display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);gap:10px 44px;
            padding-block:22px;border-bottom:1px solid var(--line);align-items:baseline;}
.ledger-rad .term{display:flex;align-items:baseline;gap:14px;min-width:0;}
.ledger-rad .nr{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:15px;
                color:var(--ink-faint);font-variant-numeric:tabular-nums;flex:none;}
.ledger-rad h4{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:20px;
               letter-spacing:-.018em;margin:0;}
.ledger-rad .desc{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:0;max-width:54ch;}
@media(max-width:700px){.ledger-rad{grid-template-columns:minmax(0,1fr);gap:8px;}}

/* invändningarna — det som stoppar en bokning */
.fragor{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:38px;}
.fkort{background:var(--bg-panel);border:1px solid var(--line);border-radius:14px;padding:26px 24px;min-width:0;}
.fikon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
       color:var(--ink-soft);border:1px solid var(--line-strong);margin-bottom:18px;}
.fikon svg{width:25px;height:25px;}
.fkort h3{font-size:20px;line-height:1.22;margin-bottom:11px;}
.fkort p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:0;}
/* Punkterna sätts som hårfina rader i stället för prickar: ringen bar ingen betydelse,
   och en post som går över två rader hängde illa under den. Samma grepp som ledgern. */
.fkort ul{margin:0;padding:0;list-style:none;font-size:14px;line-height:1.6;color:var(--ink-soft);}
.fkort li{padding-block:11px;border-top:1px solid var(--line);}
.fkort li:last-child{padding-bottom:2px;}

/* ===================== UNDERSIDOR ===================== */
/* Två smala sektioner i rad ska inte lägga sin luft ovanpå varandra. */
.sek-smal + .sek-smal{padding-top:0;}
.ledger.toppen{margin-top:0;}
.underrubrik{font-size:24px;line-height:1.2;margin:58px 0 22px;}
.smulor{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-faint);padding-top:28px;}
.smulor a{color:var(--ink-faint);text-decoration:none;}
.smulor a:hover{color:var(--ink-soft);}
.smulor .nu{color:var(--ink-soft);}
.smulor .delare{color:var(--line-strong);}

.sidtopp{padding-block:clamp(32px,4.4vw,52px) clamp(24px,3.4vw,38px);}
.sidtopp h1{font-size:clamp(31px,4.8vw,45px);line-height:1.1;max-width:17ch;margin:15px 0 0;}
.sidtopp .lede{font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:58ch;margin:20px 0 0;
               text-wrap:pretty;}

.prosa{max-width:66ch;}
.prosa h2{font-size:22px;line-height:1.25;margin:42px 0 12px;}
.prosa h2:first-child{margin-top:0;}
.prosa p{font-size:15px;line-height:1.75;color:var(--ink-soft);margin:0 0 14px;}
.prosa a,.lankfarg{color:var(--secondary);text-decoration:none;border-bottom:1px solid var(--secondary-strek);}
.prosa a:hover,.lankfarg:hover{color:var(--secondary-hover);border-bottom-color:var(--secondary-hover);}
.uppdaterad{font-size:12.5px;color:var(--ink-faint);margin:0 0 36px;}

.tillbaka{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-soft);
          text-decoration:none;}
.tillbaka:hover{color:var(--ink);}
.sidslut{padding-block:38px 64px;}

/* prislistan: samma liggande rader som annars, med en tredje kolumn för beloppet */
.prislista .ledger-rad{grid-template-columns:minmax(0,200px) minmax(0,1fr) auto;}
.prislista .belopp{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
                   font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--ink);white-space:nowrap;}
.prislista .belopp .enhet{color:var(--ink-faint);}
@media(max-width:700px){.prislista .ledger-rad{grid-template-columns:minmax(0,1fr);}}

/* räkneexempel */
.exempel{background:var(--bg-panel);border:1px solid var(--line);border-radius:14px;
         padding:20px 24px 8px;margin-top:20px;min-width:0;}
.exempel-topp{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:14px;
              border-bottom:1px solid var(--line);}
.exempel-topp .namn{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:17px;
                    letter-spacing:-.015em;}
.exempel-topp .markt{margin-left:auto;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
                     color:var(--ink-faint);border:1px solid var(--line-strong);border-radius:20px;
                     padding:3px 10px;}
.exempel .rad{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
              padding-block:12px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-soft);}
.exempel .rad .v{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
                 font-variant-numeric:tabular-nums;font-size:13.5px;white-space:nowrap;}
.exempel .summa{color:var(--ink);border-bottom:0;}
.exempel .summa .v{color:var(--ink);}

/* formuläret */
.boka-rad{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
          gap:clamp(34px,5vw,72px);align-items:start;}
.falt{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;min-width:0;}
.falt label{font-size:13.5px;font-weight:600;color:var(--ink-soft);}
.falt .valfritt{font-weight:400;color:var(--ink-faint);}
.falt input,.falt textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--bg-sunken);
      border:1px solid var(--line-strong);border-radius:6px;padding:11px 13px;width:100%;
      box-sizing:border-box;transition:border-color .16s ease;}
.falt textarea{min-height:104px;resize:vertical;line-height:1.6;}
.falt input:focus,.falt textarea:focus{border-color:var(--accent);outline:none;}
.falt input::placeholder,.falt textarea::placeholder{color:var(--ink-faint);}
.faltpar{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 18px;}
/* Felmeddelande efter ett misslyckat formulärförsök. Rosa betyder det som
   fattas eller kostar, så den hör hemma här. */
.formfel{font-size:14px;line-height:1.6;color:var(--rose);border:1px solid var(--rose-kant);
         background:var(--rose-wash);border-radius:6px;padding:11px 14px;margin:0 0 20px;}
.formfel[hidden]{display:none;}
.formfel a{color:var(--rose);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.formnot{font-size:12.5px;line-height:1.65;color:var(--ink-faint);margin:16px 0 0;max-width:48ch;}
@media(max-width:820px){.boka-rad{grid-template-columns:minmax(0,1fr);}}


/* ===================== VYER OCH RITADE PANELER ===================== */
.vy{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
     gap:clamp(28px,4.6vw,60px);align-items:center;padding-block:clamp(40px,5.4vw,66px);
     border-top:1px solid var(--line);}
.vy .txt{min-width:0;}
.vy h2{font-size:clamp(23px,2.9vw,29px);line-height:1.2;max-width:15ch;margin:12px 0 0;}
.vy .txt p{font-size:15px;line-height:1.7;color:var(--ink-soft);margin:14px 0 0;max-width:42ch;}
.vy ul{margin:22px 0 0;padding:0;list-style:none;max-width:42ch;
       font-size:14px;line-height:1.6;color:var(--ink-soft);}
.vy li{padding-block:10px;border-top:1px solid var(--line);}
.vy:nth-child(even) .txt{order:2;}
@media(max-width:900px){
  .vy{grid-template-columns:minmax(0,1fr);gap:26px;}
  .vy:nth-child(even) .txt{order:0;}
}

/* panelernas skal */
.ruta{background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:14px;
      overflow:hidden;min-width:0;}
.ruta-topp{display:flex;align-items:baseline;gap:12px;padding:14px 18px;
           border-bottom:1px solid var(--line);flex-wrap:wrap;}
.ruta-topp .rub{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:16.5px;
                letter-spacing:-.012em;}
.ruta-topp .ort{font-size:12px;color:var(--ink-faint);}
.ruta-topp .hoger{margin-left:auto;font-size:11.5px;color:var(--ink-faint);}
.ruta section{padding:14px 18px;border-bottom:1px solid var(--line);}
.ruta section:last-child{border-bottom:0;}
.ruta .avdrub{font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
              color:var(--ink-faint);margin:0 0 11px;display:flex;align-items:center;gap:9px;}
.ruta .avdrub .antal{font-size:10.5px;letter-spacing:0;text-transform:none;
      border:1px solid var(--line-strong);border-radius:20px;padding:1px 7px;}
.v{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
   font-variant-numeric:tabular-nums;}

/* rad med liten markör till vänster */
.pr{display:flex;gap:11px;align-items:flex-start;padding-block:7px;}
.pr .mark{flex:none;width:9px;height:9px;border-radius:50%;margin-top:4px;
          border:1.4px solid var(--line-strong);box-sizing:border-box;}
.pr .mark.fylld{background:var(--tc,var(--accent));border-color:var(--tc,var(--accent));}
.pr .inne{min-width:0;display:flex;flex-direction:column;gap:2px;}
.pr .h{font-size:13.5px;color:var(--ink);line-height:1.4;}
.pr .d{font-size:12.5px;color:var(--ink-soft);line-height:1.45;}
.pr .k{font-size:11.5px;color:var(--ink-faint);}
.pr .tid{flex:none;margin-left:auto;font-size:12px;color:var(--ink-faint);padding-left:10px;}

/* tre tal i rad */
.tretal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.tretal .t{font-size:11.5px;color:var(--ink-faint);margin-bottom:3px;}
.tretal .s{font-size:15px;color:var(--ink);}

/* etiketter i panelerna */
.flagga{flex:none;width:68px;box-sizing:border-box;text-align:center;font-size:10.5px;
        font-weight:600;color:var(--tc);border:1px solid var(--tc-kant);
        border-radius:4px;padding:2px 6px;margin-top:2px;}

/* mejlet som blir ett möte */
.mejlruta{font-size:13px;line-height:1.65;color:var(--ink-soft);background:var(--bg-sunken);
      border:1px solid var(--line);border-radius:9px;padding:13px 15px;}
.mejlruta .fran{font-size:11.5px;color:var(--ink-faint);margin-bottom:8px;}
.mejlruta mark{background:none;color:var(--ink);border-bottom:1px solid var(--accent-regel);}
.nerat{display:flex;align-items:center;gap:11px;font-size:11.5px;color:var(--ink-faint);
       padding:13px 18px 2px;}
.nerat::before,.nerat::after{content:"";height:1px;background:var(--line);flex:1;}

/* matchningsstapel */
.match{display:flex;align-items:center;gap:10px;margin-top:5px;}
.match .spar{flex:1;height:4px;border-radius:2px;background:var(--bg-sunken);overflow:hidden;}
.match .spar i{display:block;height:100%;background:var(--secondary-regel);}
.match .tal{font-size:11.5px;color:var(--ink-faint);flex:none;}

/* kalkylstegen */
/* Vinets historik i inköpspanelen: vad som finns, vad som sålts och vad som
   är beslutat framåt. Hette tidigare .kalk och bar kostnadstrappan — namnet
   följde med innehållet ut. */
.historik{display:flex;flex-direction:column;}
.historik .rad{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
     padding-block:6px;font-size:13px;color:var(--ink-soft);}
.historik .rad .v{font-size:12.5px;}
.historik .delsumma{border-top:1px solid var(--line);margin-top:7px;padding-top:9px;color:var(--ink);}
.historik .delsumma .v{color:var(--ink);}
.historik .slut{border-top:1px solid var(--line-strong);margin-top:9px;padding-top:11px;color:var(--ink);}
.historik .slut .namn{font-family:'Fraunces',Georgia,serif;font-size:15.5px;}
.historik .slut .v{font-size:14px;color:var(--rose);}

/* I smala vyer hamnar panelens högerställda uppgift på egen rad. Då ska den
   börja till vänster som allt annat, inte hänga ensam i kanten. */
@media(max-width:560px){
  .ruta-topp{gap:3px 12px;}
  .ruta-topp .hoger{margin-left:0;flex-basis:100%;}
}



/* ===================== HJÄLTERUTAN =====================
   En ruta med hel ram. Inuti ligger två lager: texten främst, produktvyn
   bakom. Vyn maskas bort mot båda sidokanterna, starkast just där rubriken
   står — så den vita texten möter nästan tomt mörker medan listan materialiseras
   till höger om den. Djupet kommer av lagringen, inte av dämpad text; ingen
   textnivå behöver sänkas under AA för att bilden ska få rymd. */
.hruta{position:relative;overflow:hidden;isolation:isolate;
       background:var(--bg-panel);border:1px solid var(--line-strong);border-radius:14px;
       padding:var(--hruta-luft) clamp(26px,3.6vw,52px);
       min-height:clamp(390px,31vw,415px);display:flex;align-items:flex-start;
       --hruta-luft:clamp(34px,4.4vw,58px);}

/* Tabellen börjar där texten slutar. Låg den under texten läste orten igenom
   ingressen, och maskade man bort tillräckligt för att slippa det försvann
   namnkolumnen — alltså just den guldrad som binder bilden till rubriken. */
/* Masken verkar i tre riktningar. Åt sidorna så att vyn växer fram ur
   panelen i stället för att börja med en kant, och nedåt så att listan löses
   upp i stället för att kapas av rutans nederkant. En avskärning vid ett
   fönster läser som ett fönster; samma snitt vid en ritad ram läser som ett
   fel. Uttoningen faller på luft innanför panelen, aldrig mitt i ett ord. */
.hruta-data{position:absolute;left:43%;right:0;top:0;bottom:0;z-index:0;
            padding:var(--hruta-luft) 64px 0 54px;pointer-events:none;
            -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 170px),transparent calc(100% - 20px)),
                               linear-gradient(to bottom,#000 calc(100% - 128px),transparent calc(100% - 26px));
            -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to right,#000 calc(100% - 170px),transparent calc(100% - 20px)),
                       linear-gradient(to bottom,#000 calc(100% - 128px),transparent calc(100% - 26px));
            mask-composite:intersect;}
/* Rubriken ska bära sajtens rubrikstil, inte webbläsarens. Flyttades h1 ut ur
   .sidtopp föll den tillbaka på 32px med radhöjd 1,6 medan varje annan sidrubrik
   står på 45px med 1,1 — samma ord, slappare sats. */
.hruta-text{position:relative;z-index:1;max-width:40ch;}
.hruta-text h1{font-size:clamp(31px,4.8vw,45px);line-height:1.1;max-width:17ch;margin:15px 0 0;}
.hruta-text .lede{font-size:17px;line-height:1.65;color:var(--ink-soft);margin:20px 0 0;
                  max-width:42ch;text-wrap:pretty;}

/* Kundkortet. Kortet är smalare än en tabell och behöver ingen minsta bredd
   för att hålla ihop — raderna är tvåradiga i stället för fyrkolumniga, så
   ingenting klipps när rutan smalnar. */
.hk-topp{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
         padding:0 0 14px;border-bottom:1px solid var(--line);}
.hk-topp .namn{font-family:'Fraunces',Georgia,serif;font-size:21px;color:var(--ink);}
.hk-topp .meta{font-size:13px;color:var(--ink-faint);}

/* Siffrorna på en rad, etikett och värde bredvid varandra. Som tre staplade
   kolumner åt de upp höjden som händelserna behöver, och kortet blev en rubrik
   med två rader under i stället för en relation med siffror bredvid. */
.hk-tal{display:flex;flex-wrap:nowrap;gap:8px 26px;align-items:baseline;
        padding:13px 0 14px;border-bottom:1px solid var(--line);}
.hk-tal .hrad{flex:none;}
.hk-tal .hrad{display:flex;align-items:baseline;gap:9px;}
.hk-tal .t{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
           color:var(--ink-faint);}
/* Ett värde får aldrig radbrytas. Bryts "63 100 kr" på mitten läser det som
   två uppgifter i stället för en. */
.hk-tal .s{font-size:16px;color:var(--ink);white-space:nowrap;}

.hk-rub{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
        color:var(--ink-faint);margin:15px 0 2px;}
.hk-h{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:3px 14px;
      align-items:baseline;padding-block:11px;border-bottom:1px solid var(--line);}
.hk-h .h{font-size:16.5px;color:var(--ink);}
.hk-h .d{grid-column:1 / -1;font-size:14.5px;color:var(--ink-soft);}
.hk-h .h{grid-column:1;}
.hk-h .f{grid-column:2;}
.hk-h .f{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
         color:var(--ink-faint);white-space:nowrap;}
/* Ett löfte som ligger kvar är kortets enda guldmarkering — en ankarpunkt för
   ögat, och samma innebörd som rubriken: relationen, inte siffran. */
.hk-h.oppen .h{color:var(--accent-hover);}
.hk-h.oppen .f{color:var(--accent);}

/* Texten syns omedelbart. Datan kommer efter, rad för rad — rubriken ska vara
   läst innan listan börjar röra på sig. Dolt-läget hänger på .js så att ett
   cachat eller blockerat skript ger en synlig vy i stället för en tom ruta. */
@keyframes rad-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.js .hruta-data .hrad{opacity:0;}
.hruta.synlig .hrad{animation:rad-in .5s ease-out forwards;
                    animation-delay:calc(.35s + var(--i) * .07s);}
@media(prefers-reduced-motion:reduce){
  .js .hruta-data .hrad{opacity:1;}
  .hruta.synlig .hrad{animation:none;}
}
/* Två spalter kräver plats för både en ingress och en tabell som inte får
   smalna — ett värde som bryts läser som två. Under ~1080 räcker bredden inte
   till båda: rubriken hinner ikapp tabellen och sista kolumnen klipps. Då
   staplas de i stället, och tabellen får hela bredden. */
@media(max-width:1080px){
  /* Bottenluft även staplat. Med noll slutade kortet på ramen, och en rad som
     är 60 px hög hann inte tona ut innan den kapades av kanten. */
  .hruta{min-height:0;padding-block:34px 24px;flex-direction:column;align-items:stretch;}
  .hruta-text{max-width:none;}
  /* Höjden måste hållas även staplat. Utan tak växer rutan till alla rader och
     hjältebilden blir en helsidestabell — mer tabell än rubrik. Men taket måste
     rymma guldraden med marginal: uttoningen räknas från kortets underkant, så
     ett för lågt tak lägger den över just den rad som bär modulens mening. Vid
     320 px försvann den helt. */
  .hruta-data{position:relative;inset:auto;margin:30px 0 0;padding:0;
              max-height:430px;overflow:hidden;
              -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 128px),transparent calc(100% - 26px));
              -webkit-mask-composite:source-over;
              mask-image:linear-gradient(to bottom,#000 calc(100% - 128px),transparent calc(100% - 26px));
              mask-composite:add;}
}
/* Under ~700 ryms inte fyra kolumner. Att låta tabellen löpa ut ur rutan och
   tona bort åt höger såg riktigt ut men åt upp "138 dgr" — alltså just det tal
   som guldraden finns för. Hellre färre kolumner: namnet och tystnaden är det
   vyn handlar om, order och belopp är stöd. Då ryms raden, och ingen
   sidouttoning behövs. */
@media(max-width:1080px){
  .hk-tal{flex-wrap:wrap;gap:10px 26px;}
}