/* ==========================================================================
   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; }
    /* Rosa på :focus lyste kvar efter ett klick, som om valet redan var gjort.
       Hovern får färgen, tangentbordet behåller den via :focus-visible. */
    .lang-select:hover, .lang-select:focus-visible { 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,
body.visa-hyresmeny .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"],
body.visa-hyresmeny .navbar-2024:not(.mobile) .menu-category-items .categoty-row a[href="/konserter"],
body.visa-hyresmeny .navbar-2024:not(.mobile) .menu-category-items .categoty-row a[href="/klubbar"],
body.visa-hyresmeny .navbar-2024:not(.mobile) .menu-category-items .categoty-row a[href="/events"],
body.visa-hyresmeny .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.

   Hyresmenyn pekas ut med en klass i stället för på href: lokalerna kommer ur
   Site::$lokaler, och en hårdkodad sökväg här hade tystnat den dagen ordningen
   i den arrayen ändras. */
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,
.navbar-2024:not(.mobile) .categoty-row .undermeny-forst::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.

   Den var ett <p> och fick sin undre marginal av Webflows p-regel. Som <h2>
   nollar Webflows h2-regel den, så marginalen står här för att rubriken ska
   ligga kvar på samma avstånd från ingressen. */
.newsletter-headings-box .h2 {
    font-size: clamp(1.75rem, 3.2vw, 3rem);
    margin-bottom: 10px;
}

/* 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;
}

/* Nyhetsbrevets och hyresformulärets skicka-knapp, som granskningen missade.
   Webflows svarta hover har högre specificitet och gäller fortfarande. */
.arrow-like-a-button.news.accent {
    background-color: #d6006e;
}

/* Genomgången 2026-09-14 hittade samma rosa i sitens egna regler längre ner
   (presentkort, hyra, flödet, sökträffar) — de har fått #d6006e på plats.
   Tonen byts bara där rosan möter vitt: mot svart når #d6006e bara 4,1:1,
   medan #ff0083 klarar 5,6:1, så etiketterna på mörk botten står kvar.

   Tangentbordsfokus: Webflow nollar konturen på språkväljaren och
   hamburgaren utan att ersätta den. Vitt syns mot både den svarta
   navigationen och den rosa öppna menyn. */
.w-dropdown-toggle:focus-visible,
.w-nav-button:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

/* 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 adressblock

   Blocket var två kolumner som upprepade postort, telefonnummer och e-post i
   båda. Uppgifterna står nu en gång, under varandra: de två gatuadresserna
   först, den gemensamma kontaktvägen sist.

   Raderna inom en grupp sitter tätt och grupperna hålls isär av gap -- det är
   avståndet som gör dem till tre uppgifter i stället för fem lösa rader.
   ========================================================================== */

.footer-adress {
    /* <address> kursiverar som standard. */
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.75rem);
}

.footer-adress__plats {
    display: flex;
    flex-direction: column;
}

/* Webflows .h4 står i line-height 1.0, satt för enradiga rubriker. Här bryter
   både namnraden och kontaktraden i två, och 1.0 klistrar ihop dem. */
.footer-adress p {
    margin: 0;
    line-height: 1.2;
}

/* ==========================================================================
   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, och knappen
   får .language--sv eller .language--en av sprakknapp() efter vilket språk
   sidan visas på.

   Flaggan hängde tidigare på vilken navigation knappen stod i — .dropdown-2025
   var mobilens och fick brittisk flagga, desktop svensk. Samma knapp betydde
   alltså olika saker på de två ställena.

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

/* Flaggan och språkkoden är ett par och ska stå på samma rad. I
   desktoplistan är pillret smalt nog att bryta mellan dem, och då hamnade
   flaggan på egen rad ovanför koden. */
.language,
.lang {
    white-space: nowrap;
}

.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>");
}

.language--en::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>");
}

/* Listan visar bara det andra språket.

   Knappen säger redan vilket språk sidan visas på, så en utfälld lista med
   både EN och SV upprepade det ena av dem: tre piller i rad där två sa samma
   sak, och ingenting skilde knappen från valen. Nu står ett val bredvid
   knappen — det man kan byta till.

   data-sprak sätts på html av _head, ur samma aktivt_sprak() som knappen. */
html[data-sprak="sv"] .lang-select[data-lang="sv"],
html[data-sprak="en"] .lang-select[data-lang="en"] {
    display: none;
}

/* ==========================================================================
   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.

   Värdena stod i 17px mot brödtextens 21,6px och läste som en fotnot bredvid
   texten, trots att det är rutan man kommer till sidan för. De går i samma
   grad som löptexten nu.

   Rutan är svart på vit sida och syns, men låg platt i ytan. En rosa list på
   ovansidan och en mjuk skugga lyfter den till ett kort som ligger på sidan
   i stället för i den — listen är samma accent som rubriken och priset, så
   färgen är redan rutans egen.
   ========================================================================== */

.event-infobox {
    background-color: var(--black);
    border: 1px solid var(--white-20);
    border-top: 4px solid var(--accent);
    /* Skuggan är riktad nedåt och vid: på vitt läses en tät skugga som en
       kant till, en gles som höjd. */
    box-shadow: 0 1.25rem 2.75rem rgb(0 0 0 / .18);
    padding: clamp(1.5rem, 2.8vw, 2.5rem);
    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: .1em;
    padding: clamp(.6rem, 1vw, .85rem) 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(.75rem, .95vw, .875rem);
    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. */
/* Samma grad som brödtexten (p, 1,35rem) på breda skärmar. Spalten är smal,
   så graden får krympa med den innan den bryter "Åldersgräns: 18 år (13 år i
   målsmans sällskap)" på fyra rader. */
.event-infobox__varde {
    font-family: var(--font--paragraph);
    font-size: clamp(1.0625rem, 1.5vw, 1.35rem);
    font-weight: 500;
    line-height: 1.4;
    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);
}

/* Statusen är en etikett på rutan, inte en rad i listan — den står som en
   platta i accentfärgen så att "Utsålt" inte läses som ännu ett värde. */
.event-infobox__status {
    font-family: var(--font--paragraph);
    font-size: clamp(.75rem, .95vw, .875rem);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--black);
    background-color: var(--accent);
    display: inline-block;
    padding: .4em .8em;
    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;
    /* Webflow ger varje pill margin: 10px. Mellanrummen sköts av .genre-rad
       med gap, så marginalen är dubbelt arbete -- och den vänstra sköt ut
       raden tio pixlar, så pillren inte längre stod i linje med kategori- och
       scenplattan ovanför. */
    margin: 0;
}

.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;
}

/* Webflows globala a-regel ger länkarna #ff0083, som bara når 3,8:1 mot
   den vita sidan. Samma mörkare ton som .textsida a. */
.faq-box a {
    color: #d6006e;
}

/* ==========================================================================
   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;
}

/* Telefon: heron går kant i kant.

   Den låg med .page-margins 10px i sidled och 1vw ovanför -- tre olika
   avstånd runt samma bild (menyn, vänsterkanten, högerkanten), vilket såg ut
   som en ram som inte gick ihop. På en 390px skärm är de 20 pixlarna dessutom
   fem procent av bildens bredd.

   Samma fullbreddstrick som sidfoten och eventsidans hero: bredden tas ur
   viewporten och den negativa marginalen äter förälderns sidopadding. */
@media screen and (max-width: 767px) {
    .home-header {
        padding-top: 0;
    }

    .home-header .slaider-2024 {
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
        padding-top: 0;
    }
}

.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);
}

/* Varianten för en olistad sektion. Skild i färg från förhandsbannern
   eftersom båda kan stå samtidigt i en utvecklingsmiljö, och de säger olika
   saker: den rosa gäller hela speglingen, den svarta gäller den här sidan. */
.forhandsbanner--olistad {
    background-color: var(--black);
    color: var(--white);
}

.forhandsbanner--olistad .forhandsbanner__markor {
    color: var(--accent);
}

/* ==========================================================================
   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 ----------------------------------------------------- */
    /* Högerkanten lämnas åt språkväljaren, som ligger i panelens övre hörn. */
    .search {
        padding-block: clamp(.75rem, 2vw, 1.25rem);
        padding-right: clamp(4rem, 17vw, 5.5rem);
    }

    .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.

       Luften över raden är avsiktligt liten: indraget säger redan att de hör
       till rubriken ovanför, och med .menu-rows egen gap ovanpå gled de ifrån
       den och läste som en egen grupp. Luften under är den som skiljer
       grupperna åt och är därför större -- men inte så stor som förut, då
       Kalender och Restauranger fick nästan en radhöjd tom under sig. */
    .categoty-row.menu.hide {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(.4rem, 1.6vw, .7rem);
        padding: clamp(.15rem, .6vw, .3rem) 0 clamp(.6rem, 2vw, 1rem) 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;
    }

    /* Väljaren stod sist i panelen, under de sociala ikonerna, som en lös
       knapp mitt i vitheten -- den läste som ännu en menypost. Den hör till
       panelens ram och inte till länklistan, så den ligger i övre högra
       hörnet, i höjd med sökfältet som lämnar plats åt den.

       .nav-header-menu är redan absolut positionerad av Webflow och duger
       som utgångspunkt; sätter man position: relative på den bryts panelens
       egen placering och infällningen. */
    .menu-row._1 {
        position: absolute;
        top: clamp(1.25rem, 3vw, 2.5rem);
        right: clamp(1.25rem, 3vw, 2.5rem);
        z-index: 1;
        width: auto;
        padding-bottom: 0;
    }

    /* Utfällningen är inte absolut positionerad utan en flexrad bredvid
       knappen, så den växer åt höger -- rakt ut ur panelen nu när väljaren
       står i hörnet. Raden vänds i stället, så att språken fälls ut inåt och
       knappen blir kvar längst till höger. */
    .menu-row._1 .dropdown-2025 {
        flex-direction: row-reverse;
        justify-content: flex-start;
    }

    /* Utfälld ligger den över sökfältet. Webflows minimibredd gör listan
       bredare än de två pillren, så den får krympa till sitt innehåll och
       en vit botten -- annars läser man "Sök" mellan språken. */
    .menu-row._1 .dropdown-2024.w--open {
        min-width: 0;
        background-color: var(--white);
    }

    /* --- webbplatsens sidor -------------------------------------------- */

    /* Presentkort, om oss, faq, kontakt, api och tillgänglighet fanns bara i
       sidfoten: ur menyn nådde man dem genom att stänga den och skrolla hela
       sidan till botten. De står nu sist i menyn, i brödfonten och mindre än
       undersidorna -- de är sidor *om* webbplatsen, inte en fjärde
       huvudingång. Linjen skiljer dem från menyn ovanför. */
    .mobilmeny-webbplats {
        display: flex;
        flex-flow: row wrap;
        gap: 0 clamp(.75rem, 3.5vw, 1.25rem);
        margin-top: clamp(.5rem, 2vw, 1rem);
        padding-top: clamp(.35rem, 1.5vw, .75rem);
        border-top: 1px solid #0000001f;
        width: 100%;
    }

    .mobilmeny-webbplats__lank {
        font-family: var(--font--paragraph);
        font-size: clamp(.875rem, 3.2vw, 1rem);
        font-weight: 500;
        line-height: 1.2;
        /* Pekytan kommer från padding — texten själv är för låg för att
           träffas säkert. */
        padding-block: .45rem;
        color: var(--black);
        text-decoration: none;
    }

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

/* ==========================================================================
   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 var två kolumner. På 390px blev varje kolumn under 200px, och
   då bröts uppgifterna mitt itu: "Hornstulls Strand / 9" och "+46(0)8 462 98
   / 60". Ett telefonnummer på två rader läses inte som ett nummer. Blocket är
   en kolumn numera, men bredden måste fortfarande sättas: Webflows
   procentbredd är räknad för två kolumner bredvid varandra.

   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);
        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);
}

/* ==========================================================================
   Flödet på /feed

   Ett kort per skärm, lodrät snap-scroll, gjort för telefonen. Sidan bär
   inte speglingens skal -- ingen navigation, ingen sidfot -- så reglerna här
   är hela sidans utseende och inte ett lager ovanpå Webflows.

   På bredare skärmar hålls flödet i en telefonbred spalt mitt på en mörk
   yta. Att sträcka ut ett format som bygger på tumsvep över en 1400px
   fönsterbredd gör det bara sämre.
   ========================================================================== */

body.flode-sida {
    margin: 0;
    background-color: #101010;
    color: var(--white);
    overscroll-behavior-y: none;
}

.flode {
    height: 100dvh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    /* Dolda rullningslister: kortet ska se ut som en yta, inte som en lista. */
    scrollbar-width: none;
}

.flode::-webkit-scrollbar {
    display: none;
}

/* Ett dolt kort måste ut ur flödet helt, annars räknas det fortfarande in i
   rullningen. .flode__kort sätter display, som annars slår hidden-attributet. */
.flode__kort[hidden] {
    display: none;
}

.flode__kort {
    position: relative;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-color: var(--black);
}

.flode__bild {
    position: absolute;
    inset: 0;
    background-position: 50% 38%;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Samma gradientlogik som eventsidans hero: bilden får synas, texten står
   ändå emot. Kraftigare här, eftersom kortet är hela skärmen och texten
   ligger längst ner. */
.flode__kort::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgb(0 0 0 / .95) 0%,
        rgb(0 0 0 / .8) 30%,
        rgb(0 0 0 / .35) 58%,
        rgb(0 0 0 / 0) 88%
    );
    pointer-events: none;
}

.flode__innehall {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(1.25rem, 5vw, 2rem);
    padding-bottom: calc(clamp(1.25rem, 5vw, 2rem) + env(safe-area-inset-bottom));
}

/* Pilen mellan namnet och raden med tid och plats. Samma geometri som efter
   sidrubrikerna, men här gör den ett arbete: den pekar från vem till var och
   när. Accentfärgad, så gesten läses före texten den pekar på. */
.flode__pil {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    margin: .7rem 0 .5rem;
    background-color: var(--accent);
    -webkit-mask: url('/site/assets/debaser-pil.svg') center / contain no-repeat;
    mask: url('/site/assets/debaser-pil.svg') center / contain no-repeat;
    filter: drop-shadow(0 2px 10px rgb(0 0 0 / .5));
}

.flode__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2em .6em;
    font-family: var(--font--paragraph);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white);
    margin: 0;
}

.flode__kategori::before,
.flode__scen::before {
    content: "";
    display: inline-block;
    width: .34em;
    height: .34em;
    border-radius: 50%;
    background-color: var(--accent);
    margin-right: .6em;
    position: relative;
    top: -.22em;
}

.flode__titel {
    font-family: var(--font--heading);
    font-size: clamp(2rem, 9vw, 3rem);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--white);
    margin: 0;
    text-shadow: 0 2px 24px rgb(0 0 0 / .55);
}

.flode__support {
    font-family: var(--font--paragraph);
    font-size: 1rem;
    font-weight: 500;
    color: var(--white-65);
    margin: .4rem 0 0;
}

/* Spårtiteln dyker upp när snutten är hämtad, så raden får inte reservera
   höjd i förväg — då hoppar titeln. */
.flode__spar {
    font-family: var(--font--paragraph);
    font-size: .875rem;
    color: var(--white-65);
    margin: .5rem 0 0;
}

.flode__lank {
    display: inline-block;
    margin-top: clamp(.875rem, 3vw, 1.25rem);
    font-family: var(--font--paragraph);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
    background-color: #d6006e;
    border: 1.5px solid var(--white);
    border-radius: 50px;
    padding: .8em 1.6em;
}

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

.flode__kort--slut {
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* --- det som ligger ovanpå flödet ---------------------------------------- */

.flode__hem {
    position: fixed;
    z-index: 10;
    top: calc(.75rem + env(safe-area-inset-top));
    left: 1rem;
    display: block;
    width: 96px;
}

.flode__hem img {
    display: block;
    width: 100%;
    height: auto;
    /* Loggan är svart på genomskinligt; invert gör den vit mot fotona. */
    filter: invert(1) drop-shadow(0 1px 6px rgb(0 0 0 / .6));
}

/* Bara en högtalare. Etiketten "Ljud av" tog plats i hörnet och sa mindre än
   symbolen; tillgängligt namn sätts i stället på knappen. */
.flode__ljudknapp {
    position: fixed;
    z-index: 10;
    top: calc(.75rem + env(safe-area-inset-top));
    right: 1rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--white);
    background-color: #00000073;
    border: 1.5px solid var(--white-50);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
}

.flode__ljudknapp svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flode__hogtalare {
    fill: currentColor;
    stroke: none;
}

/* Ljudet på: vågor. Ljudet av: kryss. Aldrig båda. */
.flode__ljudknapp[aria-pressed="true"] .flode__kryss,
.flode__ljudknapp[aria-pressed="false"] .flode__vagor {
    display: none;
}

/* Cookiebots knapp för samtyckesinställningar står fixerad i nedre vänstra
   hörnet och låg rakt över Läs mer-knappen. På flödet är nedre vänstra hörnet
   kortets viktigaste yta, medan nedre högra är tom -- knappen flyttas dit i
   stället för att kortet trängs ihop. Sidfoten löser samma krock med
   bottenutrymme, men här finns ingen sådan luft att ge. */
body.flode-sida #CookiebotWidget {
    left: auto !important;
    right: 12px !important;
}

/* --- startrutan ---------------------------------------------------------- */

.flode__start {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    /* Dimma, inte oskärpa. backdrop-filter gjorde bilden bakom grötig i
       stället för dämpad, och kostar dessutom en hel del på telefon. */
    background-color: #000000e6;
}

.flode__start[hidden] {
    display: none;
}

.flode__start-ruta {
    max-width: 22rem;
    text-align: center;
}

.flode__start-rubrik {
    font-family: var(--font--heading);
    font-size: clamp(2rem, 9vw, 2.75rem);
    font-weight: 400;
    line-height: .95;
    text-transform: uppercase;
    color: var(--white);
    margin: 0;
}

.flode__start-text {
    font-family: var(--font--paragraph);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--white-65);
    margin: .75rem 0 0;
}

.flode__start-ok {
    font-family: var(--font--paragraph);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white);
    background-color: #d6006e;
    border: 1.5px solid var(--white);
    border-radius: 50px;
    padding: .85em 3em;
    margin-top: clamp(1.5rem, 5vw, 2.25rem);
    cursor: pointer;
}

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

/* --- nedräkningen -------------------------------------------------------- */

/* Linjen ritas runt hela kortets kant och fylls på under de trettio
   sekunderna. Den ligger över bilden men tar inga klick. */
/* Banan ligger indragen halva linjebredden. Linjen ritas centrerad på banan,
   så utan indraget hamnar hälften utanför rutan och klipps bort -- den såg
   halvtjock ut mot kanterna. */
/* Måtten är uttryckta, inte auto. En svg har ett eget bildförhållande ur sin
   viewBox, och med auto räknade webbläsaren höjden ur den kvadratiska rutan
   i stället för att fylla skärmen -- linjen gick runt en kvadrat mitt på
   kortet. */
.flode__ring {
    position: fixed;
    z-index: 9;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100dvh - 10px);
    pointer-events: none;
}

/* Varvets längd sätts av feed.js i pixlar: höjd + höjd + bredd + bredd.
   Streckmönstret är ett enda streck lika långt som varvet, och animationen
   drar in det från noll till fullt. Ingen normering, ingen skalning -- ett
   varv är exakt kortets omkrets. */
.flode__ring path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 10px;
    stroke-dasharray: var(--flode-varv, 0px);
    stroke-dashoffset: var(--flode-varv, 0px);
}

.flode__ring.ar-igang path {
    animation: flodeNedrakning var(--flode-tid, 20s) linear forwards;
}

/* Börjar på en pixel så att linjen finns från första ögonblicket, slutar på
   hela varvet. */
@keyframes flodeNedrakning {
    from { stroke-dashoffset: calc(var(--flode-varv) - 1px); }
    to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .flode__ring {
        display: none;
    }
}

/* --- större skärmar ------------------------------------------------------ */

/* Kortet hålls i telefonbredd men rullningsytan får ligga kvar i fullbredd,
   så att hjulet fungerar var muspekaren än står. Att smalna av .flode i
   stället gjorde att skrollningen bara fungerade rakt över kortet. */
@media screen and (min-width: 768px) {
    .flode__kort {
        width: min(26rem, 100%);
        margin-inline: auto;
        /* Egen yta mot den mörka bakgrunden, så telefonformatet läses som
           ett val och inte som en sida som glömt sin bredd. */
        box-shadow: 0 0 0 1px #ffffff1f;
    }

    .flode__ring {
        left: 50%;
        width: calc(min(26rem, 100%) - 10px);
        transform: translateX(-50%);
    }

    .flode__hem {
        left: max(1rem, calc(50vw - 13rem + 1rem));
    }

    .flode__ljudknapp {
        right: max(1rem, calc(50vw - 13rem + 1rem));
    }
}

/* ==========================================================================
   HYRA — översikten på /hyra och de tre lokalsidorna under /hyra/<lokal>

   Sidorna finns inte i Webflow-exporten, så det här är hela deras utseende.
   Inga nya färger och inga nya typsnitt: rubrikerna bär sitens .h1–.h3, texten
   TT Commons, och etiketterna följer .oppettider__etikett — versalgemener med
   spärrning, som är sitens sätt att sätta en etikett över ett värde.

   Sektionerna står på en gemensam lodrät rytm (--hyra-luft) i stället för
   egna marginaler per block, så att ordningen kan ändras utan att avstånden
   behöver räknas om.
   ========================================================================== */

.hyra-hero,
.hyra-fakta,
.hyra-bilder,
.hyra-listor,
.hyra-text,
.hyra-planlosning,
.hyra-tillganglighet,
.hyra-mat,
.hyra-anvandning,
.hyra-andra {
    --hyra-luft: clamp(2.5rem, 5vw, 5rem);

    margin-block: var(--hyra-luft);
    font-family: var(--font--paragraph);
}

/* --- rubrikgraderna -------------------------------------------------------
   Sitens skala är satt för sidor med en rubrik per skärm: .h1 går till 120px
   och .h2 till 76px. Hyressidorna har åtta avsnitt var, och i den graden
   läste sidan som en rad affischer utan text emellan. Skalan tas ner ett par
   steg här — bara på dessa sidor, resten av siten rör vi inte.

   Klasserna sätts om i Webflows brytpunkter längre upp i filen, så
   selektorerna behöver vara mer specifika än en ren klass för att hålla
   hela vägen ner. */
.hyra-hero .heading-box .h1 {
    font-size: clamp(1.875rem, 4.4vw, 3.75rem);
}

.hyra-text .h2,
.hyra-anvandning .h2 {
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
}

.hyra-planlosning .h3,
.hyra-tillganglighet .h3,
.hyra-andra .h3 {
    font-size: clamp(1.25rem, 1.9vw, 1.625rem);
}

/* Ingressen är bredare än brödtext men inte full sidbredd: en rad text över
   hela en 2400px-skärm går inte att läsa. */
.hyra-hero__ingress,
.hyra-text p,
.hyra-planlosning p,
.hyra-tillganglighet > p {
    max-width: 46ch;
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    line-height: 1.4;
}

/* Rubrikklasserna har radhöjd men ingen understa marginal — de är gjorda för
   att stå ensamma i en .heading-box. Här följs de av löpande text direkt. */
.hyra-text .h2,
.hyra-planlosning .h3,
.hyra-tillganglighet .h3,
.hyra-anvandning .h2,
.hyra-andra .h3 {
    margin-bottom: clamp(.75rem, 1.5vw, 1.5rem);
}

.hyra-hero__etikett {
    font-size: clamp(.6875rem, .85vw, .8125rem);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #d6006e;
    margin: 0;
}

/* Knapparna ligger i en .categoty-row, som Webflow ger negativa marginaler
   för att hänga i navigationen. Här står raden fritt. */
.hyra-knappar.categoty-row {
    flex-wrap: wrap;
    gap: .5rem;
    margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
    padding: 0;
}

/* --- nyckeltalen ---------------------------------------------------------- */

.hyra-fakta__rutor {
    display: grid;
    /* Antalet rutor följer innehållet och inte en fast siffra: Strand har
       takhöjd där Nova och Capricci har uthyrningstider, och ytan saknas för
       två av tre. Fyra hårdkodade spalter gav en tom ruta på de sidorna. */
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: 1px;
    margin: 0;
    /* Rutorna skiljs av hårfina linjer i stället för kort med ram: fyra
       inramade boxar i rad läses som knappar. */
    background-color: var(--black-20);
    border-block: 1px solid var(--black-20);
}

.hyra-fakta__ruta {
    display: grid;
    align-content: start;
    gap: .35em;
    padding: clamp(1rem, 2vw, 1.75rem) clamp(.75rem, 1.5vw, 1.5rem);
    background-color: #fff;
}

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

.hyra-fakta__varde {
    margin: 0;
    font-family: var(--font--heading);
    font-size: clamp(1.25rem, 2.4vw, 2.25rem);
    line-height: 1;
    text-transform: uppercase;
}

/* --- bildkarusellen ------------------------------------------------------- */

/* Bildrutan följer bildernas eget format i stället för en låst höjd.

   Höjden var förut clamp(15rem, 42vw, 34rem). Taket slog i redan runt 1300px
   medan bredden fortsatte växa, så rutan blev 3,4:1 på en 1920-skärm och
   klippte bort 56 procent av en 3:2-bild -- man såg ett band ur mitten och
   missade både scenen och golvet.

   Bredden är därför måttad och rutan centrerad. Bilderna är 1600px breda; att
   spänna ut dem över 1865px är uppförstoring, och 16:9 över hela den bredden
   hade blivit tusen pixlar högt. Vid 72rem ger 16:9 en bandhöjd som får plats
   på skärmen och bara beskär sextondelen av bilden.

   Centreringen är inte kosmetik: vänsterställd slutade rutan ett par hundra
   pixlar före faktaraden ovanför, vilket såg ut som ett fel snarare än ett
   val.

   .slider-10 är satt till height:100% i Webflows css, så höjden måste komma
   från föräldern -- aspect-ratio sätts på den och slidern fyller ut. */
.hyra-bilder {
    width: min(100%, 72rem);
    margin-inline: auto;
}

.hyra-bilder__ruta {
    aspect-ratio: 16 / 9;
}

.hyra-bilder .slider-10 {
    height: 100%;
}

/* På telefon är skärmen redan smal: där får bilderna sitt eget 3:2 och
   beskärs inte alls. */
@media screen and (max-width: 767px) {
    .hyra-bilder__ruta {
        aspect-ratio: 3 / 2;
    }
}

/* Restaurangmallen lägger sina bilder som css-bakgrunder på .photo, en klass
   per bild. Det går för två fasta bilder men inte för fjorton som byts när
   lokalerna byter bildmaterial -- och en bakgrundsbild kan varken bära
   alt-text eller en bildtext. Här är de riktiga <figure> i stället. */
.hyra-bild {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.hyra-bild__foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bildtexten på en platta längs underkanten. Plattan är egen och inte en
   toning över hela bilden: motivet ska synas orört ända ner till kanten, och
   texten ska ha samma kontrast oavsett om bilden under är en mörk konsertsal
   eller ett soligt fönsterbord. */
.hyra-bild__text {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: clamp(.6rem, 1.4vw, 1rem) clamp(.9rem, 2vw, 1.5rem);
    background-color: #000000b8;
    color: var(--white);
    font-family: var(--font--paragraph);
    font-size: clamp(.875rem, 1.1vw, 1.0625rem);
    font-weight: 500;
    line-height: 1.35;
    /* Webflows .w-slide centrerar sitt innehåll. Bildtexten är löptext och
       ska stå i vänsterkant som all annan text på sidan. */
    text-align: left;
    /* Bakgrundsoskärpa där den finns; plattan är läsbar även utan. */
    backdrop-filter: blur(6px);
    /* Punktnavet står nedtill i plattan — se nedan. */
    padding-bottom: calc(clamp(.6rem, 1.4vw, 1rem) + 1.6rem);
}

/* Webflow lägger punktnavet i sliderns underkant, alltså rakt ovanpå
   bildtextens platta: punkterna hamnade mitt i texten och båda blev svårlästa.

   De flyttas in i plattan i stället för bort från den. Plattan är det enda
   stället på bilden med garanterad kontrast, och punkterna hör ihop med
   bildtexten — de säger vilken av bilderna texten beskriver.

   Lodrätt i stället för vågrätt: en lokal kan ha hur många bilder som helst,
   och en högerställd rad hade ätit bredd från texten i takt med det. Höjden
   som reserveras är densamma oavsett antal.

   Punktnavet bär även klassen .hide, som .slider-10-regeln längre upp redan
   gör om till display: block. */
.hyra-bilder .w-slider-nav {
    top: auto;
    bottom: 0;
    height: auto;
    padding: 0 0 clamp(.5rem, 1.2vw, .8rem);
}

/* --- nyckeltalsraden i heron ---------------------------------------------- */

/* "400+ evenemang per år · 3 unika lokaler · 1 adress vid vattnet". Punkterna
   sätts som separatorer i css i stället för i texten, så att raden bryter till
   en spalt på telefon utan att lämna hängande skiljetecken. */
.hyra-nyckeltal {
    display: flex;
    flex-wrap: wrap;
    gap: .4em 1.1em;
    margin: clamp(1rem, 2vw, 1.5rem) 0 0;
    font-family: var(--font--paragraph);
    font-size: clamp(.8125rem, 1vw, .9375rem);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #595959;
}

.hyra-nyckeltal span + span::before {
    content: "·";
    margin-right: 1.1em;
    color: var(--black-20);
}

/* --- mat och dryck -------------------------------------------------------- */

.hyra-mat__menyer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 1px;
    margin: clamp(1.25rem, 2.5vw, 2rem) 0;
    background-color: var(--black-20);
    border: 1px solid var(--black-20);
}

.hyra-mat__meny {
    display: grid;
    align-content: start;
    gap: .5em;
    padding: clamp(1rem, 2vw, 1.5rem);
    background-color: #fff;
}

.hyra-mat__rubrik {
    margin: 0;
    font-size: clamp(.6875rem, .85vw, .8125rem);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #d6006e;
}

.hyra-mat__text {
    margin: 0;
    font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
    line-height: 1.4;
}

.hyra-mat p,
.hyra-mat__avslutning {
    max-width: 46ch;
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    line-height: 1.4;
}

.hyra-mat__menyer p {
    max-width: none;
}

.hyra-mat .h3 {
    margin-bottom: clamp(.75rem, 1.5vw, 1.5rem);
    font-size: clamp(1.25rem, 1.9vw, 1.625rem);
}

/* --- tidigare kunder ------------------------------------------------------ */

/* Blocket står tomt tills kunderna godkänt att de får nämnas. Ramen visar att
   ytan är avsatt och inte att något gått sönder. */
.hyra-kunder {
    --hyra-luft: clamp(2.5rem, 5vw, 5rem);

    margin-block: var(--hyra-luft);
    font-family: var(--font--paragraph);
}

.hyra-kunder .h3 {
    margin-bottom: clamp(.75rem, 1.5vw, 1.5rem);
    font-size: clamp(1.25rem, 1.9vw, 1.625rem);
}

.hyra-kunder__vantar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75em;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px dashed var(--black-20);
    font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
    color: #767676;
}

/* --- bild på lokalkorten -------------------------------------------------- */

.hyra-kort__bild {
    display: block;
    width: 100%;
    height: clamp(9rem, 14vw, 12rem);
    margin-bottom: .5em;
    object-fit: cover;
}

/* --- sidträffar i söket ---------------------------------------------------- */

/* Sidor listas som rader, inte som puffkort. Korten är byggda för ett event
   med bild; en sida har bara en rubrik och en mening. */
.sok-sidor {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--black-20);
}

.sok-sidor__post {
    border-bottom: 1px solid var(--black-20);
}

.sok-sidor__lank {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .2em 1rem;
    padding: clamp(.85rem, 1.8vw, 1.25rem) 0;
    font-family: var(--font--paragraph);
    color: var(--black);
    text-decoration: none;
}

.sok-sidor__lank:hover .sok-sidor__titel,
.sok-sidor__lank:focus-visible .sok-sidor__titel {
    color: #d6006e;
}

.sok-sidor__titel {
    font-family: var(--font--heading);
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
    line-height: 1.1;
    text-transform: uppercase;
    transition: color .12s ease;
}

.sok-sidor__adress {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(.6875rem, .85vw, .8125rem);
    letter-spacing: .06em;
    color: #767676;
}

.sok-sidor__text {
    grid-column: 1 / -1;
    max-width: 70ch;
    font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
    line-height: 1.4;
    color: #4a4a4a;
}

.sok-rubrik--efter {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

@media screen and (max-width: 600px) {
    /* Adressen får egen rad på telefon; bredvid rubriken klämde den ihop
       båda till oläslighet. */
    .sok-sidor__lank {
        grid-template-columns: 1fr;
    }

    .sok-sidor__adress {
        grid-column: 1;
        grid-row: auto;
    }
}

/* --- presentkortspuffen på listningssidorna -------------------------------- */

/* Sitter uppe till höger i rubrikraden, i höjd med sidrubriken och ovanför
   första eventet. Absolut placerad och inte i flödet: .container-calendar
   staplar rubrik och kategorirad under varandra, och att göra om den till
   flex hade lagt de två bredvid varandra i stället. */
.container-calendar {
    position: relative;
}

.presentkort-puff {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: grid;
    gap: .15em;
    width: min(16rem, 40vw);
    padding: clamp(.85rem, 1.4vw, 1.15rem) clamp(1rem, 1.6vw, 1.35rem);
    background-color: #d6006e;
    color: var(--white);
    font-family: var(--font--paragraph);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

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

.presentkort-puff__etikett {
    font-size: clamp(.625rem, .8vw, .75rem);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.presentkort-puff__rubrik {
    font-family: var(--font--heading);
    font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.presentkort-puff__lank {
    margin-top: .35em;
    font-size: clamp(.75rem, .9vw, .875rem);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* På smal skärm tar rubriken hela bredden och puffen får inte plats bredvid.
   Den ställer sig i flödet under kategoriraden i stället. */
@media screen and (max-width: 991px) {
    .container-calendar {
        display: flex;
        flex-direction: column;
    }

    /* Puffen star forst i markupen for att den absoluta placeringen pa
       desktop ska ligga over och inte under kategoriraden. I flodet hor den
       hemma mellan filterraden och listan: rubrik, filter, puff, program.

       Den hade order: 99, tankt som "sist". Sist i den har containern ar dock
       efter hela kalendern -- puffen hamnade 28 000 pixlar ner och var i
       praktiken osynlig pa telefon. Listan far ett eget hogre order i stallet. */
    .presentkort-puff {
        position: static;
        order: 1;
        width: 100%;
        margin-block: clamp(1rem, 3vw, 1.5rem);
    }

    .container-calendar > .calendar-column {
        order: 2;
    }
}

/* ==========================================================================
   PRESENTKORT

   Egen sida i sitens formspråk; köpet ligger hos Tickster. Samma byggstenar
   som hyressidorna -- rubrikskala nertagen, faktarutor på hårfina linjer,
   mörk avslutande ruta för uppmaningen -- men egna klassnamn, eftersom de
   inte har med uthyrningen att göra.
   ========================================================================== */

/* Bilden är heron: texten ligger över den, inte bredvid. Den är beskuren i
   band och inte satt i sitt eget format -- ett 3:2-foto i full sidbredd hade
   blivit en meter högt innan rubriken ens syntes. */
.presentkort-hero {
    position: relative;
    display: grid;
    /* Bredden maste last uttryckligen. Med bara aspect-ratio och min-height
       harleds bredden ur hojden i stallet for tvartom, och rutan blev 896px
       bred i en 768px-skarm -- sidan spillde i sidled. */
    width: 100%;
    margin-block: 0 clamp(2.5rem, 5vw, 5rem);
    aspect-ratio: 21 / 9;
    min-height: 24rem;
    isolation: isolate;
    font-family: var(--font--paragraph);
}

.presentkort-hero__foto {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slöjan lutar åt vänster, där texten står. Motivet -- publiken och
   scenljuset -- ligger till höger och får stå kvar oskymt. */
.presentkort-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to right, #000000e6 0%, #000000b3 42%, #0000 78%),
        linear-gradient(to top, #00000080, #0000 45%);
}

.presentkort-hero__innehall {
    align-self: end;
    display: grid;
    justify-items: start;
    gap: .35rem;
    width: min(46rem, 100%);
    padding: clamp(1.5rem, 4vw, 3rem);
    color: var(--white);
}

.presentkort-hero__etikett {
    margin: 0;
    font-size: clamp(.6875rem, .85vw, .8125rem);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}

.presentkort-hero .heading-box {
    padding-top: 0;
}

/* Sitens .h1 går till 120px och är måttad för en rubrik per skärm. Över en
   bild ska den rymmas i bandet med text under. */
.presentkort-hero .h1 {
    font-size: clamp(1.875rem, 4.4vw, 3.75rem);
    color: var(--white);
}

.presentkort-hero__ingress {
    max-width: 42ch;
    margin: 0;
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    line-height: 1.4;
    /* Maste sattas har och inte arvas: sitens egen p-regel ar mer specifik an
       fargen pa foraldern, sa stycket kom ut svart pa den morka bilden. */
    color: var(--white);
}

.presentkort-hero__knappar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: clamp(.75rem, 1.5vw, 1.25rem);
}

/* --- köpknappen, samma form överst som nederst ---------------------------- */

.presentkort-knapp {
    display: inline-block;
    padding: .8rem 1.75rem;
    font-family: var(--font--paragraph);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--white);
    background-color: #d6006e;
    border: 1px solid #d6006e;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.presentkort-knapp:hover,
.presentkort-knapp:focus-visible {
    color: #d6006e;
    background-color: var(--white);
    border-color: var(--white);
}

/* Andrahandsvalet ska synas men inte konkurrera med köpet. */
.presentkort-knapp--tunn {
    color: var(--white);
    background-color: #0000;
    border-color: #ffffff8c;
}

.presentkort-knapp--tunn:hover,
.presentkort-knapp--tunn:focus-visible {
    color: var(--black);
    background-color: var(--white);
    border-color: var(--white);
}

@media screen and (max-width: 767px) {
    /* Bandformatet blir en remsa på telefon. Högre ruta, och texten får
       hela bredden. */
    .presentkort-hero {
        aspect-ratio: 4 / 5;
        min-height: 0;
    }

    .presentkort-hero::before {
        background: linear-gradient(to top, #000000e6 0%, #000000a6 45%, #00000040 100%);
    }
}

.presentkort-fakta {
    margin-block: clamp(2.5rem, 5vw, 5rem);
    font-family: var(--font--paragraph);
}

/* --- nyckeltalen ---------------------------------------------------------- */

.presentkort-fakta__rutor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: 1px;
    margin: 0;
    background-color: var(--black-20);
    border-block: 1px solid var(--black-20);
}

.presentkort-fakta__ruta {
    display: grid;
    align-content: start;
    gap: .35em;
    padding: clamp(1rem, 2vw, 1.75rem) clamp(.75rem, 1.5vw, 1.5rem);
    background-color: #fff;
}

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

.presentkort-fakta__varde {
    margin: 0;
    font-family: var(--font--heading);
    font-size: clamp(1.25rem, 2.4vw, 2.25rem);
    line-height: 1;
    text-transform: uppercase;
}

/* --- köpuppmaningen ------------------------------------------------------- */

/* Mörk ruta, som hyresformuläret: sidan slutar i handlingen. */
.presentkort-kop {
    margin-block: clamp(3rem, 6vw, 6rem);
    padding-block: clamp(2.5rem, 6vw, 5rem);
    background-color: #101010;
    color: var(--white);
}

.presentkort-kop__inre {
    width: min(60rem, 100%);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    font-family: var(--font--paragraph);
}

.presentkort-kop__etikett {
    margin: 0 0 .5rem;
    font-size: clamp(.6875rem, .85vw, .8125rem);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
}

.presentkort-kop__rubrik {
    margin: 0 0 .75rem;
    font-family: var(--font--heading);
    font-size: clamp(1.625rem, 3.2vw, 2.75rem);
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--white);
}

.presentkort-kop__ingress {
    max-width: 46ch;
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.45;
    color: var(--white-65);
}

.presentkort-kop__knapp {
    display: inline-block;
    padding: .85rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--white);
    background-color: #d6006e;
    border: 1px solid #d6006e;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.presentkort-kop__knapp:hover,
.presentkort-kop__knapp:focus-visible {
    color: #d6006e;
    background-color: var(--white);
    border-color: var(--white);
}

/* ==========================================================================
   SPRÄNGSKISSEN

   Placeholder tills en riktig planlösning finns. Ritas som inline-svg, så
   färgerna kommer ur sitens palett och markeringen kan bytas per sida.

   Linjebredderna är satta i användarenheter mot skissens eget koordinatsystem
   (vectorEffect skulle ha gett hårfina streck som försvinner vid nedskalning
   på telefon). Skalan är densamma överallt eftersom viewBox är fast.
   ========================================================================== */

.sprangskiss {
    display: block;
    width: 100%;
    height: auto;
    font-family: var(--font--paragraph);
}

/* Lodlinjen som håller ihop de separerade volymerna. */
.sprangskiss__axel {
    stroke: var(--black-20);
    stroke-width: 1;
    stroke-dasharray: 5 5;
}

.sprangskiss__tak,
.sprangskiss__vagg {
    fill: #fff;
    stroke: var(--black);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

/* Den vänstra väggen ligger i skugga, så volymen läses som en kropp och inte
   som en genomskinlig trådmodell. */
.sprangskiss__vagg--skugga {
    fill: #f2f2f2;
}

/* Skissen är menyn mellan lokalerna: varje volym är en länk.

   Understrykningen måste bort uttryckligen -- Webflows a-regler träffar även
   svg:ns <a>, och etiketterna kom ut understrukna, vilket läser som fel i en
   ritning. */
.sprangskiss__lank {
    cursor: pointer;
    text-decoration: none;
}

.sprangskiss__namn,
.sprangskiss__siffra {
    text-decoration: none;
}

.sprangskiss__tak,
.sprangskiss__vagg,
.sprangskiss__namn,
.sprangskiss__utdrag,
.sprangskiss__punkt {
    transition: fill .12s ease, stroke .12s ease;
}

/* Tre lägen ser likadana ut: den markerade lokalen, den man pekar på och den
   man tabbat till. Att hovring ser ut precis som markeringen är avsikten --
   den visar vad ett klick skulle ge. */
.sprangskiss__volym--pa .sprangskiss__tak,
.sprangskiss__lank:hover .sprangskiss__tak,
.sprangskiss__lank:focus-visible .sprangskiss__tak {
    fill: var(--accent);
}

.sprangskiss__volym--pa .sprangskiss__vagg,
.sprangskiss__lank:hover .sprangskiss__vagg,
.sprangskiss__lank:focus-visible .sprangskiss__vagg {
    fill: #d10069;
}

.sprangskiss__volym--pa .sprangskiss__vagg--skugga,
.sprangskiss__lank:hover .sprangskiss__vagg--skugga,
.sprangskiss__lank:focus-visible .sprangskiss__vagg--skugga {
    fill: #a80054;
}

/* Tangentbordsfokus måste synas även för den som redan är markerad, där
   färgen inte kan ändras mer. Konturen får bära det. */
.sprangskiss__lank:focus {
    outline: none;
}

.sprangskiss__lank:focus-visible .sprangskiss__tak,
.sprangskiss__lank:focus-visible .sprangskiss__vagg {
    stroke-width: 3.5;
}

.sprangskiss__utdrag {
    stroke: var(--black-20);
    stroke-width: 1;
}

.sprangskiss__punkt {
    fill: var(--black-20);
}

.sprangskiss__volym--pa .sprangskiss__utdrag,
.sprangskiss__lank:hover .sprangskiss__utdrag,
.sprangskiss__lank:focus-visible .sprangskiss__utdrag {
    stroke: var(--accent);
}

.sprangskiss__volym--pa .sprangskiss__punkt,
.sprangskiss__lank:hover .sprangskiss__punkt,
.sprangskiss__lank:focus-visible .sprangskiss__punkt {
    fill: var(--accent);
}

.sprangskiss__namn {
    fill: var(--black);
    font-size: 18px;
    font-weight: 600;
}

.sprangskiss__siffra {
    fill: #767676;
    font-size: 15px;
    letter-spacing: .04em;
}

.sprangskiss__volym--pa .sprangskiss__namn,
.sprangskiss__lank:hover .sprangskiss__namn,
.sprangskiss__lank:focus-visible .sprangskiss__namn {
    fill: var(--accent);
    font-weight: 700;
}

/* Volymer som inte är markerade tonas ner när en av dem lyser -- annars
   konkurrerar de tre om blicken och markeringen slutar peka. De tänds igen
   när man pekar på dem, annars vore de nedtonade länkarna svåra att sikta på.
   Specificiteten räcker över regeln ovan tack vare pseudoklassen. */
.sprangskiss--markerad .sprangskiss__volym:not(.sprangskiss__volym--pa) {
    opacity: .45;
    transition: opacity .12s ease;
}

.sprangskiss--markerad .sprangskiss__lank:hover .sprangskiss__volym,
.sprangskiss--markerad .sprangskiss__lank:focus-visible .sprangskiss__volym {
    opacity: 1;
}

/* --- heron med skissen --------------------------------------------------- */

.hyra-hero--skiss {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
}

.hyra-hero__skiss {
    /* Skissen är bredare än hög. Måttet är satt så att etiketterna landar
       runt 13-14px på en vanlig desktop -- skalas den ner mer blir de
       oläsliga, eftersom svg-texten krymper med hela ritningen. */
    width: min(100%, 40rem);
    margin-inline: auto;
}

.hyra-hero__skisstext {
    margin: .75rem 0 0;
    font-size: clamp(.6875rem, .85vw, .8125rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #767676;
    text-align: center;
}

@media screen and (max-width: 991px) {
    .hyra-hero--skiss {
        grid-template-columns: 1fr;
    }

    /* Skissen under texten på smal skärm: rubriken ska möta läsaren först. */
    .hyra-hero__bild {
        order: 2;
    }
}

/* Svg-texten krymper med hela ritningen, så på telefon landade etiketterna på
   tio pixlar. Graden sätts upp i ritningens egna enheter i stället, vilket ger
   samma lästa storlek på en smal skärm som på en bred. */
@media screen and (max-width: 767px) {
    .sprangskiss__namn {
        font-size: 26px;
    }

    .sprangskiss__siffra {
        font-size: 21px;
    }
}

/* ==========================================================================
   GRANSKNINGSMÄRKEN

   Syns bara så länge sektionen är olistad (se granskmarke() i
   webflow_helper). De skiljer på uppgifter huset redan hade och som bara ska
   stämmas av, löptext som är skriven av oss och ska godkännas, uppgifter som
   saknas, och bilder som inte får publiceras som de är. Utan dem läses ett
   utkast som fastställd information.

   Medvetet fula: de ska inte gå att missta för en del av designen, och de ska
   vara omöjliga att glömma kvar.
   ========================================================================== */

.granskmarke {
    display: inline-block;
    vertical-align: middle;
    margin-left: .5em;
    padding: .25em .6em;
    border-radius: 2px;
    font-family: var(--font--paragraph);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    /* Rubrikerna är versaliserade och spärrade; märket ska stå still. */
    vertical-align: middle;
}

.granskmarke--befintlig {
    color: #0b4a2f;
    background-color: #b8f0d2;
}

/* Skissen är en platshållare men inte ett fel — neutralt grått, inte rött. */
.granskmarke--skiss,
.granskmarke--kunder {
    color: #333;
    background-color: #e3e3e3;
}

.granskmarke--utkast {
    color: #5a3c00;
    background-color: #ffdf8a;
}

.granskmarke--tbc {
    color: var(--white);
    background-color: #d6006e;
}

/* Ett värde som saknas ska synas som ett hål, inte läsas som en uppgift. */
.hyra-varde--tbc {
    color: var(--accent);
    font-family: var(--font--paragraph);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.hyra-fakta__markning {
    margin: 0 0 .75rem;
}

.hyra-fakta__markning:empty {
    display: none;
}

/* --- listorna ------------------------------------------------------------- */

.hyra-listor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 4rem);
}

.hyra-lista__rubrik {
    margin: 0 0 .75em;
    padding-bottom: .5em;
    border-bottom: 1px solid var(--black-20);
    font-size: clamp(.6875rem, .85vw, .8125rem);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #595959;
}

.hyra-lista__punkter {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hyra-lista__punkter li {
    padding: .45em 0;
    font-size: clamp(1rem, 1.2vw, 1.1875rem);
    line-height: 1.35;
}

.hyra-lista__punkter li + li {
    border-top: 1px solid #1e1e1e14;
}

/* --- användningsområden --------------------------------------------------- */

.hyra-anvandning__rutor {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.hyra-anvandning__ruta p {
    max-width: 36ch;
    margin-top: .6em;
    font-size: clamp(1rem, 1.2vw, 1.1875rem);
}

/* Rubriken i en ruta är .h3, som är måttad för att stå ensam på en sida.
   I tre spalter behöver den ner ett steg. */
.hyra-anvandning__ruta .h3 {
    font-size: clamp(1.25rem, 2vw, 1.875rem);
}

/* --- korten till de andra lokalerna -------------------------------------- */

.hyra-kort {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: 1px;
    margin-top: clamp(1.25rem, 2.5vw, 2rem);
    background-color: var(--black-20);
    border: 1px solid var(--black-20);
}

.hyra-kort__kort {
    display: grid;
    align-content: start;
    gap: .5em;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    background-color: #fff;
    color: var(--black);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.hyra-kort__kort:hover,
.hyra-kort__kort:focus-visible {
    background-color: #d6006e;
    color: var(--white);
}

.hyra-kort__namn {
    font-family: var(--font--heading);
    font-size: clamp(1.5rem, 2.6vw, 2.5rem);
    line-height: 1;
    text-transform: uppercase;
}

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

.hyra-kort__kort:hover .hyra-kort__fakta,
.hyra-kort__kort:focus-visible .hyra-kort__fakta {
    color: var(--white-65);
}

/* Två kort i rad ger ett kort på halva sidbredden, och ingressen blir en
   enda lång rad. Måttet hålls oavsett hur många kort raden råkar innehålla. */
.hyra-kort__ingress {
    max-width: 40ch;
    font-size: clamp(1rem, 1.15vw, 1.125rem);
    line-height: 1.35;
}

/* --- tillgängligheten i lokalen ------------------------------------------ */

/* Etikett och värde på rad, i två spalter. Uppgifterna är korta svar på
   raka frågor, och en punktlista hade gjort dem till påståenden — här står
   frågan kvar i vänsterspalten. */
/* En spalt, inte två. Med två flöt raderna om i sicksack -- Entré och Plats i
   publikytan hamnade till vänster medan Tillgänglig toalett stod ensam till
   höger, och läsordningen blev omöjlig att följa. Punkterna är dessutom två
   till tre stycken; de tjänar ingenting på att brytas isär. */
.hyra-tillganglighet__rader {
    display: grid;
    grid-template-columns: 1fr;
    margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
    max-width: 40rem;
}

/* Etikett vänster, värde i resten av bredden. Värdet var högerställt förut,
   vilket fungerade så länge svaren var ett ord -- "Personalen hjälper till att
   ordna en lämplig plats" trängde undan etiketten och raden såg trasig ut. */
.hyra-tillganglighet__rad {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
    padding: .6em 0;
    border-top: 1px solid var(--black-20);
}

.hyra-tillganglighet__etikett {
    font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
    line-height: 1.3;
    color: #595959;
}

.hyra-tillganglighet__varde {
    margin: 0;
    font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
    font-weight: 600;
    line-height: 1.3;
}

.hyra-tillganglighet__kontakt {
    margin-top: clamp(1.25rem, 2.5vw, 2rem);
    font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
}

.hyra-tillganglighet__kontakt a {
    color: #d6006e;
}

/* ==========================================================================
   HYRESFORMULÄRET

   Webflows formulär var åtta fält staplade på halva sidbredden i identiska
   vita remsor, utan etiketter — placeholdern var enda ledtexten, och den
   försvinner så fort man börjar skriva. Här står etiketterna kvar, fälten
   ligger två i bredd där de hör ihop, och meddelandet är en textarea.

   Sektionen är .section-23, som numera bara används av det här formuläret —
   bakgrundsbilden och den mörka gradienten kommer därifrån.
   ========================================================================== */

.hyresformular {
    margin-block: clamp(3rem, 6vw, 6rem);
    padding-block: clamp(2.5rem, 6vw, 5.5rem);
    /* Webflow centrerar innehållet med display:flex på sektionen; rutnätet
       nedan sköter bredden själv. */
    display: block;
    /* Ren svart botten. Här låg Webflows Capricci-bild bakom en slöja, men
       fälten är genomskinliga och bilden lyste igenom placeholdertexten.
       Borttagen på kundens begäran -- ett formulär ska vara lätt att läsa,
       inte snyggt att titta på. */
    background-image: none;
    background-color: #101010;
}

.hyresformular__inre {
    width: min(60rem, 100%);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    font-family: var(--font--paragraph);
    color: var(--white);
    /* Fälten är ljus text på mörk botten, och webbläsarens egna delar måste
       följa med: rullningslister, textmarkör, och framför allt <select>-listan,
       som ritas av systemet och inte går att färga med css i alla webbläsare.
       Ett försök att sätta färg på <option> gav i Chrome vit botten på det
       *stängda* fältet — den ärver den valda postens bakgrund. */
    color-scheme: dark;
}

.hyresformular__huvud {
    display: grid;
    gap: .5rem;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.hyresformular__etikett {
    margin: 0;
    font-size: clamp(.6875rem, .85vw, .8125rem);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
}

.hyresformular__rubrik {
    margin: 0;
    font-family: var(--font--heading);
    font-size: clamp(1.625rem, 3.2vw, 2.75rem);
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--white);
}

.hyresformular__ingress {
    max-width: 44ch;
    margin: 0;
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: 1.45;
    color: var(--white-65);
}

/* --- rutnätet ------------------------------------------------------------ */

.hyresformular__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

/* Fälten är <p> för att Webflows css inte ska ge dem något av sitt eget;
   marginalen därifrån nollas. */
.hyresformular__falt {
    display: grid;
    gap: .4rem;
    margin: 0;
    /* Standard är full bredd — halva sätts uttryckligen. */
    grid-column: 1 / -1;
}

.hyresformular__falt--halv {
    grid-column: auto;
}

.hyresformular__etikettfalt {
    font-size: clamp(.6875rem, .85vw, .8125rem);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white-65);
}

.hyresformular__krav {
    color: var(--accent);
}

/* Fälten är genomskinliga med en linje runt, inte vita block: den mörka
   bakgrundsbilden syns igenom och formuläret ligger i sektionen i stället
   för att stå som en vit stapel ovanpå den. */
.hyresformular__input {
    width: 100%;
    min-height: 3rem;
    padding: .7rem .9rem;
    font-family: var(--font--paragraph);
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--white);
    background-color: #ffffff14;
    border: 1px solid #ffffff3d;
    border-radius: 2px;
    transition: border-color .15s ease, background-color .15s ease;
}

.hyresformular__input::placeholder {
    color: #ffffff73;
}

.hyresformular__input:hover {
    border-color: #ffffff70;
}

.hyresformular__input:focus,
.hyresformular__input:focus-visible {
    outline: none;
    border-color: var(--accent);
    background-color: #ffffff1f;
}

.hyresformular__textarea {
    min-height: 8rem;
    resize: vertical;
}

.hyresformular__val {
    appearance: none;
    cursor: pointer;
    padding-right: 2.75rem;
}

/* Listmarkören ligger på omslaget och inte på fältet: <select> tar inte
   ::after, och som background-image på fältet gick pilen inte att färga.
   Sitens egen pil används, inverterad — filen är streckad i #081615 och var
   osynlig mot den mörka botten. */
.hyresformular__valruta {
    position: relative;
    display: block;
}

.hyresformular__valruta::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .95rem;
    width: .75rem;
    height: .75rem;
    transform: translateY(-50%);
    background: url("/site/assets/65f19e8655139d84e63146da_arrow.svg") no-repeat center / contain;
    filter: invert(1);
    opacity: .75;
    pointer-events: none;
}

/* --- foten -------------------------------------------------------------- */

.hyresformular__fot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .25rem;
}

.hyresformular__obligatoriskt {
    margin: 0;
    font-size: .875rem;
    color: var(--white-65);
}

.hyresformular__knapp {
    padding: .85rem 2rem;
    font-family: var(--font--paragraph);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--white);
    background-color: #d6006e;
    border: 1px solid #d6006e;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.hyresformular__knapp:hover,
.hyresformular__knapp:focus-visible {
    color: #d6006e;
    background-color: var(--white);
    border-color: var(--white);
}

/* --- kvitto och fel ----------------------------------------------------- */

.hyresformular__kvitto,
.hyresformular__fel {
    display: grid;
    gap: .5rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: 2px;
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.45;
}

.hyresformular__kvitto {
    background-color: #ffffff14;
    border-left: 3px solid var(--accent);
}

.hyresformular__fel {
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
    background-color: #ff008314;
    border-left: 3px solid var(--accent);
}

.hyresformular__kvitto p,
.hyresformular__fel p {
    margin: 0;
    font-size: inherit;
}

.hyresformular__kvittorubrik {
    font-family: var(--font--heading);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.hyresformular__kvitto a,
.hyresformular__fel a {
    color: var(--accent);
}

/* --- smalare skärmar ----------------------------------------------------- */

@media screen and (max-width: 991px) {
    .hyra-fakta__rutor {
        grid-template-columns: repeat(2, 1fr);
    }

    .hyra-anvandning__rutor {
        grid-template-columns: 1fr;
    }

    .hyra-anvandning__ruta p {
        max-width: none;
    }
}

@media screen and (max-width: 767px) {
    .hyra-listor {
        grid-template-columns: 1fr;
    }

    /* Etikett över värde på telefon: elva rem till etiketten lämnar inte nog
       kvar åt ett svar på fem ord. */
    .hyra-tillganglighet__rad {
        grid-template-columns: 1fr;
        gap: .15rem;
    }

    /* Ingressen får full bredd på telefon: 46ch är bredare än skärmen ändå,
       och taket gör bara att raden bryts två gånger i onödan. */
    .hyra-hero__ingress,
    .hyra-text p,
    .hyra-planlosning p,
    .hyra-tillganglighet > p {
        max-width: none;
    }

    /* Fälten på rad kräver bredd för att etiketten inte ska brytas mitt i
       ordet. Under 768px står de i en spalt. */
    .hyresformular__form {
        grid-template-columns: 1fr;
    }

    .hyresformular__falt--halv {
        grid-column: 1 / -1;
    }

    /* Knappen tar hela bredden när raden ändå bryts. */
    .hyresformular__fot {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .hyresformular__knapp {
        width: 100%;
    }
}

@media screen and (max-width: 479px) {
    .hyra-fakta__rutor {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   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;
}