/* ==========================================================================
   Typografisk uppstädning — läses efter Webflows CSS och överskriver den.
   Webflow-filen är orörd, så speglingen står kvar som referens och det räcker
   att ta bort <link> till den här filen för att gå tillbaka.

   Tre saker åtgärdas:
     1. Skalan var obunden vw. --font--h1: 12.35vw gav 296px på en 2400px-skärm
        och 49px på 400px. Nu har varje steg golv och tak.
     2. Stegen var oregelbundna (h2→h3 faktor 1,5 men h3→h4 faktor 2,27).
     3. Eventets uppgifter stod i samma grad och samma smala versaler, skilda
        bara på färg — och en andra gång längre ner på telefon. De står nu en
        gång, i inforutan, med etiketter och nivåer.

   Ingen ny font och ingen ny färg införs. Intertight fanns redan deklarerad
   som --font--paragraph men användes knappt — det är den som nu bär metadata.
   ========================================================================== */

/* ==========================================================================
   Typsnitten — Debasers egna

   Bytta 2026-08-07 från Webflow-exportens Koulen/Intertight till märkets
   riktiga par ur nyhetsbrevets typsystem: Maheni för specialrubriker och
   TT Commons för allt läsbart — brödtext 18px med 140% radhöjd, ingress
   26px. Filerna ligger lokalt under /site/fonts, hämtade ur Debasers egen
   fontmapp hos Tickster.

   Maheni är väsentligt bredare än ultrakondenserade Koulen, så
   rubrikskalan nedan är omkalibrerad och Koulens minusspärrningar nollas.
   ========================================================================== */

@font-face {
    font-family: Maheni;
    src: url('/site/fonts/Maheni-Regular.otf') format('opentype');
    font-weight: 100 699;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Maheni;
    src: url('/site/fonts/Maheni-Italic.otf') format('opentype');
    font-weight: 100 699;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TT Commons';
    src: url('/site/fonts/TT Commons Regular.otf') format('opentype');
    font-weight: 100 699;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Commons';
    src: url('/site/fonts/TT Commons Italic.otf') format('opentype');
    font-weight: 100 699;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'TT Commons';
    src: url('/site/fonts/TT Commons Bold.otf') format('opentype');
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font--heading: Maheni, 'Arial Black', sans-serif;
    --font--paragraph: 'TT Commons', Arial, sans-serif;

    /* Rubrikskala måttad för Maheni; Koulens vw-tal gav dubbel bredd. */
    --font--h1: clamp(2.5rem, 8vw, 7.5rem);
    --font--h2: clamp(2rem, 5vw, 4.75rem);
    --font--h3: clamp(1.5rem, 3.4vw, 3rem);
    --font--h4: clamp(1.0625rem, 2.2vw, 1.625rem);

    /* Metadata behöver mer ljusstyrka än 50% vitt när graden blir liten. */
    --white-65: #ffffffa6;
}

/* Koulens kompensationer — kraftig minusspärrning och 80% radhöjd — hör
   inte hemma på Maheni. Versaliseringen behövs uttryckligen: Koulen var
   caps-only så gemener i markupen ("kalender") blev versaler av sig
   själva, medan Maheni har riktiga gemener. */
h1, h2, h3, .h1, .h2, .h3 {
    letter-spacing: .01em;
    line-height: .98;
    text-transform: uppercase;
}

/* Webflow hårdkodar fonterna förbi variablerna på några ställen —
   rubrikelementen i Koulen och etiketterna i Fragmentmono. */
h1, h2, h3, h4 {
    font-family: var(--font--heading);
}

.b2,
.text-block-78,
.success-message-3 {
    font-family: var(--font--paragraph);
}

/* Brödtexten enligt typsystemet, uppskalad 1,2x på användarens begäran.
   Komponenter med egna klasser sätter fortfarande sina grader — det här
   är grundläget för löpande text. */
p {
    font-size: 1.35rem;
    line-height: 1.4;
}

/* Webflows brytpunkter sätter grader direkt i vw och går därför runt
   variablerna ovan. Samma skala appliceras här så den håller hela vägen. */
@media screen and (max-width: 991px) {
    .h1 { font-size: clamp(2.5rem, 8vw, 7.5rem); }
    .h2 { font-size: clamp(2rem, 6.5vw, 4.75rem); }
    .h3 { font-size: clamp(1.5rem, 5.5vw, 3rem); }
    .h4 { font-size: clamp(1.0625rem, 5vw, 1.625rem); }
}

@media screen and (max-width: 767px) {
    .h1 { font-size: clamp(2.25rem, 8vw, 7.5rem); }
    .h2 { font-size: clamp(1.875rem, 7.5vw, 4.75rem); }
    .h3 { font-size: clamp(1.375rem, 6vw, 3rem); }
    .h4 { font-size: clamp(1rem, 6vw, 1.625rem); }
}

/* ==========================================================================
   Mobilläget gäller även iPad

   Siten har två navigationer. Vid 767px gömmer Webflow .navbar-2024 och visar
   .navbar-2024.mobile i stället, som är byggd för en fälld meny. Mitt första
   försök flyttade bara hamburgarens brytpunkt till 991px, vilket fällde
   desktopnavigationen — den saknar layout för det läget, och menyn blev en röra
   mellan 768 och 991px.

   Hela mobilläget flyttas därför upp till 991px: samma regeluppsättning som
   Webflow har vid 767px, med navigationsbytet inkluderat. Regler som rörde
   live-sidan och eventrader är utlämnade — de ska följa sina egna brytpunkter.
   ========================================================================== */

@media screen and (max-width: 991px) {
    .w-nav[data-collapse="medium"] .w-nav-menu { display: none; }
    .w-nav[data-collapse="medium"] .w-nav-button { display: block; }
    .w-nav-brand { padding-left: 10px; }
    .search-4 { grid-column-gap: 20px; grid-row-gap: 20px; flex-flow: row; align-items: flex-end; }
    .sm-icon, .sm-icon.big { width: 7vw; height: 7vw; }
    .menutwo { padding: 1vw 2vw; font-size: 4vw; }
    .image-66 { width: 31vw; }
    .navbar-2024 { display: none; }
    .navbar-2024.mobile { z-index: 1000; display: flex; }
    .categoty-row { grid-column-gap: 16px; grid-row-gap: 16px; flex-flow: wrap; padding-top: 10px; padding-bottom: 10px; padding-left: 0; }
    .categoty-row.menu { padding-top: 0; padding-bottom: 0; }
    .categoty-row.menu.hide { display: none; }
    .menu-row { grid-column-gap: 24px; grid-row-gap: 24px; flex-flow: column; padding-top: 0; padding-left: 0; }
    .menu-row._1 { align-self: flex-start; width: 9vw; padding-bottom: 24px; }
    .menu-category-items { display: none; }
    .footer-menu { flex-flow: column; justify-content: flex-start; align-items: flex-start; padding-top: 10px; padding-bottom: 20px; padding-right: 10px; }
    .nav-menu-7 { background-color: var(--accent); padding-bottom: 40px; display: block; }
    .nav-link-5 { display: none; }
    .menu-button-6 { background-color: var(--white-20); }
    .menu-button-6.w--open { background-color: var(--accent); }
    .category-button.menu-mobile { border-width: 0; border-radius: 0; padding-left: 0; padding-right: 0; }
    .category-button.menu-mobile:hover, .category-button.menu-mobile.w--current { color: var(--black); background-color: #0000; text-decoration: line-through; }
    .brand-3 { padding-left: 0; }
    .search-engine.mobile { border-bottom: 0 solid #000; justify-content: space-between; height: 7vw; display: flex; }
    .search-input-2024 { border-bottom-color: var(--black); text-align: left; background-color: #fff0; width: 100%; padding-left: 2vw; font-size: 4vw; line-height: 4vw; }
    .search-input-2024:focus-visible, .search-input-2024[data-wf-focus-visible] { color: var(--black); }
    .nav-header-menu { grid-column-gap: 30px; grid-row-gap: 30px; background-color: var(--white); align-items: flex-start; height: 100vh; padding-bottom: 40px; }
    .container-navigation { background-color: var(--black); align-items: center; max-width: none; height: auto; padding-left: 0; }
    .hamburger-menu { display: block; }
    .hamburger-top-line-white, .hamburger-bottom-line-white { background-color: var(--white); border-radius: 0; height: 4px; }
    .dropdown-2024.w--open { grid-column-gap: 20px; grid-row-gap: 20px; background-color: #0000; align-items: center; height: 100%; display: flex; }
    .langauge-line-base { display: none; }
    .language { font-size: 4vw; line-height: 100%; }
    /* Valen var vita piller på menypanelens vita botten — text och flagga
       flöt fritt. Svarta piller som knappen de fälls ut ur. */
    .lang { color: var(--white); font-size: 4vw; line-height: 100%; }
    .lang-select { background-color: var(--black); border-radius: 20px; height: 6vw; padding: 1vw 2vw; display: inline-flex; align-items: center; }
    .lang-select:focus { background-color: var(--accent); }
    .search { padding-top: 20px; padding-bottom: 20px; }
    .dropdown-2025 { grid-column-gap: 5px; grid-row-gap: 5px; display: flex; }
}

/* ==========================================================================
   Sökfältet i desktopmenyn

   Live Stream-knappen som stod längst till höger är borttagen ur markupen.
   Sökfältet tar dess plats: .menu-row-2024 är flex med space-between, så
   order flyttar fältet sist i raden och därmed längst åt höger.
   ========================================================================== */

.menu-row-2024 .sok-sprak { order: 1; }

/* ==========================================================================
   Highlight-listans bredder

   Låg som inline-<style> i varje sidhuvud (och en gång till i markupen på
   sidorna som visar listan) i Webflow-exporten. Reglerna bor nu här och
   inline-kopiorna är borttagna. Mönstret 35/65 växelvis med var femte i
   fullbredd är Webflows.

   Webflow räknade upp nth-child(1) till (10) och stannade där -- startsidan
   visar aldrig fler. Sökresultatet gör det: korten därefter fick ingen bredd
   alls, och eftersom kortets allt innehåll är absolut positionerat föll de
   ihop till noll. Det var de nollbreda korten som ritade artistnamnen som
   lodräta bokstavsremsor. Mönstret upprepas därför var tionde kort i
   stället, vilket ger samma första tio som förut.
   ========================================================================== */

@media (min-width: 767px) {
    .highlight-events .highlight-event:nth-child(10n + 1),
    .highlight-events .highlight-event:nth-child(10n + 4),
    .highlight-events .highlight-event:nth-child(10n + 6),
    .highlight-events .highlight-event:nth-child(10n + 9) { width: calc(35% - 10px); }

    .highlight-events .highlight-event:nth-child(10n + 2),
    .highlight-events .highlight-event:nth-child(10n + 3),
    .highlight-events .highlight-event:nth-child(10n + 7),
    .highlight-events .highlight-event:nth-child(10n + 8) { width: calc(65% - 10px); }

    .highlight-events .highlight-event:nth-child(10n + 5),
    .highlight-events .highlight-event:nth-child(10n) { width: 100%; }
}

@media (max-width: 767px) {
    .highlight-events .highlight-event { width: 100%; }
}

/* ==========================================================================
   Restaurangkarusellernas navigation

   Pilarna fanns i Webflow-markupen men var vita glyfer direkt på ljusa
   foton — i praktiken osynliga — och punktnavet var dolt med klassen
   hide. Pilarna får en svart rund platta i sitens knappstil och
   punkterna tänds med kontrastring så att de syns mot både ljusa och
   mörka bilder.
   ========================================================================== */

/* Webflow centrerar ikonen med top/bottom 0 och margin auto — plattan
   ändrar bara storlek och utseende, inte positioneringen. */
.slider-10 .w-icon-slider-left,
.slider-10 .w-icon-slider-right {
    width: clamp(2.5rem, 3.5vw, 3rem);
    height: clamp(2.5rem, 3.5vw, 3rem);
    display: grid;
    place-items: center;
    background-color: var(--black);
    border-radius: 50%;
    font-size: 1.1rem;
    transition: background-color .15s ease;
}

.slider-10 .w-slider-arrow-left:hover .w-icon-slider-left,
.slider-10 .w-slider-arrow-right:hover .w-icon-slider-right,
.slider-10 .w-slider-arrow-left:focus-visible .w-icon-slider-left,
.slider-10 .w-slider-arrow-right:focus-visible .w-icon-slider-right {
    background-color: #d6006e;
}

.slider-10 .w-slider-nav.hide {
    display: block;
}

.slider-10 .w-slider-dot {
    width: .75rem;
    height: .75rem;
    margin: 0 .5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .55);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
}

.slider-10 .w-slider-dot.w-active {
    background-color: var(--white);
}

/* ==========================================================================
   FÖRSLAG: Toppmenyn som affischlist

   Webflows meny var två rader blandade piller och rektanglar med en död
   pilknapp och sociala ikoner mitt i listen. Raderna bär dock verklig
   struktur — rad 1 är sidor, rad 2 programkategorier — så den behålls
   men uttrycks som en svart affischlist: länkar i displayfonten som en
   konsertaffisch, programraden underordnad i halvvit, och aktiv sida
   markerad med ett tjockt rosa streck — samma penna som karusellens
   progresslinje. Gäller desktopnavigationen; mobilmenyn är egen markup.
   ========================================================================== */

.navbar-2024:not(.mobile) {
    background-color: var(--black);
}

.navbar-2024:not(.mobile) .menu-box {
    position: relative;
    /* Högre list: luften bär höjden nu när loggan är mindre. */
    padding: 1.9rem 1.5rem 2rem;
}

/* Loggan var 18vw och styrde listens höjd — nedskalad får menyn ta plats. */
.navbar-2024:not(.mobile) .image-66 {
    width: clamp(120px, 11vw, 170px);
}

.navbar-2024:not(.mobile) .brand-3 {
    align-self: center;
}

/* Menygruppen centreras på listens höjd (Webflows egen align-self:
   center får gälla) — priset är att huvudraden står något högre på
   sidor med undermenyrad. */

/* Pilknappen är död sedan tidigare (aria-hidden) — nu syns den inte heller. */
.navbar-2024:not(.mobile) .categoty-row .arrow-like-a-button {
    display: none;
}

/* Båda radernas länkar: text i stället för knappar. Brödfonten i fet
   versal — displayfonten är ritad för affischgrader och blir gles och
   ojämn i menystorlek. */
.navbar-2024:not(.mobile) .menu-row .category-button.sharp,
.navbar-2024:not(.mobile) .categoty-row .category-button {
    background: none;
    border: 0;
    border-radius: 0;
    padding: .05em 0;
    font-family: var(--font--paragraph);
    text-transform: uppercase;
    line-height: 1;
    color: var(--white);
    position: relative;
}

.navbar-2024:not(.mobile) .menu-row .category-button.sharp {
    font-family: var(--font--heading);
    font-size: clamp(1.375rem, 1.7vw, 1.75rem);
    font-weight: 400;
    letter-spacing: .04em;
}

/* Undermenyraden — kalenderns kategorier och restaurangerna — samma
   röst, lägre volym. */
.navbar-2024:not(.mobile) .categoty-row .category-button {
    font-family: var(--font--heading);
    font-size: clamp(1.0625rem, 1.3vw, 1.375rem);
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--white-50);
}

/* Undermenyraden visas bara i sitt sammanhang, styrt av en body-klass
   per sida: kalenderns kategorier på startsidan och kalendersidorna,
   restaurangernas undersidor på restaurangsidorna, annars ingen rad.
   Grupperna samexisterar aldrig, så skiljelinjen behövs inte längre. */
.navbar-2024:not(.mobile) .menu-category-items .categoty-row {
    display: none;
}

body.visa-kalendermeny .navbar-2024:not(.mobile) .menu-category-items .categoty-row,
body.visa-restaurangmeny .navbar-2024:not(.mobile) .menu-category-items .categoty-row {
    display: flex;
}

body.visa-kalendermeny .navbar-2024:not(.mobile) .menu-category-items .categoty-row a[href^="/restauranger/"] {
    display: none;
}

body.visa-restaurangmeny .navbar-2024:not(.mobile) .menu-category-items .categoty-row a[href="/konserter"],
body.visa-restaurangmeny .navbar-2024:not(.mobile) .menu-category-items .categoty-row a[href="/klubbar"],
body.visa-restaurangmeny .navbar-2024:not(.mobile) .menu-category-items .categoty-row a[href="/events"],
body.visa-restaurangmeny .navbar-2024:not(.mobile) .menu-category-items .categoty-row a[href="/quiz"] {
    display: none;
}

.navbar-2024:not(.mobile) .undermeny-skilje {
    display: none;
}

.navbar-2024:not(.mobile) .categoty-row .category-button:hover,
.navbar-2024:not(.mobile) .categoty-row .category-button:focus-visible {
    color: var(--white);
    background: none;
}

.navbar-2024:not(.mobile) .menu-row .category-button.sharp:hover,
.navbar-2024:not(.mobile) .menu-row .category-button.sharp:focus-visible {
    color: var(--white);
    background: none;
}

/* Signaturen: det rosa strecket under aktiv sida, och på hover. */
.navbar-2024:not(.mobile) .menu-row .category-button.sharp::after,
.navbar-2024:not(.mobile) .categoty-row .category-button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.28em;
    height: .16em;
    background-color: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
}

.navbar-2024:not(.mobile) .menu-row .category-button.sharp:hover::after,
.navbar-2024:not(.mobile) .menu-row .category-button.sharp:focus-visible::after,
.navbar-2024:not(.mobile) .menu-row .category-button.sharp.w--current::after,
.navbar-2024:not(.mobile) .categoty-row .category-button:hover::after,
.navbar-2024:not(.mobile) .categoty-row .category-button:focus-visible::after,
.navbar-2024:not(.mobile) .categoty-row .category-button.w--current::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .navbar-2024:not(.mobile) .menu-row .category-button.sharp::after,
    .navbar-2024:not(.mobile) .categoty-row .category-button::after {
        transition: none;
    }
}

.navbar-2024:not(.mobile) .menu-row {
    --mellanrum: clamp(1.1rem, 2.2vw, 2.25rem);
    gap: var(--mellanrum);
    align-items: baseline;
}

/* Ett | mitt i varje mellanrum. Absolut placerat så att det varken
   påverkar det rosa strecket (som spänner länkboxen) eller läses upp
   (tom alternativtext). */
.navbar-2024:not(.mobile) .menu-row .category-button.sharp + .category-button.sharp::before,
.navbar-2024:not(.mobile) .categoty-row .category-button + .category-button::before {
    content: "|" / "";
    position: absolute;
    top: 50%;
    left: calc(var(--mellanrum) / -2);
    transform: translate(-50%, -52%);
    font-weight: 400;
    color: var(--white-20);
}

/* Första synliga posten i respektive kontext ska inte ha någon pipe —
   syskonet före är bara dolt, inte borta. */
body.visa-kalendermeny .navbar-2024:not(.mobile) .categoty-row a[href="/konserter"]::before,
body.visa-restaurangmeny .navbar-2024:not(.mobile) .categoty-row a[href="/restauranger/capricci"]::before {
    content: none;
}

.navbar-2024:not(.mobile) .categoty-row {
    --mellanrum: clamp(.85rem, 1.7vw, 1.75rem);
    gap: var(--mellanrum);
    padding-top: .3rem;
    padding-bottom: 0;
}

/* Huvudraden: länkarna och de sociala ikonerna på samma linje, i stället
   för ikoner som flöt i listens vertikala mitt. Sök/SV-kolumnen ankras
   absolut i högra hörnet så att den inte spänner upp radhöjden och
   trycker ner undermenyn. */
.navbar-2024:not(.mobile) .menu-row-2024 {
    justify-content: flex-start;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
}


/* Sök och språkval i kolumn i högra hörnet: fältet överst, SV under. */
.navbar-2024:not(.mobile) .sok-sprak {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}

/* Webflows .w-dropdown har auto-marginaler i sidled — de vinner över
   flex-högerställningen och lämnade SV-kapseln svävande. */
.navbar-2024:not(.mobile) .sok-sprak .w-dropdown {
    margin-left: auto;
    margin-right: 0;
}

/* Språkväljaren: stillsam kapsel i listens färger. */
.navbar-2024:not(.mobile) .category-button.googel {
    background: none;
    border: 1px solid var(--white-20);
    color: var(--white);
    font-size: .8125rem;
    padding: .3em .8em;
}

.navbar-2024:not(.mobile) .language {
    color: var(--white);
}

.navbar-2024:not(.mobile) .dropdown-2024 {
    background-color: var(--black);
}

.navbar-2024:not(.mobile) .lang {
    color: var(--white);
}

.navbar-2024:not(.mobile) .lang-select:hover .lang,
.navbar-2024:not(.mobile) .lang-select:focus .lang {
    color: var(--accent);
}

/* Sökfältet: en vit linje på svart, högerställt så att fältet och
   språkkapseln bildar en gemensam högerkant. */
.navbar-2024:not(.mobile) .search-input-2024 {
    background: none;
    color: var(--white);
    border-bottom: 1px solid var(--white-50);
    text-align: right;
    padding-right: .1em;
}

.navbar-2024:not(.mobile) .search-input-2024::placeholder {
    color: var(--white-50);
}

.navbar-2024:not(.mobile) .search-input-2024:focus-visible {
    border-bottom-color: var(--accent);
    outline: none;
}


/* ==========================================================================
   Tomma frusna sektioner

   .more-events är en tom Webflow-yta (bara en tom .category-box) som
   lämnade ett stort vitt hål mellan innehållet och sidfoten.
   ========================================================================== */

.more-events {
    display: none;
}

/* ==========================================================================
   404

   Felsidan bär sitens vanliga skal. Det egna är raden under den stora
   404:an: en mening och två vägar vidare, ovanför ett slumpat urval
   kommande event. En återvändsgränd är sämre än ett tips.
   ========================================================================== */

.sidan-saknas {
    padding: 0 clamp(1.25rem, 2.5vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
}

.sidan-saknas__text {
    font-family: var(--font--paragraph);
    font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
    line-height: 1.5;
    max-width: 46ch;
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
}

.sidan-saknas__vagar {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}

/* ==========================================================================
   Nyhetsbrevsformuläret

   Låg som identiska inline-<style> i fem vyer och hade hunnit glida isär.
   Nu en partial (site/partials/_nyhetsbrev.php) som bär hyresformulärets
   Webflow-klasser: .text-field-2024 på fälten och .arrow-like-a-button
   news accent full på knappen. Fält- och knapputseendet ärvs alltså och
   ska inte skrivas om här — då slutar de två formulären likna varandra.

   Kvar som eget: bredden, samtyckesrutan som hyresformuläret inte har,
   och tack-läget.
   ========================================================================== */

.nlForm {
    /* .form-7.center ger flexkolumnen och mellanrummen. Sidfoten är bredare
       än formuläret mår bra av, så bredden hålls i linje med ingressen. */
    width: min(34rem, 100%);
    margin-inline: auto;
}

.nlForm__checkbox {
    display: flex;
    align-items: center;
    gap: .6em;
}

.nlForm__checkbox input {
    width: 1.05em;
    height: 1.05em;
    accent-color: var(--accent);
}

.nlForm__checkbox span {
    color: var(--white-65);
    font-family: var(--font--paragraph);
    font-size: .9375rem;
}

.nlForm [type="submit"][disabled] {
    opacity: .6;
    cursor: default;
}

/* Rubriken över formuläret tog hela radens bredd i nya skalan. */
.newsletter-headings-box .h2 {
    font-size: clamp(1.75rem, 3.2vw, 3rem);
}

/* Tack-läget: samma röst som rubriken ovanför, inte en grå systemrad. */
.nlForm__msg {
    display: none;
    text-align: center;
    font-family: var(--font--heading);
    text-transform: uppercase;
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    line-height: 1.1;
    color: var(--white);
    margin: 0;
}

/* ==========================================================================
   Hyresformuläret

   Honungsfällan ska inte synas för människor; skärmläsare hoppar över
   den via aria-hidden och tabindex.
   ========================================================================== */

.honungsfalla {
    display: none;
}

/* ==========================================================================
   Scroll-reveal

   Klassen sätts av reveal.js — utan JS finns den inte och allt syns
   direkt. Transformen släpps efteråt så sticky-element inte påverkas.
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(56px);
    transition: opacity 1s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}

.reveal--synlig {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   Debaser-pilen

   Affischernas nedåtpil, vektoriserad från originalet (pil.png) till ren
   geometri: ett skaft på diagonalen som växer ihop med den L-formade
   spetsen, alla armar 12,5 enheter tjocka, ändarna snittade i 45 grader
   och de två innerhörnen avrundade med r 3,5. Står efter sidrubrikerna
   som på trycksakerna.
   ========================================================================== */

.heading-box .h1::after,
.container-calendar > .h1::after,
section.highlights > .h1::after {
    content: "";
    display: inline-block;
    width: .48em;
    height: .48em;
    margin-left: .16em;
    /* Mask i stället för bakgrundsbild: pilen ärver rubrikens färg och
       blir rosa där rubriken är accent. */
    background-color: currentColor;
    -webkit-mask: url('/site/assets/debaser-pil.svg') center / contain no-repeat;
    mask: url('/site/assets/debaser-pil.svg') center / contain no-repeat;
}

/* På telefon rymde raden texten men inte pilen efter den, så "DEBASER
   HIGHLIGHTS" fick pilen ensam på rad två. Rubriken skalas med bredden i
   stället, så att text och pil alltid ryms på samma rad. Taket är Webflows
   egen storlek, alltså ingen förändring uppåt. */
@media screen and (max-width: 479px) {
    .heading-box .h1,
    .container-calendar > .h1,
    section.highlights > .h1 {
        font-size: min(2.25rem, 8.4vw);
    }
}


/* ==========================================================================
   Sidrubriker med prickar

   Webflows .h1 har line-height 80% — versalprickarna (Ä, Ö) ritas ovanför
   radrutan och kläms mot navigationen. Gäller bara egna sidor vars rubrik
   är ett riktigt h1-element; speglingens rubriker är div.h1 utan prickar.
   ========================================================================== */

h1.h1 {
    padding-top: .1em;
}

/* ==========================================================================
   Tillgänglighet: struktur

   Synligt dold rubrik för sidor vars visuella rubrik inte är en riktig h1.
   ========================================================================== */

.strukturrubrik {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Tillgänglighet: kontrast

   Ur granskningen 2026-08-06. Vit text på Webflow-rosan #ff0083 når 3,8:1
   där AA kräver 4,5:1 — biljettknapparna får en mörkare ton av samma rosa
   (5,2:1) i stället för byta uttryck. Sidfotens halvtransparenta adressgrå
   (#1e1e1e80 ≈ 3,2:1 mot vitt) blir en solid grå som klarar kravet, och
   sidfotens rosa kontaktlänkar mörknar på samma sätt som knapparna.
   ========================================================================== */

.ticket-new.on-event,
.ticket-new.on-event.on-banner {
    background-color: #d6006e;
}

/* Webflows egen hover för kortknappen var nästan samma ton som nya
   grundfärgen — svart hover som på de övriga biljettknapparna i stället. */
.ticket-new.on-event.on-banner:hover {
    background-color: var(--black);
}

.footer-menu .black-50.footer {
    color: #595959;
}

/* Statusetiketten i kalendern och listorna: samma vita text på samma rosa. */
.sale-status {
    background-color: #d6006e;
}

/* Kalenderradens etiketter (Klubb, scen) sträcktes till radens höjd —
   när genre-pillren bröt till två rader växte etiketterna med. De står
   nu alltid i sin egen höjd. */
.evenitemwhite .row-1-on-event {
    align-items: flex-start;
    /* Genrerna ska ligga på egen rad under kategori och scen -- .genre-rad
       har flex-basis: 100% för just det. Webflows .row-1-on-event är
       nowrap, så basbredden kunde aldrig tvinga fram en radbrytning och
       genrerna klämdes in bredvid plattorna i stället, med en egen inre
       radbrytning som hängde ner under dem. */
    flex-wrap: wrap;
}

/* Kategoriplattan är helfylld och saknar ram, scenplattan har 1,5px ram.
   Med border-box blir ramen 3px extra höjd, så de två stod olika höga
   bredvid varandra. Kategorin får en genomskinlig ram i samma mått:
   bakgrunden målas ändå under den, så utseendet är oförändrat och
   boxarna blir lika höga. */
.evenitemwhite .row-1-on-event .event-date-hero.black {
    border: 1.5px solid #0000;
}

.footer-menu .accent.footer,
.footer-menu .accent.footer .link {
    color: #d6006e;
}

/* ==========================================================================
   Sidfotens länkrad

   FAQ och Kontakt flyttade hit från toppmenyn, tillsammans med
   tillgänglighetsredogörelsen. Raden ligger sist i den svarta
   footersektionen, under det vita adressblocket.
   ========================================================================== */

.footer-lankar {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2.5rem);
    /* Samma sidopadding som .footer-menu så länkraden linjerar med adresserna. */
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2.5rem);
    /* Cookiebots knapp för samtyckesinställningar är position: fixed i nedre
       vänstra hörnet, 48 px stor med 10 px marginal, och den ligger över allt
       annat. Längst ner på sidan hamnade den rakt på "Om oss". Raden får
       därför bottenutrymme nog att gå fri från den — footern är svart, så
       ytan under läses som luft och inte som ett hål. */
    padding-bottom: max(clamp(1.25rem, 2.5vw, 2rem), 4.75rem);
    background-color: var(--black);
}

.footer-lankar__lank {
    font-family: var(--font--paragraph);
    font-size: clamp(.875rem, 1vw, 1rem);
    font-weight: 500;
    color: var(--white);
    text-decoration: none;
}

.footer-lankar__lank:hover,
.footer-lankar__lank:focus-visible {
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* Sociala ikonerna bor i länkradens högerkant — flyttade hit från
   toppmenyn. Vita mot det svarta, nedtonade tills hover. */
.footer-lankar__sociala {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-left: auto;
}

.footer-lankar__social img {
    display: block;
    width: 20px;
    height: 20px;
    filter: invert(1);
    opacity: .7;
    transition: opacity .15s ease;
}

.footer-lankar__social:hover img,
.footer-lankar__social:focus-visible img {
    opacity: 1;
}

/* ==========================================================================
   Textsida

   Gemensam brödtexttypografi för egenbyggda sidor i speglingens skal —
   tillgänglighetsredogörelsen i dag, nästa policysida i morgon. Samma
   radlängdstak som eventsidans brödtext.

   Webflows h1/h2-element bär kraftig minusspärrning (-.5vw) som är måttad
   för rubriker i 12vw — i de här graderna kollapsar bokstäverna.
   Spärrningen sätts därför om, samma som inforutans rubrik.
   ========================================================================== */

.textsida {
    max-width: 44rem;
    padding: clamp(1.5rem, 3vw, 3.5rem) 20px clamp(3rem, 6vw, 5rem);
}

.textsida h1 {
    font-family: var(--font--heading);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: .02em;
    line-height: .95;
    margin: 0 0 .75em;
    padding: 0;
}

/* h3 ingår eftersom de speglade sidorna (om oss) har sina mellanrubriker
   som h3 — samma grad och spärrning som h2. */
.textsida h2,
.textsida h3 {
    font-family: var(--font--heading);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    letter-spacing: .02em;
    line-height: 1.1;
    margin: 2em 0 .1rem;
    padding: 0;
}

.textsida h2:first-child,
.textsida h3:first-child {
    margin-top: 0;
}

.textsida p,
.textsida li {
    font-family: var(--font--paragraph);
    /* Typsystemets brödtext, uppskalad 1,2x. */
    font-size: 1.35rem;
    line-height: 1.4;
    margin: 0 0 .9em;
}

.textsida ul {
    padding-left: 1.2em;
    margin: 0 0 .9em;
}

.textsida a {
    color: #d6006e;
    text-underline-offset: .18em;
}

/* Kod i löptexten — parameternamn, fältnamn, datumformat.

   Webbläsarens monospace-standard kom i 1,35rem som resten av brödtexten
   och blev då både bredare och mörkare än orden omkring: raden bröt sig i
   stycket i stället för att sitta i det. Graden dras ner till .82em, vilket
   ger ungefär samma x-höjd som brödfonten i den här storleken, och en svag
   platta gör kodbiten till ett eget objekt utan att lysa. Hårda hörn som
   resten av siten. */
.textsida code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .82em;
    line-height: 1;
    background-color: #0000000d;
    /* Snålt i sidled: plattan lägger sig annars som ett mellanslag mellan
       kodbiten och kommat eller punkten efter den. */
    padding: .18em .3em;
    /* Bryts hellre mitt i en lång adress än spiller ut ur spalten. */
    overflow-wrap: anywhere;
}

/* En kodbit som är hela stycket — exempeladresserna — får stå som ett block
   med luft omkring, inte som ett ord i en mening. Adresserna är länkade, så
   koden ligger inuti ankaret. */
.textsida p > code:only-child,
.textsida p > a:only-child > code:only-child {
    display: inline-block;
    padding: .5em .7em;
}

/* Länkade kodbitar behåller länkfärgen; plattan skulle annars dämpa den. */
.textsida a code {
    color: inherit;
    background-color: #d6006e14;
}

/* ==========================================================================
   Flaggor i språkväljaren

   "SV"/"EN" ensamt läses inte som ett språkval bland menyknapparna — en
   liten flagga intill gör det tydligt. Markupen är speglad, så flaggorna
   sätts härifrån: valen i listan har data-lang att haka fast i, medan
   knappens text är statisk — SV i desktopnavigationen, EN i mobilens
   .dropdown-2025 — och får sin flagga per navigation.

   Flaggorna ligger som data-URI:er så att spegeln förblir självförsörjande.
   ========================================================================== */

.language::before,
.lang::before {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: .7em;
    margin-right: .35em;
    vertical-align: -.03em;
    background: center / 100% 100% no-repeat;
}

.language::before,
.lang-select[data-lang="sv"] .lang::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'><rect width='16' height='10' fill='%23006AA7'/><rect x='5' width='2' height='10' fill='%23FECC02'/><rect y='4' width='16' height='2' fill='%23FECC02'/></svg>");
}

.dropdown-2025 .language::before,
.lang-select[data-lang="en"] .lang::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'><rect width='16' height='10' fill='%23012169'/><path d='M0 0l16 10M16 0L0 10' stroke='%23fff' stroke-width='2.2'/><path d='M0 0l16 10M16 0L0 10' stroke='%23C8102E' stroke-width='1'/><path d='M8 0v10M0 5h16' stroke='%23fff' stroke-width='3.4'/><path d='M8 0v10M0 5h16' stroke='%23C8102E' stroke-width='2'/></svg>");
}

/* ==========================================================================
   Biljettknappens etikett i listorna

   Kalendern och listningarna har en egen, fullbred knapp under bilden
   (.photo-ticket) som behåller Webflows form. Bara graden byts: Webflows
   1,5vw blev 22px på en bred skärm och 6px på en smal.

   Hero:ns och puffarnas knappar sätts samlat längre ner, under
   "Biljettknappen".

   Här stod tidigare hela Webflows eventpanel (.tiket-text,
   .event-info-box-2024) — den upprepade eventets uppgifter en andra gång på
   telefon och är borta ur markupen, så reglerna följde med.
   ========================================================================== */

/* Knappetiketten i Maheni, som menyn. */
.get-tickets {
    font-family: var(--font--heading);
    font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
    letter-spacing: .04em;
}

/* ==========================================================================
   Inforuta för event

   Ersätter Webflows event-info-section, som upprepade bilden och uppgifterna
   en andra gång. Uppgifterna står nu en gång, med etiketter så att de går att
   skumma. Köpknappen finns i hero:n och följer med vid scroll, så rutan
   behöver ingen egen.

   Rubriken bär Debaser-fonten och ger rutan avsändare. Etiketter och värden
   står i brödfonten — värdena är läsinnehåll, inte rubriker.
   ========================================================================== */

.event-infobox {
    background-color: var(--black);
    border: 1px solid var(--white-20);
    padding: clamp(1.25rem, 2.5vw, 2.25rem);
    max-width: 34rem;
}

/* Rubriken bär Debaser-fonten — det är den som ska ge rutan avsändare.
   Som displayface behöver den mer grad och mindre spärr än en etikett. */
.event-infobox__rubrik {
    font-family: var(--font--heading);
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
}

.event-infobox__lista {
    margin: 0;
    display: grid;
    gap: 0;
}

/* Etiketten står över värdet. Rutan är en smal spalt, och två kolumner gjorde
   att värden som "20 år (18 år med förköpsbiljett)" bröts på tre rader. */
.event-infobox__rad {
    display: grid;
    gap: .05em;
    padding: clamp(.45rem, .8vw, .65rem) 0;
    border-top: 1px solid var(--white-20);
}

.event-infobox__rad:first-child {
    border-top: 0;
    padding-top: 0;
}

.event-infobox__etikett {
    font-family: var(--font--paragraph);
    font-size: clamp(.6875rem, .85vw, .8125rem);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white-50);
    margin: 0;
}

/* Värdena är läsinnehåll, inte rubriker. Brödfonten gör långa strängar som
   "20 år (18 år med förköpsbiljett)" betydligt lättare att läsa än de smala
   versalerna gjorde. */
.event-infobox__varde {
    font-family: var(--font--paragraph);
    font-size: clamp(.9375rem, 1.15vw, 1.0625rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    color: var(--white);
    margin: 0;
    /* EventOpen är ofta flerradig ("Dörrar 18.00\nToni Holgersson 20.00") */
    white-space: pre-line;
}

.event-infobox__varde--pris {
    font-weight: 600;
    color: var(--accent);
}

.event-infobox__status {
    font-family: var(--font--paragraph);
    font-size: clamp(.6875rem, .85vw, .8125rem);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin: clamp(1rem, 1.8vw, 1.5rem) 0 0;
}

.event-infobox__kop {
    margin-top: clamp(1.25rem, 2.2vw, 2rem);
}


/* ==========================================================================
   Eventsidans brödtext med inforutan vid sidan

   Inforutan låg tidigare i en egen sektion längre ner, där den upprepade
   hero-panelens uppgifter. Nu står den intill texten så att datum, pris och
   biljettköp finns kvar i blickfånget medan man läser.
   ========================================================================== */

/* Samma luft ovanför, till vänster och till höger om inforutan. Sektionen
   bryter ut i fullbredd precis som hero:n — annars kom vänstermarginalen från
   sidans container (20px) medan ovansidan kom härifrån (49px). */
.event-body {
    --luft: clamp(1.5rem, 3vw, 3.5rem);
    display: grid;
    grid-template-columns: minmax(16rem, 21rem) minmax(0, 44rem) minmax(0, 1fr);
    gap: var(--luft);
    align-items: start;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: var(--luft);
}

.event-body .event-infobox {
    max-width: none;
    position: sticky;
    top: clamp(1rem, 2vw, 2rem);
}

.event-body__text {
    min-width: 0;
    /* Radlängd. Utan tak blev raderna långt över 100 tecken i den breda
       kolumnen. ~44rem ger omkring 70 tecken vid brödtextens grad, vilket är
       där löpande text är bekvämast att läsa. */
    max-width: 44rem;
}

/* Under Webflows mellanbrytpunkt läggs kolumnerna på varandra. Inforutan
   hamnar först — datum och pris före den långa texten. */
@media screen and (max-width: 991px) {
    .event-body {
        grid-template-columns: 1fr;
        row-gap: var(--luft);
    }

    .event-body .event-infobox {
        position: static;
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-body .event-infobox {
        position: static;
    }
}

/* ==========================================================================
   Eventsidans högerkolumn

   Brödtexten har ett radlängdstak på 44rem, så på breda skärmar stod tredje-
   delen till höger tom. Kolumnen fylls med supportakten och eventets egna
   länkar ur EventUrls: en Spotify-spelare när länken går att bädda in,
   ikonlänkar för resten. Supportrutan lånar inforutans utseende så att sidan
   får samma kort på båda sidor om texten.

   Utan innehåll renderas ingen aside alls (partialen avgör det), och tredje
   kolumnen står tom precis som förut.
   ========================================================================== */

.event-aside {
    min-width: 0;
    display: grid;
    gap: clamp(1.25rem, 2vw, 2rem);
    align-content: start;
}

.event-aside__support {
    background-color: var(--black);
    border: 1px solid var(--white-20);
    padding: clamp(1.25rem, 2.5vw, 2.25rem);
}

.event-aside__rubrik {
    font-family: var(--font--heading);
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
}

.event-aside__bild {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
}

.event-aside__support > :last-child {
    margin-bottom: 0;
}

/* Rich text-blocket ärver annars sidans svarta textfärg — rutan är svart. */
.event-aside__text,
.event-aside__text p {
    font-family: var(--font--paragraph);
    font-size: clamp(.9375rem, 1.05vw, 1rem);
    line-height: 1.55;
    color: var(--white);
}

.event-aside__text p {
    margin: 0 0 .75em;
}

.event-aside__text p:last-child {
    margin-bottom: 0;
}

.event-aside__spotify {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 12px;
}

.event-aside__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(.5rem, 1vw, .875rem);
}

/* Länkarna bär plattformsnamnet i klartext — en ensam ikon läses inte av
   alla. Formen lånas av sitens pillerknappar (.category-button). */
.event-aside__lank {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    max-width: 100%;
    background-color: var(--white);
    border: 1.5px solid var(--black);
    border-radius: 20px;
    padding: .35em .9em .35em .55em;
    font-family: var(--font--paragraph);
    font-size: clamp(.875rem, 1vw, .9375rem);
    font-weight: 500;
    line-height: 1;
    color: var(--black);
    text-decoration: none;
}

.event-aside__lank:hover,
.event-aside__lank:focus-visible {
    background-color: var(--black);
    color: var(--white);
}

/* Ikonerna är svarta — utan invertering försvinner de mot hovrens svarta. */
.event-aside__lank:hover .event-aside__ikon,
.event-aside__lank:focus-visible .event-aside__ikon {
    filter: invert(1);
}

/* Kontonamn kan bli långa och kolumnen är smal — hellre ellips än att
   pillret spränger sin bredd. */
.event-aside__lanktext {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-aside__ikon {
    display: block;
    flex: 0 0 auto;
    width: 1.35em;
    height: 1.35em;
}

/* Mellan Webflows brytpunkt och ~1280px räcker bredden inte till tre
   kolumner — kolumnen lägger sig under texten i stället. */
@media screen and (max-width: 1279px) and (min-width: 992px) {
    .event-body {
        grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
    }

    .event-aside {
        grid-column: 2;
        max-width: 44rem;
    }
}

/* ==========================================================================
   Tidigare evenemang

   En besökare som landar på ett gammalt event via en sparad länk ska förstå
   det direkt, inte efter att ha letat efter datumet.
   ========================================================================== */

.event-passerat {
    grid-column: 1;
    font-family: var(--font--paragraph);
    font-size: clamp(.8125rem, 1.05vw, 1rem);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--black);
    background-color: var(--accent);
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5em;
    align-items: baseline;
    padding: .6em .9em;
    margin: 0 0 clamp(.75rem, 1.5vw, 1.25rem);
}

.event-passerat__datum {
    font-weight: 500;
    opacity: .8;
}

.event-infobox__rubrik--passerat {
    color: var(--white-50);
}

/* ==========================================================================
   Sökresultat
   ========================================================================== */

.sok-rubrik {
    font-family: var(--font--heading);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: .01em;
    line-height: 1;
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(.75rem, 1.5vw, 1.25rem);
    display: flex;
    align-items: baseline;
    gap: .5em;
}

.sok-rubrik__antal {
    font-family: var(--font--paragraph);
    font-size: clamp(.75rem, .9vw, .875rem);
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--white-50);
}

/* Tidigare evenemang tonas ner så att kommande läses först. */
.sok-tidigare {
    opacity: .72;
}

.sok-tidigare:hover,
.sok-tidigare:focus-within {
    opacity: 1;
}

.search-empty {
    padding: clamp(1.5rem, 3vw, 3rem) 0;
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    justify-items: start;
}

/* ==========================================================================
   Eventsidans hero

   Bilden i fullbredd med titeln och biljettknappen ovanpå. Läsbarheten kommer
   från en gradient underifrån, inte från en platta bakom texten — bilden får
   synas hela vägen och texten står ändå emot.
   ========================================================================== */

.event-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* Höjden följer bredden. En 2,9:1-ruta beskar de 3:2-bilder som
       laddas upp hårt på höjden; ~2,3:1 tar bort mycket av det. */
    min-height: clamp(22rem, 44vw, 44rem);
    overflow: hidden;
    background-color: var(--black);
}

.event-hero__bild {
    position: absolute;
    inset: 0;
    /* Ansikten sitter oftast i övre halvan, så beskärningen tas nedtill. */
    background-position: 50% 32%;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Gradienten ligger som ett eget skikt så att den aldrig påverkar texten. */
.event-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgb(0 0 0 / .9) 0%,
        rgb(0 0 0 / .6) 30%,
        rgb(0 0 0 / .15) 60%,
        rgb(0 0 0 / 0) 85%
    );
    pointer-events: none;
}

.event-hero__innehall {
    position: relative;
    /* Ovanför karusellens ytlänk (z-index 2). z-index: 1 räckte inte: position
       + z-index gör innehållet till en egen staplingskontext, så biljettknappens
       z-index: 200 gällde bara inuti den och ytlänken lade sig över knappen —
       hovern nådde aldrig fram och animationen spelades inte i karusellen.

       pointer-events: none släpper klicken vidare till ytlänken, så hela sliden
       är fortfarande klickbar. Knappen och länkar tar tillbaka pekaren nedan. */
    z-index: 3;
    pointer-events: none;
    width: 100%;
    padding: clamp(1.25rem, 3vw, 3rem);
}

.event-hero__innehall a,
.event-hero__innehall .ticket-new {
    pointer-events: auto;
}

/* Texten hålls samman i ett block. Knappen delade tidigare rutnät med den och
   krävde en egen kolumn; nu sitter den i sektionens hörn och innehållet är
   bara det här blocket. */
.event-hero__text {
    min-width: 0;
}

.event-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* Rad- och kolumnavstånd var samma .75em. I smala puffar bryter raden
       mellan datum och kategori, och då blev luften mellan dem lika stor som
       mellan två ord — de läste som två skilda rader i stället för en
       ombruten. Radavståndet sätts därför för sig. */
    gap: .15em .75em;
    font-family: var(--font--paragraph);
    font-size: clamp(.875rem, 1.15vw, 1.125rem);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white);
    margin: 0 0 clamp(.5rem, 1vw, .875rem);
}

/* Kategorin står i samma vita som datumet; en avdelare skiljer dem i stället
   för att tona ner texten. */
.event-hero__kategori {
    color: var(--white);
}

/* Punkten mellan datum och kategori — samma avdelare som Debasers
   affischer och nyhetsbrev använder ("APR 10 ● NOVA"). Ritad cirkel i
   stället för glyf: tecknets punkt satt inte optiskt mitt för
   versalerna. */
.event-hero__kategori::before {
    content: "";
    display: inline-block;
    width: .34em;
    height: .34em;
    border-radius: 50%;
    background-color: var(--accent);
    margin-right: .75em;
    vertical-align: baseline;
    position: relative;
    top: -.22em;
}

.event-hero__status {
    background-color: var(--accent);
    color: var(--black);
    padding: .25em .6em;
    letter-spacing: .1em;
}

.event-hero__titel {
    font-family: var(--font--heading);
    font-size: clamp(2.25rem, 7vw, 6rem);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--white);
    margin: 0;
    /* Diskret skugga i stället för platta — räddar de ljusaste bildpartierna. */
    text-shadow: 0 2px 24px rgb(0 0 0 / .55);
}

.event-hero__support {
    font-family: var(--font--paragraph);
    font-size: clamp(1rem, 1.5vw, 1.375rem);
    font-weight: 500;
    line-height: 1.35;
    color: var(--white);
    max-width: 34ch;
    margin: clamp(.5rem, 1vw, .75rem) 0 0;
    text-shadow: 0 1px 16px rgb(0 0 0 / .6);
}

/* Knappen är syskon till .event-hero__innehall och positioneras mot
   sektionen, alltså mot bilden. z-index 4 lägger den över både ytlänken (2)
   och innehållet (3), så biljettklicket vinner över slidens ytlänk. */
.event-hero__kop {
    position: absolute;
    z-index: 4;
    top: clamp(1.25rem, 3vw, 3rem);
    right: clamp(1.25rem, 3vw, 3rem);
}

/* Passerade event: bilden tonas ner så att status läses före motivet. */
.event-hero--passerat .event-hero__bild {
    filter: grayscale(1);
    opacity: .55;
}

/* Under 991px räcker inte bredden till både titel och knapp på samma rad —
   titelkolumnen blir så smal att rubriken bryts i småstumpar. Knappen får en
   egen rad under texten i stället, samma brytpunkt som menyn byter till
   hamburgare vid. */
/* Knappen sitter i hörnet på alla bredder, så innehållet är en enda kolumn
   överallt. Den tvåkolumnsuppdelning som låg här förut behövs inte längre. */

/* På telefon gav clamp:en bara 22rem hero. Eftersom knappen dessutom tar en
   egen rad under texten sköts titel och datum upp i mitten av motivet — där
   gradienten är som svagast och en ljus bild äter upp den vita texten. Högre
   ruta flyttar ner textblocket till den mörka delen.

   Karusellens slides undantas: de sätter min-height: 0 och följer sliderns
   höjd, och regeln här ligger senare i filen än den deklarationen. */
@media screen and (max-width: 767px) {
    .event-hero:not(.event-hero--slide) {
        min-height: 28rem;
    }

    /* Biljettknappen tog 82px av heron och sköt upp titeln igen, trots den
       högre rutan. Hela knappen hänger på --biljett-fs och är måttsatt i em,
       så en mindre grad krymper etikett, ikon och avdelare som en enhet --
       ingen av delarna behöver röras var för sig. 13px i stället för 15
       tar knappen till drygt 50px, och allt ovanför flyttas ner lika mycket.
       Gäller karusellens slides också: samma knapp, samma trängsel. */
    .event-hero {
        --biljett-fs: .8125rem;
    }

    /* Mittstoppen höjs rejält. Toppen av bilden är fortfarande orörd, men
       hela textblocket står nu på mörk botten i stället för på .15 svärta.
       Gäller även karusellens slides, som har samma problem. */
    .event-hero::after {
        background: linear-gradient(
            to top,
            rgb(0 0 0 / .92) 0%,
            rgb(0 0 0 / .78) 32%,
            rgb(0 0 0 / .42) 58%,
            rgb(0 0 0 / 0) 88%
        );
    }
}

/* ==========================================================================
   Ingressen på eventsidan

   Fältet är en teaser på ett par meningar, men satt som h3 blev det en rubrik
   i smala versaler. Här är det en ingress: brödfonten, större än löptexten men
   tydligt inte en rubrik.
   ========================================================================== */

.event-body__text .h3.mobile {
    font-family: var(--font--paragraph);
    font-size: clamp(1.1875rem, 1.75vw, 1.625rem);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    /* Innehållsytan under hero:n är vit — brödtexten är var(--black), och
       ingressen ska följa den. Var vit på vitt tidigare. */
    color: var(--black);
    margin: 0 0 clamp(1rem, 2vw, 1.75rem);
}

/* ==========================================================================
   Hero i fullbredd och köpknapp som följer med

   Hero:n ligger i .event-content-box, som är innehållsbredd. Den bryts ut med
   negativa marginaler. overflow-x: clip på body hindrar sidoscroll — clip,
   inte hidden, eftersom hidden skapar en scrollcontainer och då slutar
   position: sticky fungera för inforutan.
   ========================================================================== */

body {
    overflow-x: clip;
}

.event-hero {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}


/* En kolumn: texten först, supporten och länkarna direkt efter (där
   supportbeskrivningen stod när den låg i textflödet), inforutan sist.
   Uppgifterna är referens man går tillbaka till, inte det man läser först. */
@media screen and (max-width: 991px) {
    .event-body__text {
        order: 1;
    }

    .event-aside {
        order: 2;
    }

    .event-body .event-infobox {
        order: 3;
    }
}

/* ==========================================================================
   Fragmentmono ut

   Monospacen låg på --font--mono, som 17 regler använder — bland dem p, .b1
   och .b1-data. Det betydde att all löptext på siten var monospace, vilket är
   trögläst i längre stycken. Variabeln pekar nu på brödfonten.

   Tre klasser hårdkodade fonten i stället för att gå via variabeln och måste
   därför skrivas över var för sig.

   Själva @font-face-deklarationerna står kvar orörda i Webflow-filen. De
   laddas bara om någon regel efterfrågar fonten, så inget hämtas i onödan.
   ========================================================================== */

:root {
    --font--mono: 'TT Commons', Arial, sans-serif;
}

.b2,
.text-block-78,
.success-message-3 {
    font-family: var(--font--paragraph);
}

/* Löptexten blir lite luftigare i en proportionell font än i monospace, där
   raderna hade inbyggd luft av teckenbredden. */
.b1,
.rich-text-block-6 p,
.event-body__text p {
    line-height: 1.4;
}

/* Datumsiffrorna i listorna stod i monospace, vilket höll dem i kolumn.
   Sifferbredd i tabellform ger samma effekt i den proportionella fonten. */
.b1-data,
.b2 {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Brödtexten linjerar med inforutan

   .info-event-box är satt till 70% bredd med auto-marginaler och 60px
   toppadding, vilket sköt texten inåt och nedåt så att spalterna inte började
   på samma höjd. I tvåkolumnsläget sköter griden både bredd och mellanrum.
   ========================================================================== */

.event-body__text .info-event-box {
    width: 100%;
    margin-inline: 0;
    padding-top: 0;
}

.event-body__text > *:first-child > *:first-child {
    margin-top: 0;
}

/* Hero:n ska möta navigationen direkt. .event-content-box har 40–60px
   toppadding som annars ger en ljus remsa mellan menyn och bilden. */
.event-content-box:has(.event-hero) {
    padding-top: 0;
}

/* ==========================================================================
   Startsidans karusell

   Samma hero-komponent som eventsidan, med två skillnader: sliden fyller
   slidern i stället för att sätta egen höjd, och den bryter inte ut i fullbredd
   eftersom slidern redan är det.
   ========================================================================== */

.event-hero--slide {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    height: 100%;
    min-height: 0;
}

/* Ytlänken täcker hela sliden. z-index 2 lägger den över innehållet men under
   biljettknappen, som Webflow ger z-index 100. */
.event-hero__ytlank {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Namnet finns i länken som tillgängligt namn, men visas inte — titeln står
   redan utskriven i sliden. */
.event-hero__ytlank-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Hover- och fokusmarkering på titeln, trots att länken ligger utanför den. */
.event-hero--slide:has(.event-hero__ytlank:hover) .event-hero__titel,
.event-hero--slide:has(.event-hero__ytlank:focus-visible) .event-hero__titel {
    color: var(--accent);
}

.event-hero__ytlank:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -4px;
}

/* Slidern har en egen höjd i vw. Bilden ska fylla den utan att sliden
   försöker sätta höjd själv. */
.slide-hero {
    height: 100%;
}


/* Genrerna hör inte till samma slags information som kategori och scen — de är
   beskrivande snarare än fakta om bokningen. Egen rad, mindre grad och tonad
   ram skiljer dem åt. */
.genre-rad {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
}

.genre-rad .event-date-hero.border-genre {
    border-color: var(--black-20);
    padding: .15em .6em;
}

.genre-rad .b2 {
    font-size: clamp(.625rem, .8vw, .75rem);
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .72;
}

/* Karusellens innehåll låg an mot maskens vänsterkant, så titeln kapades.
   Slidern klipper vid masken, så innehållet behöver egen indragning.

   Nedtill ligger punktraden och progresslinjen i karusellens botten. Utan eget
   bottenutrymme hamnade biljettknappen i samma band och punkterna gick rakt
   igenom den. Utrymmet är punkternas eget avstånd från kanten plus deras höjd
   (3px, dubbelt så hög när den är aktiv) och en marginal. */
.event-hero--slide .event-hero__innehall {
    padding-left: clamp(1.5rem, 4vw, 4.5rem);
    padding-right: clamp(1.5rem, 4vw, 4.5rem);
    padding-bottom: calc(clamp(1rem, 2vw, 1.75rem) + clamp(1.25rem, 2vw, 2rem));
}

/* Priset är också en väg till kassan. */
.event-infobox__prislank {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

.event-infobox__prislank:hover,
.event-infobox__prislank:focus-visible {
    color: var(--white);
}

/* --------------------------------------------------------------------------
   Biljettknappen

   En enda storlek, oavsett var knappen står. Tidigare skalades hero:ns knapp
   mot fönstret och puffens mot sitt kort, med egna clamp-serier i vardera
   ytan. Två knappar på samma skärm kunde då skilja 30–40%, och i puffraden
   fick ett brett kort en större knapp än ett smalt kort intill.

   Nu hänger varje mått på knappens egen grad (--biljett-fs) och uttrycks i em,
   så hela knappen växer som en enhet och bara graden byts ut. Det gör också
   ikonen och avdelaren följsamma utan egna skalor.

   Selektorerna matchar alla tre klasserna plus kontexten: Webflow har
   .ticket-new.on-event.on-banner med egen absolut positionering och
   padding: .5vw 0 — noll horisontellt. Varje gång regeln skrivits med lägre
   specificitet har den högra paddingen försvunnit igen.
   -------------------------------------------------------------------------- */

:root {
    /* 15px på telefon, 20px från ~1400px och uppåt. */
    --biljett-fs: clamp(.9375rem, .55rem + .75vw, 1.25rem);
}

.event-hero .event-hero__kop .ticket-new.on-event.on-banner,
.event-hero--slide .event-hero__kop .ticket-new.on-event.on-banner,
.highlight-event__kop .ticket-new.on-event.on-banner {
    /* Webflow positionerar knappen absolut med egna offset. Wrappern
       .event-hero__kop sköter placeringen i heron, så knappen själv ska
       ligga still i sitt flöde. Marginalen nollas av samma skäl: Webflow
       lägger 20px på toppen, vilket hade knuffat ner knappen ur hörnet. */
    position: relative;
    inset: auto;
    margin: 0;
    font-size: var(--biljett-fs);
    /* Vänster padding är mindre än höger med flit: ikonens kanvas är tom en bit
       in (se nedan), så den optiska insatsen blir lika stor på båda sidor.
       Numeriskt lika padding är vad som läste som saknat rosa till höger. */
    padding: .85em 1.25em .85em .85em;
    column-gap: 1.45em;
    white-space: nowrap;
}

.event-hero .event-hero__kop .get-tickets,
.event-hero--slide .event-hero__kop .get-tickets,
.highlight-event__kop .get-tickets {
    font-size: 1em;
    line-height: 1;
    letter-spacing: .04em;
}

/* Ikonen.

   Lottiefilen ritar biljetten mitt på en 70×70-kanvas och använder bara ~39%
   av bredden i vila; resten är luft som fylls när plusrundeln flyger in på
   hover. En ikonruta i biljettens storlek gav därför en 7px-biljett intill en
   20px-etikett — det var ikonen som upplevdes för liten.

   Rutan mäts i stället mot kanvasen och skalas upp med transform, som inte
   påverkar layouten: biljetten blir ~1,6em i vila — halvannan gång etikettens
   grad — och hover-läget växer ut i knappens luft utan att flytta något.
   Skalan sitter på .ticket-box-2024 och inte på svg:n; lottie skriver en egen
   inline-transform där, som bara !important hade kunnat slå.

   Måtten är det största som ryms: i slutläget är biljetten uppspelad till full
   storlek med plusrundeln bredvid, och den mäter då 74×66px mot knappens
   265×82. Marginalerna är 6-8px runtom, och växer ikonrutan mer krockar
   rundeln med avdelaren.

   Den negativa högermarginalen drar in kanvasens tomma högerkant, så avståndet
   till avdelaren mäts från biljetten och inte från luften. Den ersätter
   Webflows margin-right: -1vw på .big, som gjorde samma sak i vw. */
.event-hero .event-hero__kop .ticket-box-2024,
.event-hero--slide .event-hero__kop .ticket-box-2024,
.highlight-event__kop .ticket-box-2024 {
    margin: 0 -.3em 0 0;
    transform: scale(1.8);
}

.event-hero .event-hero__kop .ticket-lottie,
.event-hero--slide .event-hero__kop .ticket-lottie,
.highlight-event__kop .ticket-lottie {
    width: 2.4em;
    height: 2.4em;
}

.event-hero .event-hero__kop .ticket-divaider,
.event-hero--slide .event-hero__kop .ticket-divaider,
.highlight-event__kop .ticket-divaider {
    height: 2.1em;
}

/* Knappen står i övre högra hörnet, samma plats i puffar som i heron. Nere
   till höger låg den i vägen: en bred rosa platta rakt under titeln blev det
   tyngsta i kortet och trängde ihop texten den skulle höra till. Uppe i
   hörnet är den ett märke på bilden i stället, och hela nedre vänstra
   kvadranten tillhör metaraden och titeln. */
.highlight-event__kop .ticket-new.on-event.on-banner {
    position: absolute;
    inset: clamp(.5rem, 1.2vw, 1rem) clamp(.5rem, 1.2vw, 1rem) auto auto;
}

/* Webflow håller undan plats åt knappen med padding-bottom: 6,5vw på
   textlänken — den låg då i kortets nedre högra hörn och titeln fick inte
   löpa in under den. Med knappen uppe i hörnet är paddingen bara ett hål
   mellan titeln och kortets underkant. */
.highlight-event .info-contener-hero {
    padding-bottom: 0;
}


/* ==========================================================================
   FAQ

   Hierarkin var omvänd: frågan satt som .h3 i displayfonten upp till 4,5rem
   medan svaret låg i .b2, sitens minsta hjälpgrad. Frågan får en rimlig
   rubrikgrad och svaret brödtextens läsbarhet.
   ========================================================================== */

.faq-box {
    max-width: 46rem;
    padding-block: clamp(1.25rem, 2.2vw, 2rem);
    border-top: 1px solid var(--black-20);
}

.faq-box .h3 {
    font-family: var(--font--heading);
    font-size: clamp(1.375rem, 2.1vw, 1.875rem);
    line-height: 1.1;
    letter-spacing: .01em;
    margin: 0 0 clamp(.5rem, 1vw, .75rem);
}

/* Både behållaren och styckena inuti måste sättas.
   På om-oss ÄR .b2 stycket, medan FAQ har .b2 som w-richtext-behållare med
   <p> inuti — de ärver inte storleken utan behåller Webflows egen p-regel.
   Det gjorde att sidorna hamnade på 16px/25,6px respektive 15,6px/20,2px. */
.faq-box .b2,
.faq-box .b2 p {
    font-family: var(--font--paragraph);
    font-size: clamp(.9375rem, 1.1vw, 1rem);
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
}

.faq-box .b2 p {
    margin: 0 0 .9em;
}

.faq-box .b2 p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Restaurangsidan

   Namn, öppettider och tre länkar per restaurang. Länkarna såg identiska ut,
   så "Boka Bord" försvann bland dem. Nu finns en tydlig ordning: bokningen
   sist och störst, menyn sekundär och kontakten diskret.

   Rollerna avgörs på href eftersom alla tre delar klassen .category-button:
   mailto är kontakt, .pdf och wp-content är menyer, "#" är ingen länk alls.

   Allt är avgränsat till restaurangsektionerna. Klassen .categoty-row finns
   nämligen på varje sida — den bär även navigationens Concerts/Clubs/Events —
   så oavgränsade regler färgade nav-knapparna rosa.
   ========================================================================== */

.section-bar-desctop ._2-column,
.section-bar-mobile ._2-column {
    margin-bottom: clamp(3rem, 6vw, 7rem);
}

.section-bar-desctop ._2-column:last-child,
.section-bar-mobile ._2-column:last-child {
    margin-bottom: 0;
}

.section-bar-desctop .h2,
.section-bar-mobile .h2 {
    font-size: clamp(1.875rem, 4vw, 3.25rem);
    line-height: 1;
    letter-spacing: .01em;
    padding-block: 0;
    margin-bottom: clamp(.75rem, 1.4vw, 1.125rem);
}

/* Öppettiderna är information, inte rubrik: en liten grå etikett och
   svarta rader med dagarna i egen kolumn så tiderna linjerar. Ersätter
   Webflows rosa h4-stycke, som dessutom föll under kontrastkravet. */
.oppettider {
    display: grid;
    justify-items: start;
    gap: .2em;
    margin-block: clamp(1rem, 1.8vw, 1.5rem);
    font-family: var(--font--paragraph);
}

.oppettider__etikett {
    font-size: clamp(.6875rem, .85vw, .8125rem);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #595959;
    margin-bottom: .4em;
}

.oppettider__rad {
    display: flex;
    gap: 1.25em;
    font-size: clamp(.9375rem, 1.05vw, 1rem);
    font-weight: 500;
    line-height: 1.5;
    color: var(--black);
}

.oppettider__dagar {
    min-width: 5em;
    font-weight: 600;
}

.section-bar-desctop .categoty-row,
.section-bar-mobile .categoty-row {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    align-items: stretch;
}

/* Gemensam knappform. */
.section-bar-desctop .categoty-row a.category-button,
.section-bar-mobile .categoty-row a.category-button {
    font-family: var(--font--paragraph);
    font-size: clamp(.875rem, 1.05vw, 1rem);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .85em 1.4em;
    border-radius: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Boka bord: sist i raden och rosa, men samma form som de andra två —
   olika storlekar lästes som tre orelaterade knappar. Allt som varken är
   meny, kontakt eller tom länk. */
.section-bar-desctop .categoty-row a.category-button:not([href^="mailto:"]):not([href$=".pdf"]):not([href*="wp-content"]):not([href="#"]),
.section-bar-mobile .categoty-row a.category-button:not([href^="mailto:"]):not([href$=".pdf"]):not([href*="wp-content"]):not([href="#"]) {
    order: 1;
    background-color: var(--accent);
    border: 1px solid var(--accent);
    color: var(--black);
}

.section-bar-desctop .categoty-row a.category-button:not([href^="mailto:"]):not([href$=".pdf"]):not([href*="wp-content"]):not([href="#"]):hover,
.section-bar-mobile .categoty-row a.category-button:not([href^="mailto:"]):not([href$=".pdf"]):not([href*="wp-content"]):not([href="#"]):hover {
    background-color: var(--black);
    border-color: var(--black);
    color: var(--white);
}

/* Menyn: sekundär. */
.section-bar-desctop .categoty-row a.category-button[href$=".pdf"],
.section-bar-desctop .categoty-row a.category-button[href*="wp-content"],
.section-bar-mobile .categoty-row a.category-button[href$=".pdf"],
.section-bar-mobile .categoty-row a.category-button[href*="wp-content"] {
    background-color: #0000;
    border: 1px solid var(--black);
    color: var(--black);
}

.section-bar-desctop .categoty-row a.category-button[href$=".pdf"]:hover,
.section-bar-desctop .categoty-row a.category-button[href*="wp-content"]:hover,
.section-bar-mobile .categoty-row a.category-button[href$=".pdf"]:hover,
.section-bar-mobile .categoty-row a.category-button[href*="wp-content"]:hover {
    background-color: var(--black);
    color: var(--white);
}

/* Kontakt: samma ram som menyn — den ljusare ramen gjorde att de tre
   knapparna såg omaka ut. */
.section-bar-desctop .categoty-row a.category-button[href^="mailto:"],
.section-bar-mobile .categoty-row a.category-button[href^="mailto:"] {
    background-color: #0000;
    border: 1px solid var(--black);
    color: var(--black);
    font-weight: 500;
}

.section-bar-desctop .categoty-row a.category-button[href^="mailto:"]:hover,
.section-bar-mobile .categoty-row a.category-button[href^="mailto:"]:hover {
    border-color: var(--black);
}

/* "Endast Drop In" är ingen länk utan en upplysning, och ska inte se klickbar
   ut. Pontonen saknar bokningslänk i innehållet. */
.section-bar-desctop .categoty-row a.category-button[href="#"],
.section-bar-mobile .categoty-row a.category-button[href="#"] {
    background-color: #0000;
    border: 1px dashed var(--black-20);
    color: var(--black-50);
    font-weight: 500;
    pointer-events: none;
    cursor: default;
}

/* ==========================================================================
   Om oss

   Sidan delar .faq-box-strukturen med FAQ och får därmed samma rubrik- och
   brödtextbehandling. Historiksektionen står i .b1 och behöver samma radlängd.
   ========================================================================== */

.history-box .b1 {
    max-width: 46rem;
    line-height: 1.6;
}

/* ==========================================================================
   Startsidans karusell

   Ersätter Webflows slider. Den kunde bara glida eller korsblanda, hade pilar
   som inte tillförde något, och gav ingen indikation på när nästa bild kommer.

   Här sveper den nya bilden in över den gamla med en snedställd, hård kant —
   inget mjukt överbländ, vilket passar den grafiska tonen bättre. En tunn
   linje längst ner visar tiden till nästa.
   ========================================================================== */

.hero-karusell {
    position: relative;
    min-height: clamp(22rem, 44vw, 44rem);
    background-color: var(--black);
    overflow: hidden;
}

.hero-karusell:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.hero-karusell__spar {
    position: absolute;
    inset: 0;
}

.hero-karusell__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

/* Slidarna ligger staplade på varandra, och pointer-events: none ovan ärvs
   inte hela vägen ner: hero:n sätter tillbaka pointer-events på länkar och
   biljettknapp, så knappen i den sista dolda sliden låg överst och fångade
   både hover och klick över hela sin yta. Hovern spelade då animationen på en
   osynlig slide — det syntes ingenting — och ett klick gick till fel events
   biljetter. Spärren måste därför upprepas på just de elementen.

   heroKarusell.js sätter dessutom inert på dolda slides, vilket tar bort dem
   ur tabordningen. Regeln här står kvar för fallet utan JS, där CSS visar
   första sliden och de övriga ligger dolda kvar. */
.hero-karusell__slide:not(.ar-synlig) .event-hero__innehall a,
.hero-karusell__slide:not(.ar-synlig) .event-hero__innehall .ticket-new {
    pointer-events: none;
}

.hero-karusell__slide.ar-synlig {
    opacity: 1;
    pointer-events: auto;
    /* Startläget sätts inline av skriptet; de fyra punkterna måste finnas i
       båda lägena för att clip-path ska kunna animeras. */
    clip-path: polygon(0 0, 125% 0, 100% 100%, -25% 100%);
    transition: clip-path .8s cubic-bezier(.76, 0, .24, 1);
}

/* Utan JS visas första sliden. Webflows inline-script sätter w-mod-js på html
   så snart JS är på. */
html:not(.w-mod-js) .hero-karusell__slide:first-child {
    opacity: 1;
    pointer-events: auto;
    clip-path: none;
}

/* --- progresslinjen --------------------------------------------------- */

.hero-karusell__progress {
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background-color: var(--white-20);
    z-index: 5;
}

.hero-karusell__progress span {
    display: block;
    height: 100%;
    width: 0;
    background-color: var(--accent);
}

.hero-karusell__progress span.ar-igang {
    /* Längden sätts inline av skriptet, från data-delay. */
    animation-name: karusellFyll;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes karusellFyll {
    from { width: 0; }
    to   { width: 100%; }
}

/* --- punkterna -------------------------------------------------------- */

.hero-karusell__punkter {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: clamp(1rem, 2vw, 1.75rem);
    display: flex;
    justify-content: center;
    gap: .5rem;
}

/* Knappen är 24px hög för pekytans skull (WCAG 2.5.8); strecket man ser
   ritas av ::before så att utseendet är detsamma som förut. */
.hero-karusell__punkt {
    appearance: none;
    display: grid;
    align-items: center;
    width: 2rem;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    cursor: pointer;
}

.hero-karusell__punkt::before {
    content: "";
    height: 3px;
    background-color: var(--white-50);
    transition: background-color .15s ease, transform .15s ease;
}

.hero-karusell__punkt:hover::before,
.hero-karusell__punkt:focus-visible::before {
    background-color: var(--white);
}

/* Telefon: nio breda streck tvärs över hela skärmen blev en tung rad som
   konkurrerade med biljettknappen om uppmärksamheten. Karusellen går att
   svepa här, och progresslinjen visar fortfarande var i raden man är, så
   punkterna tas bort. De finns kvar från 480px, där de är det enda sättet
   att nå en slide med tangentbord. */
@media screen and (max-width: 479px) {
    .hero-karusell__punkter {
        display: none;
    }
}

.hero-karusell__punkt.ar-aktiv::before {
    background-color: var(--accent);
    transform: scaleY(2);
}

@media (prefers-reduced-motion: reduce) {
    .hero-karusell__slide.ar-synlig {
        transition: none;
    }

    .hero-karusell__progress {
        display: none;
    }
}

/* ==========================================================================
   Förhandsvisningsbanner

   Siten ligger på admindomänen medan den byggs. Utan en tydlig markering kan en
   kollega eller kund tro att det är den skarpa debaser.se.

   Den går medvetet inte att stänga: hela poängen är att den syns för alla som
   råkar hamna här. Den är smal och står i sitens egen färgskala, men skiljer
   sig från designen i övrigt så att den läses som ett meddelande om sidan och
   inte som en del av den.
   ========================================================================== */

.forhandsbanner {
    position: relative;
    z-index: 90;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .75em;
    background-color: var(--accent);
    color: var(--black);
    font-family: var(--font--paragraph);
    font-size: clamp(.75rem, .95vw, .875rem);
    line-height: 1.4;
    padding: .6em clamp(1rem, 2.5vw, 3rem);
}

.forhandsbanner__markor {
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.forhandsbanner__text {
    font-weight: 500;
}

.forhandsbanner__lank {
    color: var(--black);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

.forhandsbanner__lank:hover,
.forhandsbanner__lank:focus-visible {
    color: var(--white);
}

/* ==========================================================================
   Den öppnade mobilmenyn

   Webflows mobilregler är måttsatta i vw för telefonbredd: .sm-icon blir 7vw,
   vilket är 27px på en telefon men över 60px på iPad. Texterna är satta i 4vw
   med samma effekt. När mobilläget flyttades upp till 991px blev panelen därför
   en röra av jätteikoner i en lodrät kolumn.

   Måtten får golv och tak här, ikonerna läggs på rad, och Kalenders undersidor
   visas i stället för att gömmas — de fanns redan i markupen men bakom
   .categoty-row.menu.hide.
   ========================================================================== */

@media screen and (max-width: 991px) {
    /* --- panelen ------------------------------------------------------- */
    .nav-header-menu {
        gap: clamp(1rem, 2.5vw, 1.75rem);
        padding: clamp(1.25rem, 3vw, 2.5rem);
        overflow-y: auto;
    }

    .container-navigation {
        padding-inline: clamp(1rem, 3vw, 2rem);
    }

    .image-66 {
        width: clamp(8rem, 31vw, 12rem);
    }

    /* --- sökfältet ----------------------------------------------------- */
    .search {
        padding-block: clamp(.75rem, 2vw, 1.25rem);
    }

    .search-engine.mobile {
        height: auto;
    }

    .search-input-2024 {
        font-size: clamp(1.125rem, 4vw, 1.5rem);
        padding-left: 0;
    }

    /* --- huvudlänkarna ------------------------------------------------- */
    .menu-row {
        gap: clamp(.5rem, 1.5vw, .875rem);
    }

    .category-button.menu-mobile {
        font-family: var(--font--heading);
        font-size: clamp(1.5rem, 5vw, 2.25rem);
        line-height: 1.05;
        letter-spacing: .01em;
        text-transform: uppercase;
    }

    /* Kalenders undersidor stod i markupen men doldes. De visas nu indragna
       under Kalender, som de underordnade sidor de är. */
    .categoty-row.menu.hide {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(.4rem, 1.6vw, .7rem);
        padding: clamp(.6rem, 2vw, 1rem) 0 clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 4.5vw, 2rem);
    }

    /* Undersidorna är indragna textlänkar, inte pills. Pillformen hörde till
       den utfällbara varianten och gav fem knappar som konkurrerade med
       huvudlänkarna. */
    /* Samma font som huvudlänkarna, en snäpp mindre så hierarkin håller. */
    .categoty-row.menu.hide .category-button {
        font-family: var(--font--heading);
        font-size: clamp(1.125rem, 3.6vw, 1.5rem);
        font-weight: 400;
        line-height: 1.05;
        letter-spacing: .01em;
        text-transform: uppercase;
        background-color: #0000;
        border: 0;
        border-radius: 0;
        padding: 0;
    }

    .categoty-row.menu.hide .category-button:hover,
    .categoty-row.menu.hide .category-button.w--current {
        background-color: #0000;
        text-decoration: underline;
        text-underline-offset: .18em;
    }

    /* Pilen som hörde till den utfällbara varianten behövs inte när
       undersidorna alltid visas. */
    .categoty-row.menu.hide .arrow-like-a-button {
        display: none;
    }

    /* --- sociala ------------------------------------------------------- */
    .socisl-media-box-mobile {
        display: flex;
        flex-flow: row wrap;
        gap: clamp(.5rem, 2vw, .875rem);
        align-items: center;
    }

    .sm-icon,
    .sm-icon.big {
        width: clamp(1.75rem, 7vw, 2.25rem);
        height: clamp(1.75rem, 7vw, 2.25rem);
        flex: 0 0 auto;
    }

    .sm-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* --- språkväljaren ------------------------------------------------- */
    .language,
    .lang {
        font-size: clamp(.875rem, 4vw, 1.0625rem);
    }

    .lang-select {
        height: auto;
        padding: .4em .9em;
    }

    .menu-row._1 {
        width: auto;
        padding-bottom: 0;
    }
}

/* ==========================================================================
   Pillarna i listningarna ska inte radbryta

   De här reglerna fanns tidigare men försvann när restaurangblocket skrevs om
   — de låg i samma region av filen. "Debaser Pontonen" delades då på två rader
   inne i sin pill. Raden får wrappa mellan pillarna i stället.
   ========================================================================== */

.row-1-on-event .event-date-hero,
.event-date-hero.black,
.event-date-hero.border,
.event-date-hero.border-copy,
.event-date-hero.stage,
.genre-rad .event-date-hero.border-genre {
    white-space: nowrap;
}

.row-1-on-event .b2,
.genre-rad .b2 {
    white-space: nowrap;
}

/* ==========================================================================
   Aktuell länk i mobilmenyn

   Webflow ger .category-button.w--current vit text på svart botten. I menyn
   ligger den på vit panel, och min undermenyregel gjorde bakgrunden
   genomskinlig utan att röra färgen — vit text på vitt.
   ========================================================================== */

@media screen and (max-width: 991px) {
    .nav-header-menu .category-button.w--current,
    .nav-header-menu .category-button:hover,
    .categoty-row.menu.hide .category-button.w--current,
    .categoty-row.menu.hide .category-button:hover {
        color: var(--black);
        background-color: #0000;
    }

    /* --- restaurangknapparna på mobil och iPad ------------------------- */
    /* vw-måtten gav 8px vid 768px, så clamp-golvet på 14px gällde. För litet
       att träffa med tummen, och för litet i förhållande till rubrikerna. */
    .section-bar-desctop .categoty-row a.category-button,
    .section-bar-mobile .categoty-row a.category-button {
        font-size: clamp(1rem, 2.2vw, 1.125rem);
        padding: 1em 1.5em;
    }

    .section-bar-desctop .categoty-row,
    .section-bar-mobile .categoty-row {
        gap: .75rem;
    }

    .section-bar-desctop .h2,
    .section-bar-mobile .h2 {
        font-size: clamp(2rem, 6vw, 3rem);
    }

    .oppettider__rad {
        font-size: clamp(.9375rem, 2vw, 1.0625rem);
    }
}

/* --------------------------------------------------------------------------
   Highlights-puffen: kortets bredd som mått

   Containern behövs för att namnets grad ska mätas mot puffen och inte mot
   fönstret — se nästa block. Puffraden blandar breda och smala kort på samma
   rad, så fönsterbredden säger ingenting om hur mycket plats namnet har.

   Här låg tidigare två reservationer för biljettknappen: padding-bottom på
   smala kort och padding-right på breda, båda mätta i knappens egen grad, så
   att namnet inte skulle löpa in under eller bakom den. Knappen sitter numera
   i övre högra hörnet medan namnet står nere till vänster, så de kan inte
   krocka. Reservationerna är borta; padding-bottom syntes som ett hål mellan
   titeln och kortets underkant.
   -------------------------------------------------------------------------- */

.highlight-event .events-box {
    container-type: inline-size;
}

/* Artistnamnet i puffen.

   Namnet delades mitt i ordet — "KRISTO / FER / ÅSTRÖM". Webflows
   overflow-wrap: break-word får stå kvar: den bryter bara ord som ändå inte
   ryms, och alternativet är att namnet spiller ut utanför kortet. Felet låg i
   spaltbredden. Namnet sattes i 72px från .h3:ans vw-skala i en textspalt som
   mitt högerutrymme klämt ner till 275px, och då hade webbläsaren inget val.

   Graden mäts därför mot puffen i stället för mot fönstret, så en smal puff får
   ett mindre namn. Med utrymmet ovan ryms alla namn i databasen utan brytning;
   bara enstaka extremord på 25 tecken utan mellanslag bryts, och det är rätt
   utfall för dem. */
.highlight-event .event-name-hero .h3 {
    /* Graden mättes i kortets bredd (cqi), vilket gav 27px i ett smalt kort
       och 80px i ett brett på samma rad -- två artistnamn bredvid varandra i
       helt olika storlek. Det behövdes när knappen åt upp textspalten; nu
       ligger den i hörnet och namnet har hela kortets bredd, så graden kan
       följa fönstret i stället. Alla puffar på en sida blir då lika stora.
       Namn som inte ryms bryts mellan orden, inte mitt i dem. */
    font-size: clamp(1.5rem, 2.4vw, 2.5rem);
    line-height: .95;
    hyphens: none;
}

.highlight-event .event-name-hero .h4 {
    font-size: clamp(.875rem, 1.1vw, 1.125rem);
    hyphens: none;
}

/* Två puffar sida vid sida under 992px ger ~245px breda kort — för trångt för
   både namn och knapp. Samma brytpunkt som menyn och hero:n använder. */
@media screen and (max-width: 991px) {
    .highlight-events .highlight-event {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Nyhetsbrevet i footern

   Blocket är en Webflow-embed med egen <style> i markupen. Den satte
   Fragmentmono med !important på fält, etiketter och knapp, vilket är varför
   monon levde kvar här efter att den tagits bort i övrigt. Deklarationerna är
   nu borta ur embeden, så typografin kan sättas här som på resten av siten.

   Underrubriken var en h3 i 50% grått och versaler — den läste som en andra,
   avhuggen rubrik som konkurrerade med h2:n ovanför. Nu är den en ingress.
   ========================================================================== */

/* Utrymme över footern. Webflow gav den margin-top bara under 767px, så på
   desktop låg det svarta blocket direkt mot innehållet ovanför.

   Footern ligger i .page-margin (20px sidopadding) men ska gå kant i kant —
   samma fullbreddstrick som eventsidans hero och event-body. */
.footer-2024 {
    margin-top: clamp(3.5rem, 7vw, 7rem);
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* Sektionen är fullbredd men innehållet ska inte ligga dikt an kanten —
   Webflow gav .footer-menu nästan ingen sidopadding (10px höger, 0 vänster). */
.footer-menu {
    padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
    padding-right: clamp(1.25rem, 2.5vw, 2.5rem);
}

.newsletter-headings-box {
    display: flex;
    flex-direction: column;
    gap: clamp(.5rem, 1vw, .875rem);
}

/* Ingressen, inte en andra rubrik: brödfonten, gemener, och ljus nog att
   läsas mot svart. Radlängden hålls nere så den inte blir en löptextrad.

   margin-inline: auto centrerar själva boxen. Utan den ligger den flush vänster
   och den ärvda text-align: center centrerar bara texten inuti sin egen smala
   box — rubriken stod centrerad och ingressen till vänster. */
.newsletter-headings-box .h3.white-50 {
    font-family: var(--font--paragraph);
    font-size: clamp(1rem, 1.5vw, 1.375rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--white-65);
    max-width: 42ch;
    margin: 0 auto;
}

/* --- formuläret ------------------------------------------------------------ */

/* Fälten och knappen bär hyresformulärets Webflow-klasser och styrs därifrån.
   Här sätts bara samtyckesrutan, som det formuläret inte har. */
.nlForm__checkbox span {
    font-family: var(--font--paragraph);
    font-size: .9375rem;
    /* Sidfoten sätter 700 på allt inuti sig. Samtycket är finstilt, inte
       en rubrik, så vikten återställs. */
    font-weight: 400;
    line-height: 1.45;
    color: var(--white-65);
}

.nlForm__checkbox input[type="checkbox"] {
    accent-color: var(--accent);
    width: 1.125rem;
    height: 1.125rem;
    margin-top: .1rem;
    flex: 0 0 auto;
}

.nlForm__msg {
    font-family: var(--font--paragraph);
    font-size: 1rem;
    line-height: 1.5;
}

/* ==========================================================================
   Sidfoten på telefon

   Adressblocket är två kolumner. På 390px blir varje kolumn under 200px, och
   då bryts uppgifterna mitt itu: "Hornstulls Strand / 9" och "+46(0)8 462 98
   / 60". Ett telefonnummer på två rader läses inte som ett nummer. De läggs
   på varandra i stället, med full bredd var.

   Loggorna tog en halv skärmbredd var och blev tyngre än rubriken ovanför.
   ========================================================================== */

@media screen and (max-width: 767px) {
    .footer-column-3-4 {
        flex-direction: column;
        gap: clamp(1.25rem, 4vw, 2rem);
        /* Webflows procentbredd är räknad för två kolumner bredvid varandra
           och lämnade fyra tiondelar av raden tom när de lades på varandra. */
        width: 100%;
    }

    .part-3 .logo-band {
        align-items: center;
        gap: clamp(1rem, 6vw, 2rem);
    }

    .part-3 .logo-band .image-71,
    .part-3 .logo-band .image-72 {
        width: 36%;
        height: auto;
    }
}

/* Sökresultatets paginering. Kalendern använder Webflows pagineringsskal,
   men det sitter i den mirrorade markupen — söksidan är egen, så raden byggs
   av sitens egna pillerknappar i stället. */
.sok-paginering {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(.75rem, 2vw, 1.5rem);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.sok-paginering__lage {
    font-family: var(--font--paragraph);
    font-size: clamp(.875rem, 1vw, 1rem);
    color: var(--black-50, #00000080);
}

/* ==========================================================================
   TEST: biljettknappen dold i puffar och karusell     (påslaget 2026-08-10)

   Tillfälligt bortplockad för att se hur bilderna står utan den. Hela testet
   är det här blocket, sist i filen med flit -- ta bort det och knappen är
   tillbaka exakt som den var. Markupen är orörd, så inget behöver byggas
   upp igen.

   Eventsidans hero är undantagen. Där är knappen den enda framträdande vägen
   till köp; utan den finns bara prisraden i inforutan, som länkar rätt men
   läses som en uppgift och inte som en knapp. Testet gäller alltså de ytor
   man bläddrar i -- karusellen och puffarna -- inte den sida man landar på
   för att köpa biljett.
   ========================================================================== */

.event-hero--slide .event-hero__kop,
.highlight-event__kop {
    display: none;
}