/* ==========================================================================
   Primorsko — Жилищна сграда, УПИ I кв.18
   Riktning: kustrektorat / ritningsärlighet.
   Papper och sand, furuskugga, stålblått hav. Ingen turkos, inga palmer.
   ========================================================================== */

:root{
  /* --- grund ------------------------------------------------------------ */
  --paper:      #F2EEE6;   /* arkets papper */
  --paper-2:    #E8E2D6;   /* nedtonat papper, sektionsbyte */
  --sand:       #D8C7A6;
  --ockra:      #B08442;
  --ink:        #16191B;   /* bläck — all brödtext */
  --ink-2:      #4A5257;   /* sekundär */
  --ink-3:      #7C858A;   /* svag, etiketter */
  --pine:       #24322B;   /* furuskugga — mörka sektioner */
  --pine-2:     #1A241F;
  --sea:        #46626D;   /* stålblått hav, grågrönt */
  --sineva:     #2F6183;   /* accent — gatan ул."Синева" */
  --sineva-lj:  #6F9DBC;
  --linje:      #C9C0AE;   /* ritningslinje på papper */
  --linje-svag: #DCD5C6;

  /* --- typografi -------------------------------------------------------- */
  --f-text: "Onest", -apple-system, "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Daniel läser i ~1780 px. Basen är medvetet stor. */
  --t-bas: 1.125rem;      /* 18px */
  --t-stor: clamp(1.35rem, 1.6vw, 1.65rem);
  --t-rubrik: clamp(2.1rem, 3.4vw, 3.6rem);
  --t-sektion: clamp(1.7rem, 2.4vw, 2.5rem);
  --t-etikett: 0.78rem;

  /* --- rytm -------------------------------------------------------------- */
  --sp-sektion: clamp(6rem, 11vh, 10rem);
  --marginal: clamp(1.5rem, 5vw, 6rem);
  --matt: 1400px;         /* arkets bredd */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:var(--t-bas);
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* --- gemensamt ---------------------------------------------------------- */
.ark{ max-width:var(--matt); margin-inline:auto; padding-inline:var(--marginal); }

.etikett{
  font-family:var(--f-mono);
  font-size:var(--t-etikett);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
}

/* Måttlinjen — sektionsnumret satt som på en ritning */
.matt-linje{
  display:flex; align-items:center; gap:1rem;
  padding-block:1.1rem;
  border-top:1px solid var(--linje);
  margin-bottom:clamp(2rem,4vw,3.5rem);
}
.matt-linje .nr{
  font-family:var(--f-mono); font-size:var(--t-etikett);
  color:var(--ockra); font-weight:600; letter-spacing:.1em;
}
.matt-linje .titel{
  font-family:var(--f-mono); font-size:var(--t-etikett);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
}

h1,h2,h3{ font-weight:600; line-height:1.08; letter-spacing:-.022em; margin:0; }
h2{ font-size:var(--t-sektion); max-width:20ch; }
h3{ font-size:var(--t-stor); letter-spacing:-.014em; }

p{ margin:0 0 1.1em; max-width:62ch; }
.ingress{ font-size:var(--t-stor); line-height:1.5; color:var(--ink-2); max-width:46ch; }

section{ padding-block:var(--sp-sektion); }

/* ==========================================================================
   Topprad
   ========================================================================== */
.topp{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:1.1rem var(--marginal);
  color:var(--paper);
  transition:background .35s ease, color .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.topp.pa-papper{
  background:rgba(242,238,230,.92);
  backdrop-filter:blur(14px);
  color:var(--ink);
  border-bottom-color:var(--linje);
}
.topp__markt{
  font-family:var(--f-mono); font-size:.8rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
}
.topp__markt span{ opacity:.55; font-weight:400; }
.topp nav{ display:flex; gap:1.6rem; align-items:center; }
.topp nav a{
  font-size:.92rem; text-decoration:none; opacity:.82;
  padding-block:.3rem; border-bottom:1px solid transparent;
}
.topp nav a:hover{ opacity:1; border-bottom-color:currentColor; }
@media (max-width:900px){ .topp nav{ display:none; } }

/* Språkväljaren — bulgariska är inte en eftertanke, den ligger jämsides */
.sprak{ display:flex; gap:.15rem; align-items:center; font-family:var(--f-mono); font-size:.78rem; }
.sprak button{
  font:inherit; background:none; border:0; cursor:pointer; color:inherit;
  padding:.3rem .55rem; letter-spacing:.1em; opacity:.5; border-radius:2px;
}
.sprak button[aria-current="true"]{ opacity:1; font-weight:600; box-shadow:inset 0 -1px 0 currentColor; }
.sprak button:hover{ opacity:.85; }
.sprak .delare{ opacity:.3; }

/* ==========================================================================
   HERO — huset står FRAMFÖR ortnamnet. Det är hela mekaniken.
   ========================================================================== */
.hero{
  position:relative; isolation:isolate;
  height:100svh; min-height:600px;
  overflow:hidden;
  background:var(--pine-2);
  padding:0;
}
.hero__fond{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 62%;
}
/* Djup: mörkna kraftigt uppåt så det stora ordet bär mot den ljusa disen,
   och nedåt så foten fäster. Samma greppet som i referensen. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(9,14,17,.58) 0%, rgba(9,14,17,.34) 24%,
                               rgba(9,14,17,.08) 46%, rgba(9,14,17,0) 62%),
    linear-gradient(to top,    rgba(9,14,17,.78) 0%, rgba(9,14,17,.24) 18%, rgba(9,14,17,0) 38%);
}

/* Ortnamnet — högt och stort. Huset skjuter sedan upp i bokstävernas fot. */
.hero__ort{
  position:absolute; z-index:2;
  left:50%; transform:translateX(-50%);
  top:clamp(7rem, 28vh, 19rem);
  width:max-content; margin:0;
  font-family:var(--f-text);
  font-weight:700;
  font-size:15.8vw;              /* mätt: fyller ~90 % av arket vid 1780 px */
  line-height:.84;
  letter-spacing:-.045em;
  white-space:nowrap;
  color:rgba(255,252,246,.94);
  text-shadow:0 4px 90px rgba(0,0,0,.45);
  user-select:none;
}
html[lang="bg"] .hero__ort{ font-size:14.6vw; }   /* kyrilliskan är bredare */

/* Huset — bottenankrat, ovanpå ordet. <picture>: bär layouten, img fyller. */
.hero__hus{
  position:absolute; z-index:3; display:block;
  left:50%; transform:translateX(-50%);
  bottom:-3.5vh;
  width:min(35%, 640px);          /* AI-visualiseringen är 1:1, inte 1,9:1 — bredden styrs av höjden */
  filter:drop-shadow(0 34px 64px rgba(0,0,0,.55));
}
.hero__hus img{ width:100%; height:auto; }

/* Foten: siffrorna först, som Grok sa.
   Egen mörkning OVANPÅ huset — annars drunknar talen i den ljusa fasaden,
   och den knivskarpa kanten på husets platta får något att lösas upp i. */
.hero__fot{
  position:absolute; inset:auto 0 0 0; z-index:4;
  color:var(--paper);
  padding:clamp(5rem,11vh,8rem) var(--marginal) clamp(1.6rem,4vh,2.8rem);
  background:linear-gradient(to top,
    rgba(9,14,17,.93) 0%, rgba(9,14,17,.86) 28%,
    rgba(9,14,17,.55) 62%, rgba(9,14,17,0) 100%);
  pointer-events:none;
}
.hero__fot a{ pointer-events:auto; }
.hero__fot-inre{
  max-width:var(--matt); margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:2rem 3rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.22);
}
.tal-rad{ display:flex; flex-wrap:wrap; gap:2.6rem 3.4rem; }
.tal{ display:flex; flex-direction:column; gap:.2rem; }
.tal__v{
  font-family:var(--f-mono); font-weight:600;
  font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1;
  letter-spacing:-.02em;
}
.tal__e{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.15em;
  text-transform:uppercase; opacity:.62;
}
.hero__adress{
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.08em;
  opacity:.68; text-align:right; line-height:1.7;
}

/* --- HERO PÅ TELEFON -----------------------------------------------------
   Stående skärm: ordet högt, huset stort och överlappande direkt under.
   Samma mekanik som på bredd — bara omräknad för portrattformat. */
@media (max-width:820px){
  .hero__ort{ font-size:17.2vw; top:11vh; letter-spacing:-.04em; }
  html[lang="bg"] .hero__ort{ font-size:15.8vw; }

  .hero__hus{ width:105%; top:15.5vh; bottom:auto; }

  .hero__fot{ padding-top:19rem; }
  .hero__fot-inre{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
  .hero__adress{ text-align:left; }
  .hero__rubrik{ margin-bottom:1rem; }
  .tal-rad{
    display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.5rem; width:100%;
  }
  .tal__v{ font-size:1.8rem; }
}
@media (max-width:820px) and (max-height:700px){
  .hero__ort{ top:8vh; }
  .hero__hus{ top:12vh; width:92%; }
  .hero__fot{ padding-top:12rem; }
}

/* ==========================================================================
   Sektioner
   ========================================================================== */
.mork{ background:var(--pine); color:var(--paper); }
.mork .matt-linje{ border-top-color:rgba(255,255,255,.18); }
.mork .matt-linje .titel{ color:rgba(255,255,255,.6); }
.mork .ingress{ color:rgba(255,255,255,.72); }
.mork .etikett{ color:rgba(255,255,255,.5); }

.dampad{ background:var(--paper-2); }

/* Två spalter: text vänster, material höger — aldrig kortrutnät */
.spalter{
  display:grid; gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:1000px){
  .spalter{ grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr); }
  .spalter--vand{ grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr); }
}

/* Faktalista i ritningsmanér */
.fakta{ margin:2rem 0 0; padding:0; list-style:none; border-top:1px solid var(--linje); }
.mork .fakta{ border-top-color:rgba(255,255,255,.18); }
.fakta li{
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  padding:.85rem 0; border-bottom:1px solid var(--linje-svag);
  font-family:var(--f-mono); font-size:.92rem;
}
.mork .fakta li{ border-bottom-color:rgba(255,255,255,.1); }
.fakta dt,.fakta .k{ color:var(--ink-2); letter-spacing:.02em; }
.mork .fakta .k{ color:rgba(255,255,255,.62); }
.fakta .v{ font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }

figure{ margin:0; }
figcaption{
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); padding-top:.85rem;
}
.mork figcaption{ color:rgba(255,255,255,.5); }

.bild-ram{ background:#fff; border:1px solid var(--linje); }
.mork .bild-ram{ border-color:rgba(255,255,255,.16); }

/* Fullbreddsbild — en i taget, aldrig ett galleri av småbilder */
.helbild{ margin-block:0; }
.helbild img{ width:100%; height:clamp(340px,62vh,760px); object-fit:cover; }

/* ==========================================================================
   Våningsväljaren
   ========================================================================== */
.vaningar{ display:grid; gap:clamp(2rem,4vw,4rem); grid-template-columns:minmax(0,1fr); }
@media (min-width:1080px){ .vaningar{ grid-template-columns:280px minmax(0,1fr); } }

.snitt{ display:flex; flex-direction:column-reverse; gap:.4rem;
  align-self:start; position:sticky; top:5.5rem; }  /* följer med när man scrollar planen */
.snitt__v{
  width:100%; text-align:left; cursor:pointer;
  background:transparent; color:inherit;
  border:1px solid var(--linje); border-radius:2px;
  padding:.85rem 1rem;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-family:var(--f-mono); font-size:.86rem;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.snitt__v:hover{ border-color:var(--sineva); transform:translateX(3px); }
.snitt__v[aria-selected="true"]{
  background:var(--sineva); border-color:var(--sineva); color:#fff;
}
.snitt__v .kota{ opacity:.7; font-variant-numeric:tabular-nums; }
.snitt__v[aria-selected="true"] .kota{ opacity:.85; }

.plan-yta{ background:#fff; border:1px solid var(--linje); padding:clamp(1rem,2vw,2rem); }
.plan-yta img{ width:100%; height:auto; }

.lgh-rad{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
.lgh-knapp{
  font-family:var(--f-mono); font-size:.8rem; cursor:pointer;
  background:#fff; color:var(--ink);
  border:1px solid var(--linje); border-radius:2px;
  padding:.5rem .8rem;
  display:flex; gap:.6rem; align-items:baseline;
  transition:border-color .16s ease, background .16s ease;
}
.lgh-knapp:hover{ border-color:var(--sineva); }
.lgh-knapp[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.lgh-knapp .yta{ opacity:.6; font-variant-numeric:tabular-nums; }
.lgh-knapp[aria-pressed="true"] .yta{ opacity:.75; }

/* ==========================================================================
   Lägenhetstabellen — läsbar, inte Excel-export
   ========================================================================== */
.tabell-svep{ overflow-x:auto; margin-top:2rem; }
table{ width:100%; border-collapse:collapse; font-family:var(--f-mono); font-size:.9rem; }
caption{ text-align:left; padding-bottom:1rem; color:var(--ink-2); font-family:var(--f-text); }
th,td{ padding:.8rem clamp(.45rem,.62vw,1rem); text-align:right; white-space:nowrap; }
  /* bulgariskans rubriker är längre än svenskans — paddingen får ge med sig */
th:first-child,td:first-child{ text-align:left; padding-left:0; }
th:last-child,td:last-child{ padding-right:0; }
thead th{
  font-size:var(--t-etikett); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; border-bottom:1px solid var(--linje);
}
tbody td{ border-bottom:1px solid var(--linje-svag); font-variant-numeric:tabular-nums; }
tbody tr:hover td{ background:rgba(47,97,131,.06); }
tfoot td{ border-top:2px solid var(--ink); font-weight:600; padding-top:.9rem; }
.typ-flagga{
  display:inline-block; padding:.1rem .5rem; border-radius:2px;
  font-size:.72rem; letter-spacing:.08em;
  background:var(--sand); color:#4A3A1C;
}
.typ-flagga.tre{ background:var(--sineva); color:#fff; }

/* ==========================================================================
   Foten
   ========================================================================== */
.fot{ background:var(--pine-2); color:rgba(255,255,255,.72); padding-block:clamp(3.5rem,7vh,5.5rem); }
.fot a{ color:#fff; }
.fot__rad{ display:flex; flex-wrap:wrap; gap:2.5rem 4rem; justify-content:space-between; }
.fot__block{ min-width:200px; }
.fot__block h4{
  margin:0 0 .8rem; font-family:var(--f-mono); font-size:var(--t-etikett);
  letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.45); font-weight:500;
}
.fot__block p{ margin:0; font-size:.95rem; line-height:1.75; }
.fot__botten{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.06em;
  color:rgba(255,255,255,.42);
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
}

/* --- hjälpare ----------------------------------------------------------- */
[hidden]{ display:none !important; }
.dolj-syn{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{ outline:2px solid var(--sineva); outline-offset:3px; }

/* Heroraden — Groks enda mening under talen */
.hero__rubrik{
  margin:0 0 1.4rem; max-width:none;
  font-size:clamp(1.05rem,1.35vw,1.35rem);
  color:rgba(255,255,255,.9); letter-spacing:-.01em;
}

/* --- planritningen som klickbar lupp ------------------------------------ */
.plan-yta{ position:relative; display:block; width:100%; cursor:zoom-in;
  font:inherit; color:inherit; text-align:left; }
.plan-yta__lupp{
  position:absolute; right:1rem; bottom:1rem;
  width:2.5rem; height:2.5rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:var(--paper);
  font-family:var(--f-mono); font-size:1.2rem; line-height:1;
  opacity:.75; transition:opacity .18s ease, transform .18s ease;
}
.plan-yta:hover .plan-yta__lupp{ opacity:1; transform:scale(1.08); }

.lupp{
  position:fixed; inset:0; z-index:100;
  background:rgba(14,18,20,.94);
  display:grid; place-items:center; padding:clamp(1rem,3vw,3rem);
  cursor:zoom-out; overflow:auto;
}
.lupp__bild{ width:100%; max-width:1900px; height:auto; background:#fff; cursor:default; }
.lupp__stang{
  position:fixed; top:1.2rem; right:1.6rem;
  width:2.75rem; height:2.75rem; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; border:0;
  font-size:1.5rem; line-height:1; cursor:pointer;
}
.lupp__stang:hover{ background:rgba(255,255,255,.26); }

/* --- volymmodellen ------------------------------------------------------ */
.volym{ margin-bottom:1.6rem; border:1px solid var(--linje); background:#fff; }
.volym__duk{ width:100%; height:clamp(340px,44vh,520px); }
.volym__duk canvas{ display:block; width:100%; height:100%; }
.volym__reglage{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 1rem; border-top:1px solid var(--linje-svag);
}
.volym__reglage button{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.06em;
  cursor:pointer; background:#fff; color:var(--ink);
  border:1px solid var(--linje); border-radius:2px; padding:.45rem .8rem;
}
.volym__reglage button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.volym__not{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); }
@media (max-width:640px){ .volym__not{ display:none; } }

/* Partnerloggan i foten — guldet i den ligger nära sajtens ockra */
.fot__block--logga img{
  width:190px; height:auto; margin-top:.2rem;
  opacity:.92; transition:opacity .2s ease;
}
.fot__block--logga a:hover img{ opacity:1; }
/* loggblocket saknar rubrik — linjera dess överkant med de andra blockens text */
.fot__block--logga{ padding-top:1.9rem; }

/* ==========================================================================
   TELEFON — meny, läsbarhet, svepbara ytor
   Sajten hade ingen navigation alls under 900 px innan detta.
   ========================================================================== */
.topp__meny{ display:none; }

@media (max-width:900px){
  .topp{ flex-wrap:wrap; gap:.75rem 1rem; padding-block:.85rem; }
  .topp__markt{ font-size:.72rem; letter-spacing:.14em; white-space:nowrap; }
  .topp__markt span{ display:none; }          /* «УПИ I · кв.18» bröt raden */

  .topp__meny{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:2.4rem; height:2.4rem; padding:0;
    background:none; border:0; cursor:pointer; order:3;
  }
  .topp__meny span{
    display:block; height:1.5px; width:1.4rem; background:currentColor;
    transition:transform .22s ease, opacity .22s ease;
  }
  .topp__meny[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
  .topp__meny[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

  .topp nav{
    display:none; order:4; width:100%;
    flex-direction:column; gap:0;
    border-top:1px solid currentColor; margin-top:.25rem; padding-top:.25rem;
  }
  .topp nav.oppen{ display:flex; }
  .topp nav a{
    padding:.85rem .25rem; font-size:1rem; opacity:.9; text-align:left;
    border-bottom:1px solid rgba(128,128,128,.22);
  }
  .topp nav a:last-child{ border-bottom:0; }
  .topp.meny-oppen{ background:rgba(242,238,230,.98); backdrop-filter:blur(14px); color:var(--ink); }
}

@media (max-width:640px){
  /* Daniels läsbarhetsgolv — inget under 13 px på en telefon */
  :root{ --t-bas:1.06rem; --t-etikett:.82rem; }
  .fakta li{ font-size:.94rem; }
  table{ font-size:.9rem; }
  th,td{ padding:.7rem .55rem; }
  .tal__e{ font-size:.76rem; }
  .volym__not{ font-size:.76rem; }
  .typ-flagga{ font-size:.8rem; padding:.15rem .55rem; }
  figcaption{ font-size:.8rem; }
  .fot__botten{ font-size:.78rem; }

  /* svepbara ytor ska SYNAS att de sveper */
  .tabell-svep, .plan-yta{
    -webkit-overflow-scrolling:touch;
    background:
      linear-gradient(to right, var(--paper) 30%, rgba(242,238,230,0)) left / 32px 100% no-repeat,
      linear-gradient(to left,  var(--paper) 30%, rgba(242,238,230,0)) right / 32px 100% no-repeat;
  }
  .dampad .tabell-svep{
    background:
      linear-gradient(to right, var(--paper-2) 30%, rgba(232,226,214,0)) left / 32px 100% no-repeat,
      linear-gradient(to left,  var(--paper-2) 30%, rgba(232,226,214,0)) right / 32px 100% no-repeat;
  }
  .volym__duk{ height:clamp(280px,42vh,380px); }
  .snitt{ position:static; }
  .lupp__stang{ top:.8rem; right:.8rem; }
}

@media (max-width:640px){
  /* Ritningen i lupp: bred nog att läsa, dra för att panorera */
  .lupp{ place-items:start; padding:3.2rem .5rem 1rem; }
  .lupp__bild{ width:290%; max-width:none; }
}

/* --- visualiseringarna: fullbredd, en i taget ---------------------------- */
.vis{ background:var(--pine); color:var(--paper); padding-bottom:0; }
.vis .matt-linje{ border-top-color:rgba(255,255,255,.18); }
.vis .matt-linje .titel{ color:rgba(255,255,255,.6); }
.vis__bild{ margin:0; }
.vis__bild img{
  display:block; width:100%;
  height:clamp(340px,76vh,800px);
  object-fit:contain;              /* hela huset ska synas — inte beskäras */
  background:var(--pine-2);
}
.vis__bild figcaption{
  padding:.9rem var(--marginal) 2.2rem;
  color:rgba(255,255,255,.55);
}
.vis__bild:last-child figcaption{ padding-bottom:0; }
@media (max-width:640px){
  .vis__bild img{ height:auto; max-height:70vh; }
  .vis__bild figcaption{ padding-bottom:1.6rem; }
}