:root{--blue:#0878ff;--blue2:#21a0ff;--navy:#020a18;--navy2:#07152b;--ink:#09111f;--muted:#5a6473;--line:#dfe5ee;--white:#fff;--radius:10px;--shadow:0 10px 30px rgba(2,16,45,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff}button,a{font:inherit}.container{width:min(1180px,calc(100% - 48px));margin:auto}.site-header{height:76px;padding:0 max(24px,calc((100% - 1180px)/2));display:flex;align-items:center;gap:28px;background:#020712;color:white;position:sticky;top:0;z-index:30;box-shadow:0 8px 20px rgba(0,0,0,.18)}.logo{display:grid;grid-template-columns:28px auto;color:#fff;text-decoration:none;font-weight:900;line-height:1}.logo-icon{font-size:25px;color:var(--blue)}.logo small{grid-column:2;font-size:10px;font-weight:500;margin-top:4px}.logo>span:nth-child(2)>span,.footer-logo span{color:var(--blue2)}.main-nav{display:flex;gap:32px;margin-left:auto}.main-nav a{color:#fff;text-decoration:none;font-size:14px;padding:28px 0 19px;border-bottom:2px solid transparent}.main-nav a:hover,.main-nav a.active{color:var(--blue2);border-color:var(--blue)}.menu-toggle{display:none;background:none;border:0;color:#fff;padding:0;width:26px;height:20px;position:relative;cursor:pointer;flex:none}.menu-toggle span{position:absolute;left:0;right:0;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease,top .25s ease}.menu-toggle span:nth-child(1){top:0}.menu-toggle span:nth-child(2){top:9px}.menu-toggle span:nth-child(3){top:18px}.menu-toggle.is-open span:nth-child(1){top:9px;transform:rotate(45deg)}.menu-toggle.is-open span:nth-child(2){opacity:0}.menu-toggle.is-open span:nth-child(3){top:9px;transform:rotate(-45deg)}@media(prefers-reduced-motion:reduce){.menu-toggle span{transition:none}}.btn{border:0;border-radius:7px;padding:14px 23px;font-weight:800;font-size:13px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:16px;transition:.2s transform,.2s box-shadow}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,#0878ff,#005ddb);color:#fff;box-shadow:0 8px 22px rgba(0,116,255,.35)}.btn-outline{border:1px solid rgba(255,255,255,.75);color:#fff;background:rgba(0,0,0,.18)}.btn-light{border:1px solid #9fb3d3;background:#fff;color:var(--ink)}.btn-white{background:#fff;color:var(--ink)}.hero{height:480px;position:relative;background:#010714;color:#fff;overflow:hidden}.hero-media{position:absolute;inset:0 0 0 39%;background:url('assets/karaokeuthyrning-goteborg.jpg') 66% 25%/cover no-repeat;filter:brightness(1.12)}.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#010714 0%,rgba(1,7,20,0) 10%)}.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 74% 30%,rgba(0,126,255,.15),transparent 40%),linear-gradient(90deg,#010714 0 40%,rgba(1,7,20,.15) 72%,rgba(1,7,20,.35))}.hero-content{position:relative;padding-top:62px}.eyebrow{color:var(--blue);font-size:13px;font-weight:800;margin:0 0 14px}.hero h1{font-size:50px;line-height:1.02;margin:0 0 20px;letter-spacing:-2px}.hero h1 span{color:var(--blue)}.lead{max-width:470px;line-height:1.65;font-size:15px}.hero-actions{display:flex;gap:16px;margin-top:26px}.feature-wrap{position:relative;margin-top:-37px;z-index:4;background:linear-gradient(135deg,#041126,#020915);border:1px solid #214979;color:#fff;border-radius:10px;display:grid;grid-template-columns:repeat(4,1fr);padding:25px 22px;box-shadow:var(--shadow)}.feature{display:flex;gap:15px;padding:0 20px;border-right:1px solid #19375d}.feature:last-child{border:0}.feature i,.step i{width:58px;height:58px;display:grid;place-items:center;border:1.5px solid var(--blue2);border-radius:50%;font-style:normal;color:var(--blue2);font-size:28px;flex:0 0 auto}.feature h3{color:var(--blue2);font-size:14px;margin:4px 0 8px}.feature p{font-size:13px;line-height:1.55;margin:0;color:#d9e2ef}.section{padding:60px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.section-heading h2,.booking-strip h2{margin:0;font-size:27px}.section-heading h2:after{content:"";display:block;width:35px;height:2px;background:var(--blue);margin-top:8px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.card{position:relative;border:1px solid #d8dee8;border-radius:9px;overflow:hidden;box-shadow:var(--shadow);background:#fff}.card img{display:block;width:100%;height:180px;object-fit:cover}.card-icon{position:absolute;top:150px;left:18px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:24px;border:3px solid white}.card-body{padding:25px 20px 22px}.card h3{margin:0 0 10px}.card p{font-size:14px;line-height:1.55;color:#2d3441}.card a{color:var(--blue);font-weight:800;text-decoration:none;font-size:12px}.booking-strip{background:linear-gradient(115deg,#031126,#020915);color:#fff;padding:42px 0}.booking-grid{display:grid;grid-template-columns:1.2fr 1fr 30px 1fr 30px 1fr auto;align-items:center;gap:16px}.booking-strip h2{font-size:20px}.step{display:flex;align-items:center;gap:12px}.step i{width:54px;height:54px}.step b{font-size:22px;color:var(--blue2)}.step span{display:flex;flex-direction:column;gap:5px}.step strong{font-size:13px}.step small{font-size:12px;line-height:1.4;color:#c8d4e5}.arrow{font-size:36px;color:var(--blue)}.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.quotes blockquote{margin:0;padding:24px;border:1px solid #e0e5ed;border-radius:8px;box-shadow:var(--shadow);font-size:14px;line-height:1.55}.quotes blockquote div{color:var(--blue);letter-spacing:2px}.quotes footer{font-weight:700}.cta{background:linear-gradient(90deg,#0b6df0,#0052be);color:#fff;padding:26px 0}.cta .container{display:flex;align-items:center;justify-content:space-between}.cta h2{margin:0 0 5px;font-size:20px}.cta p{margin:0;font-size:13px}.footer{background:#020918;color:#c3cfdf;padding:34px 0 14px;font-size:13px}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:35px}.footer-grid>div{min-width:0}.footer h4{color:#fff;font-size:12px}.footer a{display:block;color:#c3cfdf;text-decoration:none;margin:7px 0}.footer-logo{font-size:19px;font-weight:900;color:#fff}.socials{display:flex;flex-wrap:wrap;gap:10px}.socials a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#0c2146;color:#fff;font-size:17px}.copyright{border-top:1px solid #13213a;margin-top:20px;padding-top:12px}.modal{position:fixed;inset:0;background:rgba(0,5,16,.76);display:none;place-items:center;padding:20px;z-index:100}.modal.open{display:grid}.modal-card{position:relative;background:#fff;width:min(780px,100%);max-height:92vh;overflow:auto;border-radius:14px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.45)}.modal-card h2{margin-top:0}.modal-close{position:absolute;right:18px;top:12px;border:0;background:none;font-size:32px;cursor:pointer}.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}.package{display:flex}.package input{position:absolute;opacity:0}.package span{display:flex;flex-direction:column;gap:10px;border:2px solid #e0e6ef;border-radius:10px;padding:18px;cursor:pointer;width:100%}.package input:checked+span{border-color:var(--blue);background:#f1f7ff}.package>span>b{font-size:16px;font-weight:900;line-height:1.25}.pkg-radio-body{display:flex;flex-direction:column;gap:6px}.pkg-radio-equipment{color:var(--ink);font-size:13px;line-height:1.5}.pkg-radio-sales{color:var(--muted);font-size:12px;line-height:1.5}.pkg-radio-price{margin-top:auto;padding-top:8px;border-top:1px solid #e9edf3;display:flex;flex-direction:column;gap:2px}.package small{color:var(--muted);font-size:12px}.package strong{color:var(--blue);font-size:21px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}.form-grid label{font-size:12px;font-weight:700}.form-grid input,.form-grid select,.form-grid textarea{width:100%;margin-top:6px;border:1px solid #cfd7e3;border-radius:7px;padding:11px;font:inherit}.full{grid-column:1/-1}.form-subsection{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}.form-subsection h3{margin:0 0 6px;font-size:16px}.form-checkbox-label{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:600;margin:14px 0 4px;cursor:pointer}.form-checkbox-label input{margin-top:2px;width:auto}.summary{display:flex;justify-content:space-between;margin:18px 0;padding:15px;background:#f1f7ff;border-radius:8px}.summary strong{color:var(--blue)}.full-btn{width:100%}.form-note{text-align:center;color:var(--muted);font-size:12px}.success{text-align:center;padding:45px}.success div{font-size:52px;color:var(--blue)}.success .icon{width:52px;height:52px;color:var(--blue)}
@media(max-width:900px){.site-header{height:66px}.main-nav{position:absolute;top:66px;left:0;right:0;background:#020712;display:none;flex-direction:column;gap:0;padding:10px 24px}.main-nav.open{display:flex}.main-nav a{padding:8px 0;line-height:1.25}.menu-toggle{display:block;margin-left:auto}.header-book{display:none}.hero{height:auto;min-height:600px}.hero-media{inset:0;background-position:62% 30%;opacity:.55}.hero-overlay{background:linear-gradient(90deg,#010714 0 25%,rgba(1,7,20,.5) 75%,rgba(1,7,20,.25))}.hero h1{font-size:42px}.feature-wrap{grid-template-columns:1fr 1fr;gap:24px}.feature{border-right:0}.booking-grid{grid-template-columns:1fr 1fr}.arrow{display:none}.booking-grid>div:first-child,.booking-grid>.btn{grid-column:1/-1}.footer-grid{grid-template-columns:1fr 1fr 1fr}.cards{gap:15px}}
@media(max-width:640px){.container{width:min(100% - 20px,1180px)}.booking-page-card{padding:18px 14px}.logo small{display:none}.hero-content{padding-top:70px;padding-bottom:80px}.hero h1{font-size:36px}.lead{font-size:14px}.hero-actions{flex-direction:column;align-items:stretch;max-width:260px}.feature-wrap{grid-template-columns:1fr;margin-top:-30px}.feature{padding:5px}.section-heading{align-items:flex-start;gap:20px}.section-heading .btn{display:none}.cards,.quotes{grid-template-columns:1fr}.card img{height:190px}.booking-grid{grid-template-columns:1fr}.booking-grid>div:first-child,.booking-grid>.btn{grid-column:auto}.step{padding:8px 0}.cta .container{flex-direction:column;align-items:flex-start;gap:15px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.package-grid,.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.modal-card{padding:24px 18px}}
.page-hero{background:linear-gradient(115deg,#020918,#06255a);color:#fff;padding:88px 0 72px;position:relative;overflow:hidden}.page-hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(8,120,255,.22);filter:blur(70px);right:-120px;top:-220px}.page-hero .container{position:relative;z-index:1}.page-hero h1{font-size:46px;line-height:1.05;margin:0 0 18px}.page-hero p:not(.eyebrow){max-width:650px;line-height:1.7;color:#d7e5f7}.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}.content-panel{background:#f4f8fe;border:1px solid #dbe7f6;border-radius:14px;padding:30px}.content-panel h2{margin-top:0}.check-list{list-style:none;padding:0;margin:20px 0}.check-list li{padding:9px 0 9px 30px;position:relative}.check-list li:before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:900}.package-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.package-card{border:1px solid #d7e1ef;border-radius:14px;padding:28px;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column}.package-card.featured{border:2px solid var(--blue);transform:translateY(-8px)}.package-card .tag{align-self:flex-start;background:#e9f3ff;color:var(--blue);font-size:11px;font-weight:800;padding:6px 9px;border-radius:999px}.package-card h2{margin:18px 0 4px}.package-price{font-size:28px;font-weight:900;color:var(--blue);margin:8px 0 18px}.package-card .btn{margin-top:auto}.equipment-list{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.equipment-item{display:flex;gap:18px;border:1px solid #dce4ef;border-radius:12px;padding:24px;background:#fff}.equipment-item i{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#eaf4ff;color:var(--blue);font-size:24px;font-style:normal;flex:none}.equipment-item h3{margin:2px 0 8px}.booking-page{background:#f5f8fc}.booking-page-card{margin:auto;background:#fff;border:1px solid #dce4ef;border-radius:16px;padding:34px;box-shadow:var(--shadow)}.booking-page-card .package-grid{margin-bottom:24px}
@media(min-width:900px){.booking-page-card .package-grid{grid-template-columns:repeat(4,1fr)}}
.form-grid{max-width:820px}.info-banner{background:#eaf4ff;border-left:4px solid var(--blue);padding:18px 20px;border-radius:8px;margin-top:20px}.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}.form-error{background:#fdeceb;border-left:4px solid #d64545;color:#7a1f1f;padding:14px 18px;border-radius:8px;margin-top:16px;font-weight:600}.legal-content{max-width:760px}.legal-content h2{margin-top:36px;margin-bottom:10px}.legal-content h2:first-of-type{margin-top:0}.legal-content p{margin-bottom:14px;line-height:1.7}.active-page{color:var(--blue2)!important;border-color:var(--blue)!important}@media(max-width:800px){.content-grid,.package-cards,.equipment-list{grid-template-columns:1fr}.package-card.featured{transform:none}.page-hero h1{font-size:37px}}
@media(max-width:640px){.page-hero{padding:40px 0 32px}.page-hero h1{font-size:clamp(26px,7.2vw,30px)}.page-hero p:not(.eyebrow){margin:0}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
:focus-visible{outline:3px solid #66b5ff;outline-offset:3px}
.audience-section{background:#f7f9fc}.audience-switch{display:flex;gap:8px;padding:6px;background:#eaf1f9;border:1px solid #d7e2ef;border-radius:12px;width:max-content;margin:0 auto 34px}.audience-tab{border:0;background:transparent;padding:14px 34px;border-radius:8px;font-weight:800;color:#3c4a5e;cursor:pointer}.audience-tab.active{background:#fff;color:var(--blue);box-shadow:0 4px 14px rgba(2,16,45,.12)}.audience-panel{animation:audienceIn .18s ease}.audience-intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:25px}.audience-intro h2{font-size:30px;margin:0 0 8px}.audience-intro p:not(.eyebrow){max-width:700px;color:var(--muted);line-height:1.6;margin:0}.vat-badge{white-space:nowrap;border:1px solid #9dc9ff;background:#eaf4ff;color:#006ad9;border-radius:999px;padding:10px 14px;font-size:13px;font-weight:800}.vat-badge.business{background:#edf4ff}.vat-note{font-size:13px;color:var(--muted);font-weight:700;margin:-12px 0 12px}.audience-extra{margin-top:22px;padding:16px 18px;border-left:4px solid var(--blue);background:#fff;border-radius:8px;box-shadow:var(--shadow);font-size:14px}.booking-audience{margin:0 0 30px;width:100%;display:grid;grid-template-columns:1fr 1fr}.audience-choice{position:relative}.audience-choice input{position:absolute;opacity:0}.audience-choice span{display:flex;align-items:center;gap:9px;padding:16px 18px;border:2px solid transparent;border-radius:8px;cursor:pointer;background:transparent}.audience-choice small{margin-left:auto;color:var(--muted)}.audience-choice.active span,.audience-choice input:checked+span{background:#fff;border-color:var(--blue);color:var(--blue)}.form-section{display:flex;align-items:flex-start;gap:13px;margin:10px 0 16px}.form-section h2{font-size:19px;margin:0 0 3px}.form-help{margin:0;color:var(--muted);font-size:13px}.form-step{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:13px;font-weight:900;flex:none}.summary span{display:flex;flex-direction:column;gap:2px}.summary small{color:var(--muted)}
@keyframes audienceIn{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:640px){.audience-switch{width:100%}.audience-tab{flex:1;padding:12px 10px}.audience-intro{align-items:flex-start;flex-direction:column}.booking-audience{grid-template-columns:1fr}.audience-choice small{margin-left:0}.audience-choice span{flex-wrap:wrap}}
.audience-home-cards{grid-template-columns:repeat(2,1fr);max-width:900px}.audience-home-cards .card img{height:210px}.audience-home-cards .card-icon{top:180px}.audience-home-cards .eyebrow{margin:0 0 5px}@media(max-width:640px){.audience-home-cards{grid-template-columns:1fr}}

/* Separate Private / Business navigation architecture */
/* Privat-heron: fotobakgrund (endast hyra-karaoke.html - karaoke-foretag.html paverkas ej).
   Morkt vanster for textkontrast, gradvis transparent mot hoger dar
   sangaren/TV:n ska synas. Position/gradient verifierade mot en simulerad
   crop innan implementation. */
.private-hero{
  background:#020918;
  padding:0;
  overflow:hidden;
}
.private-hero-grid{
  display:grid;
  grid-template-columns:43% 57%;
  align-items:stretch;
  min-height:460px;
}
.private-hero-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:32px 36px 32px 0;
}
.private-hero-text .eyebrow{margin:0 0 10px}
.private-hero-text h1{font-size:50px;line-height:1.08;margin:0 0 14px}
.private-hero-text p:not(.eyebrow){margin:0 0 16px;max-width:520px}
.private-hero-text .hero-trust-row{margin-top:14px}
.private-hero-text .compact-actions{margin-top:18px}
.private-hero-image-wrap{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}
.private-hero-image-wrap:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:7%;
  background:linear-gradient(90deg,#020918 0%,rgba(2,9,24,.88) 32%,rgba(2,9,24,.5) 62%,rgba(2,9,24,0) 100%);
  pointer-events:none;
}
.private-hero-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(1.15) saturate(1.15) brightness(1.05);
}
@media(max-width:900px) and (min-width:641px){
  /* Tablet-luckan mellan desktop-tvakolumnen och den dedikerade mobilvyn:
     istallet for att klamma in 43/57-griden pa en smal skarm, lat bilden
     falla ner under texten i naturlig dokumentordning. */
  .private-hero-grid{display:flex;flex-direction:column;min-height:0}
  .private-hero-text{padding:0}
  .private-hero-image-wrap{overflow:visible}
  .private-hero-image-wrap:after{display:none}
  .private-hero-image{width:100%;height:auto;object-fit:initial;filter:none;border-radius:14px;box-shadow:0 8px 24px rgba(2,16,45,.35)}
}
@media(max-width:640px){
  /* Pa smal skarm blir en beskuren/morklagd fotobakgrund otydlig (bilden
     upplevdes som "osynlig"). Visa den istallet oblskuren som en vanlig
     bild ovanfor rubriken, och lat sjalva heron falla tillbaka till samma
     bla gradient som innan fotot introducerades. */
  .private-hero-grid{display:flex;flex-direction:column;min-height:0}
  .private-hero-image-wrap{order:-1;overflow:visible;margin:0 auto 16px}
  .private-hero-image-wrap:after{display:none}
  .private-hero-text{padding:0}
  .private-hero-text .eyebrow{margin:0 0 14px}
  .private-hero-text h1{font-size:clamp(26px,7.2vw,30px);line-height:1.05;margin:0 0 18px}
  .private-hero-text p:not(.eyebrow){margin:0;max-width:none}
  .private-hero-text .hero-trust-row{margin-top:20px}
  .private-hero-text .compact-actions{margin-top:24px}
  .private-hero-image{display:block;width:100%;height:auto;object-fit:initial;filter:none;border-radius:14px;box-shadow:0 8px 24px rgba(2,16,45,.35)}
  .private-hero{
    background:linear-gradient(115deg,#020918 0%,#06336f 70%,#0878ff);
    padding:36px 0 40px;
  }
}
.audience-hero.business-hero{background:linear-gradient(115deg,#020918 0%,#08214d 70%,#1053a8)}
.compact-actions{margin-top:24px}.compact-actions .btn-outline{color:#fff;border-color:rgba(255,255,255,.6)}
.booking-paths{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 28px}.booking-path{display:flex;justify-content:space-between;align-items:center;gap:14px;border:2px solid #dce5f0;border-radius:10px;padding:15px 18px;color:#17243a;text-decoration:none;background:#fff}.booking-path small{color:var(--muted)}.booking-path.active{border-color:var(--blue);background:#eef6ff;color:var(--blue)}
@media(max-width:640px){.booking-paths{grid-template-columns:1fr}.compact-actions{max-width:none}.compact-actions .btn{width:100%}}

/* Global Private / Business selector */
.audience-topbar{height:36px;background:#01050d;color:#c8d6e9;display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:0 max(24px,calc((100% - 1180px)/2));border-bottom:1px solid #10203a;font-size:12px;font-weight:700;letter-spacing:.02em;position:relative;z-index:60}
.audience-top-label{color:#8294ad;text-transform:uppercase;font-size:10px;letter-spacing:.12em}
.audience-toggle{display:flex;align-items:center;gap:8px}
.audience-toggle-option{border:0;background:none;color:#71839d;font:inherit;font-weight:800;cursor:pointer;padding:3px 2px;transition:color .15s ease}
.audience-toggle-option.active{color:#fff}
.audience-toggle-knob{width:44px;height:23px;border:1px solid #245c9d;border-radius:999px;background:#09203e;padding:2px;cursor:pointer;position:relative;box-shadow:inset 0 0 10px rgba(0,92,210,.2)}
.audience-toggle-knob span{display:block;width:17px;height:17px;border-radius:50%;background:#1687ff;box-shadow:0 0 12px rgba(22,135,255,.65);transform:translateX(0);transition:transform .2s ease}
body[data-site-mode="business"] .audience-toggle-knob span{transform:translateX(19px)}
.audience-tax-note{min-width:92px;color:#8ca0bb;font-size:11px}
body[data-site-mode="business"] .audience-tax-note{color:#9fc8ff}
.site-header{top:0}
.mode-context{display:none}
@media(max-width:640px){
 .audience-topbar{height:40px;gap:8px;padding:0 10px;justify-content:center}
 .audience-top-label{display:none}
 .audience-tax-note{min-width:78px;font-size:10px}
 .audience-toggle{gap:6px}
}

/* ==========================================================================
   Paketkort: Bronze / Silver / Guld / Diamant
   (Migrerat fran mockup-paket.html/mockup-paket.css till skarpa sidorna.)
   ========================================================================== */
@media(min-width:641px){.container.container-wide{width:min(1460px,calc(100% - 48px))}}
.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(10,auto);column-gap:22px;row-gap:0;align-items:start;margin-top:38px}
.tier-card{position:relative;display:grid;grid-template-rows:subgrid;grid-row:span 10;margin-bottom:22px;background:#fff;border:1px solid #dde3ec;border-radius:16px;box-shadow:var(--shadow);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.tier-card.is-featured{border:2px solid var(--blue);box-shadow:0 16px 40px rgba(8,120,255,.2)}
.tier-ribbon{position:absolute;top:-26px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11px;font-weight:900;letter-spacing:.03em;padding:7px 16px;border-radius:999px;box-shadow:0 6px 16px rgba(8,120,255,.35);white-space:nowrap;z-index:2}

.tier-band{grid-row:1;position:relative;padding:11px 10px;text-align:center;border-radius:15px 15px 0 0;overflow:hidden}
.tier-band h3{margin:0;font-size:18px;font-weight:900;letter-spacing:.04em;color:#fff;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.tier-band:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 65%);opacity:0;transition:opacity .3s ease}

/* Metalliska band — flerstopps-gradient (mork -> mellan -> ljus highlight ->
   mellan -> mork) plus ett tunt diagonalt ljussvep for glans. */
.tier-bronze .tier-band{background:
  linear-gradient(100deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.35) 46%,rgba(255,255,255,0) 64%),
  linear-gradient(115deg,#5c3418 0%,#9a6432 22%,#e8c896 46%,#a8672f 66%,#6b3f1d 100%)}
.tier-silver .tier-band{background:
  linear-gradient(100deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.45) 46%,rgba(255,255,255,0) 64%),
  linear-gradient(115deg,#5a636d 0%,#9aa4ae 20%,#f5f7f9 42%,#7c8fa3 64%,#454e58 100%)}
.tier-gold .tier-band{background:
  linear-gradient(100deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.4) 46%,rgba(255,255,255,0) 64%),
  linear-gradient(115deg,#6e4d12 0%,#c8901f 22%,#f3d98f 42%,#fffaf0 50%,#c8901f 70%,#6e4d12 100%)}
.tier-diamond .tier-band{background:
  linear-gradient(100deg,rgba(255,255,255,0) 25%,rgba(255,255,255,.55) 47%,rgba(255,255,255,0) 66%),
  linear-gradient(115deg,#04122e 0%,#0a3d91 20%,#3fa9f5 42%,#d8f2ff 50%,#3fa9f5 58%,#0a3d91 80%,#04122e 100%);transition:filter .25s ease}

.tier-image{grid-row:2;display:block;width:100%;height:172px;object-fit:cover;transition:filter .25s ease}
.tier-body{grid-row:3/11;display:grid;grid-template-rows:subgrid;padding:16px 20px 20px}

.tier-desc{grid-row:1;text-align:center;font-size:13px;color:#57616e;line-height:1.5;margin:0 0 10px}
.tier-divider{border:0;border-top:1px solid var(--line);margin:0 0 12px}
.tier-body hr:nth-of-type(1){grid-row:2}
.tier-body hr:nth-of-type(2){grid-row:6}

.compare-list{grid-row:3;list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.compare-row{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.4}
.compare-row .icon{width:15px;height:15px;flex:none;margin-top:2px}
.compare-row.is-yes .icon{color:var(--blue)}
.compare-row.is-no .icon{color:#b7c0cd}
.compare-row b{font-weight:800;color:var(--ink)}
.compare-row span{color:#57616e}
.compare-row.is-no b,.compare-row.is-no span{color:#9aa4b2}

.tier-capacity{grid-row:4;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;color:#57616e;margin:0 0 10px}
.tier-capacity .icon{width:16px;height:16px;color:#8a94a2}

.price-block{grid-row:7;text-align:center;padding-top:0;margin-bottom:12px}
.price-value{font-size:29px;font-weight:900;color:var(--ink)}
.price-note{font-size:12.5px;color:var(--muted);margin:4px 0 0}
.price-tbd{font-size:23px;font-weight:900}
.tier-gold .price-tbd{color:#b8902f}
.tier-diamond .price-tbd{color:#0a3d91}

.tier-cta{grid-row:8;display:flex;flex-direction:column;gap:8px}
.tier-cta .btn:after{content:"";position:absolute;inset:0}
.tier-cta .btn{width:100%}
.tier-cta-readmore{align-self:center;color:var(--blue);font-size:12.5px;font-weight:800;text-decoration:none}
.tier-cta-readmore:hover{text-decoration:underline}
.tier-gold .tier-cta .btn-light{border-color:#d8ae55;color:#8a6a1f}
.tier-diamond .tier-cta .btn-primary{background:#fff;border:1px solid #9fb3d3;color:var(--ink);box-shadow:none}
.tier-card .tier-cta .btn{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease,background .2s ease,color .2s ease}

/* Hover — endast pa enheter med riktig muspekare, sa touch aldrig fastnar i hover-laget.
   Grundlage: Silver ar forvalt/Mest Popular med solid bla knapp. Bronze/Guld/Diamant har
   vit/outline-knapp och tands till solid accentfarg vid hover pa hela kortet. Silver tonas
   samtidigt ned till outline via klassen .tone-silver, som script.js satter/tar bort med
   en kort release-delay (satt i JS, INTE via CSS transition-delay) sa Silver inte hinner
   blinka upp i mellanrummet nar musen gar mellan tva andra kort. Se script.js. */
@media(hover:hover) and (pointer:fine){
  .tier-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
  .tier-card:hover{transform:translateY(-3px) scale(1.025);box-shadow:0 22px 46px rgba(2,16,45,.2);z-index:5}
  .tier-card:hover .tier-image{filter:brightness(1.03)}
  .tier-card:hover .tier-band:after{opacity:1}
  .tier-card:hover .tier-cta .btn{box-shadow:0 12px 26px rgba(2,16,45,.22)}
  .tier-bronze:hover .tier-band,.tier-silver:hover .tier-band,.tier-gold:hover .tier-band{filter:brightness(1.06)}

  .tier-bronze:hover{border-color:#a8663a;box-shadow:0 26px 52px rgba(107,52,16,.3),0 0 0 1px #a8663a inset}
  .tier-gold:hover{border-color:#c98a1f;box-shadow:0 26px 52px rgba(138,92,14,.3),0 0 0 1px #c98a1f inset}
  .tier-diamond:hover{border-color:#0a3d91;box-shadow:0 26px 52px rgba(10,61,145,.32),0 0 0 1px #0a3d91 inset}
  .tier-diamond:hover .tier-band{filter:brightness(1.07) saturate(1.08)}
  .tier-card.is-featured:hover{border-color:#005ddb;box-shadow:0 30px 58px rgba(8,120,255,.38),0 0 0 1px #005ddb inset}
  .tier-card.is-featured:hover .tier-cta .btn-primary{box-shadow:0 12px 30px rgba(8,120,255,.4)}

  /* CTA tands: fran vit/outline till solid accentfarg + vit text. */
  .tier-bronze:hover .tier-cta .btn-light{background:linear-gradient(135deg,#b8641f,#6b3410);border-color:transparent;color:#fff;box-shadow:0 10px 22px rgba(107,52,16,.4)}
  .tier-gold:hover .tier-cta .btn-light{background:linear-gradient(135deg,#d19a25,#8a5c0e);border-color:transparent;color:#fff;box-shadow:0 10px 22px rgba(138,92,14,.4)}
  .tier-diamond:hover .tier-cta .btn-primary{background:linear-gradient(135deg,#1e56b8,#020817);border-color:transparent;color:#fff;box-shadow:0 10px 22px rgba(10,61,145,.4)}

  /* Silver: knappen ar redan solid bla i grundlaget — bara ett starkare lyft/glow vid egen hover. */
  .tier-silver.is-featured:hover{box-shadow:0 30px 58px rgba(8,120,255,.4)}

  /* Silver tonas ned nar ett SYSKONKORT (Bronze/Guld/Diamant) hovras. Klassen .tone-silver
     satts/tas bort av script.js (mouseenter/mouseleave pa syskonkorten), med en kort
     setTimeout-fordrojning i JS innan den tas bort — inte en CSS transition-delay — sa
     sjalva STATE-bytet fordrojs och Silver aldrig hinner blinka upp i mellanrummet mellan
     tva kort. De vanliga transitionerna ovan (.tier-card / .tier-card .tier-cta .btn)
     racker for en mjuk overgang at bada hallen. */
  .tier-grid.tone-silver .tier-silver .tier-cta .btn-primary{background:#fff;border:1px solid #9fb3d3;color:var(--ink);box-shadow:none}
  .tier-grid.tone-silver .tier-silver.is-featured{border-color:#b9cdec;box-shadow:var(--shadow)}
}
@media(prefers-reduced-motion:reduce){
  .tier-card{transition:none}
  .tier-card:hover{transform:none}
  .tier-band:after{transition:none}
}

/* ==========================================================================
   Kundomdomen: carousel (ersatter statiska .quotes-rutnatet)
   ========================================================================== */
.testimonial-carousel{position:relative;display:flex;align-items:center;gap:18px}
.testi-viewport{overflow:hidden;flex:1;touch-action:pan-y}
.testi-track{display:flex;align-items:stretch;gap:26px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.testi-card{flex:0 0 calc((100% - 52px)/3);display:flex;flex-direction:column;background:#fff;border:0;border-radius:16px;padding:26px 28px 24px;box-shadow:0 8px 24px rgba(2,16,45,.07);transition:.25s transform,.25s box-shadow}
.testi-quote-icon{width:38px;height:38px;color:var(--blue);opacity:.28;margin-bottom:4px}
.testi-quote-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px}
.testi-card blockquote{margin:0}
.testi-card blockquote p{margin:0;font-size:15px;line-height:1.75;color:#2d3441}
.testi-name{color:var(--blue);font-weight:800}
.testi-readmore{align-self:flex-start;background:none;border:0;padding:0;color:var(--blue);font-size:12px;font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.testi-readmore:hover{color:#005ddb}
@media(hover:hover){.testi-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(2,16,45,.14)}}
.testi-arrow{width:42px;height:42px;border-radius:50%;border:1px solid #e5e9f0;background:#fff;color:#5a6473;display:grid;place-items:center;cursor:pointer;flex:none;transition:.2s background,.2s border-color,.2s color}
.testi-arrow:hover{background:#eaf4ff;border-color:var(--blue);color:var(--blue)}
.testi-arrow .icon{width:17px;height:17px}
.testi-dots{display:flex;justify-content:center;gap:7px;margin-top:24px}
.testi-dot{width:7px;height:7px;border-radius:5px;border:0;background:#dfe5ee;cursor:pointer;padding:0;transition:.2s width,.2s background}
.testi-dot.is-active{background:var(--blue);width:20px}
@media(min-width:901px){
  .testi-card blockquote p{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  .testi-card.is-expanded blockquote p{-webkit-line-clamp:unset;display:block;overflow:visible}
}
@media(max-width:900px){.testi-card{flex:0 0 calc((100% - 26px)/2)}}
@media(max-width:640px){.testi-card{flex:0 0 100%;padding:22px 22px 20px}.testi-arrow{width:36px;height:36px}.testimonial-carousel{gap:8px}}
@media(prefers-reduced-motion:reduce){.testi-track{transition:none}.testi-dot{transition:none}.testi-card{transition:none}}

@media(max-width:980px){.tier-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tier-grid{grid-template-columns:1fr}.tier-card{display:flex;flex-direction:column}.tier-body{display:flex;flex-direction:column;flex:1}.compare-list{flex:1}.tier-cta{margin-top:auto}}

/* ==========================================================================
   FAQ-accordion (Privat/Foretag-paketsidorna)
   ========================================================================== */
/* Kondenserad lista (istallet for enskilda kort med luft emellan) - haller
   raderna tata sa listan skalar bra nar fler fragor laggs till over tid. */
.faq-category{max-width:860px;margin-bottom:30px}
.faq-category:last-child{margin-bottom:0}
.faq-category[hidden]{display:none}
.faq-cat-heading{font-size:14.5px;font-weight:900;color:var(--ink);margin:0 0 10px;padding-left:12px;border-left:3px solid var(--blue)}
.faq-list{max-width:860px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.faq-item[hidden]{display:none}
.rental-tile[hidden]{display:none}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:last-child{border-bottom:0}
.faq-q{margin:0}
.faq-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;background:none;border:0;padding:14px 18px;text-align:left;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer}
.faq-toggle:hover{color:var(--blue)}
.faq-chevron{width:17px;height:17px;color:var(--blue);flex:none;transition:transform .25s ease}
.faq-item.is-open .faq-chevron{transform:rotate(180deg)}
.faq-panel-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.faq-item.is-open .faq-panel-wrap{grid-template-rows:1fr}
.faq-panel-inner{overflow:hidden}
.faq-panel-inner p{margin:0 18px 14px;color:var(--muted);font-size:12.5px;line-height:1.6}
@media(prefers-reduced-motion:reduce){.faq-chevron,.faq-panel-wrap{transition:none}}
@media(max-width:640px){.faq-toggle{padding:12px 14px;font-size:13px}.faq-panel-inner p{margin:0 14px 12px}}

/* ==========================================================================
   Komplettera din fest (tillval) — migrerat fran mockup-paket.css.
   Bildruta: ljus bakgrund + object-fit:contain sa hela produkten syns.
   ========================================================================== */
.addon-section{margin-top:8px}
.addon-head-row{margin-bottom:22px}
.addon-head-row h2{margin:0 0 6px;font-size:22px}
.addon-head-row p{margin:0;color:var(--muted);font-size:13px}

/* Enhetlig grid sa samtliga produktkort far exakt samma bredd/hojd/rader,
   oavsett bildproportioner, namnlangd eller pris. Grid-radens hojd stracks
   automatiskt till hogsta kortet i raden (native grid-stretch), sa alla
   kort i samma rad linjerar utan JS. */
.addon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.addon-tile{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:0;border-radius:14px;padding:14px 14px;box-shadow:0 4px 16px rgba(2,16,45,.06);transition:.2s box-shadow,.2s transform}
@media(hover:hover) and (pointer:fine){.addon-tile:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(2,16,45,.12)}}
.addon-tile-icon{width:100%;height:148px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.addon-tile-icon img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
/* Enskild produktbild ~5% storre an ovriga tillval-ikoner (Subbas,
   Projektor) utan att paverka den gemensamma ikonrutans hojd/grid-linjering.
   Bilden fyller redan ikonrutans hela hojd, sa transform-origin i
   nederkanten gor att skalningen ENDAST vaxer uppat - bildens nedre kant
   flyttas ALDRIG nedat av scale() (matematiskt garanterat, oavsett bildens/
   ikonrutans faktiska pixelmatt). Sankt fran 10% till 5% 2026-09-22 (se
   PROJECT.md "Subbas/Projektor - avvagning"): pa bokningssidan finns bara
   8px luft OVANFOR ikonen (mot beskrivningstexten) och 0-4px NEDANFOR (mot
   knappen/priset) redan INNAN forstoringen - vid 10% (13px pa en 130px-
   ruta) fick vaxandet inte plats uppat utan att naxa texten ovanfor; vid 5%
   (6,5px) ryms hela vaxandet inom de 8px luft som redan finns dar, sa BADA
   sidor far positiv marginal (uppmatt, se PROJECT.md). Ingen translateY.
   Paverkar ENDAST bildens visuella position (transform), aldrig kortets/
   knappens layout/storlek. */
.addon-tile-icon.icon-scale-110 img{transform-origin:50% 100%;transform:scale(1.05)}
/* Tva-bilder-lage (t.ex. JBL PartyBox Stage 320 vid antal=2, se
   renderAddonTile() i script.js) - samma bildkalla visas tva ganger sida
   vid sida i samma ikonruta, utan att rutans hojd/kortets storlek andras.
   Hogre specificitet (.addon-tile-icon.addon-tile-icon-dual img) an
   grundregeln ovan sa att max-width:46% garanterat vinner over dess 100%. */
.addon-tile-icon.addon-tile-icon-dual{gap:8px}
.addon-tile-icon.addon-tile-icon-dual img{max-width:46%}
.addon-tile-cat{font-size:9.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin:0 0 4px}
.addon-tile-name{font-size:12px;font-weight:800;color:var(--ink);line-height:1.35;margin:0;min-height:32px;display:flex;align-items:center;justify-content:center}
.addon-tile-price{font-size:11px;font-weight:700;color:var(--muted);margin-top:auto;padding-top:12px}
.addon-tile-price.is-priced{color:var(--blue);font-weight:900}
.addon-tile-subtitle{font-size:10px;font-weight:700;color:var(--blue);text-align:center;margin:2px 0 0;line-height:1.3}
.addon-tile-note{font-size:10px;color:var(--muted);text-align:center;margin:2px 0 0;line-height:1.3}
/* Videolank pa tillvalskort (t.ex. JBL PartyBox Stage 320) - oppnar den
   delade videomodalen (se .video-only-modal/-card langre ner, aterandvander
   .rental-modal-*-klasserna). Rod "play"-ikon ar en generisk videosymbol
   (rundat rektangel + triangel), inte YouTubes varumarkeslogotyp. */
.addon-video-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 2px;margin:2px 0 0;font-size:11px;font-weight:800;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.addon-video-link:hover{color:#0658c9}
.addon-video-link-icon{width:16px;height:12px;border-radius:3px;background:#ff2b2b;position:relative;flex:none}
.addon-video-link-icon::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #fff}
@media(max-width:900px){.addon-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(max-width:640px){.addon-grid{grid-template-columns:repeat(2,1fr);gap:14px}.addon-tile{padding:12px 10px}.addon-tile-icon{height:122px}}
/* Produktkort med bred produktbild (.rental-tile--media-full, 2026-09-28, f.n. XDJ-RX3): pa mobil far bildytan hela kortets bredd (kant till kant) med fast 4:3-proportion - stabil yta vid bildbyte, contain = ingen beskarning. Desktop oforandrad. */
/* Staende produkt med tidigare stor vit marginal (.rental-tile--media-tall, 2026-09-28, f.n. B-40): tatt beskurna kortbilder + nagot hogre bildyta pa mobil sa att produkten blir ca 40 % storre. Desktop oforandrad. */
@media(max-width:640px){.rental-tile--media-tall .addon-tile-icon{height:150px}}
@media(max-width:640px){.rental-tile--media-full .rental-gallery{width:100%}.rental-tile--media-full .addon-tile-icon{width:calc(100% + 36px);height:auto;aspect-ratio:4/3;margin:0 -18px 8px}.rental-tile--media-full .addon-tile-icon img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}}
.company-note-section{padding:0 0 56px}
.closing-note-section{padding:0 0 56px}

/* Hero-fortroenderad (kompakt, atervander ikonsystemet, ingen ny sektion) */
.hero-trust-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px;font-size:12.5px;font-weight:700;color:#d7e5f7}
.hero-trust-row span{display:flex;align-items:center;gap:7px}
.hero-trust-row .icon{width:16px;height:16px;color:var(--blue2)}

/* "Passar bra for" - kompakt rad i paketkorten */
.tier-fit{grid-row:5;font-size:11px;color:var(--muted);text-align:center;line-height:1.45;margin:0 0 12px}
.tier-fit b{color:var(--ink);font-weight:800}

/* Sprint 1: inline SVG-ikoner (ersatter tidigare emoji/symboler) */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.15em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn .icon{width:16px;height:16px}
.footer-logo .icon,.cta h2 .icon,.booking-path b .icon{margin-right:6px;vertical-align:-.2em}

/* Sprint 1: mobil "Boka nu"-bar. header-book dolds under 900px (se ovan),
   den har fasta baren ersatter den som primar CTA pa mobil. */
.mobile-cta-bar{display:none}
@media(max-width:900px){
  .mobile-cta-bar{display:flex;align-items:center;justify-content:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:80;padding:14px 20px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(135deg,#0878ff,#005ddb);color:#fff;text-decoration:none;font-weight:800;font-size:14px;letter-spacing:.02em;box-shadow:0 -8px 20px rgba(2,16,45,.25)}
  body:has(.mobile-cta-bar){padding-bottom:66px}
}

/* Sprint 1: trust-bar (startsidan) */
.trust-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 36px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-item{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--ink)}
.trust-item .icon{width:20px;height:20px;color:var(--blue)}
@media(max-width:640px){.trust-bar{gap:12px 20px;padding:22px 0}.trust-item{font-size:12px}}

/* 404-sida */
.error-page{background:linear-gradient(115deg,#020918 0%,#06255a 100%);color:#fff;min-height:calc(100vh - 112px);display:flex;align-items:center;padding:56px 0;position:relative;overflow:hidden}
.error-page:after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;background:rgba(8,120,255,.22);filter:blur(90px);left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.error-page-inner{position:relative;z-index:1;max-width:560px;margin:auto;text-align:center}
.error-mic{width:46px;height:46px;margin:0 auto 18px;display:grid;place-items:center;border:1.5px solid var(--blue2);border-radius:50%;color:var(--blue2)}
.error-mic .icon{width:22px;height:22px}
.error-code{font-size:128px;font-weight:900;line-height:1;margin:0;letter-spacing:-4px;background:linear-gradient(135deg,#fff,#7fc0ff 55%,#0878ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 34px rgba(8,120,255,.4));animation:errorGlow 4s ease-in-out infinite}
@keyframes errorGlow{0%,100%{filter:drop-shadow(0 0 26px rgba(8,120,255,.32))}50%{filter:drop-shadow(0 0 50px rgba(8,120,255,.58))}}
.error-equalizer{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:30px;margin:14px auto 6px}
.error-equalizer span{width:5px;border-radius:3px;background:linear-gradient(180deg,#21a0ff,#0878ff);animation:errorEq 1.6s ease-in-out infinite}
.error-equalizer span:nth-child(1){height:10px;animation-delay:-1.2s}
.error-equalizer span:nth-child(2){height:22px;animation-delay:-.9s}
.error-equalizer span:nth-child(3){height:14px;animation-delay:-.6s}
.error-equalizer span:nth-child(4){height:26px;animation-delay:-.3s}
.error-equalizer span:nth-child(5){height:16px;animation-delay:0s}
@keyframes errorEq{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.error-title{font-size:26px;line-height:1.25;margin:14px 0 12px}
.error-text{margin:0 auto 30px;max-width:460px;color:#d7e5f7;line-height:1.65;font-size:15px}
.error-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.error-actions .btn{min-width:200px}
.error-extra-link{display:block;margin-top:22px;color:#9fc9ff;font-size:13px;text-decoration:none;font-weight:700}
.error-extra-link:hover{text-decoration:underline}
@media(max-width:640px){
  .error-page{min-height:0;padding:40px 0 32px}
  .error-code{font-size:clamp(72px,26vw,96px);letter-spacing:-2px}
  .error-title{font-size:clamp(20px,6vw,23px)}
  .error-text{font-size:13.5px}
  .error-actions{flex-direction:column;align-items:stretch;max-width:280px;margin:0 auto}
  .error-actions .btn{width:100%;min-width:0}
}

/* utrustning.html — utrustningsgrid med 8 kort */
.equipment-heading{max-width:660px;margin:0 auto 40px;text-align:center}
.equipment-heading .eyebrow{display:block}
.equipment-heading h2{font-size:32px;line-height:1.15;margin:0 0 14px}
.equipment-heading p{color:var(--muted);line-height:1.7;margin:0}
.equipment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.equipment-card{display:flex;flex-direction:column;background:var(--navy2);border:1px solid rgba(33,160,255,.25);border-radius:14px;overflow:hidden;box-shadow:0 10px 26px rgba(2,10,25,.3);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.equipment-image{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;transition:filter .25s ease}
.equipment-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.equipment-body h3{margin:0 0 8px;color:#fff;font-size:17px}
.equipment-body p{flex:1;margin:0 0 16px;color:#c3cfdf;font-size:13.5px;line-height:1.6}
.equipment-features{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.equipment-features li{border:1px solid rgba(33,160,255,.3);border-radius:999px;background:rgba(8,120,255,.15);color:var(--blue2);font-size:11.5px;font-weight:800;padding:5px 10px}
.equipment-cta{margin-top:46px}
@media(hover:hover) and (pointer:fine){
  .equipment-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 42px rgba(2,10,25,.4);border-color:rgba(33,160,255,.6);z-index:2}
  .equipment-card:hover .equipment-image{filter:brightness(1.05) contrast(1.03)}
}
@media(max-width:900px){
  .equipment-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .equipment-grid{grid-template-columns:1fr;gap:16px}
  .equipment-heading{margin-bottom:28px}
  .equipment-heading h2{font-size:24px}
}

/* ==========================================================================
   Paketdetaljsidor (privat-*.html / foretag-*.html)
   En gemensam CSS-yta for alla atta detaljsidor sa att andringar gors
   pa ett stalle. Ateranvander .page-hero/.eyebrow/.btn/.check-list/
   .audience-extra/.addon-tile/.cta fran ovrigt i denna fil.
   ========================================================================== */
.pkg-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:16px max(24px,calc((100% - 1180px)/2)) 0}
.pkg-crumb-back{color:var(--blue);font-weight:800;font-size:13px;text-decoration:none}
.pkg-crumb-back:hover{text-decoration:underline}
.pkg-crumb-trail{color:var(--muted);font-size:12.5px}
.pkg-crumb-trail a{color:var(--muted);text-decoration:none}
.pkg-crumb-trail a:hover{text-decoration:underline}

.pkg-hero{padding:34px 0 60px}
.pkg-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.pkg-tier-pill{display:inline-block;padding:6px 16px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.06em;color:#fff;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.45);margin:0 0 16px}
.pkg-tier-pill.tier-bronze{background:linear-gradient(115deg,#5c3418 0%,#9a6432 22%,#e8c896 46%,#a8672f 66%,#6b3f1d 100%)}
.pkg-tier-pill.tier-silver{background:linear-gradient(115deg,#5a636d 0%,#9aa4ae 20%,#f5f7f9 42%,#7c8fa3 64%,#454e58 100%);color:#0c1420;text-shadow:none}
.pkg-tier-pill.tier-gold{background:linear-gradient(115deg,#6e4d12 0%,#c8901f 22%,#f3d98f 42%,#fffaf0 50%,#c8901f 70%,#6e4d12 100%);color:#3a2a05;text-shadow:none}
.pkg-tier-pill.tier-diamond{background:linear-gradient(115deg,#04122e 0%,#0a3d91 20%,#3fa9f5 42%,#d8f2ff 50%,#3fa9f5 58%,#0a3d91 80%,#04122e 100%)}
.pkg-hero h1{font-size:38px;line-height:1.12;margin:0 0 16px}
.pkg-hero-lead{max-width:520px;color:#d7e5f7;line-height:1.7;margin:0 0 24px}
.pkg-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-bottom:26px}
.pkg-price-value{font-size:32px;font-weight:900;color:#fff;display:block}
.pkg-price-note{font-size:12.5px;color:#9fb3d3;margin:2px 0 0}
.pkg-capacity{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#d7e5f7}
.pkg-capacity .icon{width:19px;height:19px;color:var(--blue2)}
.pkg-hero-media{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.pkg-hero-image{display:block;width:100%;height:auto;aspect-ratio:700/438;object-fit:cover}

.pkg-section{padding:52px 0}
.pkg-section h2{font-size:26px;margin:0 0 8px}
.pkg-section-lead{color:var(--muted);line-height:1.6;margin:0 0 24px;max-width:640px}
.check-list.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 32px;margin-top:20px}
.check-list.check-grid li{font-size:14.5px;line-height:1.55}
.pkg-note{margin-top:24px}

.pkg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:24px}
.pkg-step{text-align:center}
.pkg-step-num{width:40px;height:40px;margin:0 auto 12px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:900;font-size:15px}
.pkg-step h3{font-size:14.5px;margin:0 0 6px}
.pkg-step p{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0}

.pkg-addon-note{color:var(--muted);font-size:13px;margin:0 0 20px}

/* Stor utrustningsbild fran respektive paket (atervunnen fran gamla sajten som
   ren informationskalla) — placerad mellan hero och "DETTA INGAR". Ingen
   beskarning: bilden far sin naturliga hojd inuti en ljus ram sa hela
   utrustningen alltid syns, aven om kallbildernas proportioner skiljer sig at. */
.pkg-equip-photo{padding:8px 0 44px}
.pkg-equip-frame{max-width:680px;margin:0 auto;background:#fff;border:1px solid #e2e8f1;border-radius:16px;padding:22px;display:flex;align-items:center;justify-content:center}
.pkg-equip-frame img{display:block;width:100%;height:auto}
.pkg-equip-caption{max-width:680px;margin:14px auto 0;text-align:center;color:var(--muted);font-size:12.5px}

/* "Utrustningen i mer detalj" — kort forklarande textblock per utrustningsdel. */
.equip-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;margin-top:20px}
.equip-detail h3{font-size:15px;margin:0 0 6px;color:var(--ink)}
.equip-detail p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0}

@media(max-width:900px){
  .pkg-hero-grid{grid-template-columns:1fr;gap:28px}
  .pkg-hero-media{order:-1;max-width:460px;margin:0 auto}
  .pkg-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .pkg-crumb{padding:14px 14px 0}
  .pkg-hero{padding:24px 0 40px}
  .pkg-hero h1{font-size:28px}
  .pkg-hero-meta{gap:16px 24px}
  .pkg-section{padding:40px 0}
  .check-list.check-grid{grid-template-columns:1fr}
  .pkg-steps{grid-template-columns:1fr}
  .pkg-equip-photo{padding:4px 0 32px}
  .pkg-equip-frame{padding:16px}
  .equip-detail-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Bokningsflode (boka.html) — stegindikator, interaktiva tillvalsplattor,
   prisrader och granskningssammanfattning. Ateranvander befintliga
   .form-section/.addon-grid/.addon-tile/.summary-monster dar det gar.
   ========================================================================== */
.booking-steps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.booking-step-pill{display:flex;align-items:center;gap:8px;border:1px solid #dde3ec;background:#fff;color:var(--muted);border-radius:999px;padding:7px 14px 7px 7px;font-size:12.5px;font-weight:800;cursor:pointer;transition:.2s border-color,.2s color,.2s background}
.booking-step-num{width:22px;height:22px;border-radius:50%;background:#eef1f6;color:var(--muted);display:grid;place-items:center;font-size:11px;font-weight:900;flex:none}
.booking-step-pill.is-active{border-color:var(--blue);color:var(--blue)}
.booking-step-pill.is-active .booking-step-num{background:var(--blue);color:#fff}
.booking-step-pill.is-done:not(.is-active){color:#1a7f4b}
.booking-step-pill.is-done:not(.is-active) .booking-step-num{background:#1a7f4b;color:#fff}
.booking-step-pill.is-done:not(.is-active) .booking-step-num:before{content:"✓"}
.booking-step-pill.is-done:not(.is-active) .booking-step-num{font-size:0}
.booking-step-pill.is-done:not(.is-active) .booking-step-num:before{font-size:11px}
.booking-step{scroll-margin-top:18px;padding-bottom:8px}

#booking-addons{display:flex;flex-wrap:wrap;gap:26px 40px}
.addon-cat-group{margin:0}
.addon-cat-heading{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin:0 0 12px}
.addon-grid-interactive{grid-template-columns:repeat(auto-fill,160px)}

/* Enhetligt vertikalt tillvalskort pa bokningssidan: rubrik (hela bredden)
   -> kort beskrivning -> stor centrerad bild -> kontroll langst ned.
   Skopat till #booking-addons sa ovriga sidors statiska .addon-grid
   (paketsidornas forhandsvisning) inte paverkas. */
#booking-addons .addon-grid-interactive{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
#booking-addons .addon-tile{align-items:stretch;text-align:left;padding:12px}
#booking-addons .addon-tile-name{display:block;text-align:left;font-size:14px;min-height:0}
#booking-addons .addon-tile-note{text-align:left;margin:3px 0 0}
#booking-addons .addon-tile-icon{height:120px;margin:8px 0 0}
#booking-addons .addon-tile-price{text-align:left;margin-top:4px;padding-top:0}

.addon-tile-toggle,.addon-tile-qty{position:relative;border:2px solid #e7ebf1;cursor:pointer}
.addon-tile-variant,.addon-tile-addbtn{position:relative;border:2px solid #e7ebf1}
.addon-tile-toggle input{position:absolute;opacity:0;pointer-events:none}
.addon-tile-toggle.is-selected,.addon-tile-qty.is-selected,.addon-tile-variant.is-selected,.addon-tile-addbtn.is-selected{border-color:var(--blue);background:#f5f9ff;box-shadow:0 6px 18px rgba(8,120,255,.14)}
.addon-add-btn{align-self:center;width:80%;max-width:320px;margin-top:auto;padding:7px 14px;font-size:12px;gap:6px}
.addon-add-btn.is-added{background:#eef6ff;color:var(--blue);border:1px solid var(--blue);box-shadow:none}
.addon-variant-select{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin-top:auto;padding-top:10px}
.addon-variant-btn{border:1px solid #cfd7e3;background:#fff;color:var(--ink);border-radius:20px;padding:7px 13px;font-size:11.5px;font-weight:800;cursor:pointer;line-height:1.3}
.addon-variant-btn.is-active{border-color:var(--blue);background:var(--blue);color:#fff}
.addon-tile-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:.15s opacity,.15s transform}
.addon-tile-toggle.is-selected .addon-tile-check{opacity:1;transform:scale(1)}
.addon-qty{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-top:auto;padding-top:10px}
.addon-qty-btn{width:32px;height:32px;border-radius:50%;border:1px solid #cfd7e3;background:#fff;color:var(--ink);font-size:16px;font-weight:900;line-height:1;cursor:pointer;display:grid;place-items:center}.addon-qty-btn:disabled{opacity:.35;cursor:not-allowed}
.addon-qty-btn:hover{border-color:var(--blue);color:var(--blue)}
.addon-qty-value{min-width:16px;text-align:center;font-weight:900;font-size:14px}
/* Tillval i bokningen som accordion + enhetliga CTA (2026-09-30). Accordionen
   ateranvander .rental-accordion-* fran Hyra teknik. */
#booking-addons .addon-accordion{width:100%;margin:0;gap:10px}
.addon-acc-item.has-selected{border-color:var(--blue)}
.addon-acc-status{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addon-acc-status.is-selected{color:var(--blue);font-weight:800}
.addon-acc-item .rental-accordion-toggle:focus-visible{outline:3px solid #66b5ff;outline-offset:-3px;border-radius:14px}
.addon-acc-item .rental-accordion-panel-content{padding:4px 16px 18px}
.addon-remove-link{align-self:center;background:none;border:0;color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:8px 10px;margin-top:2px}
.addon-remove-link:hover{color:var(--blue)}
.addon-add-btn.is-added{font-weight:900}
.addon-variant-list{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:auto;padding-top:10px}
.addon-variant-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;text-align:left}
.addon-variant-row.is-active{border-color:var(--blue);background:#f5f9ff}
.addon-variant-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 130px}
.addon-variant-row .addon-variant-label{font-size:13px;font-weight:800;color:var(--ink);line-height:1.3}
.addon-variant-row .addon-variant-price{font-size:13px;font-weight:800;color:var(--blue);opacity:1}
#booking-addons .addon-variant-cta,.addon-variant-cta{flex:none;width:auto;min-width:112px;max-width:none;margin:0;align-self:center;padding:9px 12px;font-size:12.5px}
.addon-qty-cta{justify-content:center;margin-top:auto;padding-top:10px}
.addon-qty-cta .addon-qty-btn{border-color:var(--blue);color:var(--blue);width:40px;height:40px;font-size:18px}
.addon-qty-cta .addon-qty-btn:disabled{border-color:#cfd7e3;color:var(--ink)}
.addon-qty-cta .addon-qty-value{min-width:44px;font-size:15px}
.addon-qty-total{margin:6px 0 0;text-align:center;font-size:12.5px;font-weight:800;color:var(--blue)}
#booking-addons .addon-add-btn{min-height:44px}
#booking-addons .addon-qty-cta .addon-qty-btn{width:44px;height:44px}
#booking-addons .addon-remove-link{min-height:40px}
#booking-addons .addon-variant-row .addon-variant-cta{width:auto;min-width:112px;max-width:none;flex:1 0 112px;margin:0}

.price-lines{margin:16px 0 6px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.price-line{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;font-size:13.5px;border-bottom:1px solid var(--line)}
.price-line:last-child{border-bottom:0}
.price-line-addon{color:var(--muted);font-size:12.5px}
.price-line-addon strong{color:var(--muted);font-weight:700}

.booking-review-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:16px 0 24px;padding:18px 20px;background:#f7f9fc;border-radius:10px;border:1px solid #e4eaf1}
.booking-review-list > div{display:flex;flex-direction:column;gap:3px}
.booking-review-list dt{font-size:10.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.booking-review-list dd{margin:0;font-size:13.5px;font-weight:700;color:var(--ink)}

@media(max-width:640px){
  .booking-steps{gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .booking-step-pill{flex:none;padding:6px 12px 6px 6px;font-size:11.5px}
  .booking-step-pill span:last-child{white-space:nowrap}
  .booking-review-list{grid-template-columns:1fr}
  #booking-addons{gap:26px 0}
  .addon-cat-group{width:100%}
  #booking-addons .addon-grid-interactive{grid-template-columns:1fr;gap:14px;width:100%}
  #booking-addons .addon-tile{padding:12px}
  #booking-addons .addon-tile-name{font-size:15px}
  #booking-addons .addon-tile-icon{height:130px;margin:8px 0 0}
  #booking-addons .addon-qty-btn{width:38px;height:38px;font-size:18px}
  #booking-addons .addon-variant-btn{padding:9px 14px;font-size:12.5px}
  #booking-addons .addon-add-btn{width:80%;max-width:320px;padding:8px 14px;font-size:12.5px}
}

/* ===== Karaokeguiden ===== */
.guide-tabs{position:sticky;top:76px;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.guide-tabrow{display:flex;gap:8px;overflow-x:auto;padding:14px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.guide-tabrow::-webkit-scrollbar{display:none}
.guide-tab{flex:none;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:9px 16px;font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center}
.guide-tab.is-active,.guide-tab:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.guide-intro{max-width:760px}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.guide-card{display:flex;flex-direction:column}
.guide-card.is-hidden{display:none}
.guide-card-art{position:relative;height:180px}
.guide-card-art img{display:block;width:100%;height:100%;object-fit:cover}
.guide-card-placeholder{width:100%;height:180px;display:grid;place-items:center;font-size:42px;background:linear-gradient(135deg,#eaf2ff,#f3f7fc)}
.guide-card-kicker{position:absolute;top:14px;left:14px;z-index:2;background:rgba(2,9,24,.72);color:#fff;border-radius:999px;padding:6px 11px;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.guide-badge{position:absolute;top:14px;right:14px;z-index:2;background:#fff;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:5px 10px;font-size:10.5px;font-weight:900;letter-spacing:.03em}
.guide-card .more{margin-top:auto}
.guide-card.is-soon .card-body h3{color:var(--muted)}
.guide-card.is-soon .more{color:var(--muted);cursor:default}
/* Artikelkorten ar <a class="card guide-card">: utan denna reset arver hela kortet webblasarens standardlank (understruken, #0000EE). Endast CTA-raden ska se ut som en lank. */
.guide-card{color:var(--ink);text-decoration:none}
.guide-card .card-body h3{color:var(--ink);transition:color .15s ease}
.guide-card .more{color:var(--blue);font-size:13px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.guide-card.is-soon .more{text-decoration:none}
a.guide-card:hover .card-body h3,a.guide-card:focus-visible .card-body h3{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
a.guide-card:focus-visible{outline:3px solid var(--blue2);outline-offset:3px}
.guide-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.guide-mini{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:#f7f9fc}
.guide-mini strong{display:block;font-size:15px;margin-bottom:4px}
.guide-mini span{color:var(--muted);font-size:13px}
.guide-article-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:44px;align-items:start}
.guide-article-main{max-width:760px}
.guide-article-main h2{margin-top:42px;font-size:26px;scroll-margin-top:150px}
.guide-article-main h2:first-child{margin-top:0}
.guide-article-main h3{margin-top:26px;font-size:18px}
.guide-article-main p,.guide-article-main li{color:#2d3441;line-height:1.7}
.guide-article-main ul,.guide-article-main ol{padding-left:22px}
.guide-toc{position:sticky;top:150px;align-self:start;border:1px solid var(--line);border-radius:10px;padding:18px;background:#f7f9fc}
.guide-toc strong{display:block;margin-bottom:10px;font-size:13px}
.guide-toc a{display:block;color:var(--muted);padding:6px 0;font-size:13.5px;text-decoration:none;scroll-margin-top:150px}
.guide-toc a:hover{color:var(--blue)}
.guide-quote{font-size:19px;line-height:1.55;border-left:3px solid var(--blue);padding-left:18px;margin:28px 0;color:var(--ink);font-style:italic}
.guide-score{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px}
.guide-score th,.guide-score td{border:1px solid var(--line);padding:11px 13px;text-align:left}
.guide-score th{background:#f7f9fc}
.guide-back{margin-top:8px}
@media(max-width:900px){
  .guide-tabs{top:66px}
  .guide-grid{grid-template-columns:1fr 1fr}
  .guide-article-layout{grid-template-columns:1fr}
  .guide-toc{display:none}
}
@media(max-width:640px){
  .guide-grid,.guide-mini-grid{grid-template-columns:1fr}
  .guide-article-main h2{font-size:22px}
}

/* ===== Basta karaokelatar / Topp 100 ===== */
.songs-search{margin:0 0 18px}.songs-search-input{width:100%;max-width:420px;border:1px solid #cfd7e3;border-radius:8px;padding:11px 14px;font:inherit;font-size:14px}.songs-search-input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}.songs-search-empty{color:var(--muted);font-size:14px;margin:0 0 20px}
.songs-toolbar{display:flex;gap:18px;margin:-6px 0 26px}
.songs-toolbar button{background:none;border:0;color:var(--blue);font-weight:800;font-size:13px;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.songs-toolbar button:hover{color:var(--blue2)}
.songs-list-wrap{max-width:820px}
.songs-item{border:1px solid var(--line);border-radius:10px;margin-bottom:9px;overflow:hidden;background:#fff}
.songs-item h2{margin:0;font-size:inherit}
.songs-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;border:0;padding:13px 20px;text-align:left;font:inherit;font-size:16px;font-weight:800;color:var(--ink);cursor:pointer}
.songs-toggle:hover{color:var(--blue)}
.songs-chevron{width:18px;height:18px;color:var(--blue);flex:none;transition:transform .25s ease}
.songs-item.is-open .songs-chevron{transform:rotate(180deg)}
.songs-panel-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.songs-item.is-open .songs-panel-wrap{grid-template-rows:1fr}
.songs-panel-inner{overflow:hidden}
.songs-ol{list-style:none;counter-reset:song;margin:0;padding:0 20px 18px}
.songs-ol li{counter-increment:song;display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.songs-ol li[hidden]{display:none}
.songs-ol li:first-child{border-top:0}
.songs-ol li:before{content:counter(song);flex:none;width:24px;height:24px;border-radius:50%;background:#eaf2ff;color:var(--blue);font-size:11.5px;font-weight:900;display:grid;place-items:center}
.songs-title{font-weight:700;color:var(--ink)}
.songs-artist{color:var(--muted)}
.songs-tag{margin-left:auto;flex:none;font-size:10px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:var(--blue);background:#eaf2ff;border-radius:999px;padding:2px 8px}
.songs-more{max-width:760px;background:#f7f9fc;border:1px solid var(--line);border-radius:12px;padding:28px 30px;margin-top:10px}
.songs-more h2{margin-top:0}
@media(prefers-reduced-motion:reduce){.songs-chevron,.songs-panel-wrap{transition:none}}
@media(max-width:640px){
  .songs-toggle{padding:12px 16px;font-size:14.5px;gap:8px}
  .songs-ol{padding:0 16px 14px}
  .songs-ol li{padding:7px 0;font-size:13.5px;gap:10px}
  .songs-ol li:before{width:20px;height:20px;font-size:10.5px}
  .songs-toolbar{gap:14px;margin-top:-2px}
  .songs-more{padding:20px 18px}
}

/* ===== Bokningssidan (boka.html): vit bakgrund kant-till-kant pa mobil =====
   Skopat till .booking-page/.booking-page-card, paverkar bara boka.html.
   Placerad sist i filen med avsikt: bade .booking-page och .booking-page-card
   har egna basregler tidigare i filen (samma specificitet, class-selektor),
   och CSS-kaskaden avgors da av kallordning - genom att lagga overrides sist
   vinner de garanterat over basreglerna vid mobil bredd, oavsett var i filen
   nagon senare lagger till nya basregler for samma klasser. */
@media(max-width:640px){
  .booking-page{background:#fff}
  .booking-page-card{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}
}

/* ===== Valkomstmodal: Privat/Foretag-val for nya besokare (injiceras via script.js) ===== */
.welcome-overlay{position:fixed;inset:0;background:rgba(2,6,16,.72);display:grid;place-items:center;padding:20px;z-index:200;opacity:0;transition:opacity .22s ease}
.welcome-overlay.open{opacity:1}
body.welcome-open{overflow:hidden}
.welcome-card{position:relative;width:min(640px,100%);background:#fff;border-radius:16px;padding:38px 34px 30px;box-shadow:0 30px 80px rgba(0,0,0,.45);text-align:center;transform:translateY(14px) scale(.98);transition:transform .25s ease}
.welcome-overlay.open .welcome-card{transform:translateY(0) scale(1)}
.welcome-card .eyebrow{margin:0 0 6px}
.welcome-card h2{margin:0 0 8px;font-size:24px;letter-spacing:-.5px}
.welcome-sub{margin:0 0 26px;color:var(--muted);font-size:15px}
.welcome-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.welcome-choice{display:flex;flex-direction:column;align-items:center;gap:12px;border:2px solid #e0e6ef;border-radius:12px;padding:24px 16px;background:#fff;cursor:pointer;text-align:center;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;font:inherit}
.welcome-choice:hover,.welcome-choice:focus-visible{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow)}
.welcome-choice:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.welcome-choice-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#eaf1f9;color:var(--blue);flex:none}
.welcome-choice-icon .icon{width:26px;height:26px}
.welcome-choice-body{display:flex;flex-direction:column;gap:6px}
.welcome-choice strong{font-size:14px;letter-spacing:.02em;color:var(--ink)}
.welcome-choice small{font-size:12.5px;line-height:1.5;color:var(--muted)}
.welcome-skip{display:inline-block;margin-top:2px;border:0;background:none;color:var(--muted);font-size:13px;text-decoration:underline;cursor:pointer;font:inherit;padding:4px}
.welcome-skip:hover,.welcome-skip:focus-visible{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.welcome-overlay,.welcome-card{transition:none}}
@media(max-width:640px){
  .welcome-card{padding:28px 20px 22px;border-radius:14px}
  .welcome-card h2{font-size:20px}
  .welcome-choices{grid-template-columns:1fr}
  .welcome-choice{flex-direction:row;text-align:left;padding:16px}
  .welcome-choice-icon{flex:none}
}

/* hyra-teknik.html — produktkort inne i accordion-panelerna, ateranvander .addon-tile */
.rental-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.addon-tile.rental-tile{align-items:flex-start;text-align:left;padding:18px}
.rental-tile-name{font-size:14.5px;font-weight:900;color:var(--ink);margin:0}
.rental-tile-desc{font-size:12.5px;color:var(--muted);line-height:1.5;margin:6px 0 0}
.rental-tile-specs{list-style:disc;padding-left:18px;margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.6}
.rental-tile-priceblock{margin-top:auto;padding-top:14px;width:100%;border-top:1px solid var(--line)}
.rental-tile-price{font-size:17px;font-weight:900;color:var(--blue)}
.rental-tile-price-unit{font-size:11.5px;font-weight:700;color:var(--muted);margin-left:2px}
.rental-tile-discount{font-size:11px;color:var(--muted);margin:3px 0 0}
.rental-tile-variants{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:6px;width:100%}
.rental-tile-variants li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:7px 8px 7px 10px}
.rental-tile-variants li>span:nth-child(2){color:var(--blue);font-weight:900;white-space:nowrap;margin-left:auto}
.rental-accessory-note{font-size:12.5px;color:var(--muted);margin:14px 0 0}
.rental-more-banner{max-width:none}
.rental-select-btn{margin-top:12px;width:100%;border:1px solid var(--blue);background:#fff;color:var(--blue);border-radius:7px;padding:9px 12px;font-weight:800;font-size:12px;cursor:pointer;transition:.15s background,.15s color}
.rental-select-btn:hover{background:var(--blue);color:#fff}
.rental-select-btn-sm{flex:none;border:1px solid var(--blue);background:#fff;color:var(--blue);border-radius:6px;padding:5px 9px;font-weight:800;font-size:10.5px;cursor:pointer;white-space:nowrap;transition:.15s background,.15s color}
.rental-select-btn-sm:hover{background:var(--blue);color:#fff}
.rental-addon-box{align-self:stretch;width:100%;box-sizing:border-box;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.rental-addon-kicker{margin:0 0 8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rental-addon-card{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px;background:#f9fbfd;text-align:left}
.rental-addon-img{flex:none;width:64px;height:64px;object-fit:contain;background:#fff;border-radius:8px}
.rental-addon-body{flex:1;min-width:0}
.rental-addon-name{margin:0;font-size:14px;font-weight:800;color:var(--ink)}
.rental-addon-sub{margin:2px 0 0;font-size:12px;color:var(--muted)}
.rental-addon-desc{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--muted);white-space:pre-line}
.rental-addon-buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.rental-addon-price{font-weight:800;color:var(--blue);font-size:15px}
.rental-addon-buy .rental-qty-widget{margin:0}
.rental-modal-addons{margin:0 0 20px;padding-top:18px;border-top:1px solid var(--line)}
.rental-modal-addons[hidden]{display:none}
.rental-modal-addons .rental-addon-img{width:88px;height:88px}
.rental-select-btn.is-added,.rental-select-btn-sm.is-added{background:var(--blue);color:#fff}
.rental-select-btn.is-added:hover,.rental-select-btn-sm.is-added:hover{background:#0662d1;border-color:#0662d1}
/* Mangdkontroll direkt pa produktkortet (tillagd 2026-09-08) - samma
   .addon-qty-komponent som redan anvands i sammanstallningen och i
   karaokebokningens tillvalssteg. .rental-qty-widget-sm anvands i de
   smala variant-/tillvalsraderna (projektor-lumen, dukstorlekar,
   ljusstativ, DJ-basets LED-tillval) dar utrymmet ar begransat. */
.rental-qty-widget{margin-top:12px}
.rental-qty-widget .addon-qty{justify-content:center}
.rental-qty-widget-sm{flex:none}
.addon-qty-sm{gap:4px}
/* Mindre, fyrkantiga +/- -knappar och normalvikt-siffra pa hyra-teknik.html
   (tillagt 2026-09-08) - skopat till accordion-widgetarna och
   sammanstallningens mangdkontroll, paverkar INTE .addon-qty i
   boka.html/#booking-addons som fortfarande ar runda enligt sin egen regel. */
.rental-qty-widget .addon-qty-btn,
.rs-qty .addon-qty-btn{width:24px;height:24px;border-radius:5px;font-size:13px}
.addon-qty-sm .addon-qty-btn{width:18px;height:18px;border-radius:4px;font-size:11px}
.rental-qty-widget .addon-qty-value,
.rs-qty .addon-qty-value,
.addon-qty-sm .addon-qty-value{font-weight:400}
.addon-qty-sm .addon-qty-value{font-size:12px;min-width:12px}
@media(max-width:900px){.rental-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.rental-grid{grid-template-columns:1fr}}

/* hyra-teknik.html — kategori-accordion (stangda som standard) */
.rental-accordion{max-width:100%;display:flex;flex-direction:column;gap:14px;margin-bottom:48px}
.rental-accordion-item{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 4px 16px rgba(2,16,45,.05)}
.rental-accordion-heading{margin:0}
.rental-accordion-toggle{width:100%;display:flex;align-items:center;gap:16px;background:none;border:0;padding:14px 18px;text-align:left;font:inherit;cursor:pointer}
.rental-accordion-toggle:hover .rental-accordion-name{color:var(--blue)}
/* Kategoribild (2026-09-27): FAST bildyta for alla kategorier (156x56, mobil 120x44) sa att rubrikerna linjerar; 1-3 produktbilder vansterstallda bredvid varandra, utan individuella rutor/plattor, object-fit: contain (hela produkten syns). */
.rental-accordion-thumb{width:156px;height:56px;flex:none;display:flex;align-items:center;justify-content:flex-start;gap:5px}
.rental-accordion-thumb img{flex:0 1 auto;min-width:0;max-width:56px;height:100%;object-fit:contain;display:block}
.rental-accordion-thumb-duo img,.rental-accordion-thumb-trio img{flex:1 1 0;max-width:none}
/* Bred enskild produkt (Mikrofoner, 2026-09-28): tat beskuren bild far bredare yta an 56 px sa att den far ungefar samma visuella tyngd som ovriga kategoribilder; contain = ingen beskarning. */
.rental-accordion-thumb-wide img{width:auto;max-width:112px}
/* Naturlig bredd (Mikrofoner, 2026-09-27): varje bild far sin egen proportion i stallet for lika breda fack - breda och smala produkter blir lika hoga. Ryms de inte krymper alla proportionerligt (flex-shrink efter bredd); contain = aldrig beskarning/stretching. */
.rental-accordion-thumb-natural img{flex:0 1 auto;width:auto;max-width:none}
.rental-accordion-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rental-accordion-name{font-size:16px;font-weight:900;color:var(--ink);transition:.15s color}
.rental-accordion-sub{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rental-accordion-chevron{width:20px;height:20px;color:var(--blue);flex:none;transition:transform .25s ease}
.rental-accordion-item.is-open .rental-accordion-chevron{transform:rotate(180deg)}
.rental-accordion-panel-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.rental-accordion-item.is-open .rental-accordion-panel-wrap{grid-template-rows:1fr}
.rental-accordion-panel-inner{overflow:hidden}
.rental-accordion-panel-content{padding:4px 18px 22px}
@media(prefers-reduced-motion:reduce){.rental-accordion-chevron,.rental-accordion-panel-wrap{transition:none}}
@media(max-width:640px){.rental-accordion-toggle{padding:12px 14px;gap:12px}.rental-accordion-thumb{width:120px;height:44px;gap:4px}.rental-accordion-thumb img{max-width:44px}.rental-accordion-thumb-duo img,.rental-accordion-thumb-trio img{max-width:none}.rental-accordion-thumb-wide img{max-width:86px}.rental-accordion-thumb-natural img{max-width:none}.rental-accordion{gap:8px}.rental-accordion-name{font-size:14.5px}.rental-accordion-sub{display:none}.rental-accordion-panel-content{padding:2px 14px 18px}}

/* hyra-teknik.html — bokningsformular for teknikuthyrning */
.rental-request-intro{max-width:none;margin-bottom:24px}
.rental-request-intro h2{margin:0 0 8px;font-size:26px}
.rental-request-intro p{margin:0;color:var(--muted);line-height:1.6;font-size:14.5px}
.form-section h3{margin:0 0 4px;font-size:16px}
.addon-tile.rental-tile.is-selected{border-color:var(--blue);box-shadow:0 6px 18px rgba(8,120,255,.14)}
.rental-summary-box{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:16px 0 20px;background:#f7f9fc}
.rental-summary-scroll-link{border:0;background:none;color:var(--blue);font-weight:800;font-size:inherit;text-decoration:underline;cursor:pointer;padding:0}

/* Rad-layout for "Vald utrustning" — kondenserad orderoversikt, en rad per
   produkt fran 640px och uppat (Produkt/Enhetspris/Antal/Summa/Ta bort som
   CSS grid-kolumner); under 640px bryts varje rad om till tre kompakta
   rader i stallet for fem trangda kolumner (se media-query langst ner). */
.rental-summary-head{display:none;grid-template-columns:1fr 100px 110px 100px 70px;column-gap:12px;padding:0 0 8px;font-size:10.5px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:2px}
.rental-summary-head[hidden]{display:none}
.rental-summary-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rental-summary-list[hidden]{display:none}
#rental-summary-total[hidden]{display:none}
#rental-summary-total{margin:10px 0 0;padding:10px 14px}
.rental-summary-line{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-areas:"name name name" "unit qty total" "remove remove remove";row-gap:6px;column-gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.rental-summary-line:last-child{border-bottom:0}
.rs-name{grid-area:name;font-weight:800;font-size:13.5px;color:var(--ink);min-width:0}
.rs-unit{grid-area:unit;display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--muted)}
.rs-qty{grid-area:qty;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.rs-qty .addon-qty{margin:0;padding:0}
.rs-qty-static{font-weight:700;color:var(--ink)}
.rs-total{grid-area:total;display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--blue);font-weight:900}
.rs-mlabel{display:block;font-size:9.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.rental-summary-remove{grid-area:remove;justify-self:start;width:30px;height:30px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:5px;background:none;color:var(--muted);cursor:pointer;padding:0}
.rental-summary-remove .icon{width:16px;height:16px}
.rental-summary-remove:hover,.rental-summary-remove:focus-visible{color:#b3261e;background:#fdeceb}
@media(min-width:640px){
  .rental-summary-head{display:grid}
  .rental-summary-head[hidden]{display:none}
  .rental-summary-line{grid-template-columns:1fr 100px 110px 100px 70px;grid-template-areas:"name unit qty total remove";row-gap:0;padding:8px 0}
  .rs-unit,.rs-qty,.rs-total{flex-direction:row;align-items:center;font-size:13px}
  .rs-total{font-size:13.5px}
  .rs-mlabel{display:none}
  .rental-summary-remove{justify-self:end}
}

/* hyra-teknik.html — bekraftelse-toast vid produktval (tillagd 2026-09-07) */
.rental-toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,10px);max-width:calc(100% - 32px);background:#0c2146;color:#fff;padding:12px 20px;border-radius:999px;font-size:13px;font-weight:800;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 10px 30px rgba(2,16,45,.35);z-index:210;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.rental-toast.is-visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:900px){.rental-toast{left:auto;right:24px;bottom:auto;top:92px;transform:translateY(-8px)}.rental-toast.is-visible{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.rental-toast{transition:none}}

/* hyra-teknik.html — hyresperiod med "Inget bestamt datum" (tillagd 2026-09-08) */
.rental-date-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end;margin-top:20px}
.rental-date-row label{display:flex;flex-direction:column;font-size:12px;font-weight:700}
.rental-date-row input[type="date"]{width:100%;margin-top:6px;border:1px solid #cfd7e3;border-radius:7px;padding:11px;font:inherit}
.rental-date-row input[type="date"]:disabled{opacity:.5;background:#f1f3f6;cursor:not-allowed}
.rental-date-row .rental-date-undecided-label{flex-direction:row;align-items:center;gap:8px;white-space:nowrap;font-weight:600;font-size:13px;cursor:pointer;padding-bottom:11px}
.rental-date-undecided-label input{margin:0;width:16px;height:16px;flex:none;accent-color:var(--blue)}
@media(max-width:640px){
  .rental-date-row{grid-template-columns:1fr}
  .rental-date-undecided-label{padding-bottom:0;padding-top:2px}
}

/* hyra-teknik.html — generiskt bildgalleri pa produktkort (tillagd 2026-09-08).
   Huvudbilden ateranvander .addon-tile-icon (samma fasta hojd som alla
   ovriga produktbilder pa sidan, sa kortet aldrig andrar hojd nar
   miniatyrer klickas). Miniatyrraden visas bara pa kort som faktiskt
   har flera bilder (ingen .rental-gallery-thumbs alls pa kort med en bild). */
.rental-gallery-thumbs{display:flex;gap:6px;justify-content:center;margin:2px 0 8px}
.rental-gallery-thumb{width:44px;height:44px;padding:0;flex:none;border:2px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;background:#f1f3f6;transition:.15s border-color}
.rental-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rental-gallery-thumb:hover{border-color:#cfd7e3}
.rental-gallery-thumb.is-active{border-color:var(--blue)}
.rs-note{font-weight:600;color:var(--muted);font-size:.9em}
.rental-gallery-thumb:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* hyra-teknik.html — "Mer information"-lank pa produktkort (tillagd 2026-09-08) */
.rental-info-link{align-self:flex-start;border:0;background:none;color:var(--blue);font-weight:800;font-size:11px;text-decoration:underline;cursor:pointer;padding:2px 0;margin:2px 0 0}
.rental-info-link:hover{color:#005ddb}

/* hyra-teknik.html — genererisk produktinfo-modal (tillagd 2026-09-08).
   Renderas helt fran RENTAL_ITEMS i rental.js - se PROJECT.md. */
.rental-modal-overlay{position:fixed;inset:0;background:rgba(2,9,24,.55);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .2s ease}
.rental-modal-overlay.is-visible{opacity:1}
.rental-modal-overlay[hidden]{display:none}
.rental-modal-card{background:#fff;border-radius:16px;max-width:900px;width:100%;max-height:88vh;overflow-y:auto;position:relative;padding:32px 32px 28px;box-shadow:0 30px 80px rgba(0,0,0,.35);transform:translateY(12px);transition:transform .2s ease;outline:none}
.rental-modal-overlay.is-visible .rental-modal-card{transform:translateY(0)}
.rental-modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border:0;border-radius:8px;background:#f1f3f6;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.rental-modal-close .icon{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.rental-modal-close:hover{background:#e7ebf1;color:var(--ink)}
.rental-modal-manufacturer{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--blue)}
.rental-modal-manufacturer[hidden]{display:none}
.rental-modal-title{margin:0 0 16px;font-size:22px;padding-right:40px}
.rental-modal-gallery-wrap .addon-tile-icon{height:260px;margin-bottom:10px}
.rental-modal-gallery-wrap .rental-gallery-thumb{width:52px;height:52px}
/* Liggande miniatyrer i popupen (item.thumbsWide, 2026-09-27): ~16:9, vit platta, HELA bilden syns (contain, ingen beskarning/stretching). Ryms raden inte scrollar den lokalt i sidled; forsta/sista auto-marginal centrerar utan att kapa borjan vid overflow. */
.rental-modal-gallery--wide-thumbs .rental-gallery-thumbs{justify-content:flex-start;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:4px;margin:0 0 6px}
.rental-modal-gallery--wide-thumbs .rental-gallery-thumb{width:112px;height:63px;background:#fff;border-color:#e3e8ef}
.rental-modal-gallery--wide-thumbs .rental-gallery-thumb:first-child{margin-left:auto}
.rental-modal-gallery--wide-thumbs .rental-gallery-thumb:last-child{margin-right:auto}
.rental-modal-gallery--wide-thumbs .rental-gallery-thumb:hover{border-color:#cfd7e3}
.rental-modal-gallery--wide-thumbs .rental-gallery-thumb.is-active{border-color:var(--blue)}
.rental-modal-gallery--wide-thumbs .rental-gallery-thumb img{object-fit:contain;object-position:center;padding:3px;box-sizing:border-box}
/* Stor huvudbild i popupen for storre produkter (item.galleryLarge, 2026-09-27): tat beskurna HD-bilder fyller hela innehallsbredden dar proportionerna tillater (max 600 px hog, begransad av skarmbredd/-hojd); object-fit: contain (ingen beskarning). */.rental-modal-gallery-wrap.rental-modal-gallery--large .addon-tile-icon{height:min(600px,calc((100vw - 36px) * .8),62vh)}
.rental-modal-priceblock{margin:4px 0 14px;padding-top:14px;border-top:1px solid var(--line)}
.rental-modal-price{font-size:22px;font-weight:900;color:var(--blue)}
.rental-modal-bundle-hint{font-size:12px;color:var(--muted);margin:4px 0 0}
.rental-modal-bundle-hint[hidden]{display:none}
.rental-modal-desc{margin:0 0 18px;color:var(--muted);line-height:1.6;font-size:14px;white-space:pre-line}
.rental-modal-desc[hidden]{display:none}
.rental-modal-suitable,.rental-modal-specs,.rental-modal-video,.rental-modal-docs{margin:0 0 20px;padding-top:18px;border-top:1px solid var(--line)}
.rental-modal-suitable[hidden],.rental-modal-specs[hidden],.rental-modal-video[hidden],.rental-modal-docs[hidden]{display:none}
.rental-modal-suitable h3,.rental-modal-specs h3,.rental-modal-video h3,.rental-modal-docs h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
/* Stor produktvideo under produktinformationen (aterinford 2026-09-20,
   se PROJECT.md "Produktinfo-modal"). Facade = YouTubes egen thumbnail
   + stor spelknapp, tar hela modalens innehallsbredd, 16:9. Iframen
   byggs forst vid klick (handleVideoFacadeClick i rental.js) och
   ersatter facaden i DOM:en. */
.rental-modal-video-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:10px;overflow:hidden;background:#0b1420;cursor:pointer}
.rental-modal-video-poster{width:100%;height:100%;object-fit:cover;display:block}
.rental-modal-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;transition:.15s background,.15s transform}
.rental-modal-video-play::before{content:"";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #0878ff;margin-left:4px}
.rental-modal-video-facade:hover .rental-modal-video-play{background:#fff;transform:translate(-50%,-50%) scale(1.06)}
.rental-modal-video-facade:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.rental-modal-video-frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#0b1420}
.rental-modal-suitable ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rental-modal-suitable li{background:#eaf4ff;color:var(--blue);font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px}
.rental-modal-specs dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px}
.rental-modal-specs dt{color:var(--muted);font-weight:700}
.rental-modal-specs dd{margin:0;color:var(--ink);font-weight:700}
.rental-modal-sizes{margin:0 0 20px;padding-top:18px;border-top:1px solid var(--line)}
.rental-modal-sizes[hidden]{display:none}
.rental-modal-sizes h3,.rental-modal-qty-title{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
.rental-modal-qty-title{padding-top:18px;border-top:1px solid var(--line)}
.rental-modal-qty-title[hidden]{display:none}
.rental-size-table{width:100%;border-collapse:collapse;font-size:13px}
.rental-size-table th,.rental-size-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.rental-size-table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;white-space:nowrap;background:#f6f8fb}
.rental-size-table tbody th,.rental-size-table td{color:var(--ink);font-weight:700}
.rental-size-table tbody th{white-space:nowrap}
.rental-size-inch{display:none}
.rental-size-note{margin:8px 0 0;font-size:12px;color:var(--muted)}
@media (max-width:600px){
.rental-size-table thead{display:none}
.rental-size-table,.rental-size-table tbody,.rental-size-table tr,.rental-size-table th,.rental-size-table td{display:block;width:auto}
.rental-size-table tr{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 10px;background:#f9fbfd}
.rental-size-table tbody th{padding:0 0 6px;border:0;font-size:14px;white-space:normal}
.rental-size-inch{display:inline}
.rental-size-table td{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border:0}
.rental-size-table td::before{content:attr(data-label);color:var(--muted);font-weight:700}
.rental-size-table td.rental-size-col-inch{display:none}
}
/* Produktinfo-popup: valfri underrubrik + faktalista (2026-09-27, XDJ-RX3) */
.rental-modal-subtitle{margin:-8px 0 14px;font-size:14px;font-weight:700;color:var(--muted)}
.rental-modal-subtitle[hidden]{display:none}
.rental-modal-facts{margin:0 0 20px;padding-top:18px;border-top:1px solid var(--line)}
.rental-modal-facts[hidden]{display:none}
.rental-modal-facts h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
.rental-modal-facts ul{margin:0;padding-left:18px;columns:2;column-gap:28px;font-size:13px;line-height:1.7;color:var(--ink)}
.rental-modal-facts li{break-inside:avoid}
.rental-modal-facts li::marker{color:var(--blue)}
@media(max-width:560px){.rental-modal-facts ul{columns:1}}
.rental-modal-docs-list{display:flex;flex-wrap:wrap;gap:10px}
.rental-modal-docs-list a{border:1px solid var(--line);border-radius:7px;padding:8px 14px;font-size:12.5px;font-weight:800;color:var(--blue);text-decoration:none}
.rental-modal-docs-list a:hover{border-color:var(--blue)}
.rental-modal-qty{margin:4px 0 18px}
.rental-modal-close-btn{width:100%}
/* Fristaende videomodal for tillvalskort (t.ex. JBL PartyBox Stage 320, se
   openAddonVideoModal() i script.js). Atervander .rental-modal-overlay/
   -card/-close/-video-frame rakt av (samma utseende, rundade horn, farger,
   skugga) - bara kortet gors nagot bredare eftersom det bara innehaller
   en titel + stor video, ingen ovrig produktinfo. */
.video-only-modal-card{max-width:960px;padding-top:28px}
.video-only-modal-card .rental-modal-title{margin-bottom:14px}
.video-only-modal-card .rental-modal-facts{margin:20px 0 0}
@media(prefers-reduced-motion:reduce){.rental-modal-overlay,.rental-modal-card{transition:none}}
@media(max-width:640px){
  .rental-modal-overlay{padding:0}
  .rental-modal-card{max-width:100%;height:100%;max-height:100%;border-radius:0;padding:24px 18px 20px}
  .rental-modal-gallery-wrap .addon-tile-icon{height:200px}
  .rental-modal-gallery--wide-thumbs .rental-gallery-thumb{width:96px;height:54px}
}

/* Karaokelatar.html - sokbar latkatalog (tillagd 2026-09-19) */
.kl-search-wrap{max-width:640px;margin:0 auto 8px}
.kl-search-label{display:block;font-weight:800;font-size:14px;color:var(--ink);margin-bottom:8px}
.kl-search-input{width:100%;border:1px solid #cfd7e3;border-radius:10px;padding:16px 18px;font:inherit;font-size:17px;background:#fff}
.kl-search-input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.kl-meta{max-width:640px;margin:14px auto 0;font-size:14px;color:var(--muted);font-weight:700}
.kl-intro{max-width:640px;margin:22px auto 0;padding:20px 22px;border:1px solid var(--line);border-radius:10px;background:#f7f9fc}
.kl-intro p{margin:0 0 10px;font-size:14.5px;color:var(--muted)}
.kl-intro p:last-child{margin-bottom:0}
.kl-intro a{color:var(--blue);font-weight:700}
.kl-results{list-style:none;margin:18px auto 0;padding:0;max-width:640px}
.kl-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 4px;border-top:1px solid var(--line)}
.kl-results li:first-child{border-top:0}
.kl-row-title{font-weight:700;color:var(--ink);font-size:15px}
.kl-row-artist{color:var(--muted);font-size:14px}
.kl-row-tag{margin-left:auto;flex:none;font-size:10px;font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:var(--blue);background:#eaf2ff;border-radius:999px;padding:2px 8px}
.kl-load-more-wrap{max-width:640px;margin:18px auto 0;text-align:center}
@media(max-width:640px){
  .kl-search-input{font-size:16px;padding:14px 16px}
  .kl-row{padding:10px 2px}
  .kl-row-title{font-size:14.5px}
  .kl-row-artist{font-size:13.5px}
}

/* Cookie-/samtyckesbanner (KFX-GA4-001, tillagd 2026-09-20). Byggs helt
   av analytics.js - ingen HTML per sida. Icke-modal (blockerar aldrig
   nagon bakomliggande formularinteraktion), fast i nederkanten. Nar
   mobil-CTA-baren (.mobile-cta-bar, se ovan) finns pa sidan lyfts
   bannern ovanfor den med samma body:has()-monster som redan anvands
   dar, sa de aldrig overlappar varandra. */
.kfx-consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:400;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(2,16,45,.18)}
.kfx-consent-banner[hidden]{display:none}
.kfx-consent-inner{max-width:960px;margin:0 auto;padding:18px 24px calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.kfx-consent-title{margin:0 0 4px;font-size:15px;font-weight:900;color:var(--ink);flex:1 1 100%}
.kfx-consent-text{margin:0;font-size:13px;line-height:1.5;color:var(--muted);flex:1 1 380px;min-width:200px}
.kfx-consent-actions{display:flex;gap:10px;flex:0 0 auto;margin-left:auto}
.kfx-consent-actions .btn{padding:11px 18px;font-size:12.5px;white-space:nowrap}
body:has(.mobile-cta-bar) .kfx-consent-banner{bottom:66px}
.kfx-consent-settings-link{cursor:pointer}
@media(max-width:640px){
  .kfx-consent-inner{padding:16px 18px calc(16px + env(safe-area-inset-bottom));gap:14px}
  .kfx-consent-title{font-size:14px}
  .kfx-consent-text{font-size:12.5px;flex-basis:100%}
  .kfx-consent-actions{width:100%;margin-left:0}
  .kfx-consent-actions .btn{flex:1}
}

/* Booking package cards V3 – desktop: fyra fulla kort; mobil (<=640px, projektets befintliga mobilgräns): endast valt paket utfällt */
.package-grid .package{position:relative}
.package .pkg-card{display:flex;flex-direction:column;width:100%;border:2px solid #dde3ec;border-radius:14px;background:#fff;overflow:hidden;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
.package .pkg-head{padding:14px 16px;display:flex;align-items:center;gap:10px}
.package .pkg-title{font-size:17px;font-weight:900;line-height:1.25}
.package .pkg-chevron{display:none}
.package .pkg-panel{display:flex;flex-direction:column;flex:1}
.package .pkg-img{width:100%;height:150px;object-fit:cover}
.package .pkg-body{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px}
.package .pkg-intro{font-size:13px;color:#57616e;line-height:1.5;margin:0 0 10px}
.package .compare-list{flex:1}
.package .tier-fit{font-size:12px}
.package .pkg-price{margin-top:auto;text-align:center}
.package .price-value{font-size:26px;color:var(--ink)}
.package input:checked+.pkg-card{border-color:var(--blue);background:#f6faff;box-shadow:0 0 0 1px var(--blue)}
.package input:focus-visible+.pkg-card{outline:3px solid var(--blue2);outline-offset:2px}
@media(max-width:640px){
  .package-grid{gap:8px}
  .package .pkg-chevron{display:block;flex:none;margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
  .package input:checked+.pkg-card .pkg-chevron{transform:rotate(-135deg) translateY(-2px)}
  .package input:not(:checked)+.pkg-card .pkg-panel{display:none}
  .package .pkg-img{height:auto;aspect-ratio:700/438}
  .package .pkg-img.pkg-img-product{aspect-ratio:3/2}
}
@media(prefers-reduced-motion:reduce){.package .pkg-card,.package .pkg-chevron{transition:none}}
.package .compare-row span{display:inline;width:auto;border:0;border-radius:0;padding:0;gap:0;cursor:inherit}
@media(min-width:641px) and (max-width:899px){.booking-page-card .package-grid{grid-template-columns:repeat(2,1fr)}}
.package .pkg-title{font-weight:400}
.package .package-prefix{font-style:normal;font-weight:400}
.package .package-tier{font-weight:900;font-size:inherit;color:inherit}
/* Hyra teknik: forfragningsformularet foljer samma container som kategorierna (global .form-grid har max-width:820px for boka.html - galler inte har) */
#rental-request-form .form-grid{max-width:none}

/* Sidfot: telefontid och besoksinfo (raderna under telefon/adress) */
.footer .footer-note{margin:-2px 0 12px 0;font-size:12px;line-height:1.5;color:#9fb3d3}

/* ===== Kontakt & hitta till oss (kontakt-karaokefixarna.html) ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.contact-hero{background:linear-gradient(180deg,#f7f9fc,#fff);padding:56px 0 48px}
.contact-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:stretch}
.contact-eyebrow{display:flex;align-items:center;gap:12px;color:var(--blue);font-size:13px;font-weight:800;letter-spacing:.04em;margin:0 0 12px}
.contact-eyebrow:before{content:"";width:34px;height:2px;background:var(--blue)}
.contact-info h1{font-size:42px;line-height:1.1;margin:0 0 14px;letter-spacing:-1px;color:var(--ink)}
.contact-lead{color:var(--muted);font-size:16.5px;line-height:1.6;margin:0 0 26px;max-width:560px}
.contact-card{background:#eef4fc;border:1px solid #dbe7f6;border-radius:16px;padding:26px 26px 28px}
.contact-card-title{font-size:18px;margin:0 0 18px;color:var(--ink)}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.contact-list li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start}
.contact-ico{width:48px;height:48px;border-radius:50%;background:#dfeafb;color:var(--blue);display:grid;place-items:center;flex:none}
.contact-ico .icon{width:22px;height:22px}
.contact-label{display:block;font-size:15px;font-weight:900;color:var(--ink);margin-bottom:2px}
.contact-value{display:block;font-size:16px;line-height:1.5;color:#2d3441;font-style:normal}
.contact-value a{color:var(--blue);font-weight:800;text-decoration:none}
.contact-value a:hover{text-decoration:underline}
.contact-sub{display:block;font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:2px}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.contact-actions .btn{flex:1 1 200px;gap:12px}
.contact-actions .btn .icon{width:18px;height:18px}
.contact-map-frame{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1px solid #dbe7f6;background:#e9f0f8;display:grid;place-items:center;box-shadow:var(--shadow)}
.contact-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.contact-map-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px;padding:14px 18px;border-radius:12px;background:#eef4fc;border:1px solid #dbe7f6}
.contact-map-address{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);font-size:14.5px}
.contact-map-address .icon{width:20px;height:20px;color:var(--blue);flex:none}
.contact-map-link{color:var(--blue);font-weight:800;font-size:14px;text-decoration:none}
.contact-map-link:hover{text-decoration:underline}
.contact-features{border-top:1px solid var(--line);padding:32px 0 40px;background:#fff}
.contact-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.contact-feature{display:flex;gap:16px;align-items:flex-start}
.contact-feature h3{margin:0 0 4px;font-size:16px;color:var(--ink)}
.contact-feature p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.contact-page a:focus-visible,.contact-page button:focus-visible{outline:3px solid var(--blue2);outline-offset:3px;border-radius:6px}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:28px}.contact-info h1{font-size:36px}}
@media(max-width:640px){.contact-hero{padding:36px 0 32px}.contact-info h1{font-size:30px}.contact-card{padding:20px 18px 22px}.contact-list li{grid-template-columns:40px 1fr;gap:12px}.contact-ico{width:40px;height:40px}.contact-ico .icon{width:19px;height:19px}.contact-actions .btn{flex-basis:100%}}

/* Kontaktsidan: lokal statisk OpenStreetMap-baserad kartbild + markör */
.contact-map-static{position:absolute;inset:0}
.contact-map-static[hidden]{display:none}
.contact-map-img{display:block;width:100%;height:100%;object-fit:cover}
.contact-map-label{position:absolute;transform:translate(-50%,-50%);font-size:11px;font-weight:700;letter-spacing:.08em;color:#5f6b5f;text-shadow:0 0 3px #f4f2ec,0 0 3px #f4f2ec,0 0 5px #f4f2ec;pointer-events:none;white-space:nowrap}
.contact-map-label-town{font-size:17px;font-weight:800;letter-spacing:.01em;color:#2b3340}
.contact-map-road{position:absolute;transform:translate(-50%,-50%);background:#1f8a4c;color:#fff;font-size:10.5px;font-weight:800;padding:2px 6px;border-radius:5px;border:1.5px solid #fff;pointer-events:none}
.contact-map-marker{position:absolute;width:0;height:0}
.contact-pin-svg{position:absolute;left:-15px;top:-40px;width:30px;height:40px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.contact-map-callout{position:absolute;left:20px;top:-38px;background:#fff;border-radius:8px;padding:6px 10px;font-size:12.5px;line-height:1.35;color:var(--ink);box-shadow:0 4px 14px rgba(2,16,45,.22);white-space:nowrap}
.contact-map-callout strong{display:block;font-size:13.5px}
.contact-map-attrib{position:absolute;right:0;bottom:0;background:rgba(255,255,255,.85);color:#333;font-size:11px;padding:3px 8px;border-top-left-radius:6px;text-decoration:none}
.contact-map-attrib:hover{text-decoration:underline}
@media(max-width:1000px){.contact-feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.contact-feature-grid{grid-template-columns:1fr;gap:20px}.contact-map-callout{font-size:11.5px;padding:5px 8px}.contact-map-label-town{font-size:14px}}
/* Sidfot: telefonikon och nummer pa samma rad (a i p ska vara inline) */
.footer p a{display:inline;margin:0}
/* Bronze: ny produktbild (vit bakgrund) + saljtext. Bilden ar ren utrustning; rubriken ar HTML. */
.pkg-hero-sales{max-width:540px;margin:0 0 24px;color:#d7e5f7;line-height:1.7}
.pkg-hero-sales p{margin:0 0 12px}
.pkg-hero-sales strong{color:#fff;font-weight:800}
.pkg-hero-product{margin:0;background:#fff;color:var(--ink);padding:18px 18px 8px}
.pkg-product-title{font-size:21px;line-height:1.2;margin:0;color:var(--ink)}
.pkg-hero .pkg-product-sub{margin:4px 0 0;font-size:13.5px;color:#57616e}
.pkg-hero-product .pkg-hero-image{aspect-ratio:1000/625;object-fit:contain;margin-top:2px}
.tier-image-product,.package .pkg-img.pkg-img-product{object-fit:contain;background:#fff;padding:4px 0;mix-blend-mode:multiply}
@media(max-width:900px){.pkg-hero-product{order:0;max-width:520px}}

/* Kontaktsidan desktop: kort och kartsektion avslutas pa samma hojd (grid stretch + flex) */
.contact-map-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100cqw,133.34cqh);aspect-ratio:4/3}
.contact-map-frame{container-type:size}
.contact-map-frame iframe{position:absolute;inset:0}
.contact-map-canvas .contact-map-img{position:absolute;inset:0}
@media(min-width:901px){
  .contact-info{display:flex;flex-direction:column}
  .contact-card{flex:1;display:flex;flex-direction:column}
  .contact-card .contact-actions{margin-top:auto;padding-top:24px}
  .contact-map{display:flex;flex-direction:column}
  .contact-map-frame{flex:1;aspect-ratio:auto;min-height:320px}
}
@media(min-width:901px){
  .contact-grid{grid-template-columns:1fr 1.1fr;gap:36px}
  .contact-list{gap:14px}
  .contact-lead{margin-bottom:20px}
  .contact-card{padding:22px 24px 24px}
  .contact-actions{margin-top:20px}
  .contact-map-canvas{transform:none;top:50%;margin-top:calc(-.5 * max(100cqw * .75, 100cqh));left:clamp(calc(100cqw - max(100cqw, 133.34cqh)), calc(50cqw - .52 * max(100cqw, 133.34cqh)), 0px)}
}
@media(max-width:900px){.package .pkg-img.pkg-img-product{height:auto;aspect-ratio:3/2}}
/* "Detta ingar": checklista + EN samlad paketbild i tva kolumner */
.pkg-includes-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px;align-items:center}
.pkg-includes-layout .check-grid{grid-template-columns:1fr}
.pkg-includes-media{margin:0;background:#fff;border:1px solid #e2e8f1;border-radius:16px;padding:14px}
.pkg-includes-media img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:900px){.pkg-includes-layout{grid-template-columns:1fr;gap:22px}.pkg-includes-media{max-width:520px;margin:0 auto;width:100%}}

/* Bekraftelse efter skickad bokningsforfragan (kvitto) */
.confirm-card{max-width:620px;margin:8px auto 0;padding:34px 28px 30px}
.confirm-card div{font-size:inherit;color:inherit}
.confirm-card .confirm-icon{margin:0 0 10px;line-height:0}
.confirm-card h3{margin:0 0 10px;font-size:26px}
.confirm-lead{margin:0 auto 10px;max-width:520px;line-height:1.6;color:#2d3441}
.confirm-note{margin:0 auto 22px;font-size:13px;color:var(--muted)}
.confirm-summary{text-align:left;background:#f7f9fc;border:1px solid #e4eaf1;border-radius:12px;padding:16px 20px;margin:0 0 24px}
.confirm-summary-title{margin:0 0 10px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.confirm-summary dl{margin:0;display:grid;gap:12px}
.confirm-summary dl>div{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:baseline}
.confirm-summary dt{font-size:12px;font-weight:800;color:var(--muted)}
.confirm-summary dd{margin:0;font-size:14.5px;color:var(--ink)}
.confirm-addon{display:flex;justify-content:space-between;gap:12px}
.confirm-addon+.confirm-addon{margin-top:4px}
.confirm-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.confirm-actions .btn{flex:1 1 200px;max-width:260px}
.booking-steps-complete .booking-step-pill{pointer-events:none;cursor:default}
@media(max-width:640px){.confirm-card{padding:26px 16px 22px}.confirm-card h3{font-size:22px}.confirm-summary dl>div{grid-template-columns:1fr;gap:2px}.confirm-actions .btn{flex-basis:100%;max-width:none}}

/* Saljtext pa paketens detaljsidor (stycken efter hero) */
.pkg-sales{padding-top:34px;padding-bottom:0}
.pkg-sales-inner{max-width:760px}
.pkg-sales-inner p{margin:0 0 16px;font-size:16.5px;line-height:1.75;color:#2d3441}
.pkg-sales-inner .pkg-sales-closing{margin:22px 0 0;font-size:19px;font-weight:800;line-height:1.4;color:var(--ink)}
@media(max-width:640px){.pkg-sales{padding-top:24px}.pkg-sales-inner p{font-size:15.5px}.pkg-sales-inner .pkg-sales-closing{font-size:17px}}

/* Diamant-offertlage: dolda steg-piller (display:flex ovan vinner annars over [hidden]) */
.booking-step-pill[hidden]{display:none}

/* Diamant-offert: informationssektion ovanfor fritextfaltet (boka.html #quote-event-info) */
.quote-event-info{margin:10px 0 -6px}
.quote-event-info h3{margin:0 0 10px;font-size:17px;line-height:1.3}
.quote-event-info p{margin:0 0 12px;font-size:14px;line-height:1.65;color:#2d3441}
.quote-event-info p:last-child{margin-bottom:0}
@media(max-width:640px){.quote-event-info p{font-size:14.5px;margin-bottom:14px}}
/* Diamant-offert: info + fritextfalt far hela formularbredden (ovriga falt behaller 820px). Vanlig bokning oforandrad. */
.form-grid.form-grid-wide{margin-top:14px}
#page-booking-form.is-quote .form-grid.form-grid-wide{max-width:none}
/* Leverans/installation/nermontering/aterhamtning (boka.html #logistics-fields) */
.field-help{display:block;margin-top:5px;font-weight:400;font-size:12px;line-height:1.45;color:var(--muted)}
.field-help:empty{display:none}
.logistics-grid select{min-width:0}
.price-lines .form-help{padding:10px 16px}
/* Kontaktformular (kontakt-karaokefixarna.html #contact-form) */
.contact-form-section{border-top:1px solid var(--line);padding:48px 0 60px;background:#fff}
.contact-form-section h2{margin:0 0 8px;font-size:26px}
.contact-form-lead{margin:0;max-width:640px;color:var(--muted);font-size:15px;line-height:1.6}
.contact-form-section .form-grid{max-width:820px}
.contact-form-section .form-error,.contact-form-success{max-width:820px}
.contact-form-submit{margin-top:18px}
.contact-form-section input:focus-visible,.contact-form-section textarea:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.contact-form-success{margin-top:20px;padding:18px 20px;border-left:4px solid var(--blue);background:#f5f9ff;border-radius:8px}
.contact-form-success:focus{outline:none}
.contact-form-success h3{margin:0 0 6px;font-size:18px}
.contact-form-success p{margin:0;color:#2d3441}
@media(max-width:640px){.contact-form-section{padding:36px 0 44px}.contact-form-section h2{font-size:23px}.contact-form-submit{width:100%}}
/* Leverans-sektionen: EN sammanhangande panel - kryssrutan + utfalld del (boka.html .logistics-box) */
.logistics-title{margin:0 0 6px}
.logistics-intro{margin:0 0 4px}
.logistics-vat{margin:0 0 12px}
/* Tva fristaende tjanster (2026-09-27): sida vid sida pa bred skarm, staplade pa mobil. */
.logistics-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.logistics-fields{display:grid;gap:14px}
.logistics-fields label{font-size:12px;font-weight:700}
.logistics-fields select{width:100%;margin-top:6px;border:1px solid #cfd7e3;border-radius:7px;padding:11px;font:inherit;font-weight:400;background-color:#fff;min-width:0}
.logistics-fields select:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
@media(max-width:760px){.logistics-services{grid-template-columns:1fr}}
.logistics-box{border:1px solid #d3dce9;border-radius:10px;background:#f7faff;transition:border-color .2s}
.logistics-box:has(.logistics-check:hover){border-color:#a9bfdf}
.logistics-check{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;line-height:1.45;color:var(--ink);cursor:pointer;border-radius:10px}
.logistics-check input{margin:1px 0 0;width:20px;height:20px;flex:none;accent-color:var(--blue);cursor:pointer}
.logistics-check input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.logistics-panel{margin:0 16px;padding:14px 0 18px;border-top:1px solid #e1e8f2}
.logistics-grid select{background-color:#fff}
@media(max-width:640px){.logistics-check{padding:13px 14px}.logistics-panel{margin:0 14px}}
@media(prefers-reduced-motion:reduce){.logistics-box{transition:none}}
/* Arbetskostnad pa tillvalskort (2026-09-26) */
.logistics-grid select{font-weight:400}
/* Tillvalskort: diskret info om arbetskostnad (popover inom kortet) + hyrpris per variant (2026-09-27) */
.addon-tile{position:relative}
.addon-labor-info{margin-top:10px}
.addon-labor-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:4px 6px;border-radius:6px;font:inherit;font-size:11.5px;font-weight:400;color:var(--muted);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.addon-labor-btn:hover,.addon-labor-btn[aria-expanded="true"]{color:var(--blue)}
.addon-labor-btn:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.addon-labor-icon{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.addon-labor-pop{position:absolute;left:8px;right:8px;bottom:44px;z-index:5;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(2,16,45,.18);padding:12px 14px;text-align:left;font-size:12.5px;line-height:1.5;color:var(--ink)}
.addon-labor-pop p{margin:0 0 3px}
.addon-labor-pop strong{font-weight:700}
.addon-labor-pop .addon-labor-pop-title{font-weight:800;margin-bottom:6px}
.addon-labor-pop .addon-labor-pop-note{margin:6px 0 0;font-size:11.5px;color:var(--muted)}
.addon-variant-btn{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.addon-variant-price{font-size:11.5px;font-weight:600;opacity:.85}
/* Meny med langre etikett "Hyra ljud, ljus & bild" (2026-09-27): ingen radbrytning;
   kompaktare meny 1081-1260 px; hamburgermenyn tar over redan fran 1080 px (samma
   regler som 900 px-blocket, men Boka nu-knappen i headern behalls). */
.main-nav a{white-space:nowrap}
@media(max-width:1260px){.main-nav{gap:18px}.main-nav a{font-size:13px}}
/* Lank som bara visas i hamburgarmenyn (<=1080 px), t.ex. "Kontakt & hitta till oss" (2026-09-28). Desktopmenyn oforandrad. */
.main-nav .nav-mobile-only{display:none}
@media(max-width:1080px){.main-nav .nav-mobile-only{display:block}}
@media(max-width:1080px){.site-header{height:66px}.main-nav{position:absolute;top:66px;left:0;right:0;background:#020712;display:none;flex-direction:column;gap:0;padding:10px 24px}.main-nav.open{display:flex}.main-nav a{padding:8px 0;line-height:1.25;font-size:14px}.menu-toggle{display:block;margin-left:auto}}
/* Lagre sidhuvud pa mobil (<=640 px, 2026-09-29): 60 px i stallet for 66 px (ca -10 %). Hamburgarmenyn och guidesidornas klistrade flikrad foljer med. */
@media(max-width:640px){.site-header{height:60px}.main-nav{top:60px}.guide-tabs{top:60px}}
/* Sidnamn under loggan (script.js, 2026-09-29): bara pa mobil (<=640 px) dar sloganen ar dold; tunn, diskret text. */
.logo .logo-page{display:none}
@media(max-width:640px){.logo .logo-page{display:block;grid-column:2;font-size:11px;font-weight:400;letter-spacing:.01em;line-height:1.15;color:#9fc8ff;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62vw}}
/* Aktiv sida i hamburgarmenyn (<=1080 px, 2026-09-29): i stallet for den langa bla understrykningen - diskret blatonad bakgrund, bla vertikal accentlinje till vanster och rundade horn. Desktopmenyn (understrykning) oforandrad. aria-current satts i HTML:en. */
@media(max-width:1080px){
  .main-nav{padding:4px 12px 10px}
  .main-nav a{position:relative;border-bottom:0;border-radius:8px;padding:5px 12px 5px 15px;margin:0}
  .main-nav a:hover{color:var(--blue2)}
  .main-nav a.active{color:var(--blue2);background:rgba(33,160,255,.13)}
  .main-nav a.active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--blue2)}
}

/* Formularvalidering i bokningen (2026-10-01): tydlig men inte aggressiv. */
#page-booking-form [aria-invalid="true"]{border-color:#c2410c!important;box-shadow:0 0 0 3px rgba(194,65,12,.14)}
.field-error{display:flex;align-items:flex-start;gap:6px;margin-top:6px;color:#b42318;font-size:12.5px;font-weight:700;line-height:1.35}
.field-error-icon{flex:none}
.has-field-error{color:#7a1f1f}
.form-validation-summary{margin:0 0 14px;padding:12px 14px;border:1px solid #f3c4bf;border-left:4px solid #c2410c;border-radius:8px;background:#fff7f5;color:#5c1a12;font-size:13.5px;line-height:1.5}
.form-validation-summary p{margin:0 0 4px}
.form-validation-title{font-weight:900;font-size:15px}
.form-validation-summary ul{margin:6px 0 0;padding-left:18px}
.form-validation-link{background:none;border:0;padding:4px 0;color:#7a1f1f;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left}
.form-validation-link:hover{color:var(--blue)}

/* Saljande produktlayout (designtest 2026-10-01, endast produkter med salesLayout - B-40). */
.rental-modal-sales{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:start;margin:10px 0 22px}
.rental-modal-sales[hidden]{display:none}
.rental-modal-sales .rental-modal-gallery-wrap .addon-tile-icon{height:min(380px,50vh);margin-bottom:10px}
.rental-modal-sales .rental-modal-priceblock{margin:0 0 10px;padding-top:0;border-top:0}
.rental-modal-sales .rental-modal-price{font-size:28px}
.rental-modal-sales-copy{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--ink)}
.rental-modal-sales-video{margin:0 0 16px}
.rental-modal-sales-video-label{margin:0 0 8px;font-size:14px;font-weight:900;color:var(--blue)}
.rental-modal-sales-video .rental-modal-video-frame{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px}
.rental-cta-btn{width:100%;min-height:52px;font-size:16px;justify-content:center}
.rental-qty-widget-cta .addon-qty.rental-cta-qty{justify-content:center;gap:14px;margin:0}
.rental-qty-widget-cta .rental-cta-qty .addon-qty-btn{width:48px;height:48px;border-radius:50%;font-size:20px;border-color:var(--blue);color:var(--blue)}
.rental-qty-widget-cta .rental-cta-qty .addon-qty-value{font-size:16px;font-weight:900;min-width:48px}
.rental-cta-added{margin:8px 0 0;text-align:center;font-weight:800;color:var(--blue)}
.rental-modal-card--sales .rental-modal-suitable{margin-top:4px}
@media(max-width:760px){
  .rental-modal-sales{grid-template-columns:minmax(0,1fr);gap:14px}
  .rental-modal-sales .rental-modal-gallery-wrap .addon-tile-icon{height:min(300px,42vh)}
}
/* B-40-designtest: ca 20 % storre huvudbild pa desktop (2026-10-01). Popupen
   breddas bara for saljlayouten sa att hogerkolumnen behaller sin bredd (~378 px). */
@media(min-width:1040px){
  .rental-modal-card.rental-modal-card--sales{max-width:990px}
  .rental-modal-card--sales .rental-modal-sales{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr)}
  .rental-modal-card--sales .rental-modal-sales .rental-modal-gallery-wrap .addon-tile-icon{height:min(460px,56vh)}
}
/* B-40-designtest: produkten ca 30 % storre an i ursprungliga saljlayouten
   (2026-10-01). Bildytan blir hogre (inte bredare); produktbilder med vit
   marginal (img[data-zoom]) forstoras och bara vit bakgrund pa sidorna
   beskars - produkten visas alltid komplett. Bilder utan zoom (effektfotot)
   visas hela (contain) i samma yta. Mobil/surfplatta: 1,3 x kolumnbredden.
   Desktop >=1040 px: 1,075 x den bredare kolumnen (502 px) = 540 px, dvs.
   1,3 x ursprungliga 415 px. */
.rental-modal-sales .rental-modal-gallery-wrap .addon-tile-icon{height:auto;aspect-ratio:4/3.9;overflow:hidden;display:flex;align-items:center;justify-content:center}
.rental-modal-sales .rental-modal-gallery-wrap .addon-tile-icon img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;flex:none}
.rental-modal-sales .rental-modal-gallery-wrap .addon-tile-icon img[data-zoom]{width:130%}
@media(min-width:1040px){
  .rental-modal-card--sales .rental-modal-sales .rental-modal-gallery-wrap .addon-tile-icon{height:auto;aspect-ratio:4/3.225}
  .rental-modal-card--sales .rental-modal-sales .rental-modal-gallery-wrap .addon-tile-icon img[data-zoom]{width:107.5%}
}
/* Produktbild 50 % storre i samma bildyta (2026-10-01, ADJ Inno Roll HP).
   Bildfilen ar kvadratisk men produkten upptar bara ca 56 % av hojden - bara
   vit marginal ovanfor/under beskars, produkten visas alltid komplett. */
.addon-tile-icon.icon-zoom-150,.addon-tile-icon.icon-zoom-130{overflow:hidden;display:flex;align-items:center;justify-content:center}
.addon-tile-icon.icon-zoom-150 img,.addon-tile-icon.icon-zoom-130 img{width:auto;max-width:none;max-height:none;flex:none;object-fit:contain}
.addon-tile-icon.icon-zoom-150 img{height:150%}
/* Eurolite LED TMH-60 (produkten ca 77 % av bildhojden): 30 % storre ryms precis. */
.addon-tile-icon.icon-zoom-130 img{height:130%}
/* Startsidan: Privat/Foretag-kort med ny bild + rubrik som HTML-text ovanpa
   (2026-10-01). Bilden i originalproportion (1649:954, ingen beskarning).
   Rubriken skalar med kortets bredd (container query) sa att proportionerna
   motsvarar referensmockupen: liten rad ca 3,8 % och stor rad ca 11 % av
   bildbredden, 5 % fran vanster, ca 19 % fran nederkant. */
.audience-home-cards .card-media{position:relative;container-type:inline-size}
.audience-home-cards .card-media img{height:auto;aspect-ratio:1649/954;object-fit:cover;object-position:center}
.audience-home-cards .card-media .card-icon{top:auto;bottom:-24px}
.card-media-title{position:absolute;left:5%;bottom:19%;margin:0;color:#fff;text-transform:uppercase;line-height:.95;text-shadow:0 2px 14px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4);pointer-events:none}
.card-media-title span{display:block;font-weight:900;font-size:15px;font-size:clamp(11px,3.8cqw,24px);letter-spacing:.01em;margin-bottom:.12em}
.card-media-title strong{display:block;font-weight:900;font-size:44px;font-size:clamp(28px,11cqw,68px);letter-spacing:.005em}
/* Ca 20 % storre produktbild i kortet (rental-tile--zoom-120, 2026-10-01: B-40 HCL och XDJ-RX3).
   Hoga bilder: hogre bildyta. 4:3-bilder (XDJ-RX3): bredare bildyta pa desktop/surfplatta;
   pa mobil ar bilden redan fullbredd i kortet. Ingen beskarning. */
.rental-tile--media-tall.rental-tile--zoom-120 .addon-tile-icon{height:178px}
@media(max-width:640px){.rental-tile--media-tall.rental-tile--zoom-120 .addon-tile-icon{height:180px}}
@media(min-width:641px){
  .rental-tile--media-full.rental-tile--zoom-120 .rental-gallery{width:min(100%,237px)}
  .rental-tile--media-full.rental-tile--zoom-120 .addon-tile-icon{height:auto;aspect-ratio:4/3}
  .rental-tile--media-full.rental-tile--zoom-120 .addon-tile-icon img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
}
.audience-home-cards .card-media .card-media-title,.audience-home-cards .card-media .card-media-title span,.audience-home-cards .card-media .card-media-title strong{color:#fff}
/* Diskret hover-zoom pa startsidans Privat/Foretag-bilder (endast bilden, inom sin yta; ej touch). */
.audience-home-cards .card-media picture{display:block;overflow:hidden}
@media (hover:hover) and (pointer:fine){
  .audience-home-cards .card-media img{transition:transform .3s ease}
  .audience-home-cards .card:hover .card-media img,.audience-home-cards .card:focus-within .card-media img{transform:scale(1.035)}
}
@media (prefers-reduced-motion:reduce){.audience-home-cards .card-media img{transition:none}}
.audience-home-cards .card-body a:hover,.audience-home-cards .card-body a:focus-visible{text-decoration:underline}
/* Hyra karaoke: tillvalskatalog (samma produktkort/popup som Hyra teknik, 2026-10-01). */
.addon-catalog-group+.addon-catalog-group{margin-top:30px}
.addon-catalog-cat{margin:0 0 12px;font-size:17px;font-weight:900}
.addon-catalog-avail{margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}
.rental-catalog-cta{margin-top:16px}
.rental-catalog-cta .rental-cta-btn,.rental-modal-sales-cta a.rental-cta-btn{display:flex;text-decoration:none}
.rental-catalog-note{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
/* ===== Hyra teknik – egen visuell identitet (2026-10-01) =====
   Endast presentation: hero (split med eventbild), intro och kategorikort.
   Accordion/produktlogik oforandrad. Allt scopat till .teknik-hero /
   .teknik-products / #rental-accordion (bokningens tillvalsaccordion,
   .addon-acc-item, paverkas inte). */
.teknik-hero{padding:0;background:#020918;display:flex;align-items:center;min-height:420px}
.teknik-hero:after{display:none}
.teknik-hero-media{position:absolute;top:0;right:0;bottom:0;width:52%;z-index:0}
.teknik-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.teknik-hero-media:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#020918 0%,rgba(2,9,24,.3) 7%,rgba(2,9,24,0) 18%);z-index:1}
.teknik-hero-text{padding-top:44px;padding-bottom:40px}
.teknik-hero-text>*{max-width:560px}
.teknik-hero .teknik-hero-text p:not(.eyebrow){max-width:540px}
.teknik-br-m{display:none}
.teknik-hero h1{font-size:44px;line-height:1.06;margin:0 0 14px;letter-spacing:-.5px}
.teknik-hero .eyebrow{margin-bottom:12px}
.teknik-hero p:not(.eyebrow){font-size:15px;line-height:1.65;margin:0;color:#d7e5f7}
.teknik-hero-text>.teknik-hero-usps{list-style:none;padding:0;margin:22px 0 0;display:flex;gap:18px;flex-wrap:wrap;max-width:620px}
.teknik-hero-usps li{display:flex;align-items:center;gap:10px}
.teknik-hero-usps strong{display:block;font-size:13px;font-weight:800;color:#fff}
.teknik-hero-usps small{display:block;font-size:12px;color:#a9bbd3;margin-top:1px}
.teknik-usp-icon{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(8,120,255,.16);border:1px solid rgba(33,160,255,.35);color:var(--blue2)}
.teknik-usp-icon .icon{width:18px;height:18px}
@media(max-width:1060px) and (min-width:901px){.teknik-hero h1{font-size:38px}.teknik-hero-text>*,.teknik-hero .teknik-hero-text p:not(.eyebrow){max-width:470px}}
.teknik-hero-media{max-width:820px}
@media(max-width:900px){
  .teknik-hero{display:flex;flex-direction:column;align-items:stretch;min-height:0}
  .teknik-hero-text{order:1;padding-top:30px;padding-bottom:22px}
  .teknik-hero-media{order:2;position:relative;width:100%;max-width:none;aspect-ratio:16/9;min-height:0}
  .teknik-hero-media img{position:absolute;inset:0}
  .teknik-hero-media:before{background:linear-gradient(180deg,#020918 0%,rgba(2,9,24,0) 30%)}
  .teknik-hero h1{font-size:clamp(28px,7.6vw,34px)}
  .teknik-br-m{display:inline}
  .teknik-br-d{display:none}
  .teknik-hero-text>.teknik-hero-usps{flex-direction:column;gap:10px;margin-top:18px}
}
@media(max-width:900px) and (min-width:641px){.teknik-hero-media{aspect-ratio:16/6.5}.teknik-hero-text>.teknik-hero-usps{flex-direction:row;gap:18px}.teknik-hero-text>*{max-width:640px}}
.teknik-products{padding-top:40px}
.teknik-intro{margin-bottom:22px}
.teknik-intro .eyebrow{margin-bottom:8px}
.teknik-intro h2{margin:0 0 6px;font-size:30px;line-height:1.15}
.teknik-intro p:not(.eyebrow){margin:0;color:var(--muted);font-size:15px}
/* Kategorikort: diskret accent per kategori (--acc = RGB) */
#rental-accordion .rental-accordion-item{--acc:37,99,235;background:linear-gradient(rgba(var(--acc),.035),rgba(var(--acc),.035)),#fff;border-color:rgba(var(--acc),.16);transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease}
#rental-accordion #projektor{--acc:234,140,20}
#rental-accordion #ljus{--acc:139,92,246}
#rental-accordion #rok{--acc:16,170,150}
#rental-accordion #mikrofoner{--acc:14,150,210}
#rental-accordion #dj{--acc:219,61,120}
#rental-accordion .rental-accordion-toggle{min-height:104px;padding:14px 22px;gap:20px}
#rental-accordion .rental-accordion-thumb{width:204px;height:74px;gap:8px}
#rental-accordion .rental-accordion-thumb img{max-width:74px;transition:transform .25s ease}
#rental-accordion .rental-accordion-thumb-duo img,#rental-accordion .rental-accordion-thumb-trio img{max-width:none}
#rental-accordion .rental-accordion-thumb-wide img{max-width:146px}
#rental-accordion .rental-accordion-thumb-natural img{max-width:none}
#rental-accordion .rental-accordion-icon{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid rgba(var(--acc),.22);color:rgb(var(--acc));box-shadow:0 2px 8px rgba(var(--acc),.10)}
#rental-accordion .rental-accordion-icon .icon{width:22px;height:22px}
#rental-accordion .rental-accordion-nameline{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
#rental-accordion .rental-accordion-name{font-size:18px}
#rental-accordion .rental-accordion-count{font-size:11.5px;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap}
#rental-accordion .rental-accordion-sub{font-size:13.5px;line-height:1.5;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:640px;margin-top:3px}
#rental-accordion .rental-accordion-chevron{width:22px;height:22px;opacity:.75;transition:transform .25s ease,opacity .25s ease}
#rental-accordion .rental-accordion-item.is-open{background:linear-gradient(rgba(var(--acc),.07),rgba(var(--acc),.07)),#fff;border-color:rgba(var(--acc),.38);box-shadow:0 10px 28px rgba(2,16,45,.09)}
#rental-accordion .rental-accordion-item.is-open .rental-accordion-name{color:var(--blue)}
#rental-accordion .rental-accordion-item.is-open .rental-accordion-chevron{opacity:1}
#rental-accordion .rental-accordion-item.is-open .rental-accordion-heading{border-bottom:1px solid rgba(var(--acc),.18)}
#rental-accordion .rental-accordion-panel-content{padding-top:18px}
@media (hover:hover) and (pointer:fine){
  #rental-accordion .rental-accordion-item:not(.is-open):hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(2,16,45,.10);border-color:rgba(var(--acc),.34)}
  #rental-accordion .rental-accordion-item:not(.is-open):hover .rental-accordion-thumb img{transform:scale(1.03)}
  #rental-accordion .rental-accordion-item:hover .rental-accordion-chevron{opacity:1}
}
@media(prefers-reduced-motion:reduce){#rental-accordion .rental-accordion-item,#rental-accordion .rental-accordion-thumb img{transition:none}}
@media(max-width:900px){#rental-accordion .rental-accordion-icon{display:none}}
@media(max-width:640px){
  .teknik-products{padding-top:28px}
  .teknik-intro h2{font-size:24px}
  .teknik-intro p:not(.eyebrow){font-size:14px}
  #rental-accordion .rental-accordion-toggle{min-height:0;padding:12px 14px;gap:12px}
  #rental-accordion .rental-accordion-thumb{width:150px;height:56px;gap:5px}
  #rental-accordion .rental-accordion-thumb img{max-width:56px}
  #rental-accordion .rental-accordion-thumb-wide img{max-width:110px}
  #rental-accordion .rental-accordion-name{font-size:15px}
  #rental-accordion .rental-accordion-sub{display:none}
  #rental-accordion .rental-accordion-nameline{gap:3px 8px}
  #rental-accordion .rental-accordion-count{font-size:11px;padding:1px 7px}
  #rental-accordion .rental-accordion-panel-content{padding-top:14px}
}
@media(max-width:380px){#rental-accordion .rental-accordion-thumb{width:128px;height:50px}#rental-accordion .rental-accordion-thumb img{max-width:50px}}
#rental-accordion .rental-accordion-sub{font-weight:500}
#rental-accordion .rental-accordion-thumb img{mix-blend-mode:multiply}
/* Produktkort: galleriet far aldrig bli bredare an kortet (Neon Tube har 6 miniatyrer). */
.rental-tile .rental-gallery{max-width:100%;min-width:0}
.rental-tile .rental-gallery-thumbs{flex-wrap:wrap}
#rental-accordion{gap:9px}
@media(max-width:640px){#rental-accordion{gap:6px}}
.rental-modal-sales-media,.rental-modal-sales-buy{min-width:0}
/* Startsidans hero, mobil/surfplatta (2026-10-02): ett steg ljusare bild (mer blatt/lila,
   tydligare mikrofon) med bibehallen textkontrast, och innehallet hogre upp pa mobil.
   Desktop (>900 px) oforandrad. */
@media(max-width:900px){
  .hero-media{opacity:.9}
  .hero-overlay{background:linear-gradient(90deg,rgba(1,7,20,.86) 0,rgba(1,7,20,.62) 30%,rgba(1,7,20,.22) 75%,rgba(1,7,20,.06))}
}
@media(max-width:640px){
  .hero{min-height:0}
  .hero-content{padding-top:24px;padding-bottom:64px}
}
/* Startsidan (2026-10-02): Privat/Foretag-korten ligger direkt under hero och
   de fyra punkterna (feature-wrap) efter dem - ingen overlappning mot hero da. */
.services+.feature-wrap{margin-top:0;margin-bottom:60px}
@media(max-width:640px){.services+.feature-wrap{margin-bottom:40px}}
/* Startsidans H1 (2026-10-02): "Hyra karaoke / till festen / i Göteborg" som riktig
   text i HTML; versaler via CSS. Desktop: tva rader, mobil: tre rader. */
.hero h1{text-transform:uppercase}
.hero h1 .hero-h1-main,.hero h1 .hero-h1-sub{color:#fff}
.hero h1 .hero-h1-main{white-space:nowrap}
.hero h1 .hero-h1-city{display:block;color:var(--blue)}
@media(max-width:640px){
  .hero h1 .hero-h1-main,.hero h1 .hero-h1-sub{display:block}
  .hero h1{font-size:clamp(36px,11.2vw,48px);letter-spacing:-1.5px}
}
/* Startsidan: hero-knappen "BOKA KARAOKE" doljs dar den fasta BOKA NU-baren
   visas - SAMMA brytpunkt som .mobile-cta-bar (max-width:900px). */
@media(max-width:900px){.hero-book-cta{display:none}}
/* Instruktion i en label (t.ex. Personnummer): normal vikt, samma storlek, lopande text. */
.label-hint{font-weight:400}
/* Bokning Foretag: Betalningssatt (radioknappar, 2026-10-06). */
.payment-method{border:0;padding:0;margin:22px 0 0;min-width:0}
.payment-method legend{padding:0;font-size:12px;font-weight:700;margin-bottom:2px}
.payment-method .form-checkbox-label{margin:10px 0 0}
.payment-method .field-error{display:block;margin-top:8px}
/* Ett formularrutnat med hidden-attribut ska verkligen doljas (display:grid tar annars over). */
.form-grid[hidden]{display:none}