.second {display:flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;width: 100%;}
.two {width:45%;padding:1rem;margin-bottom:1%;border-radius:5px;display:flex; flex-direction:column;}
.two img {margin-bottom:.75rem;height: 300px;width: 100%;object-fit: cover;border-radius:5px;}
.two h3 {font-size:1.4rem;}
.two .buttons2 {justify-content: flex-end;margin-top:auto;}

@media (max-width: 800px) {.two {width:100%;margin:.5rem 1.5rem;}}
@media (max-width: 600px) {
.two {width:100%;margin:.5rem 1rem;}.meny {font-size:110%;}}

.container2 {
display:flex;
flex-direction: row;
flex-wrap: wrap;
overflow: initial;
max-width:92rem;
margin: 0 auto;
padding:3rem 1.5rem;
}

.container2:after {content: " ";display: block;clear: both;}

@media (max-width:800px){
.container2 {flex-direction: column;padding:0;}
}


/* 304215 */
:root {
--bg-color: #ffffff;
--secondary-bgColor:#dfe7e5;
--text-color: #222222;
--text-colorInv: #fff;
--primaryColor: #001921;
--primaryContrastColor: #000000;
--secondaryColor: #023444;
--secondaryContrastColor: #103f1b;
--headerBg: rgba(255,255,255,0);
--headerBgAct: #fff;
--footerBg:var(--primaryContrastColor);
--footerColor: #ffffff;
--footerContrastColor:var(--secondary-bgColor);
--hoverColor: #aaaaaa;
--overlayColor: rgba(0,0,0,0.5);
--curtainColor: rgba(255, 255, 255,.9);
}



body {font-family: "Outfit", sans-serif;line-height:1.5;font-weight: 400;font-size:16px;}
h1, h2, h3, h4, h5, h6 {font-size: 2rem;font-weight: 700;padding-bottom:0.75rem;text-wrap:balance;color:var(--primaryColor);}
h4 {font-size:1.4rem;color:var(--primaryContrastColor);}
main {overflow: hidden;}
.site-header .branding {height:100px;}
#home-slide-bg h1 {
font-size: 1.6rem;font-weight: 400;
padding-bottom:0.75rem;
font-weight: 400;
}
#home-slide-bg {height: 850px;}
.h_overlay {max-height: 850px;}

.ghost {height: 100px;}
#home-slide-bg h2 {font-size: 4rem;padding-bottom: 0.75rem;line-height: 1;}
hr {}
#home-slide-bg hr {height: 4px;width: 8rem;margin:0.75rem;background:var(--text-color);}
.small {padding-bottom: 1.5rem;text-wrap:balance;font-size: 1.6rem;}
.cta-block h2 {color:var(--primaryColor);}
.cta-block .paragraph {color:var(--primaryColor);}
.cta-block {background-color:var(--secondary-bgColor);}
.undersidatitel h1 {font-size:2rem;padding-bottom:0.25rem;}
.mobile-nav {background-color:var(--secondary-bgColor);}
.mobile-nav a {color: var(--text-color);}
footer h6 {font-size: 1.2rem;padding:bottom:.75rem;margin:0;color: var(--text-colorInv);}
.clr-f {background-color:var(--footerBg);color:var(--footerColor);}
.clr-x {background-color: #000000;}
.clr-0 {background-color: var(--bg-color);}
.clr-1 {background-color: var(--secondary-bgColor);}
.clr-2 {background-color: var(--primaryContrastColor);color: var(--text-colorInv);}
.clr-3 {background-color: var(--secondary-bgColor);color: var(--text-color);}

blockquote {margin-left:1.5rem;font-size:130%;padding:1rem 1.5rem;color:var(--text-color);border-color:var(--primaryContrastColor);}
.clr-2 blockquote {border-color: var(--secondaryContrastColor);color: var(--secondaryContrastColor);}
.clr-2 h3, .clr-2 h2 {color: var(--text-colorInv);}
.desktop-nav a {font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:1px;}
.desktop-nav a, .desktop-nav a:visited {color:var(--text-colorInv);}
.desktop-nav ul ul a, .desktop-nav ul ul a:visited {color:var(--text-color);}
.desktop-nav a:hover, .desktop-nav a:active {color:var(--hoverColor);border-bottom:0 solid var(--text-colorInv);}
.active .desktop-nav a {color:var(--text-color);}
.else .desktop-nav a {color:var(--text-color);}
.else .desktop-nav a:hover, .else .desktop-nav a:active {color:var(--hoverColor);border-bottom:0 solid var(--hoverColor);}
.active .desktop-nav a:hover, .active .desktop-nav a:active {color:var(--hoverColor);border-bottom:0 solid var(--hoverColor);}
.burger {fill:var(--text-colorInv);}
.active .burger {fill:var(--text-colorInv);}
.else .burger {fill:var(--secondaryColor);}
.intro hr {width:2rem; height:6px; background:var(--primaryContrastColor);margin:1rem auto 1.5rem;}
.intro {
    justify-content: flex-start;}
.intro2 {
    justify-content: center;}

a {color: var(--primaryContrastColor);text-decoration: none;transition: color 0.3s ease;word-break:break-word;}
a:hover {color: var(--hoverColor);}
a:active {color: var(--hoverColor);}
footer a {color: var(--footerColor);}
footer a:hover {color: var(--hoverColor);}
footer .st0 {fill: var(--footerColor);}
.clr-2 a {color:var(--footerColor);}
.clr-2 a:hover {color:var(--footerColor);}
.intro img {border-radius:0;}
.kapitelrub {font-size:1rem;color:var(--primaryContrastColor);letter-spacing:1px;text-transform:uppercase;font-weight:400;padding-bottom:.5rem;}

.fstart h3 {font-size:1.4rem;}

.buttons1 {font-weight:700;font-size:.9rem;padding:14px 24px;background-color: var(--primaryColor);border:0 solid var(--text-colorInv);color: var(--text-colorInv);margin-right: auto;margin-left: auto;border-radius:0;text-transform:uppercase;}
.buttons1:hover {border:0 solid var(--primaryContrastColor);background-color: var(--secondaryColor);color: var(--text-colorInv);}
.buttons2 {font-weight:700;font-size:.9rem;padding:14px 24px;background-color: var(--primaryColor);border:0 solid var(--text-color);color: var(--text-colorInv);border-radius:0;margin-right: auto;margin-left: 0;text-transform:uppercase;}
.buttons2:hover {border:0 solid var(--text-colorInv);background-color: var(--secondaryColor);color: var(--text-colorInv);}
input.buttons1 {height:100%;border:0 solid var(--text-color)!important;background-color:var(--primaryColor);color:var(--text-colorInv);}
input.buttons1:hover {border: 0 solid var(--hoverColor)!important;color: var(--text-colorInv);}


header .left img {max-height:6rem;padding:15px;width:auto;}
.active header .left img {padding:0 0;}
.active #first-logo {display:none;}
.active #second-logo {display:block;}
.else #first-logo {display:none;}
.else #second-logo {display:block;}
.active .else #second-logo {display:block;}
.center {text-align:center;}
#h-phone {width: 36px;}
#h-phone .st0 {fill:var(--text-colorInv);}
.active #h-phone .st0 {fill:var(--text-colorInv);}
.else #h-phone .st0 {fill:var(--text-color);}

input, select {height: 50px;border-width: 0;padding:0.5rem 0.7rem 0.7rem;border-bottom:1px solid var(--text-color);}
textarea {border: 1px solid var(--text-color);max-height: 120px;padding:0.5rem 0.7rem 0.7rem;margin-bottom:0;}
input:hover, select:hover, textarea:hover {border-bottom:1px solid var(--primaryContrastColor);}
input:focus, input:not([type]):focus, textarea:focus, select:focus {border-width: 0;border-bottom:1px solid var(--text-color);}

input:hover, textarea:hover, select:hover {background-color:#fff;}
textarea {border-width: 0;border-bottom: 1px solid var(--text-color);}
select {margin-bottom:1rem;padding:0.5rem 0.7rem 0.7rem;height:50px;}
#check {font-size:0.5rem;}
input#check {height: fit-content;}

.k-bloc {display:flex;flex-direction: row;align-items: center;min-width: 400px;justify-content: center;width: 100%;}
.k-bloc img {max-width:26px;height: auto;padding:0.5rem 0.5rem 0.5rem 0;border-radius:0;}

.bt-1 {
align-items: flex-start;
text-align: left;
max-width: 50%;
margin: 0 auto 0 0;}

.kontakt {text-align:center;font-size: 110%;padding:3rem 1.5rem;}
.kontakt p {padding-bottom:.75rem;}
.kontakt hr {background:var(--primaryContrastColor);margin:0.5rem auto;width:3rem!important;height:1px;}
.kontakt img {display:inline-block;max-width:30px;}
.accordion {font-size: 120%;margin:.5rem 0 .25rem;background-color:var(--primaryContrastColor);color:var(--text-colorInv);}
.accordion:hover {margin:.5rem 0 .25rem;background-color:var(--hoverColor);}

.accordion:after {content: '+';color: var(--text-colorInv);}
.activeacc:after {content: '-';}
.mover img {
scale: .8;
opacity: .2;
animation: fade-in linear forwards;
animation-timeline: view();
animation-range: entry;
}

@keyframes fade-in {
to { scale: 1; opacity: 1;}
}

.infobox {margin-bottom:1.5rem;background-color: transparent;border:1px solid var(--primaryContrastColor);}
.infobox hr {margin: 0.75rem 0;background:var(--primaryContrastColor);width:100%;height:1px;}
.infobox h4 {color:var(--primaryContrastColor);}
.infobox h3 {color:var(--primaryContrastColor);padding-bottom:0;font-size:1.5rem;}
.infobox p {color:var(--text-color);}
.infobox ul {padding-bottom:0;}
.clr-1 .infobox {border:0 solid var(--text-color);background-color:var(--bg-color);}
.clr-1 .infobox hr {background:var(--text-color);}
.clr-1 .infobox h4, .clr-2 .infobox h3 {color:var(--text-colorInv);}

.boxar {display:flex;flex-wrap: wrap;justify-content: space-between;margin-bottom:1rem;font-size:1rem;width: 100%;}
.t_c h3 {text-align:center;margin:1rem auto 1.5rem;}
.box {display:flex;justify-content: center;flex-direction: column;
    align-items: center;background-color:var(--secondary-bgColor);width:19%;padding:.5rem;border:0 solid #222;margin-bottom:1%;margin-right:0;transition:0.3s ease;border-radius:8px;min-height:150px;text-align:center;}

.box hr {margin: 0.5rem 0;background:var(--text-color);}
.box h4 {padding-bottom:0.5rem;font-size:1.25rem;}
.box h3 {padding-bottom:0.5rem;font-size:1.4rem;}
.box p {padding-bottom:0;}

.row:after {content: "";display: none;clear: both;}
.cols {width: 24%;}

.top-t {justify-content: flex-start;}
.top-t p {padding-bottom:1.5rem;}
.btnl {margin-left:0;}
footer .st0 {fill: var(--footerContrastColor);}
.fotkontakt {align-items: flex-start;padding-bottom: 0;flex-direction: row;}
footer {}
.halva {display:inline-block;width:49%;}
.halva:nth-child(odd) {float:left;}
.halva:nth-child(even) {float:right;}

.blog-date {color:var(--text-color)!important;margin-top: 0 !important; float:none!important;}
.blog-post hr {width: 100%;height: 1px;border: 0;background:var(--primaryContrastColor)!important;margin: .5rem auto 1.5rem!important;}
.blog-post h3 {margin-bottom: 0 !important;font-size: 1.6rem !important;line-height: 1.15 !important;}
#blog-list {display: none!important;}
#other-posts-header {display: none;}
.panel {margin: 0 0 1rem;}
.col-2b {display:flex;    align-items: center;
    justify-content: flex-start;}
.col-2b img {max-width:100px;padding:.5rem;}
#fenix {max-width:160px;}
@media (max-width: 1024px) {
.cols {width:24%;}

.box {width: 48.6%;margin: .75rem .25rem;}
h1, h2, h3, h4, h5, h6 {font-size: 1.6rem;}
.bt-1 {max-width: 60%;}
}

@media (max-width: 800px) {
.produkter {margin: 1rem 1rem;}
.produkt {width:48.9%;margin-bottom:1rem;}
.cols {width:49.3%;}
.col-2b {display:block;}
#home-slide-bg {height: 650px;}
#home-slide-bg h1 {font-size: 1.4rem;}
#home-slide-bg h2 {font-size: 3rem;padding-bottom: .75rem;line-height: 1}
.small {font-size: 1.4rem;padding-bottom: 1rem;}
.cta-block h2 {font-size: 1.8rem;}
.box {width: 46.8%;margin: .75rem .75rem;}
}
strong {font-weight:700;}
@media (max-width: 600px) {
.produkter {flex-direction: column;}
.produkt {width:100%;}
.cols {width:100%;}

header .left img {width:180px;height:auto;padding:0;}
h1, h2, h3, h4, h5, h6 {font-size: 1.5rem;line-height:1.2;}
.bt-1 {max-width: 100%;}
#home-slide-bg h2 {font-size: 2.6rem;}
#home-slide-bg h1 {font-size: 1.2rem;max-width: 300px;}
.small {font-size: 1.2rem;}
.k-bloc {flex-direction: column;align-items: center;min-width: 400px;align-content: center;justify-content: center;}
.k-bloc img {max-width:30px;height: auto;padding: 0.2rem 0.4rem 0.2rem 0rem;}
.cta-block h2 {font-size: 2rem;}
.undersidatitel h1 {padding-bottom:0.5rem;}
.undersidatitel hr {width:10rem;}
.boxar {display:flex;}
.box {width:100%;min-height:100px;margin: .5rem 1rem;}
#gone {display:none;}
.halva {display:inline-block;width:48%;}
blockquote {margin-left:.5rem;}}

.intro2 {
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
padding:3rem;
}


.intro2:nth-child(odd) {padding-left:0;}
.intro2:nth-child(even) {padding-right:0;}
.intro2 p:last-child {padding-bottom:0;}
.intro2 img {object-fit:cover;height:100%;}

@media (max-width: 1024px) {
.intro2 {padding:1.5rem;}
.intro2:nth-child(odd) {padding-left:0;}
.intro2:nth-child(even) {padding-right:0;}

}


@media (max-width: 800px) {
.intro2 {width:100%;}
.intro2:nth-child(odd) {padding:2rem 1.5rem;}
.intro2:nth-child(even) {padding:2rem 1.5rem;}
}

@media (max-width: 380px) {#home-slide-bg h2 {font-size: 2.2rem;}}
@media (max-width: 340px) {#home-slide-bg h2 {font-size: 2rem;}.small {font-size: 1.2rem;} header h1, h2, h3, h4, h5, h6 {font-size: 1.3rem;line-height:1.2;}.box {margin:1rem;}}

.desktop-nav ul ul {
display: none;
position: absolute;
list-style-type:none;
background-color: #fff;
z-index: 10;
padding: 0.5rem;
transition: .5s ease-in-out;
transition-timing-function: ease-in-out;
width:130px;
box-shadow: 0 2px 16px 0 rgba(0,0,0,0.2);
}

.desktop-nav ul ul a {padding: 0 0.3em 0.3em;display: block;}
.desktop-nav ul ul a:hover {color: var(--hoverColor);}


.desktop-nav ul li:hover ul {
display:block;
}
.desktop-nav li {padding-left: 1.5rem;}


/* Dropdown Button (lilla pilen i menyn) */


 

.dropdown {position: relative;display: inline-block;-webkit-transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in;
transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in, transform 0.5s 0.2s cubic-bezier(0.4, 0, 0.3, 0.3);}
.dropdown-content a:hover {color: #000;-webkit-transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in;
transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in, transform 0.5s 0.2s cubic-bezier(0.4, 0, 0.3, 0.3);}

.dropdown-content {
display: none;
position: relative;
background-color: transparent;
min-width: 100%;
z-index: 1;
overflow: auto;
margin-top:0;
-webkit-transition: background 0.3s ease, height 0.3s ease, min-height 0.3s ease;
transition: background 0.3s ease, height 0.3s ease, min-height 0.3s ease, transform 0.5s 0.2s cubic-bezier(0.4, 0, 0.3, 0.3);
}
.solo {margin-left: auto;margin-right: auto;}
.solo img {scale: 1;opacity: 1;}
.dropdown-content a {
color: #000;
padding: 0;
text-decoration: none;
display: block!important;
font-size:0.9em;
line-height:1.6;
font-weight:600;
text-align:right;
-webkit-transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in;
transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in, transform 0.5s 0.2s cubic-bezier(0.4, 0, 0.3, 0.3);
}
.soc {margin-right: 0.5rem;}
.dropdown-content a:hover {color: #000;}
.mobile-nav li a:hover {color: #a6a6a6;}
.show {display:block;-webkit-transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in;
transition: background 0.3s ease, height 0.3s ease-in, min-height 0.3s ease-in, transform 0.5s 0.2s cubic-bezier(0.4, 0, 0.3, 0.3);}



#ig, #fb {display:inline-block;}
@media (max-width: 800px){
.tallimg {object-fit:cover;width:100%;height:400px;}}


.dropbtn {
position:relative;
background-color: transparent;
color: #000;
padding: 0;
border: none;
cursor: pointer;
}

.dropbtn::before { 
content: "▲";
margin-right: 0.3rem;
width: 18px;
transform : rotate(180deg);
display: inline-block;
padding-top: 0.2em;
font-size: 0.6em;
}

.dropbtn::before:onclick { 
content: "▲";
margin-right: 0.3rem;
width: 18px;
display: inline-block;
}
.dropbtn::after {display:none;}

.dropbtn:hover, .dropbtn:focus {text-decoration:none;}


.dropbtn {
position:relative;
background-color: transparent;
color: #000;
padding: 0;
border: none;
cursor: pointer;
}

.dropdown {position: relative;display: inline-block;
-webkit-transition: 0.7s ease;
transition: transform 0.7s ease;
}

.dropdown-content a:onclick {color: #000;
-webkit-transition: 0.7s ease;
transition: transform 0.7s ease;
}

.dropdown-content {display: none;position: relative;}

.dropdown-content a {
color: #000;
display: block!important;
height:fit-content;
}

.dropdown-content a:hover {color: #000;}

.show {display:block;-webkit-transition: 0.7s ease;
transition: transform 0.7s ease;}

#myDropdown a {font-size:1.3rem;color:#000;text-align:right;}
#myDropdown {padding-bottom:0.3rem;}
#tagg {color:#9fb49f;}

/* ===== Quotes Slider ===== */
.quotes-slider{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.qs-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.qs-btn:disabled{
  opacity: .35;
  cursor: not-allowed;
}

.qs-viewport{
  overflow: hidden;
  width: 100%;
  touch-action: pan-y; /* tillåt vertikal scroll, vi hanterar horisontell swipe */
}

.qs-track{
  display: flex;
  gap: 16px;
  transition: transform 350ms ease;
  will-change: transform;
 align-items: flex-start;
}

/* 3 synliga per gång (desktop) */
.quote-card{
  flex: 0 0 calc((100% - 32px) / 3); /* 2 gaps á 16px */
  border-radius: 14px;
  background: #fff;
  padding: 16px;
}

.quote-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.quote-avatar{
  width: 90px;
  height: 90px;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(0,0,0,.05);
}

.quote-name{
  margin: 0;
  font-weight: 700;
}

.quote-title{
  margin: 2px 0 0;
  opacity: .75;
  font-size: 14px;
}

.quote-body{
  display: grid;
  gap: 10px;
}

.quote-text{
  margin: 0;
  line-height: 1.55;
}

/* Responsivt */
@media (max-width: 980px){
  .quote-card{ flex-basis: calc((100% - 16px) / 2); } /* 2 synliga */
}
@media (max-width: 640px){
  .quotes-slider{ grid-template-columns: 1fr; gap: 10px; }
  .qs-btn{ width: 100%; height: 42px; border-radius: 10px; }
  .qs-prev{ order: 2; }
  .qs-viewport{ order: 1; }
  .qs-next{ order: 3; }
  .quote-card{ flex-basis: 100%; } /* 1 synlig */
}

/* Behåll befintlig klass om den används */
.op-50-0{ opacity: .5; }
</style>

<script>
(function(){
  const slider = document.querySelector(".quotes-slider");
  if(!slider) return;

  const viewport = slider.querySelector(".qs-viewport");
  const track = slider.querySelector(".qs-track");
  const prevBtn = slider.querySelector(".qs-prev");
  const nextBtn = slider.querySelector(".qs-next");
  const cards = () => Array.from(track.querySelectorAll(".quote-card"));

  let index = 0;

  const getPerView = () => {
    const w = window.innerWidth;
    if (w <= 640) return 1;
    if (w <= 980) return 2;
    return 3;
  };

  const getStep = () => {
    const list = cards();
    if(list.length === 0) return 0;
    const cardW = list[0].getBoundingClientRect().width;
    const gap = parseFloat(getComputedStyle(track).gap) || 0;
    return cardW + gap;
  };

  const clampIndex = () => {
    const list = cards();
    const perView = getPerView();
    const maxIndex = Math.max(0, list.length - perView);
    index = Math.max(0, Math.min(index, maxIndex));
    return maxIndex;
  };

  const setTranslate = (x) => {
    track.style.transform = `translateX(${x}px)`;
  };

  const update = () => {
    const list = cards();
    if(list.length === 0) return;

    const maxIndex = clampIndex();
    const step = getStep();
    const x = -(step * index);

    track.style.transition = "transform 350ms ease";
    setTranslate(x);

    prevBtn.disabled = index === 0;
    nextBtn.disabled = index === maxIndex;
  };

  prevBtn.addEventListener("click", () => { index -= 1; update(); });
  nextBtn.addEventListener("click", () => { index += 1; update(); });
  window.addEventListener("resize", update);

  /* ===== Swipe (touch) ===== */
  let startX = 0;
  let startY = 0;
  let startTranslate = 0;
  let isDragging = false;
  let hasDecided = false;
  let isHorizontal = false;

  const getCurrentTranslateX = () => {
    const style = window.getComputedStyle(track);
    const matrix = new DOMMatrixReadOnly(style.transform);
    return matrix.m41; // translateX
  };

  const onTouchStart = (e) => {
    if(!e.touches || e.touches.length !== 1) return;
    const t = e.touches[0];

    startX = t.clientX;
    startY = t.clientY;

    startTranslate = getCurrentTranslateX();
    isDragging = true;
    hasDecided = false;
    isHorizontal = false;

    track.style.transition = "none";
  };

  const onTouchMove = (e) => {
    if(!isDragging || !e.touches || e.touches.length !== 1) return;
    const t = e.touches[0];

    const dx = t.clientX - startX;
    const dy = t.clientY - startY;

    if(!hasDecided){
      hasDecided = true;
      isHorizontal = Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 6;
    }

    if(!isHorizontal) return; // låt sidan scrolla vertikalt

    // stoppa "rubber band" och sidscroll i iOS när vi swipar horisontellt
    e.preventDefault();

    const list = cards();
    if(list.length === 0) return;

    const perView = getPerView();
    const maxIndex = Math.max(0, list.length - perView);
    const step = getStep();

    const minTranslate = -(step * maxIndex);
    const maxTranslate = 0;

    // lite "motstånd" vid kanterna
    let next = startTranslate + dx;
    if(next > maxTranslate) next = maxTranslate + (next - maxTranslate) * 0.25;
    if(next < minTranslate) next = minTranslate + (next - minTranslate) * 0.25;

    setTranslate(next);
  };

  const onTouchEnd = (e) => {
    if(!isDragging) return;
    isDragging = false;

    const list = cards();
    if(list.length === 0) return;

    const step = getStep();
    const current = getCurrentTranslateX();
    const delta = current - startTranslate; // negativ om vi swipat vänster

    // Tröskel för att byta kort
    const threshold = Math.min(80, step * 0.25);

    if(Math.abs(delta) > threshold){
      if(delta < 0) index += 1; else index -= 1;
    }
    update();
  };

  viewport.addEventListener("touchstart", onTouchStart, { passive: true });
  viewport.addEventListener("touchmove", onTouchMove, { passive: false }); // behövs för preventDefault
  viewport.addEventListener("touchend", onTouchEnd, { passive: true });
  viewport.addEventListener("touchcancel", onTouchEnd, { passive: true });

  update();
})();
</script>