/* Novus Gym — publik sajt.
 *
 * Hållning: kundens logga är rent vit på svart, så sajten är det också. Färgen
 * ligger i LJUSET på 3D-loggan i stället för i platta ytor — det håller ihop
 * med varumärket och skiljer sidan från förlagan utan att bli en annan sida.
 * Inget textelement går under 1rem. Luften är avsiktligt tilltagen.
 */

:root {
  --svart:  #06070a;
  --natt:   #0b0d11;
  --kol:    #111419;
  --ram:    #222831;
  --ram-ljus: #333b47;
  --vit:    #ffffff;
  --dis:    #9aa5b3;
  /* Varumärkets blå, uppmätt ur kundens egen affisch ("VI ÖPPNAR SNART I
     MOTALA"): rubriken är #2054b4 och neonskenet kring loggan ligger i
     #88c0f0–#a8d0f8. Sajten körde cyan (#a8e5ff) — nära, men fel familj.
     --glod är den LJUSA tonen och används till text och tunna linjer; --blaa
     är den mättade och används till fyllda ytor. Omvänt fungerar inte:
     #2054b4 som text på nästan svart är oläsbart. */
  --glod:   #9ccdf7;
  --blaa:   #2054b4;
  --blaa-ljus: #2f6bd8;

  --t-jatte:  clamp(2.5rem, 5.2vw, 4.4rem);
  --t-stor:   clamp(2.1rem, 4.6vw, 3.6rem);
  --t-mellan: clamp(1.5rem, 2.4vw, 2rem);
  --t-brod:   clamp(1.125rem, 1.15vw, 1.3rem);
  --t-liten:  1rem;

  --luft:   clamp(5.5rem, 11vw, 10rem);
  --bredd:  1240px;
  --rundat: 20px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--svart);
  color: var(--vit);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--t-brod);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--vit); }

img, svg { max-width: 100%; }

/* .knapp sätter display: inline-flex, och en display-regel slår ut webbläsarens
   [hidden] { display: none }. Utan detta lyste Logga ut-knappen som en tom vit
   pil i sidhuvudet på medlemssidan när man var utloggad. */
[hidden] { display: none !important; }

.inre { width: 100%; max-width: var(--bredd); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

section { padding: var(--luft) 0; }

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: var(--t-stor); }
h3 { font-size: var(--t-mellan); letter-spacing: -0.01em; }

p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }

.dis { color: var(--dis); }

/* Liten etikett över rubrikerna — samma grepp som förlagan, men i vitt. */
.etikett {
  display: flex; align-items: center; gap: 0.9rem;
  font-size: var(--t-liten); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dis); margin-bottom: 1.6rem;
}
.etikett::before { content: ''; width: 3rem; height: 2px; background: var(--glod); flex: none; }

/* ── Knappar ────────────────────────────────────────────────────────────── */

.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  padding: 1.15rem 2.4rem;
  font-size: var(--t-liten); font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase;
  border-radius: 999px; border: 2px solid var(--vit);
  background: var(--vit); color: var(--svart);
  text-decoration: none; cursor: pointer;
  transition: box-shadow 0.25s, background 0.25s, color 0.25s, border-color 0.25s;
}
/*
 * ⛔ Knappen FLYTTAR SIG INTE vid hovring. Här stod `translateY(-3px)`, och en
 * pekare nära knappens nederkant hamnade utanför den i samma stund den lyftes:
 * hovringen släppte, knappen föll tillbaka, hovringen kom igen — och rutan
 * hoppade vid varje minsta musrörelse. Klicket hann inte registreras
 * (Johnny 2026-09-12). Ljuset ska finnas, rörelsen inte.
 */
.knapp:hover { box-shadow: 0 14px 40px rgba(168, 229, 255, 0.28); }
.knapp.tom { background: transparent; color: var(--vit); border-color: rgba(255, 255, 255, 0.4); }
.knapp.tom:hover { border-color: var(--vit); background: rgba(255, 255, 255, 0.06); }

/* ── Sidhuvud ───────────────────────────────────────────────────────────── */

/* `apple-mobile-web-app-status-bar-style: black-translucent` gör att innehållet
   går UNDER statusfältet. I webbläsaren märks det inte — som app på hemskärmen
   hamnar loggan under klockan. Insetet är 0 överallt utom just där. */
.sidhuvud {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(6, 7, 10, 0.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.sidhuvud .inre { display: flex; align-items: center; gap: 2rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }

.marke { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--vit); }
.marke svg { width: 38px; height: 45px; flex: none; }
.marke b { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.3em; display: block; line-height: 1; }
.marke-text { display: grid; gap: .18rem; }
.marke-text em { font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .42em;
  color: var(--dis); }

.meny { margin-left: auto; display: flex; align-items: center; gap: clamp(1.2rem, 2.6vw, 2.4rem); }
.meny a {
  font-size: var(--t-liten); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; color: var(--dis);
  padding: 0.4rem 0; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.meny a:hover { color: var(--vit); border-bottom-color: var(--glod); }
/* `:not(.tom)` är inte kosmetik. Utan den vinner den här regeln över .knapp.tom
   (samma specificitet, står senare) och målar texten svart på en genomskinlig
   bakgrund — knappen blir osynlig. Det drabbade Logga ut på medlemssidan. */
.meny .knapp { padding: 0.85rem 1.7rem; }
.meny .knapp:not(.tom) { color: var(--svart); border-color: var(--vit); }
.meny .knapp:not(.tom):hover { color: var(--svart); }

.menyknapp { display: none; background: none; border: 0; color: var(--vit); cursor: pointer; padding: 0.5rem; }
.menyknapp svg { width: 30px; height: 30px; }

@media (max-width: 900px) {
  .menyknapp { display: block; margin-left: auto; }
  .meny {
    position: fixed; inset: 76px 0 auto 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--natt); border-bottom: 1px solid var(--ram);
    padding: 1rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
    transform: translateY(-130%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .meny.oppen { transform: translateY(0); }
  .meny a { padding: 1.1rem 0; font-size: 1.15rem; border-bottom: 1px solid var(--ram); }
  .meny .knapp { margin-top: 1.4rem; border-bottom: 0; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative; min-height: min(86vh, 800px);
  display: grid; align-items: center;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
/* Ljuskägla bakom 3D-objektet — ger djup utan att bli en platt gradientplatta. */
.hero::before {
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 130%;
  background:
    radial-gradient(58% 52% at 68% 34%, rgba(90, 160, 220, 0.20), transparent 70%),
    radial-gradient(46% 46% at 22% 78%, rgba(255, 150, 70, 0.10), transparent 72%);
  pointer-events: none;
}

.hero .inre {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
}

.hero-text h1 { font-size: var(--t-jatte); font-weight: 800; }
.hero-text p { margin-top: 1.8rem; max-width: 34ch; color: var(--dis); font-size: clamp(1.2rem, 1.5vw, 1.45rem); }
.hero-knappar { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.8rem; }

.hero-figur { position: relative; aspect-ratio: 1 / 1; min-height: 340px; }
#hero3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hero-reserv { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; }
#hero-reserv img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 900px) {
  .hero .inre { grid-template-columns: 1fr; }
  .hero-figur { order: -1; min-height: 300px; max-height: 42vh; }
  .hero-text p { max-width: none; }
}

/* Rullningsvink längst ned i hero. */
.rulla {
  position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%);
  z-index: 2; font-size: var(--t-liten); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dis); display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.rulla span { width: 1px; height: 46px; background: linear-gradient(var(--glod), transparent); animation: rulla 2.4s ease-in-out infinite; }
@keyframes rulla { 0%, 100% { opacity: 0.25; transform: scaleY(0.5); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 900px) { .rulla { display: none; } }

/* ── Faktaremsa ─────────────────────────────────────────────────────────── */

.fakta { background: var(--natt); border-top: 1px solid var(--ram); border-bottom: 1px solid var(--ram); padding: clamp(3rem, 5vw, 4.5rem) 0; }
.fakta .inre { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 860px) { .fakta .inre { grid-template-columns: 1fr; } }

.fakta h3 {
  font-size: var(--t-liten); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--glod); margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.7rem;
}
.fakta h3 svg { width: 22px; height: 22px; flex: none; }
.fakta p, .fakta a { color: var(--dis); text-decoration: none; margin: 0; }
.fakta a:hover { color: var(--vit); }
.fakta .stark { color: var(--vit); font-weight: 700; }

/* ── Medlemskap ─────────────────────────────────────────────────────────── */

.medlemskap-topp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.medlemskap-topp p { color: var(--dis); margin: 0; }
@media (max-width: 860px) { .medlemskap-topp { grid-template-columns: 1fr; } }

/* ⛔ INGET PERSPEKTIV. Korten låg i `perspective: 1400px` med innehållet på
   `translateZ(28px)`, vilket skalar upp varje barn ~2 % kring radens mitt — och
   förskjutningen beror på hur långt elementet ligger från mitten. På en dator
   (tre kort i bredd, låg rad) blev det några pixlar; på en telefon (en kolumn,
   höga kort) kröp toppetiketten ända ut i ramen. Johnny 2026-09-12: «vuxen på
   telefonen nafsar på ramen» och «avståndet ska vara samma oavsett desktop
   eller mobil».
   Effekten fanns för hovringstilten, och den togs bort 2026-09-11 (den
   flimrade vid varje musrörelse). Kvar blev bara artefakten. */
/* ⚠️ 300 px minsta bredd gav TRE kort i rad på en vanlig skärm, och Novus har
   fyra. 240 px släpper in det fjärde utan att något kort blir smalare än sitt
   innehåll (pris + «per månad» ryms på en rad ned till ~230 px).
   Johnny 2026-09-12: «gör 4 kolumner i stället för 3 på desktop». */
/* ⚠️ `align-items: start` — annars sträcks ALLA kort till höjden på det som
   fällts ut, och tre tomma rutor står kvar bredvid det man öppnat. Syns först
   när «Mer info» bär mycket innehåll, alltså sedan jämförelsepriserna flyttade
   in 2026-09-12. Ihopfällda är korten ändå lika höga: de har samma innehåll. */
/* ⛔ `align-items: stretch`, inte `start`.
   Johnny 2026-09-17: *«rutorna är olika stora beroende på vad som står i dem,
   går det att lösa så det får en större ruta allihopa»*. Med `start` blev varje
   kort exakt så högt som sitt innehåll, så ett kort med kampanjmärke eller
   gymbytesmärke sköt upp bredvid ett utan — och priserna hamnade på olika höjd.
   Med `stretch` fyller alla kort i samma rad radens höjd, och knappen sitter
   redan i botten via `margin-top: auto` nedan. */
.kortrad {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.2rem, 2.2vw, 1.8rem); align-items: stretch;
}

/* Korten lutar i verklig 3D efter pekaren — djupet kommer från transform,
   inte från en målad skugga. */
.kort {
  position: relative;
  background: linear-gradient(165deg, var(--kol), var(--natt));
  border: 1px solid var(--ram); border-radius: var(--rundat);
  /* Fast innermarginal, inte clamp: avståndet från ramen till första raden ska
     vara detsamma på telefon och dator. Med clamp var det 32 px på telefonen och
     41,6 px på datorn, och skillnaden syntes just där den märks mest — överst. */
  padding: 2.2rem;
  display: flex; flex-direction: column; gap: 1.3rem;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.35s, box-shadow 0.35s;
  will-change: transform;
}
.kort:hover { border-color: var(--ram-ljus); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); }
.kort.framhavd { border-color: rgba(168, 229, 255, 0.45); background: linear-gradient(165deg, #151b22, var(--natt)); }
/* «Populärast» som ett band snett över hörnet i stället för en pill ovanpå
   målgruppen (Johnny 2026-09-12).

   ⚠️ SYMMETRIN ÄR RÄKNAD, inte gissad. Bandet roteras kring sin egen mitt, och
   för att ligga lika långt ut på överkanten som på högerkanten måste mitten
   ligga på hörnets diagonal:  top + höjd/2  =  bredd/2 − utstick.
   Med bredd 190, utstick 55 och höjd 26 blir top = 95 − 55 − 13 = 27 px.
   Ändrar du något av talen: räkna om, eller mät (skillnaden syns direkt).

   ⚠️ `overflow: hidden` på kortet klipper bandet mot hörnet — utan det ritas
   diagonalen utanför kortet. */
.kort.framhavd { overflow: hidden; }
.kort.framhavd .bandet {
  position: absolute; top: 27px; right: -55px;
  width: 190px; height: 26px; line-height: 26px;
  transform: rotate(45deg); transform-origin: 50% 50%;
  text-align: center;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--svart); background: var(--glod);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* Två raders höjd så att priserna ligger i linje mellan korten även när en
   målgrupp har längre namn än de andra. */
/* ⚠️ Etiketten står MITT i sitt block, inte i toppen av det.
   Höjden är två rader så att priserna hamnar i linje mellan korten även när en
   målgrupp har längre namn — men med texten överst fick ett kort med kort
   etikett («Vuxen») all luft UNDER ordet och ingen över, och på telefon läste
   det som att ordet klistrats i kanten. Johnny 2026-09-12: «på mobilen kommer
   ordet vuxen alldeles för nära rutans topp». */
.kort .typ {
  /* Målgruppen är rubriken över kortet, inte en fotnot: vit, fetare och större
     (Johnny 2026-09-12). Höjden är kvar så priserna ligger i linje mellan
     korten, och texten står mitt i sitt block. */
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--vit);
  min-height: 2.6em; line-height: 1.4;
  display: flex; align-items: center;
  padding-right: 5.5rem;
}
.kort .namn { font-size: var(--t-mellan); font-weight: 800; letter-spacing: -0.01em; }
.kort .pris { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.kort .pris b { font-size: clamp(2.6rem, 4.4vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.kort .pris span { color: var(--dis); font-size: var(--t-liten); }
.kort .text { color: var(--dis); }
/* ⚠️ Luft FÖRE punktlistan. Kortets gap är 1,3 rem, och det räckte inte när
   raden ovanför är en ruta med egen ram — erbjudandet, rabatten eller
   beskrivningen. Johnny 2026-09-12: «denna texten kommer för nära infon ovan,
   dvs rutorna med erbjudande». Listan är en ny sorts innehåll («det här ingår»)
   och ska läsas som ett eget stycke, inte som en fortsättning på rutan. */
.kort ul { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.kort li { display: flex; gap: 0.85rem; align-items: flex-start; color: var(--dis); }
.kort li svg { width: 22px; height: 22px; flex: none; margin-top: 0.35rem; color: var(--glod); }
.kort .knapp { margin-top: auto; width: 100%; }

/* Kortet man valde på startsidan, markerat på medlemssidan efter BankID — annars
   tappar man bort vad man var på väg att köpa. */
.kort.vald { border-color: var(--glod); box-shadow: 0 0 0 1px var(--glod), 0 30px 70px rgba(0, 0, 0, 0.6); }

/* Korta kort (dagskort, veckokort) — samma sorts kort som månadskorten men
   mindre. De var rader med bara ett pris förut, vilket såg ut som information
   i stället för något man kan köpa. Ett kort man kan trycka på ska se ut som
   ett kort man kan trycka på. */
.extra { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--ram); }
.extra-topp { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); max-width: 62ch; }
.extra-topp h3 { font-size: var(--t-mellan); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.7rem; }
.extra-topp p { color: var(--dis); margin: 0; }

/* Vägen in utan köp. Ligger under korten men skiljer sig från dem: det är inte
   ett alternativ i prislistan, det är en annan sorts handling. */
.utan-kop {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--ram);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap;
}
.utan-kop h3 { font-size: var(--t-mellan); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.7rem; }
.utan-kop p { color: var(--dis); margin: 0; max-width: 52ch; }
.utan-kop .knapp { flex: none; }

/* Rutan över prislistan som bara finns FÖRE öppningen.
   Stor med flit: den ändrar hur hela prislistan under den ska läsas, och en
   liten notis hade lästs som en fotnot till det första kortet i stället för
   som ett villkor för allihop. Ligger mellan ingressen och korten — efter dem
   hade den kommit för sent. */
.oppningsruta {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3.5vw, 2.6rem);
  border: 1px solid rgba(156, 205, 247, 0.38);
  border-left-width: 4px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(156, 205, 247, 0.1), rgba(156, 205, 247, 0.03));
}
.oppningsruta h3 {
  margin: 0 0 .6rem; font-size: var(--t-mellan); font-weight: 800;
  letter-spacing: -0.01em; color: var(--vit);
}
.oppningsruta p { margin: 0 0 .6rem; color: #d7dde5; max-width: 70ch; }
.oppningsruta p:last-child { margin-bottom: 0; }

.kortrad.liten { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kort.liten { padding: clamp(1.5rem, 2.2vw, 1.9rem); gap: 1rem; }
.kort.liten .pris b { font-size: clamp(2rem, 3vw, 2.5rem); }
.kort.liten .text { font-size: var(--t-liten); }

/* Avräkningen vid kortbyte står på kortet, före köpet. Ett avdrag man får veta
   om först på kvittot är ingen rabatt — det är en överraskning. */
.kort-avrakning { font-size: var(--t-liten); color: var(--dis); margin: 0; }
.kort-avrakning.stark { color: var(--vit); font-weight: 700; }
.kort-avrakning.spard { color: #ffd27a; }
/* Samma besked för hela listan, en gång ovanför den i stället för på varje rad. */
.kort-avrakning.samlad { margin: 0 0 .8rem; line-height: 1.45; font-size: .95rem; }

/* ── Om oss ─────────────────────────────────────────────────────────────── */

.om { background: var(--natt); border-top: 1px solid var(--ram); }
.om .inre { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (max-width: 860px) { .om .inre { grid-template-columns: 1fr; } }
.om p { color: var(--dis); }

.siffror { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
.siffra {
  background: linear-gradient(160deg, var(--kol), transparent);
  border: 1px solid var(--ram); border-left: 3px solid var(--glod);
  border-radius: 14px; padding: clamp(1.6rem, 2.6vw, 2.2rem);
  display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap;
}
.siffra b { font-size: clamp(2.4rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.siffra span { color: var(--dis); font-size: var(--t-liten); letter-spacing: 0.16em; text-transform: uppercase; }

/* ── Frågor och svar ────────────────────────────────────────────────────── */

.faq-lista { display: grid; gap: 1rem; max-width: 900px; margin: 0 auto; }
.faq-post { background: var(--kol); border: 1px solid var(--ram); border-radius: 16px; overflow: hidden; transition: border-color 0.25s; }
.faq-post[open] { border-color: var(--ram-ljus); }
.faq-post summary {
  list-style: none; cursor: pointer;
  padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.5rem, 2.4vw, 2.2rem);
  font-size: var(--t-mellan); font-weight: 700; letter-spacing: -0.01em; line-height: 1.35;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.faq-post summary::-webkit-details-marker { display: none; }
.faq-post summary::after {
  content: ''; flex: none; width: 20px; height: 20px;
  background: currentColor; color: var(--glod);
  clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%);
  transition: transform 0.3s;
}
.faq-post[open] summary::after { transform: rotate(135deg); }
.faq-post .svar { padding: 0 clamp(1.5rem, 2.4vw, 2.2rem) clamp(1.6rem, 2.4vw, 2rem); color: var(--dis); }

/* ── Avslutande uppmaning ───────────────────────────────────────────────── */

.uppmaning { text-align: center; background: var(--natt); border-top: 1px solid var(--ram); }
.uppmaning h2 { max-width: 18ch; margin: 0 auto 1.6rem; }
.uppmaning p { color: var(--dis); max-width: 52ch; margin: 0 auto 2.6rem; }

/* ── Sidfot ─────────────────────────────────────────────────────────────── */

.sidfot { border-top: 1px solid var(--ram); padding-top: var(--luft); }
.sidfot-kolumner { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 860px) { .sidfot-kolumner { grid-template-columns: 1fr; } }
.sidfot h4 { font-size: var(--t-liten); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--glod); margin: 0 0 1.3rem; }
.sidfot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.sidfot a { color: var(--dis); text-decoration: none; }
.sidfot a:hover { color: var(--vit); }
.sidfot p { color: var(--dis); margin: 0 0 0.5rem; }

/* Ordmärket i jätteformat, precis som förlagan gör med sitt. */
.sidfot-marke { margin-top: clamp(3.5rem, 7vw, 6rem); opacity: 0.16; }
.sidfot-marke img { width: 100%; display: block; }

.sidfot-slut {
  border-top: 1px solid var(--ram); margin-top: clamp(2rem, 4vw, 3rem);
  padding: 2rem 0 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; color: var(--dis); font-size: var(--t-liten);
}
.sidfot-slut a { color: var(--dis); }

/* Byline: den som byggt sajten. Ska synas utan att konkurrera med kundens egen
   sidfot — därför dämpad text med länken i vitt. */
.sidfot-slut .byline { color: var(--dis); }
.sidfot-slut .byline a {
  color: var(--vit); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35); padding-bottom: 1px;
  transition: border-color 0.2s;
}
.sidfot-slut .byline a:hover { border-bottom-color: var(--glod); color: var(--glod); }

/* ── Textsidor (villkor, integritet) ────────────────────────────────────── */

/* ⚠️ Egen `padding` och `margin-top: -luft` som drar tillbaka sektionens.
   `section` har `padding: var(--luft) 0` globalt — 5,5–10 rem i BÅDA ändar —
   och ovanpå det låg en egen toppmarginal här. På en villkorssida blev det en
   skärmhög tom yta innan första raden, mätt i en skärmbild: innehållsför-
   teckningen började 450 px ned på 900 px höjd. Rätt på en säljsida som ska
   andas, fel på ett dokument man kommit hit för att LÄSA. */
.textsida {
  max-width: 780px;
  margin-top: calc(var(--luft) * -1 + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: 0;
}
.textsida h1 { font-size: var(--t-stor); margin-bottom: 2rem; }

/* ⚠️ INGEN `white-space: pre-wrap` längre. Texten ritas som riktiga element av
   `js/textsida.js` (stycken, rubriker, listor) i stället för att klistras in
   som en enda textnod — pre-wrap hade då lagt till tomrader efter varje
   stycke ovanpå marginalerna. Kunden skriver fortfarande ren text i adminvyn;
   det är visningen som ändrats, inte formatet. */
.textsida .brod { color: var(--dis); }
.textsida .brod p { margin: 0 0 1.25em; }
.textsida .brod h2 {
  font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--vit);
  margin: 2.6rem 0 1rem; scroll-margin-top: 6rem;
}
.textsida .brod h2:first-child { margin-top: 0; }
.textsida .brod ul { margin: 0 0 1.25em; padding-left: 1.3rem; }
.textsida .brod li { margin-bottom: .5em; }

/* Ett dokument per avsnitt. Linjen är skiljetecknet mellan två avtal — utan
   den flyter integritetspolicyn ihop med villkoren till en enda lång text. */
.textsida .dokument + .dokument {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--ram);
}
.textsida .dokument h1 { scroll-margin-top: 6rem; }
.dokument-datum {
  margin: -1.2rem 0 2rem; color: var(--dis); font-size: .92rem;
  letter-spacing: .04em;
}

/* Innehållsförteckningen. Fyra dokument på en sida blir en lång rulla. */
.innehall-lista {
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--ram); border-radius: var(--rundat);
  background: var(--natt);
}
.innehall-lista h2 {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dis); margin: 0 0 1.2rem;
}
.innehall-lista ol { margin: 0; padding-left: 1.2rem; }
.innehall-lista ol > li { margin-bottom: .9rem; font-weight: 700; }
.innehall-lista ul {
  margin: .55rem 0 0; padding-left: 0; list-style: none;
  font-weight: 400; font-size: .95rem;
  columns: 2; column-gap: 2rem;
}
@media (max-width: 620px) { .innehall-lista ul { columns: 1; } }
.innehall-lista li { break-inside: avoid; }
.innehall-lista ul li { margin-bottom: .4rem; }
.innehall-lista a { color: var(--dis); text-decoration: none; }
.innehall-lista ol > li > a { color: var(--vit); }
.innehall-lista a:hover { color: var(--glod); text-decoration: underline; }

/* ── Mina sidor ─────────────────────────────────────────────────────────── */

/* `section` har `padding: var(--luft) 0` globalt — 5,5–10 rem i BÅDA ändar.
   Det är rätt på en sajt där sektioner ska andas mot varandra, och fel i en app
   där varje vy är hela skärmen: en tredjedel av första skärmbilden gick åt till
   tomrum, och lika mycket satt kvar under sista knappen. */
.minsida main > section { padding: clamp(.8rem, 2.5vw, 1.4rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.minsida h1 { margin-bottom: 1.2rem; }
.minsida h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: 1.4rem; }
.liten { font-size: var(--t-liten); }

/* Toppen är centrerad kring dörrknappen. Den är det appen finns till för och
   ska ligga mitt i tummens väg, inte skjutas ut åt kanten. */
.min-topp { display: grid; justify-items: center; text-align: center;
  gap: .15rem; padding-bottom: .6rem; }
/* `line-height: 1.75` är brödtextens, inte en rubriks. På tre rader efter
   varandra — namn, status, besök — blev det 60 px ren radhöjd i huvudet på den
   vy man öppnar för att starta ett pass. */
.min-topp h1 { font-size: clamp(1.25rem, 4.2vw, 1.7rem); line-height: 1.25; margin: 0; }

/* Toppen står ovanför VARJE vy. Blir den för hög börjar allt innehåll under
   skärmkanten, och appen känns tom vid varje flikbyte. */
.min-topp .statuspill { margin-top: .35rem; padding: .35rem .9rem; }
.min-topp .besok-rad { margin: .35rem 0 0; font-size: .92rem; line-height: 1.4; }
.min-topp .besok-rad strong { font-size: 1rem; }


/* Kortet man valde på startsidan, kvitterat före BankID. Utan kvitteringen vet
   man inte om valet följde med. */
.valt-kort { margin: 1.8rem 0 0; max-width: 52ch; padding: 1.1rem 1.3rem;
  border: 1px solid rgba(168, 229, 255, .4); border-radius: 14px;
  background: rgba(168, 229, 255, .08); font-weight: 600; }

.kop-rubrik { font-size: var(--t-mellan); font-weight: 800; letter-spacing: -0.01em;
  margin: clamp(2rem, 4vw, 3rem) 0 1.2rem; }

.statuspill { display: inline-block; margin: .8rem 0 0; padding: .5rem 1.1rem;
  border-radius: 999px; font-size: var(--t-liten); font-weight: 700; }
.statuspill.aktiv { background: rgba(168, 229, 255, .12); color: var(--glod);
  border: 1px solid rgba(168, 229, 255, .4); }
.statuspill.ingen { background: rgba(255, 255, 255, .05); color: var(--dis);
  border: 1px solid var(--ram); }

.besok-rad { margin: .9rem 0 0; color: var(--dis); }
.besok-rad strong { color: var(--vit); font-size: 1.25rem; }

/* Egen meny på medlemssidan. Allt låg på en sida förut — schema, dagbok,
   abonnemang, historik och uppgifter under varandra — och det viktiga drunknade
   i rullningen. Vald vy ligger i adressens hash, så en omladdning stannar kvar. */
/* Sitter kvar under sidhuvudet när man rullar. På en telefon ligger menyn annars
   längst upp på en lång sida, och att byta vy kräver att man rullar tillbaka. */
/* Bottenmeny. Appen används stående med en hand — det som ska nås ofta hör
   hemma där tummen är. `env(safe-area-inset-bottom)` håller den ovanför iPhones
   hemindikator; utan den hamnar sista raden under strecket och går inte att
   trycka på. */
.bottenmeny {
  /* Ligger i skalet (se «Appskalet» nedan), inte fixerad ovanpå en rullande
     sida. En list som är en del av ramen kan varken glida bort under rullning
     eller hamna ovanpå det man skriver. */
  flex: none; z-index: 60;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  /* SOLID bakgrund, ingen backdrop-filter. En fixerad list med backdrop-filter
     är ett känt sätt att få iOS Safari att sluta rita om den under rullning —
     baren "försvinner" när man scrollat en bit. Genomskinligheten är inte värd
     en meny som ibland inte finns. */
  background: #0b0d11;
  border-top: 1px solid var(--ram);
  padding-bottom: env(safe-area-inset-bottom, 0);
  /* Egen lager-promotion. Standardknepet mot iOS repaint-buggar på fixerade
     element; en transform PÅ elementet självt bryter inte dess fixering (det
     gör bara en transform på en FÖRFADER). */
  transform: translateZ(0);
}
.bottenflik {
  background: none; border: 0; color: var(--dis); font: inherit; cursor: pointer;
  display: grid; justify-items: center; gap: .25rem;
  padding: .7rem .2rem .6rem; min-height: 3.9rem;
}
.bottenflik svg { width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottenflik span { font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.bottenflik.aktiv { color: var(--vit); }
.bottenflik.aktiv svg { color: var(--glod); }

/* ── Appskalet ──────────────────────────────────────────────────────────────
   Appen är en RAM med ett rullande fönster i, inte en sida som rullar. Sidan
   var förut ett vanligt dokument med två fixerade lister ovanpå, och varje vy
   behövde en padding-bottom som gissade listernas höjd. Det gav gummistuds i
   kanterna, en sidfot sist i varje vy och en meny som iOS ibland slutade rita
   om under rullning.

   Nu är `main` det enda som rullar. Listerna kan inte glida, det finns inget
   dokument att studsa, och ingen padding att hålla i synk med något. */
/* Appens sidhuvud: avsändare till vänster, väg ut till höger.
   ⚠️ `flex: none` — den hör till RAMEN, inte till det som rullar. En rad som
   rullar med är ingen väg tillbaka; den är borta när man behöver den. */
.apphuvud {
  flex: none; z-index: 60; display: flex; align-items: center; gap: .8rem;
  padding: .55rem clamp(1rem, 4vw, 1.6rem);
  padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
  background: #0b0d11; border-bottom: 1px solid var(--ram);
}
.apphuvud-marke {
  display: flex; align-items: center; gap: .55rem; margin-right: auto;
  background: none; border: 0; padding: .2rem; cursor: pointer; color: var(--vit);
  font: inherit;
}
.apphuvud-marke svg { width: 20px; height: 24px; flex: none; }
.apphuvud-marke b { letter-spacing: .26em; font-weight: 800; font-size: .92rem; }
.apphuvud-ut {
  color: var(--dis); font-size: .88rem; font-weight: 700; text-decoration: none;
  padding: .35rem .2rem; white-space: nowrap;
}
.apphuvud-ut:hover { color: var(--vit); }

.minsida { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.minsida main {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* Rullningen stannar i appen. Utan detta fortsätter en svepning vid kanten
     ut i webbläsarens egen gummistuds — det som får en app att avslöja att den
     är en webbsida. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Bilden på lokalen ligger kvar som bakgrund i hela appen, kraftigt nedtonad.
   `fixed` gör att den står stilla när innehållet rullar — bakgrunden ska kännas
   som ett rum man är i, inte som en bild som åker förbi. */
.minsida::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(6,7,10,.62) 0%, rgba(6,7,10,.74) 55%, rgba(6,7,10,.86) 100%),
    url('/bild/lokalen.jpg') center 42% / cover no-repeat;
}

.minvy { padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
/* Sektionen ovanför har redan sin luft. Två luftrum efter varandra blev 24 px
   tomrum överst i varje vy — en tjugondel av en telefonskärm, i fem vyer. */
.minsida .minvy { padding-top: 0; }
.minvy > h2:first-child { margin-top: 0; }

/* Profilkortet: uppgifterna man vill kunna slå upp, inte bli påmind om.
   Etikett och värde på SAMMA rad — under varandra blev tre uppgifter 264 px,
   och en uppgift man slår upp behöver inte en egen rad för sin rubrik. */
.profilkort { display: grid; gap: .1rem; margin: 0 0 1rem;
  background: var(--kol); border: 1px solid var(--ram); border-radius: var(--rundat);
  padding: .9rem 1.1rem; }
.profilkort > div { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .45rem 0; }
.profilkort > div + div { border-top: 1px solid var(--ram); }
.pk-etikett { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dis); flex: none; }
.profilkort strong { font-size: 1.05rem; font-weight: 800; text-align: right; }

/* Slut i butiken — kortet ska se stängt ut, inte bara ha en död knapp. */
/* «+3 månader gratis» — skrivs ut ur fältet «Fria månader på slutet» i stället
   för att stå i kortets namn. Ett namn som ändrar sig när en siffra ändras hade
   tyst gjort varje befintligt medlemskap till ett annat kort vid förnyelse. */
/* «Mer info» — resten av kortet en knapptryckning bort. Ser ut som en länk,
   inte som en andra köpknapp: det finns bara EN knapp på ett kort, och den
   köper. */
/* Villkorsrutan i köparket. Större och ljusare än en vanlig kryssruta: den är
   det enda som står mellan medlemmen och betalningen, och en mörk ruta på mörk
   botten läses inte som ett krav.
   `.kravs` sätts när någon trycker «Till betalningen» utan att ha kryssat — då
   pekar arket på rutan i stället för att tiga. */
.ark-villkor input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--glod); flex: none; }
.ark-villkor .kravtext { display: none; }
.ark-villkor.kravs {
  border-radius: 10px; padding: .6rem; margin: -.6rem -.6rem .2rem;
  background: rgba(255, 138, 128, .1); box-shadow: 0 0 0 1px rgba(255, 138, 128, .55);
}
.ark-villkor.kravs .kravtext {
  display: block; margin-top: .35rem; font-style: normal; font-weight: 700;
  color: #ff8a80;
}

.merknapp {
  align-self: flex-start; margin: .2rem 0 0; padding: .2rem 0;
  background: none; border: 0; border-bottom: 1px solid var(--ram-ljus);
  color: var(--dis); font: inherit; font-size: var(--t-liten); font-weight: 700;
  letter-spacing: .04em; cursor: pointer;
}
.merknapp:hover { color: var(--glod); border-bottom-color: var(--glod); }
.merknapp:focus-visible { outline: 2px solid var(--glod); outline-offset: 3px; }
/* Lådan ärver kortets radavstånd så innehållet inte klibbar ihop när det fälls ut. */
.kort-mer { display: flex; flex-direction: column; gap: 1.1rem; }

/* Jämförelsepriset, överstruket bredvid det uträknade. Litet och dämpat: det
   är jämförelsen, inte priset man betalar.
   ⚠️ Etiketten i SMÅ bokstäver (Johnny 2026-09-12) och på egen rad före talet —
   tre tal på ett kort (jämförelse, snitt, dragning) och bara ett av dem hade ett
   ord framför sig, så det överstrukna lästes som månadsbeloppet.
   ⚠️ «Jämförelsepris», aldrig «ordinarie»: ett överstruket ordinariepris ska ha
   varit gymmets faktiska pris tidigare, och Novus har inte öppnat. */
.pris { flex-wrap: wrap; }
.jamforetikett {
  flex-basis: 100%; color: var(--dis); font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; margin-bottom: -.5rem;
}
/* Jämförelsepriset står SNETT OVANFÖR det stora talet — indraget en bit, som på
   en prislapp där det gamla priset är struket över det nya (Johnny 2026-09-12:
   «lite större så det är lite snett ovanför det andra»). Egen rad, inte bredvid:
   bredvid konkurrerade det med talet man faktiskt ska läsa. */
.pris .ordinarie {
  flex-basis: 100%; margin-left: 1.6rem;
  color: var(--dis); font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 700;
  text-decoration-thickness: 2px; opacity: .85;
}
/* Jämförelsepriset flyttade IN i «Mer info» (Johnny 2026-09-12: «jämförelse-
   priserna måste öppnas upp … då blir det mer stilrent»). Framme står bara det
   stora talet. Här inne behöver det varken indrag eller prislappsvinkel — det
   läses som en upplysning, inte som en överstruken skylt ovanför ett nytt pris.
   ⚠️ Den gamla regeln ovan är scopad till `.pris` och slutade därför gälla när
   talet bytte förälder. Båda finns kvar: `.pris` om det någonsin flyttar ut igen. */
.jamforrad {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem;
  margin: 0 0 .7rem;
}
.jamforrad .jamforetikett { flex-basis: auto; margin-bottom: 0; }
.jamforrad .ordinarie {
  color: var(--dis); font-size: 1.05rem; font-weight: 700;
  text-decoration-thickness: 2px; opacity: .85;
}
/* Märket ligger nu först i rutan, inte klistrat under ett pris ovanför. */
.kort-mer .sparmarke { margin-top: 0; }

.gratismarke {
  display: block; width: fit-content; margin: -.5rem 0 0;
  padding: .22rem .7rem; border-radius: 999px;
  background: rgba(156, 205, 247, .14); border: 1px solid rgba(156, 205, 247, .45);
  color: var(--glod); font-size: .85rem; font-weight: 800; letter-spacing: .03em;
}

/* Raden under sparmärket: vad kortet motsvarar per månad och mot vad.
   Märket säljer, raden förklarar — och det är förklaringen som gör att talet
   går att lita på. Räknas i js/rabatt.js, skrivs aldrig in för hand. */
.sparrad { margin: -.2rem 0 0; font-size: var(--t-liten); color: var(--dis); }

.kort.slut { opacity: .55; }

/* Skuggat medlemskap: syns, läses — men går inte att köpa.
   ⚠️ Inte lika nedtonat som ett slutsålt kort i butiken (.55). Priset och
   punkterna ska fortfarande gå att läsa; det är hela poängen med att låta
   kortet stå kvar i stället för att ta bort det. Hovringen tas bort så kortet
   inte känns klickbart, och märket säger varför. */
.kort.skuggad { opacity: .72; border-style: dashed; }
.kort.skuggad:hover { border-color: var(--ram); box-shadow: none; }
.kort.skuggad .pris b { color: var(--dis); }
.skuggrad {
  margin-top: .9rem; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dis);
}
/* Knappen ÄR släckt, inte bara grå: `disabled` stoppar även tangentbordet. */
.kort.skuggad .knapp[disabled] { opacity: .5; cursor: not-allowed; }

/* `.min-falt label` sätter display: block med högre specificitet (0,1,1 mot
   0,1,0) och la kryssrutan centrerad ovanför sin egen text. Därför label.kryssrad. */
label.kryssrad { display: flex; align-items: flex-start; gap: .9rem; cursor: pointer;
  font-weight: 400; margin: 0; }
.kryssrad input { width: 24px; height: 24px; flex: none; margin-top: .15rem;
  accent-color: var(--glod); }
/* .min-falt input får margin-top: auto för att linjera fälten i en rad — det
   ska inte gälla en kryssruta inne i en etikett. */
.min-falt .kryssrad input { margin-top: .15rem; }
.kryssrad > span { display: grid; gap: .2rem; }
.kryssrad strong { color: var(--vit); }

.minnotis.varning { background: rgba(255, 210, 122, .09);
  border: 1px solid rgba(255, 210, 122, .32); color: #ffd27a; }

/* ── Testläge för betalning ─────────────────────────────────────────────── */

/* Attrappbetalningen ska aldrig gå att förväxla med en riktig. Remsan sitter
   överst och följer med när sidan rullas. */
.testremsa { position: sticky; top: 0; z-index: 60; background: #ffd27a; color: #06070a;
  font-weight: 800; text-align: center; padding: .7rem 1rem; font-size: var(--t-liten);
  letter-spacing: .04em; }
.mock-kvitto { margin: 2rem 0; padding: 1.4rem 1.6rem; border: 1px solid var(--ram);
  border-radius: var(--rundat); background: var(--kol); display: grid; gap: .8rem; }
.mock-rad { display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; }
.mock-rad strong { font-size: 1.6rem; font-weight: 800; }

/* Dörrknappen är sidans tyngdpunkt — den ska gå att träffa med tummen utan
   att titta, och synas direkt när appen ligger på hemskärmen. */
.dorrknapp { position: relative; flex: none;
  width: 100%; min-height: 3.6rem;
  border-radius: 999px; border: 2px solid var(--blaa-ljus); background: var(--blaa);
  color: var(--vit); font: inherit; font-weight: 800; font-size: 1.15rem;
  letter-spacing: .04em; cursor: pointer; display: grid; place-items: center;
  transition: transform .2s, box-shadow .3s, opacity .2s; }
/* `max-width: 7ch` var till för den runda knappen och radbröt «Öppna dörren»
   till två rader när den blev en list. */
.dorrknapp .txt { position: relative; z-index: 2; line-height: 1.2; white-space: nowrap; }
/* Ringen var en cirkel runt den runda knappen. Som list är den i stället ett
   mjukt sken i pillens egen form — annars ritas en ellips runt en rektangel. */
.dorrknapp .ring { position: absolute; inset: -3px; border-radius: 999px;
  border: 1px solid rgba(156, 205, 247, .55); animation: puls 2.8s ease-out infinite; }
@keyframes puls { 0% { transform: scale(1); opacity: .75; } 70%, 100% { transform: scale(1.035); opacity: 0; } }
.dorrknapp:hover:not(:disabled) { box-shadow: 0 14px 40px rgba(32, 84, 180, .5); }
.dorrknapp:active:not(:disabled) { transform: scale(.97); }
.dorrknapp:disabled { background: transparent; color: var(--dis);
  border-color: var(--ram); cursor: not-allowed; }
.dorrknapp:disabled .ring { display: none; }
@media (prefers-reduced-motion: reduce) { .dorrknapp .ring { animation: none; opacity: .35; } }

/* ── Ytan: innehåll ligger ALDRIG direkt på fotot ──────────────────────────
 * Appen hade två klasser av innehåll. Kort hade en yta; listor, rader och
 * rubriker hade ingen. Så allt som faktiskt VAR information — kvitton,
 * dagboksrader, det aktiva medlemskapet — låg ovanpå maskiner, fönster och
 * väggloggan i lokalbilden, med vattenstämpeln tvärs genom texten. Det lästes
 * som «genomskinligheten förstör synligheten», men felet var att hälften av
 * innehållet saknade underlägg.
 *
 * En regel i stället: fotot är en RAM, aldrig ett underlägg för text. Varje
 * block av innehåll står på .panel. Samma yta som korten, mindre luft — den
 * här bär rader, inte rubriker.
 */
.minsida .panel {
  background: linear-gradient(165deg, var(--kol), var(--natt));
  border: 1px solid var(--ram);
  border-radius: 16px;
  padding: .15rem 1.05rem;
  margin: 0 0 .9rem;
}
/* Sista raden i en panel har panelens egen kant under sig — två linjer på
   samma ställe blir en tjockare, otydlig linje. */
.minsida .panel > .minrad:last-child,
.minsida .panel > .fallbar:last-child { border-bottom: 0; }
.minsida .panel .fallbar { border-top: 1px solid var(--ram); }
/* Ett formulär är en panel med innehåll, inte en radlista — det behöver riktig
   luft runt fälten, inte radpaddingen som bär kvitton och dagboksrader. */
.minsida .min-form.panel { padding: 1.15rem 1.05rem 1.3rem; }
/* Fältgruppen ärver formulärets två kolumner så postnummer och ort står kvar
   sida vid sida även när gruppen ligger inne i en fålla. */
.minsida .falt-grupp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem .9rem; }
.minsida .falt-grupp > .helbredd { grid-column: 1 / -1; }
/* Fållan runt gruppen står inne i formuläret och ska inte ha panelens linje
   ovanför sig en gång till. */
/* Fållan är ett rutnätsbarn i formuläret och måste spänna över båda kolumnerna
   — annars hamnar den i vänsterspalten och fälten inuti blir halva bredden. */
.minsida .min-form > .fallbar { grid-column: 1 / -1; border-top: 1px solid var(--ram); margin-top: .3rem; }
.minsida .min-form .fall-kropp { padding-top: .2rem; }
/* Fotnoten i profilkortet: hör till kortet, står under sin egen linje. */
.minsida .profilkort .pk-fot {
  grid-column: 1 / -1; margin: .2rem 0 0; padding-top: .8rem;
  border-top: 1px solid var(--ram);
  color: var(--dis); font-size: .86rem; line-height: 1.4;
}

/* ── Beläggningen ──────────────────────────────────────────────────────────
 * Hur många som öppnat dörren inom fönstret. Ligger högst upp på Träning, som
 * är vyn man landar på — frågan «är det fullt nu?» ställs innan man åker.
 *
 * En liggande stapel, inte en urtavla: ~52 px mot ~150. Vyerna kämpades precis
 * ned till en skärm var, och en mätare får inte ta tillbaka rullningen.
 */
.minsida .belagg { margin-top: .9rem; display: grid; gap: .4rem; }
.minsida .belagg-rad { display: flex; align-items: baseline; justify-content: center;
  gap: .5rem; flex-wrap: wrap; }
.minsida .belagg-ord { font-weight: 800; font-size: 1rem; letter-spacing: .01em; }
.minsida .belagg-tal { color: var(--dis); font-size: .84rem; }
.minsida .belagg-spar { height: 8px; border-radius: 999px; background: var(--kol);
  border: 1px solid var(--ram); overflow: hidden; }
.minsida .belagg-fyll { height: 100%; border-radius: 999px;
  /* Fyllnaden ändras var gång datan hämtas; utan övergången hoppar den. */
  transition: width .5s ease; }
/* Färgerna är ENBART förstärkning — ordet står redan i klartext, eftersom
   ungefär var tolfte man inte skiljer grönt från rött. */
.minsida .belagg.gron .belagg-ord { color: #6ee7a8; }
.minsida .belagg.gron .belagg-fyll { background: #3ea76d; }
.minsida .belagg.gul .belagg-ord { color: #f2cf6a; }
.minsida .belagg.gul .belagg-fyll { background: #c9a227; }
.minsida .belagg.rod .belagg-ord { color: #ff8f8f; }
.minsida .belagg.rod .belagg-fyll { background: #c0392b; }

/* ── Navet i profilen ──────────────────────────────────────────────────────
 * Profilen var tre ärenden staplade på varandra — identitet, köphistorik och
 * ett formulär — och blev tre skärmar. Nu är den ett nav med tre vägar. Varje
 * rad bär sitt eget värde, så man ser vad som finns bakom utan att gå dit.
 */
.minsida .navlista { padding: 0; }
.minsida .navrad {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: .95rem 1.05rem; background: none; border: 0;
  border-bottom: 1px solid var(--ram);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  /* Apples 44 px är golvet för en träffyta man siktar på med tummen. */
  min-height: 3.4rem;
}
.minsida .navrad:last-child { border-bottom: 0; }
.minsida .navrad:active { background: rgba(255, 255, 255, .04); }
.minsida .nr-text { display: grid; gap: .1rem; min-width: 0; }
.minsida .nr-titel { font-weight: 700; font-size: 1.05rem; }
.minsida .nr-under { color: var(--dis); font-size: .86rem; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Pilen ritas i CSS i stället för som ikon — en enda vinkel behöver ingen svg. */
.minsida .nr-pil { flex: none; width: .6rem; height: .6rem; margin-right: .2rem;
  border-right: 2px solid var(--dis); border-top: 2px solid var(--dis);
  transform: rotate(45deg); }

/* Vägen tillbaka ur en undervy. Egen rad överst, inte en pil inklämd bredvid
   rubriken — den ska gå att träffa utan att sikta. */
.minsida .tillbaka {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 .7rem; padding: .5rem .9rem .5rem .7rem;
  background: none; border: 1px solid var(--ram); border-radius: 999px;
  color: var(--dis); font: inherit; font-size: .92rem; cursor: pointer;
}
.minsida .tillbaka::before {
  content: ''; width: .5rem; height: .5rem;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.minsida .tillbaka:active { background: rgba(255, 255, 255, .05); color: var(--vit); }

.minrad { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.1rem, 2vw, 1.5rem) 0; border-bottom: 1px solid var(--ram); }
.minrad .n { font-weight: 700; font-size: 1.15rem; }
/*
 * Det aktiva medlemskapet markeras med en YTA, inte ett streck.
 *
 * ⚠️ Här stod `border-left: 3px solid var(--glod)`. FÄRGEN var rätt — husets
 * regel högst upp i filen tillåter uttryckligen `--glod` till text och tunna
 * linjer. Felet satt i geometrin: en vänsterkant spänner över HELA radens höjd,
 * så på en bred skärm läses den som en stapel i stället för en markering, och
 * `padding-left` sköt dessutom namnet ur linje med resten av panelen.
 *
 * En svag fyllning markerar utan att flytta något, och «Gäller nu»-etiketten
 * bär betydelsen. Raden ligger kvar i samma spalt som allt annat.
 */
.minrad.markerad {
  background: color-mix(in srgb, var(--blaa) 12%, transparent);
  border-radius: .6rem;
  padding-left: .9rem;
  padding-right: .9rem;
  margin-left: -.9rem;
  margin-right: -.9rem;
}
/* Beloppet bröts mitt itu — «1 099» på en rad och «kr» på nästa — eftersom
   kvittonumret till vänster fick ta all bredd. Två rader per kvitto blev 124 px
   per rad i en lista man bara ögnar. */
.minrad-hoger { text-align: right; flex: none; white-space: nowrap; }
/* Raden var 76 px hög: namn på egen rad, datum och siffror på nästa, båda med
   sidans normala radavstånd. Fem sådana är halva skärmen. Texten är kvar —
   det är luften mellan raderna som var för stor. */
.minsida .minrad { padding: .6rem 0; gap: .9rem; }
.minsida .minrad .n { font-size: 1.02rem; line-height: 1.25; }
.minsida .minrad .dis.liten { line-height: 1.3; margin-top: .08rem; font-size: .86rem; }
.minsida .minrad-hoger { line-height: 1.25; }

/* Kvittolistan: en kryssruta för att välja, och resten av raden är en länk som
   öppnar kvittot. Två mål på samma rad, så de får inte överlappa. */
.kvittorad { justify-content: flex-start; }
.kvittoval { width: 1.25rem; height: 1.25rem; flex: none; margin: 0; accent-color: var(--blaa-ljus); }
.kvittolank { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: space-between;
  gap: .9rem; color: inherit; text-decoration: none; }
.kvittolank:active { opacity: .7; }
.kvittoverktyg { padding-bottom: .7rem; border-bottom: 1px solid var(--ram); }
.kvittoknappar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.kvittobesked:empty { display: none; }
/* Sajtens knappar är byggda för en hero, inte för en verktygsrad: tre staplade
   tog en tredjedel av telefonskärmen innan första kvittot syntes. */
.kvittoknappar .knapp { padding: .55rem .75rem; font-size: .72rem; letter-spacing: .05em; border-width: 1.5px; }
.kvittoknappar .knapp:hover { transform: none; box-shadow: none; }
.kvittoknappar .knapp:disabled { opacity: .4; cursor: default; }

.min-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem; margin-top: 1rem; max-width: 780px; }
/* Hjälptexterna ärvde brödtextens radavstånd (1,75) från sajten. Nio fält med
   två–tre raders hjälp blev 1 636 px formulär — en tredjedel bara radavstånd.
   Tätare rader gör inte texten svårare att läsa; den står ändå kvar i sin
   helhet, bara i app-format. */
/* Två kolumner även på telefon. `auto-fit, minmax(260px, …)` ger EN kolumn på
   390 px, så postnummer och ort — två fält som hör ihop och som var för sig är
   fem tecken breda — låg under varandra och tog en halv skärm. Fält som
   behöver bredd är märkta `helbredd` och spänner båda kolumnerna. */
.minsida .min-form { grid-template-columns: repeat(2, 1fr); gap: 1.15rem .9rem; }
.minsida .min-falt p { font-size: .95rem; line-height: 1.45; margin-bottom: .45rem; }
.minsida .min-falt label { margin-bottom: .3rem; }
.minsida .min-falt input { padding: .8rem 1rem; }
.min-falt.helbredd { grid-column: 1 / -1; }
.min-falt label { display: block; font-weight: 700; margin-bottom: .4rem; }
.min-falt p { margin: 0 0 .5rem; }

/* Fälten i en rad ska stå i linje även när hjälptexterna är olika långa. Cellerna
   är lika höga i rutnätet, så inmatningen skjuts ned till botten med margin-top:
   auto. Utan detta hamnade Mobilnummer och Mejladress på olika höjd bara för att
   den ena hade två raders hjälptext. Samma grepp som i adminvyn. */
.min-falt { display: flex; flex-direction: column; }
.min-falt input, .min-falt .forslagsfalt { margin-top: auto; }

.min-falt input { width: 100%; background: var(--kol); border: 1px solid var(--ram);
  color: var(--vit); border-radius: 12px; padding: .95rem 1.1rem; font: inherit; }
.min-falt input:focus { outline: 2px solid var(--glod); outline-offset: 1px; border-color: transparent; }

/* ⚠️ Kryssrutan mot textfälten — TVÅ regler som vägde lika och avgjordes av
   källordning, båda till kryssrutans nackdel:
   `.min-falt label` (0-1-1) slog `label.kryssrad` (0-1-1) → display: block, så
   rutan hamnade ovanför sin text i stället för bredvid; och `.min-falt input`
   (0-1-1) slog `.kryssrad input` (0-1-1) → width: 100%, så rutan blev lika bred
   som ett textfält och tryckte ut texten ur skärmen.
   Kommentaren vid `label.kryssrad` sa att det redan var löst — och det stämde
   tills fältreglerna flyttades hit nedanför. Därför tyngre selektorer (0-2-1)
   här i stället för ännu en ordningsberoende rad: de överlever nästa flytt.
   En kryssruta är inte ett textfält och ska inte ärva textfältets form. */
.min-falt label.kryssrad { display: flex; align-items: flex-start; gap: .9rem;
  font-weight: 400; margin-bottom: 0; }
.min-falt label.kryssrad input {
  width: 24px; height: 24px; flex: none; margin-top: .15rem;
  padding: 0; background: var(--kol); accent-color: var(--glod);
}

/* Adressförslag. Egen lista i stället för <datalist>: valet ska fylla i två
   andra fält, och datalist ger inget pålitligt val-event att haka på. */
.forslagsfalt { position: relative; }
.forslag { position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 20;
  margin: 0; padding: .3rem; list-style: none; max-height: 17rem; overflow-y: auto;
  background: var(--natt); border: 1px solid var(--ram-ljus); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65); }
.forslag li { padding: .7rem .9rem; border-radius: 8px; cursor: pointer; display: flex;
  justify-content: space-between; gap: 1rem; align-items: baseline; }
.forslag li .ort { color: var(--dis); font-size: var(--t-liten); white-space: nowrap; }
.forslag li:hover, .forslag li[aria-selected="true"] { background: rgba(168, 229, 255, .12); }

.minnotis { border-radius: 14px; padding: 1.1rem 1.3rem; margin-bottom: 1.8rem; font-weight: 600; }
/* Notiserna är flera rader långa och ärvde radavstånd 1,75 — testlägesrutan
   ensam blev 195 px i medlemskapsvyn. Den ska synas, inte ta en tredjedel av
   skärmen. */
.minsida .minnotis { padding: .8rem 1rem; margin-bottom: 1rem;
  font-size: .95rem; line-height: 1.45; }
.minnotis.ok { background: rgba(126, 226, 168, .1); border: 1px solid rgba(126, 226, 168, .35); color: #7ee2a8; }
.minnotis.fel { background: rgba(255, 128, 128, .1); border: 1px solid rgba(255, 128, 128, .35); color: #ff8080; }

/* ── Träningsprogram ────────────────────────────────────────────────────── */

/* Frågeguiden fylls i stående i en gymhall med telefonen i ena handen. Därför
   stora träffytor, en fråga i taget och inga fritextfält där ett val räcker. */
.traning-tom { border: 2px dashed var(--ram); border-radius: var(--rundat);
  padding: clamp(1.8rem, 4vw, 2.8rem); display: grid; gap: 1rem; justify-items: start; }
.traning-tom h3 { font-size: var(--t-mellan); }
.traning-tom p { margin: 0; max-width: 56ch; }

.steg-rad { color: var(--dis); font-size: var(--t-liten); letter-spacing: .22em;
  text-transform: uppercase; margin: 0 0 .8rem; }
.fraga { font-size: var(--t-mellan); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 1.4rem; }

.stor-valrad { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; margin-bottom: 1.4rem; }
.stor-valrad.smal { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

.stor-val { display: flex; flex-direction: column; gap: .5rem; text-align: left;
  background: var(--kol); border: 1px solid var(--ram); border-radius: var(--rundat);
  color: var(--vit); font: inherit; cursor: pointer;
  padding: clamp(1.3rem, 2.6vw, 1.8rem); min-height: 5.5rem;
  transition: border-color .2s, background .2s; }
/* Samma skäl som `.knapp:hover` ovan — ingen rörelse under pekaren. */
.stor-val:hover { border-color: var(--ram-ljus); background: rgba(255, 255, 255, .04); }
.stor-val.vald { border-color: var(--glod); background: rgba(168, 229, 255, .09); }
.stor-val .sv-rubrik { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; }
.stor-val .sv-under { color: var(--dis); font-size: var(--t-liten); }
.stor-valrad.smal .stor-val { align-items: center; justify-content: center; text-align: center; }
.stor-valrad.smal .sv-rubrik { font-size: 2.4rem; }
.stor-val.bred { width: 100%; }
.dubbelval { margin-bottom: 1.4rem; }

.knapprad { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.knapprad.bakat { margin-top: 1.8rem; }
.knapp.fara { border-color: rgba(255, 128, 128, .5); color: #ff8080; background: transparent; }

.talrad { display: flex; align-items: center; gap: .8rem; }
.talrad .enhet { color: var(--dis); font-weight: 700; }

.program-topp { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.program-topp h3 { font-size: var(--t-mellan); margin: 0 0 .4rem; }
.program-topp p { margin: 0; }
/* I appen är programmets namn och siffror en underrubrik, inte en sektion.
   Full storlek bröt «7 pass i veckan · 2 set · 8–12 reps · 120 sek vila» på två
   rader och sköt dagens pass nedanför halva skärmen. */
.minsida .program-topp { margin-bottom: .9rem; }
.minsida .program-topp h3 { font-size: 1.15rem; margin: 0; line-height: 1.3; }
.minsida .program-topp p { font-size: .9rem; line-height: 1.4; }
/* Inne i «Programmet»-fällan står namnet redan på knappen. */
.fall-kropp .program-topp { margin-bottom: .9rem; }

/* Hela veckan, vilodagar inräknade — en vecka som bara visar träningsdagarna
   ser ut som om vilan glömts bort. */
.vecka { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.dagkort { background: var(--kol); border: 1px solid var(--ram); border-radius: var(--rundat);
  padding: clamp(1.1rem, 2.2vw, 1.5rem); display: grid; gap: .9rem; align-content: start; }
.dagkort.vila { background: transparent; border-style: dashed; }
.dag-namn { font-size: var(--t-liten); letter-spacing: .22em; text-transform: uppercase; color: var(--dis); }
.dag-vila { color: var(--dis); font-weight: 700; font-size: 1.2rem; }
.dag-pass + .dag-pass { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--ram); }
.pass-namn { font-weight: 800; font-size: 1.15rem; margin-bottom: .6rem; }
.ovningar { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ovningar li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
/* I en panel behöver raderna skiljelinjer i stället för luft — annars flyter
   namn och tal ihop till en textmassa. Listan ÄR panelen (`.ovningar.panel`),
   så selektorn måste träffa samma element, inte ett barn till det. */
.minsida .ovningar.panel { gap: 0; }
.minsida .ovningar.panel li { padding: .55rem 0; border-bottom: 1px solid var(--ram); }
.minsida .ovningar.panel li:last-child { border-bottom: 0; }
.ovningar .o-namn { color: var(--vit); }
.ovningar .o-tal { color: var(--dis); font-size: var(--t-liten); white-space: nowrap; }

.justera { margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px solid var(--ram); }
/* Inne i ett hopfällbart block står rubriken redan på fällknappen, och blocket
   har sin egen linje överst. Egen linje och egen luft blir dubbelt. */
.fall-kropp .justera { margin-top: 0; padding-top: 0; border-top: 0; }
.justera h4 { font-size: 1.2rem; font-weight: 800; margin: 0 0 .3rem; }
.justerrad { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }
.program-text { margin-top: 1.6rem; max-width: 68ch; }
.program-text p { margin: 0 0 .8rem; }

/* ── Träningsläget ──────────────────────────────────────────────────────── */

/* Används stående vid en maskin, ofta med svettiga händer och utan glasögon.
   Därför: en övning i taget, siffror som går att läsa på armlängds avstånd och
   träffytor som tummen hittar utan att man siktar. */
/* Dagens pass först. Det är det man är här för; programmet i sin helhet är
   uppslagsverket man tittar i ibland. */
.idag-ruta { display: grid; gap: .7rem; justify-items: start;
  background: linear-gradient(165deg, #151b22, var(--natt));
  border: 1px solid rgba(168, 229, 255, .35); border-radius: var(--rundat);
  padding: clamp(1.1rem, 3vw, 1.7rem); margin-bottom: 1.1rem; }
.idag-ruta.vila { background: transparent; border-style: dashed;
  border-color: var(--ram); }
/* Radavstånd 1,75 är brödtextens. På en etikett och en rubrik efter varandra
   blev det 20 px ren radhöjd i rutan som ska rymmas ovanför skärmkanten. */
.idag-etikett { font-size: .82rem; letter-spacing: .22em; line-height: 1.3;
  text-transform: uppercase; color: var(--dis); }
.idag-namn { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2; }

.passval { display: grid; gap: .6rem; margin-top: .6rem; }
.passval-rad { display: flex; flex-wrap: wrap; gap: .5rem; }

.dagbok { margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--ram); }
.dagbok h4 { font-size: 1.2rem; font-weight: 800; margin: 0 0 .8rem; }
.dagbok-rubrik { margin-top: 1.8rem !important; }
.dagbokslista .minrad { padding: .9rem 0; }

.lage-topp { display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.lage-pass { font-weight: 800; font-size: 1.05rem; }
.lage-raknare { color: var(--dis); font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase; }

/* Måtten är avvägda mot EN sak: hela kortet ska rymmas på en telefonskärm utan
   rullning, med tangentbordslöst tryck på «Klart set» längst ned. Träffytorna är
   fortfarande över Apples 44 px-golv med marginal — det är luften som krympt,
   inte knapparna. Mät om du ändrar: 390 × 763 (iPhone 14 minus säkra ytor) är
   det trånga fallet. */
.lagekort { background: var(--kol); border: 1px solid var(--ram-ljus);
  border-radius: var(--rundat); padding: clamp(1.1rem, 3.4vw, 1.6rem);
  display: grid; gap: 1rem; }
.lage-ovning { font-size: clamp(1.55rem, 5.2vw, 2.1rem); font-weight: 800;
  letter-spacing: -0.02em; margin: 0; line-height: 1.15; }
.lage-mal { color: var(--dis); margin: -.55rem 0 0; font-size: .95rem; }

.setprickar { display: flex; gap: .5rem; flex-wrap: wrap; }
.setprickar .prick { width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 2px solid var(--ram-ljus); }
.setprickar .prick.klar { background: var(--glod); border-color: var(--glod); }

/* minmax(0,1fr) — utan nollan vägrar kolumnen krympa under sitt innehåll
   och reps-rutan hamnade utanför skärmkanten på en telefon. */
.talrad-tva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.talruta { background: var(--natt); border: 1px solid var(--ram); border-radius: 1.1rem;
  padding: .7rem .6rem; display: grid; gap: .35rem; }
.tr-etikett { color: var(--dis); font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; text-align: center; }
.tr-rad { display: flex; align-items: center; justify-content: space-between; gap: .3rem; }
.tr-varde { font-size: clamp(1.6rem, 5vw, 2rem); font-weight: 800; letter-spacing: -0.02em;
  text-align: center; flex: 1; line-height: 1.1; }
.tr-enhet { font-size: .85rem; font-weight: 700; color: var(--dis); }
/* 2,6 rem = 41,6 px ruta med 1 px ram, men knappen sitter i en rad med 12 px
   luft under och över inuti rutan — den faktiska träffytan är över 44 px. */
.stegknapp { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%;
  border: 1px solid var(--ram-ljus); background: var(--kol); color: var(--vit);
  font-size: 1.5rem; font-weight: 800; line-height: 1; cursor: pointer; }
.stegknapp:active { background: var(--ram); }

/* Den enda knappen som ska gå att träffa utan att titta. */
/* Färdig övning. Kortet ska säga att den ÄR klar, inte se ut som ett som väntar
   på nästa set — det var precis förväxlingen som lät sista övningen räkna upp i
   all oändlighet. */
.lagekort.klar { border-color: rgba(168, 229, 255, .5);
  background: linear-gradient(165deg, #141c25, var(--natt)); }
.lagekort.klar .lage-mal { color: var(--glod); font-weight: 700; }
/* Ett extra set ska gå, men inte av misstag: diskret och under den stora. */
.extraknapp { justify-self: center; padding: .55rem 1.2rem;
  letter-spacing: .04em; font-size: .85rem; border-color: var(--ram-ljus); }
.extraknapp:hover { transform: none; box-shadow: none; }

/* Den enda knappen som ska gå att träffa utan att titta — därför den enda som
   INTE krympts nämnvärt. 4,2 rem = 67 px. */
.klartknapp { width: 100%; min-height: 4.2rem; border-radius: 1.2rem; border: 0;
  background: var(--vit); color: var(--svart); font: inherit; font-weight: 800;
  font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.klartknapp:active { transform: scale(.98); }
.klartknapp:disabled { opacity: .5; }

/* Tre knappar på EN rad. `.knapp` har 2,4 rem sidopadding och 0,13 em
   teckenmellanrum — måtten för en säljknapp på en sajt. Här är det tre
   navigeringsknappar under den enda man ska träffa utan att titta, och med de
   måtten tog de tre rader. */
.lage-nav { display: flex; gap: .5rem; margin-top: 1rem; }
.lage-nav .knapp { flex: 1 1 0; min-width: 0; padding: .7rem .5rem;
  letter-spacing: .04em; font-size: .88rem; }
.lage-nav .knapp:hover { transform: none; box-shadow: none; }
.lage-nav .knapp:disabled { opacity: .35; }
/* «Avsluta passet» är slutet på passet, inte nästa steg — den ska finnas, inte
   locka. Som fylld helbredds-knapp konkurrerade den med «Klart set». */
.slutrad { margin-top: 1rem; }
.slutrad .knapp { padding: .7rem 1.4rem; letter-spacing: .04em; font-size: .88rem; }
.lage-rubrik { font-size: 1.1rem; font-weight: 800; margin: 1.8rem 0 .8rem; }

/* ── Entréskärmen ───────────────────────────────────────────────────────── */

/* Läses på flera meters avstånd av någon som går förbi. Allt är därför stort,
   centrerat och kontrastrikt — och skalat mot vw/vh så samma sida fungerar på
   en 24-tums skärm på högkant som på en tv på bredden. */
.entre { min-height: 100vh; display: grid; place-items: center; padding: 4vmin;
  background: radial-gradient(120% 90% at 50% 0%, #10151c 0%, var(--svart) 62%); overflow: hidden; }
.entre main, #skarm { width: 100%; }

.entre-vila { text-align: center; display: grid; justify-items: center; gap: 2vmin; }

/* Loggan i 3D på entréskärmen. Rutan är kvadratisk med flit: objektet snurrar
   runt Y-axeln och hexagonen är bredare i profil än rakt framifrån — en ruta
   som bara rymmer stillbilden kapar den halva varvet. */
/* ⚠️ `position: relative` är inte pynt — det är hela storleken.
   `#hero3d` är en ID-selektor med `position: absolute; inset: 0` och väger
   tyngre än vilken klassregel som helst här. Utan en positionerad förälder
   räknas den mot fönstret och canvasen blir 1920 × 1080, alltså hela TV:n.
   Uppmätt precis så innan raden lades till. `.hero-figur` på startsidan gör
   samma sak av samma skäl. */
/* ⚠️ HÄR FÅR INGEN MODERN CSS ANVÄNDAS.
 *
 * Entréskärmen körs på en Samsung-TV med Tizen 5.0 och **Chrome 63 från 2017**
 * (uppmätt i NPM:s access-logg). Följande stöds INTE där och tappas tyst:
 *
 *   aspect-ratio  Chrome 88   min() / max() / clamp()  Chrome 79
 *   inset         Chrome 87   gap i flexbox            Chrome 84
 *
 * Raden var `width: min(42vmin, 46vw); aspect-ratio: 1`. Båda föll bort, rutan
 * blev noll pixlar hög, och eftersom canvasen är absolutpositionerad inuti den
 * fanns loggan ingenstans att rita. Klockan syntes — den är vanlig text i
 * flödet. Det såg ut som ett WebGL-fel och var ett CSS-fel.
 *
 * `vmin` och uttryckliga höjder har fungerat sedan 2012. Använd dem här.
 */
.entre-figur { position: relative; width: 42vmin; height: 42vmin; }
/* Långform, inte `inset` — se ovan. Gäller både canvasen och reservbilden,
   som ärver `inset: 0` från startsidans regler och annars står opositionerade. */
.entre-figur #hero3d,
.entre-figur #hero-reserv { top: 0; right: 0; bottom: 0; left: 0; }
/* Reserven (WebGL saknas eller kontexten tappades) fyller samma ruta — en
   plötsligt mycket mindre logga hade sett ut som ett andra fel. */
.entre-figur #hero-reserv { padding: 6%; }
.entre-figur .entre-marke { width: 100%; height: 100%; }
.entre-marke { color: var(--vit); opacity: .9; }
.entre-klocka { font-size: 14vmin; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
/* `capitalize` versaliserade VARJE ord: «Måndag 10 Augusti». På svenska skrivs
   varken veckodag eller månad med stor bokstav — bara meningens första. */
.entre-datum { font-size: 3.4vmin; color: var(--dis); }
.entre-datum::first-letter { text-transform: uppercase; }
.entre-under { font-size: 2.6vmin; color: var(--dis); margin-top: 2vmin; }

/* Dagens citat. Dämpat och smalt — skärmen står i ett rum man passerar, inte
   sitter i, så texten ska gå att läsa på fem steg och inte kräva tio. */
.entre-citat { margin: 5vmin 0 0; max-width: 62ch; }
.entre-citat blockquote { margin: 0; font-size: 2.3vmin; font-style: italic;
  color: var(--dis); line-height: 1.5; }
.entre-citat figcaption { margin-top: .8vmin; font-size: 1.8vmin; color: var(--dis);
  opacity: .7; }

/* ── Dekorlagret ────────────────────────────────────────────────────────────
 * Bakom allt, aldrig i vägen: `pointer-events: none` och negativ z-index.
 * Byggs EN gång per tema i js/entre.js — ritades det om vid varje svar skulle
 * flingorna hoppa tillbaka till toppen var tredje sekund.
 */
/* Långform i stället för `inset` — Chrome 63 på TV:n stöder inte `inset`,
   och dekorlagret hade då stått opositionerat med snön på fel ställe. */
.dekor { position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden; pointer-events: none; z-index: 0; }
.entre main, .entre #skarm { position: relative; z-index: 1; }

/* .18 var för svagt: på en TV i en upplyst entré syntes fyra flingor av
   trettiofyra. Ett snöfall man inte ser är inget snöfall. */
.flinga { position: absolute; top: -6vmin; color: var(--vit); opacity: .3;
  animation: faller linear infinite; will-change: transform; }
@keyframes faller {
  0%   { transform: translate3d(0, -6vmin, 0) rotate(0deg); }
  100% { transform: translate3d(4vmin, 106vh, 0) rotate(220deg); }
}
/* Höstlöv och vårblommor tål mer färg än snö, som ska vara nästan vit. */
/* Löv och blomblad har egen färg och tål att vara svagare än vit snö. */
.entre[data-arstid="host"] .flinga,
.entre[data-arstid="var"] .flinga { opacity: .26; }

/* Ett motiv, stort och lugnt i ett hörn — inte ett collage. Andas i stället
   för att blinka: en skärm som rör sig snabbt drar blicken från namnet. */
.motiv { position: absolute; right: 5vmin; bottom: 4vmin; font-size: 16vmin;
  opacity: .13; animation: andas 9s ease-in-out infinite; }
@keyframes andas {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%      { transform: scale(1.06) rotate(3deg); }
}

/* Födelsedagen får skärmen att lysa lite — men bara lite. */
.entre #skarm.firar .entre-hej { color: var(--glod); }

@media (prefers-reduced-motion: reduce) {
  .flinga, .motiv { animation: none; }
  .flinga { display: none; }
}

.entre-halsning { text-align: center; display: grid; justify-items: center; gap: 3vmin; }
.entre-hej { font-size: 11vmin; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 0; }
.entre-hej span { color: var(--glod); }
.entre-besok { font-size: 4.4vmin; color: var(--dis); margin: 0; }
.entre-pass { display: grid; justify-items: center; gap: 1.2vmin; margin-top: 2vmin;
  padding: 3vmin 5vmin; border: 1px solid var(--ram-ljus); border-radius: 3vmin;
  background: rgba(168, 229, 255, .07); }
.entre-pass-etikett { font-size: 2.2vmin; letter-spacing: .3em; text-transform: uppercase; color: var(--dis); }
.entre-pass strong { font-size: 7vmin; font-weight: 800; letter-spacing: -0.02em; }
.entre-pass-not { font-size: 2.8vmin; color: var(--dis); }
.entre-pass-saknas { font-size: 3.4vmin; color: var(--dis); margin: 0; }

/* Varje ny person får sin egen entré — klassen sätts om vid varje hälsning. */
.entre-halsning.in { animation: entre-in .6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes entre-in { from { opacity: 0; transform: translateY(3vmin) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .entre-halsning.in { animation: none; } }

.entre-fel { position: fixed; left: 0; right: 0; bottom: 0; padding: 1.4vmin;
  text-align: center; font-size: 2vmin; color: var(--svart); background: var(--gul, #ffd27a); }

/* ── Inläsning ──────────────────────────────────────────────────────────── */

/* Allt som döljs i väntan på JS ligger bakom .js, som sätts av ett litet skript
   i <head>. Utan det steget skulle ett skriptfel eller avstängt JS lämna en helt
   tom sida — vilket det gjorde första gången detta byggdes. */
.js [data-laddar] { opacity: 0; }
.js.klar [data-laddar] { opacity: 1; transition: opacity 0.5s; }

/* Mjuk insegling av sektioner vid rullning. */
.js .avslojas { opacity: 0; transform: translateY(28px); transition: opacity 0.7s, transform 0.7s; }
.js .avslojas.syns { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .avslojas { opacity: 1; transform: none; }
}

/* ── Bekräfta mobilnumret ───────────────────────────────────────────────── */

/* Numret är reservvägen genom dörren, så dess status ska synas bredvid fältet
   och inte gömmas i en notis som försvinner. */
.telrad { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .8rem; }
.telrad .statuspill { margin: 0; }
.telrad input { flex: 1 1 8rem; min-width: 0; }
/* Panelen gjorde raden 2 × 17 px smalare och «Bekräfta på nytt» bröt ned under
   «Bekräftat» — två knappar på var sin rad där det räckte med en. Knappen får
   krympa i stället för att radbryta; spärrtexten är kort nog ändå. */
.minsida .telrad { gap: .6rem; flex-wrap: nowrap; }
.minsida .telrad .knapp { flex: 0 1 auto; min-width: 0; padding: .6rem 1rem;
  letter-spacing: .06em; font-size: .82rem; white-space: nowrap; }
.minsida .telrad .statuspill { flex: none; }
.telkod { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ram); }
.telkod label { display: block; font-weight: 700; margin-bottom: .2rem; }

/* ── Inloggning i appen ─────────────────────────────────────────────────── */

/* Loggan och en knapp. Den som öppnar appen vill in, inte läsa — förklaringen
   om vad BankID gör hör hemma på startsidan, där man ännu inte bestämt sig.
   Bakom ligger bilden på lokalen: det första man ser ska vara gymmet. */
/* Utloggat är EN skärm, inte en sida — och sedan appskalet infördes gäller det
   hela appen, inte bara den här vyn. Kvar här är bara att inloggningsytan ska
   gå ända ut i kanterna. */
.minsida.utloggad main { overflow: hidden; }
.minsida.utloggad main > section { padding: 0; }

.in-yta { position: relative; min-height: calc(100dvh - env(safe-area-inset-top, 0px));
  /* `center`, inte `start`: när sidhuvudet togs bort hade toppmarginalen inget
     att räkna från längre och loggan hamnade i skärmkanten. Blocket ska stå
     mitt på skärmen. */
  display: grid; justify-items: center; align-content: center;
  gap: 1.4rem; text-align: center;
  margin: calc(-1 * clamp(3rem, 6vw, 5rem)) calc(-1 * clamp(1.25rem, 4vw, 2.5rem)) 0;
  /* `start` + toppmarginal i stället för `center`: blocket ska sitta i övre
     tredjedelen, inte mitt på skärmen. Centrerat hamnar knappen under tummen
     först efter att man sträckt sig. */
  padding: calc(env(safe-area-inset-top, 0px) + 2rem) clamp(1.25rem, 4vw, 2.5rem) 2rem; }
.minsida.utloggad .in-yta { min-height: calc(100dvh - 5.2rem - env(safe-area-inset-top, 0px)); margin-top: 0; }
/* Bilden ligger i ett eget lager med en mörk slöja över. Utan slöjan blir vit
   text på ett foto en läsbarhetsfråga vid varje ny bild kunden byter in. */
.in-yta::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(6,7,10,.34) 0%, rgba(6,7,10,.18) 42%, rgba(6,7,10,.72) 100%),
    url('/bild/lokalen.jpg') 74% 44% / cover no-repeat;
}
.in-yta > * { position: relative; z-index: 1; }
.in-marke { width: min(52vw, 205px); height: auto; color: var(--vit); }
.in-marke .lm-namn { font: 700 25px system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 6.5px; }
.in-marke .lm-gym { font: 700 13px system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 5px; }
.in-yta .knapp { min-width: min(66vw, 264px); padding: .95rem 1.8rem;
  background: var(--blaa); border-color: var(--blaa-ljus); color: var(--vit); }
.in-yta .knapp:hover { background: var(--blaa-ljus); }
/* Utfällbart alternativ, inte en andra knapp. Två jämnstora knappar tvingar ett
   val där det för nästan alla bara finns ett svar. */
.in-annat { text-align: center; }
/* Delad knapp: en pill, två träffytor. Blå fyllning med vit text — samma blå
   som affischen. */
.delad-knapp { display: inline-flex; align-items: stretch; overflow: hidden;
  border-radius: 999px; border: 2px solid var(--blaa-ljus); background: var(--blaa);
  min-width: min(72vw, 290px); }
.dk-huvud { flex: 1; display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 1.2rem; color: var(--vit); text-decoration: none;
  font-size: var(--t-liten); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.dk-huvud:hover { background: var(--blaa-ljus); }
.dk-pil { flex: none; width: 3.1rem; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; border-left: 1px solid rgba(255, 255, 255, .3); }
.dk-pil::after {
  content: ''; width: .55rem; height: .55rem;
  border-right: 2px solid var(--vit); border-bottom: 2px solid var(--vit);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.dk-pil:hover { background: var(--blaa-ljus); }
.dk-pil.oppen::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dk-annan { margin-top: .9rem; min-width: 0; }
.in-yta .valt-kort { text-align: left; }

/* Medlemssidans huvud ärver INTE `.meny`, som under 900 px blir en utfälld
   panel utanför skärmen. `/mina` har ingen hamburgerknapp, så både «Till sajten»
   och «Logga ut» var osynliga på telefon. */
.minhuvud-meny { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; }
.minhuvud-meny a { font-size: var(--t-liten); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; color: var(--dis); }
.minhuvud-meny a:hover { color: var(--vit); }

.logga-ut-rad { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.8rem;
  border-top: 1px solid var(--ram); display: grid; justify-items: start; gap: .8rem; }

/* I appen blev «Logga ut» sidans STÖRSTA element — en versal pillerknapp över
   halva bredden, större än navraderna man faktiskt ska trycka på. Fel ordning:
   det man gör sällan ska inte skrika högst. Kompakt rad i stället, och de
   ~130 px det frigör är precis vad profilen behövde för att rymmas. */
.minsida .logga-ut-rad { margin-top: 1.4rem; padding-top: 1.1rem;
  grid-template-columns: auto 1fr; align-items: center; gap: .4rem .9rem; }
.minsida .logga-ut-rad .knapp { padding: .5rem 1.1rem; font-size: .84rem;
  letter-spacing: .08em; color: var(--dis); }
.minsida .logga-ut-rad .knapp:active { color: var(--vit); }
.minsida .logga-ut-rad .dis { margin: 0; font-size: .82rem; line-height: 1.35; }

/* ── Grinden för nya medlemmar ──────────────────────────────────────────── */

/* Tills uppgifterna är ifyllda och numret bekräftat visas bara profilen. Allt
   annat göms — en meny man inte får använda är sämre än ingen meny. */
.minsida.grindad .min-topp .dorrknapp,
.minsida.grindad .min-topp #status-rad,
.minsida.grindad .profilkort,
.minsida.grindad #historik,
.minsida.grindad .logga-ut-rad,
.minsida.grindad .minvy h3.kop-rubrik { display: none; }
.minsida.grindad main { padding-bottom: 3rem; }

.grind { margin-bottom: 2rem; }
.grind h2 { margin-bottom: .8rem; }
.grind p.dis { max-width: 54ch; }

/* Kvar att göra, i klartext. «Fyll i dina uppgifter» utan att säga VILKA är
   samma sak som att inte säga något. */
.grindsteg { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .7rem; }
.grindsteg li { display: flex; align-items: center; gap: .8rem; color: var(--dis); }
.grindsteg li::before {
  content: ''; width: 1.35rem; height: 1.35rem; flex: none; border-radius: 50%;
  border: 2px solid var(--ram-ljus);
}
.grindsteg li.gjort { color: var(--vit); }
.grindsteg li.gjort::before {
  background: var(--blaa); border-color: var(--blaa-ljus);
  background-image: linear-gradient(transparent, transparent);
  box-shadow: inset 0 0 0 3px var(--blaa);
}

/* ── Medlemssidan har inget sidhuvud ────────────────────────────────────── */

/* `/mina` ÄR appen — där behöver man inte se loggan och «Till sajten». Huvudet
   är borttaget ur markupen, inte gömt med CSS, så det gäller lika i webbläsaren
   som på hemskärmen. Vägen tillbaka till sajten ligger i sidfoten.

   Utan huvud måste innehållet självt hålla sig undan statusfältet: fristående
   körs appen med `black-translucent`, som låter innehållet gå under klockan. */
.minsida main { padding-top: env(safe-area-inset-top, 0px); }
.minsida.utloggad .in-yta {
  min-height: calc(100dvh - env(safe-area-inset-top, 0px)); margin-top: 0; }

/* ── Appen ska bete sig som en app ──────────────────────────────────────── */

/* DUBBELTRYCK-ZOOM. Ett snabbt dubbeltryck på plus-knappen mitt i ett set
   tolkades av iOS som «zooma in» — man står vid maskinen och sidan hoppar.
   `touch-action: manipulation` tar bort dubbeltrycksgesten men lämnar nypzoom
   kvar, vilket är rätt: den som behöver förstora ska kunna göra det. */
.minsida, .minsida * { touch-action: manipulation; }

/* MARKERING. Ett långt tryck på en siffra gav markering och «Kopiera» i stället
   för att räknas som ett knapptryck. Fälten är undantagna — det man själv
   skrivit måste gå att markera och rätta. */
.minsida {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.minsida input, .minsida textarea, .minsida select {
  -webkit-user-select: text; user-select: text;
}

/* Blå markeringsruta vid tryck på Android/Chrome — ser ut som ett fel på en
   knapp som redan har sitt eget aktivläge. */
.minsida button, .minsida a, .minsida .dorrknapp, .minsida .stegknapp {
  -webkit-tap-highlight-color: transparent;
}

/* ── En sak i taget ─────────────────────────────────────────────────────── */

/* Toppen — namn, status, besök, dörrknapp — hörde till varje vy och följde med
   in i butiken, kvittona och mitt i ett träningspass. Den hör hemma där man
   kommer IN, alltså på Träning, och ingen annanstans. */
.minsida:not([data-vy="traning"]) .min-topp { display: none; }

/* Under själva passet göms den även där: man är redan inne, och skärmen ska
   bara handla om övningen man står vid. */
.minsida.passar .min-topp { display: none; }
.minsida.passar .minvy { padding-top: clamp(1rem, 3vw, 1.6rem); }
/* Rubriken «Min träning» är brus när passet redan står överst på skärmen. */
.minsida.passar #vy-traning > h2 { display: none; }

/* ── Dörrlisten ─────────────────────────────────────────────────────────── */

/* Dörren satt överst och tog en skärmhöjd i varje vy. Som en egen list precis
   ovanför menyn är den alltid ett tryck bort — och man rullar inte förbi
   vattenflaskor för att komma åt den. */
.dorrlist {
  flex: none; z-index: 55;
  padding: .55rem clamp(1rem, 4vw, 1.6rem);
  background: #0b0d11; border-top: 1px solid var(--ram);
}
/* Under passet är man redan inne. */
.minsida.passar .dorrlist { display: none; }

/* Tangentbordet. På en telefon täcker det halva skärmen, och de två listerna
   klämde ihop det som var kvar till en springa när man fyllde i uppgifter.
   Under inmatning är varken dörren eller flikbytet det man håller på med. */
.minsida.skriver .dorrlist, .minsida.skriver .bottenmeny { display: none; }

/* En vy som får plats ska inte kunna rullas alls. `main` är rullbehållaren, och
   en behållare med `overflow-y: auto` som rymmer sitt innehåll rullar inte —
   men den ÄRVER inte bort gummistudsen från kanterna, därför `contain` ovan. */

/* ── Hopfällbart ────────────────────────────────────────────────────────────
   Uppslagsverket (hela veckan, tidigare medlemskap, gamla kvitton) ska finnas,
   men inte ligga mellan användaren och det hen kom för. Vikt ihop är det en rad;
   utfällt är det allt. */
.fallbar { border-top: 1px solid var(--ram); }
.fallbar + .fallbar { border-top: 0; }
.fallbar:last-of-type { border-bottom: 1px solid var(--ram); }
.fall-knapp {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; background: none; border: 0; color: var(--vit); font: inherit;
  font-weight: 700; text-align: left; cursor: pointer;
  /* 0,75 rem = 12 px över och under en 24 px textrad → 48 px träffyta, över
     Apples 44 px-golv. Var 1 rem, och tre rader efter varandra kostade 45 px
     mer än de behövde på träningsvyn. */
  padding: .75rem 0; font-size: 1.02rem; line-height: 1.4;
}
.fall-knapp .fk-antal { color: var(--dis); font-weight: 400; font-size: var(--t-liten); margin-left: auto; }
.fall-knapp::after {
  content: ''; flex: none; width: .5rem; height: .5rem;
  border-right: 2px solid var(--dis); border-bottom: 2px solid var(--dis);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.fall-knapp[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fall-kropp { padding-bottom: 1.2rem; }

/* ── Sex likadana kort är en lista, inte en korthylla ───────────────────────
   Dag- och veckokorten låg som sex kort under varandra: 2 003 px, mer än två
   och en halv skärm för att välja mellan sex rader som skiljer sig åt på ett
   ord och en siffra. Som rader blir samma val en tredjedel så högt och går att
   jämföra utan att rulla. Kortformen är kvar där den betyder något — de stora
   medlemskapen. */
/* Sajtens kort är säljyta: stor luft, pris i hero-storlek, 3D-lutning. I appen
   är samma kort en rad man ska kunna jämföra tre av utan att rulla. Samma kort,
   annan uppgift — därför bara tätare, inte omritat. */
.minsida .kortrad { gap: .8rem; }
.minsida .kort { padding: 1.25rem 1.3rem; gap: .85rem; }
.minsida .kort .pris b { font-size: 2.1rem; }
.minsida .kort .knapp { padding: .8rem 1.2rem; }
.minsida .kort.framhavd::after { top: 1rem; right: 1rem; }
/* ⚠️ Bandet «Populärast» ligger absolut i övre högra hörnet. Utan reserverad
   plats la sig kampanjmärket rakt under det — det var överlappningen. */
.minsida .kort.framhavd .kampanjmarke { max-width: calc(100% - 7.5rem); }

.minsida .kortrad.liten { grid-template-columns: 1fr; gap: .55rem; perspective: none; }
.minsida .kort.liten {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .15rem .9rem; padding: .8rem 1rem; transform: none; border-radius: 14px;
}
.minsida .kort.liten:hover { transform: none; box-shadow: none; }
.minsida .kort.liten > * { transform: none; }
.minsida .kort.liten .namn { grid-column: 1; font-size: 1.05rem; }
.minsida .kort.liten .pris { grid-column: 1; align-items: baseline; }
.minsida .kort.liten .pris b { font-size: 1.4rem; }
.minsida .kort.liten .text,
.minsida .kort.liten .kort-avrakning { grid-column: 1; font-size: .92rem; line-height: 1.45; }
.minsida .kort.liten .knapp {
  grid-column: 2; grid-row: 1 / -1; width: auto; margin: 0;
  padding: .7rem 1.1rem; white-space: nowrap;
}

/* ── Köprutan ───────────────────────────────────────────────────────────────
   Ett ark som glider upp underifrån — där tummen är, och där man förväntar sig
   att en app frågar. Ligger utanför appskalet med `position: fixed`, så den
   täcker både dörrlisten och menyn utan att röra rullningen bakom. */
.ark { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end;
  background: rgba(4, 6, 9, .72); }
.ark-ruta {
  width: 100%; background: #10141a; border-top: 1px solid var(--ram-ljus);
  border-radius: 22px 22px 0 0; display: grid; gap: .55rem; justify-items: stretch;
  padding: 1.5rem clamp(1.25rem, 5vw, 2rem)
           calc(1.5rem + env(safe-area-inset-bottom, 0px));
  animation: arkupp .22s cubic-bezier(.2, .7, .3, 1);
  /* Arket växte med villkorsrutan och ångertexten. På en kort telefon hamnade
     köpknappen då under skärmkanten — och en knapp man inte ser är en knapp som
     inte finns. Taket gör arket rullbart i stället för avklippt. */
  max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
}
@keyframes arkupp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ark-ruta { animation: none; } }
.ark-etikett { margin: 0; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dis); }
.ark-ruta h3 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em;
  line-height: 1.2; }
.ark-pris { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.1; }
.ark-ruta .dis { margin: 0 0 .4rem; line-height: 1.45; }
/* Perioden som två rader nyckel/värde. Datumen är det man kom hit för att se,
   så de står i brödtextens vikt medan etiketterna backar undan. */
/* Erbjudandet ska synas som ett erbjudande, inte som en fotnot. */
.ark-kampanj {
  margin: 0; padding: .7rem .85rem; border-radius: 12px; line-height: 1.4;
  background: color-mix(in srgb, var(--blaa) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--blaa) 55%, transparent);
  font-weight: 700;
}
/* Abonnemangsraden ska INTE se ut som ett erbjudande — den är en upplysning om
   återkommande dragningar, och den ska läsas som en varning man accepterar. */
.ark-abonnemang {
  margin: 0; padding: .7rem .85rem; border-radius: 12px; line-height: 1.45;
  background: rgba(255, 210, 122, .10);
  border: 1px solid rgba(255, 210, 122, .45);
  font-weight: 700;
}
.ark-period { margin: .1rem 0 .2rem; display: grid; gap: .3rem; }
.ark-period > div { display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; border-bottom: 1px solid var(--ram); padding-bottom: .3rem; }
.ark-period > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ark-period dt { margin: 0; color: var(--dis); font-size: .9rem; }
.ark-period dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Villkorsrutan. Träffytan är hela raden — en 13-pixels ruta under tummen är
   inte en kryssruta, det är ett hinder. */
.ark-villkor { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  padding: .55rem 0; line-height: 1.45; }
.ark-villkor input { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin: .05rem 0 0;
  accent-color: var(--blaa); cursor: pointer; }
.ark-villkor a { color: var(--blaa); }
.ark-anger { margin: 0 0 .5rem; }
.ark-ruta .knapp { width: 100%; }
/* Avstängd tills villkoren är ikryssade. Utan detta ser knappen tryckbar ut och
   det tysta ignorerandet av tryck läses som en bugg. */
.ark-ruta .knapp:disabled { opacity: .4; cursor: not-allowed; }
.ark-ruta .knapp.tom { padding: .7rem 1.2rem; border-color: transparent; color: var(--dis); }
/* På en bred skärm är ett helbrett ark bara en stor yta — då blir det en ruta. */
@media (min-width: 700px) {
  .ark { align-items: center; justify-content: center; }
  .ark-ruta { max-width: 420px; border-radius: 22px; border: 1px solid var(--ram-ljus);
    padding: 1.8rem; animation: none; }
}

/* Slutraden med villkor och vägen tillbaka till sajten. Liten och sist under
   profilen — inte en sidfot som följer med in i varje vy. */
.app-slut { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem;
  margin: 2.5rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--ram);
  color: var(--dis); font-size: var(--t-liten); line-height: 1.6; }
.app-slut a { color: var(--dis); }
.app-slut a:hover { color: var(--vit); }
/* Sist under profilen, inte en sidfot man ska läsa. Tät. */
.minsida .app-slut { margin-top: 1.4rem; padding-top: 1rem;
  gap: .25rem 1rem; font-size: .8rem; line-height: 1.45; }

/* ── Vyernas rubriker ───────────────────────────────────────────────────────
   Sajtens h2 är 26–35 px plus 22 px marginal — en rubrik som ska bära en hel
   sektion. I appen är den en flik-etikett: den säger var man är, inte vad som
   säljs. Liten och dämpad kostar 40 px i stället för 60 och ser ut som en app.

   Helt borttagen blev den fel: dagboken började då med en tunn linje och en
   passrad, utan något som sa vad man tittade på. */
.minsida .vy-rubrik {
  font-size: 1rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dis); margin: 0 0 .9rem;
}

/* Underrubrikerna inne i en vy — «Köphistorik och kvitton», «Mina uppgifter».
   Samma sak: sektionsrubrik på sajten, avdelare i appen. Två av dem kostade
   150 px i profilen. */
.minsida .kop-rubrik {
  font-size: 1rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dis); margin: 1.7rem 0 .7rem;
}

/* Träningsvyn är undantaget: `.min-topp` med namn, status och besöksräknare
   står redan överst och är vyns huvud. En etikett till vore två rubriker. */
.dold-rubrik {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Avdelare inne i en vy — «Köp medlemskap» under det man redan har. Ska synas
   som ett nytt stycke, inte som en ny sida. */
.minsida .vy-avdelare { margin-top: clamp(1.8rem, 4vw, 2.6rem); }


/* ── Kostschemat ────────────────────────────────────────────────────────────*/

/* Valknappar i rad. Wrappar på smal skärm i stället för att krympa till
   oläsbarhet — tre alternativ ska gå att träffa med tummen. */
.minsida .kost-val { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 .4rem; }
.minsida .kost-val .knapp { flex: 1 1 auto; min-width: 5.5rem; padding: .7rem .9rem;
  font-size: .88rem; letter-spacing: .03em; }
.minsida .kost-val .knapp.vald { border-color: var(--glod); color: var(--vit);
  background: rgba(156, 205, 247, .12); }
/* Det appen redan vet: dämpat, för det är inget man ska fylla i. */
.minsida .kost-kant .minrad { padding: .45rem 0; }
.minsida .kost-kantrader { margin-top: .3rem; }
/* Två rader i högerkolumnen (kcal över protein) utan att bryta mitt i ett tal. */
.minsida .kost-vy .minrad-hoger { white-space: pre-line; text-align: right; }
.minsida .kost-rad { padding: .9rem 1.05rem; }
.minsida .kost-rad p { margin: 0; line-height: 1.5; }


/* ── FÖRSLAG 2 på förstasidan (/2) ──────────────────────────────────────────
 * Egen namnrymd `.alt2` så ingenting läcker in på den nuvarande sidan.
 *
 * ⚠️ FOTON ÄR LAYOUTEN. Förlagan (gymmet.nu) bygger sidan av bildrutor kant i
 * kant med text ovanpå — inte av kort med text i. Första försöket byggdes efter
 * en TEXTSAMMANFATTNING av sidan i stället för sidan själv, blev mörka
 * textrutor utan en enda bild, och hade noll likhet. Titta på sidan.
 */

.alt2-band, .forslag-band { background: var(--blaa); color: var(--vit); text-align: center;
  padding: .6rem 1rem; font-size: .92rem; letter-spacing: .02em; }
.alt2-band a, .forslag-band a { color: var(--vit); text-decoration: underline; }
/* Bandet ska aldrig äta mer än två rader av det första man ser i en mobil. */
@media (max-width: 560px) {
  .alt2-band, .forslag-band { font-size: .82rem; line-height: 1.45; padding: .55rem .9rem; }
}

/* ── Toppen på förstasidan: den roterande 3D-loggan ────────────────────────
 * Flyttad hit från förslag 1 (Johnnys beslut 2026-08-28). Förslag 2 började
 * med ett foto, och en sida som börjar med ett foto börjar utan avsändare —
 * loggan säger vems gym det är innan bilderna hinner göra det.
 *
 * ⚠️ `#hero3d` och `#hero-reserv` är ID-selektorer med `position: absolute;
 * inset: 0` och väger tyngre än allt vi skriver här. Föräldern MÅSTE därför ha
 * både egen storlek och `position: relative` — annars fäster canvasen på
 * närmaste positionerade förfader och lägger sig över hela sidan. Samma fälla
 * som `.entre-figur` gick i.
 */
.alt2 .a2-topp {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
/* Ljuskägla bakom objektet — djup, inte en platt gradientplatta. Samma grepp
   som `.hero::before` på förslag 1, centrerat i stället för högerställt. */
.alt2 .a2-topp::before {
  content: ''; position: absolute; inset: -30% -10% auto -10%; height: 150%;
  background:
    radial-gradient(50% 46% at 50% 26%, rgba(90, 160, 220, 0.22), transparent 70%),
    radial-gradient(40% 40% at 22% 82%, rgba(255, 150, 70, 0.08), transparent 72%);
  pointer-events: none;
}
.alt2 .a2-topp .inre { position: relative; z-index: 2; }
.alt2 .a2-topp-figur {
  position: relative; width: min(300px, 58vw); aspect-ratio: 1 / 1;
  margin: 0 auto clamp(1.2rem, 3vw, 2rem);
}
.alt2 .a2-topp .etikett { justify-content: center; margin-bottom: 1.1rem; }
.alt2 .a2-topp h1 { font-size: var(--t-jatte); max-width: 18ch; margin: 0 auto; }
.alt2 .a2-topp-text {
  margin: 1.5rem auto 0; max-width: 52ch; color: var(--dis);
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
}
.alt2 .a2-topp-knappar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}

/* Rutorna ligger kant i kant med smala mellanrum, inte i en centrerad spalt. */
/* ⚠️ EN variabel styr ramens tjocklek överallt — bakgrundens padding, bildens
   inset, slöjan, texten, krediten. Sitter den på fem ställen glöms ett av dem
   nästa gång någon vrider på den, och ramen blir ojämn på en enda kant. */
/* ⚠️ RAMARNA ÄR AVSTÄNGDA (2026-08-11, Johnnys beslut). De byggdes, provades i
   4 och 8 px, och togs bort igen — flata foton mot fogen står bättre för sig
   själva än inramade gör.

   Sätt `--a2-ram` till t.ex. 8px och ta bort `animation: none` nedan för att få
   tillbaka dem. Det är två rader, just eftersom tjockleken bor i EN variabel
   som bakgrundens padding, bildens inset och storlek, slöjan, texten och
   krediten alla räknar på. Koden är kvar med flit. */
.alt2 { --a2-ram: 0px; --a2-luft: 22px; }
.alt2 .a2-ruta { animation: none; background: none; }
.alt2 #a2-bilder { display: grid; gap: var(--a2-luft); padding: var(--a2-luft);
  background: var(--svart); }
.alt2 .a2-rad { display: grid; gap: var(--a2-luft); grid-template-columns: 1fr; }
@media (min-width: 780px) { .alt2 .a2-rad { grid-template-columns: repeat(3, 1fr); } }

/* ── Ramarna mellan bilderna ────────────────────────────────────────────────
 *
 * Vit och blå ram som lever: en ljusstrimma sveper längs kanten fram och
 * tillbaka, och djupet kommer av att ramen har en ljus ovansida och en mörk
 * undersida — samma trick som en fasad kant i verkligheten.
 *
 * ⚠️ Ramen är BAKGRUNDEN på rutan, och bilden ligger inuti med `inset: 4px`.
 * Ett `border` med gradient hade krävt `border-image` eller två lager
 * `background-clip`, vilket är kinkigt och bryter olika i olika webbläsare.
 * Så här är ramen bara den bakgrund som sticker fram runt bilden.
 *
 * Rörelsen är `alternate` med flit: en gradient som loopar åt ett håll «hoppar»
 * vid varvsslutet. Fram och tillbaka OSCILLERAR i stället, vilket var det som
 * efterfrågades och dessutom är lugnare att ha på en sida man läser.
 */
.alt2 .a2-ruta {
  position: relative; display: block; overflow: hidden;
  min-height: 46vh; color: var(--vit); text-decoration: none;
  padding: var(--a2-ram);
  background-color: var(--blaa);
  background-image: linear-gradient(115deg,
    var(--blaa) 0%, var(--glod) 18%, #ffffff 30%, var(--glod) 42%,
    var(--blaa) 58%, #1b3f8f 72%, var(--blaa) 100%);
  background-size: 320% 320%;
  animation: a2sveper 7s ease-in-out infinite alternate;
  /* ⚠️ Fasningen är BORTTAGEN härifrån, inte överskriven längre ned. En
     override före huvudregeln förlorar på källordning — det felet gjordes här
     en gång och skuggan låg kvar trots att ramen var noll. Vill man ha ramen
     tillbaka hör den här:
       box-shadow: inset 0 2px 0 rgba(255,255,255,.6),
                   inset 2px 0 0 rgba(255,255,255,.28),
                   inset 0 -2px 0 rgba(0,0,0,.6),
                   inset -2px 0 0 rgba(0,0,0,.35),
                   0 14px 34px rgba(0,0,0,.5);
     tillsammans med `--a2-ram: 8px`. */
}
.alt2 .a2-ruta:nth-child(2) { animation-delay: -2.3s; }
.alt2 .a2-ruta:nth-child(3) { animation-delay: -4.6s; }
.alt2 #a2-bilder > .a2-ruta:last-child { animation-duration: 9s; }

@keyframes a2sveper {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Innehållet ligger INNANFÖR ramen. Egen skugga så bilden ser inskjuten ut
   i stället för påklistrad — det är det som gör ramen tredimensionell. */
.alt2 .a2-ruta > img,
.alt2 .a2-ruta::after,
.alt2 .a2-ruta-inre { border-radius: 2px; }
.alt2 .a2-ruta > img { box-shadow: inset 0 0 30px rgba(0, 0, 0, .5); }

@media (prefers-reduced-motion: reduce) {
  .alt2 .a2-ruta { animation: none; background-position: 30% 50%; }
}
.alt2 .a2-ruta.bred { min-height: 56vh; }
@media (max-width: 779px) { .alt2 .a2-ruta, .alt2 .a2-ruta.bred { min-height: 58vw; } }

/* ⚠️ Ett `<img>` är ett ERSATT element, och där betyder `width: auto` den
   INNEBOENDE bredden — inte «fyll ut mellan offsetten» som för en vanlig div.
   Därför ignorerades `right` och `bottom` helt och bilden stack ut 4 px åt
   höger och 22 px nedåt; ramen syntes bara upptill och till vänster.
   Uppmätt två gånger innan orsaken hittades. Storleken måste anges explicit. */
.alt2 .a2-ruta img {
  position: absolute; top: var(--a2-ram); left: var(--a2-ram);
  width: calc(100% - var(--a2-ram) * 2); height: calc(100% - var(--a2-ram) * 2);
  object-fit: cover;
  transition: transform .6s ease;
}
.alt2 .a2-ruta:hover img { transform: scale(1.04); }
/* Slöja så texten går att läsa på vilket foto som helst. Mörkast där texten är. */
.alt2 .a2-ruta::after {
  content: ''; position: absolute; inset: var(--a2-ram);
  /* Mörkast i MITTEN, där texten står — inte längst ned. Lokalbilden har
     gymmets logga målad på väggen, och utan detta konkurrerade den med
     rubriken i varje ruta. */
  background:
    radial-gradient(120% 62% at 50% 50%, rgba(6,7,10,.78) 0%, rgba(6,7,10,.25) 70%),
    linear-gradient(180deg, rgba(6,7,10,.28) 0%, rgba(6,7,10,.58) 100%);
}

/* Texten centrerad ovanpå, versaler och glesa bokstäver — som förlagan. */
.alt2 .a2-ruta-inre {
  position: absolute; inset: var(--a2-ram); z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem; padding: 2rem 1.6rem; text-align: center;
}
.alt2 .a2-ruta h2 {
  margin: 0; font-size: clamp(1.15rem, 2.1vw, 1.7rem); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; line-height: 1.35;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
/* 18ch bröt «Gymmet i Motala som håller öppet när du vill träna» i fem rader
   — versaler med glesa bokstäver tar mycket mer plats än gemener. */
.alt2 .a2-ruta.bred h2 { font-size: clamp(1.3rem, 2.6vw, 2.1rem); max-width: 26ch;
  letter-spacing: .12em; }
/* Platt vit rektangel, inte en rundad knapp. Det är förlagans signatur. */
.alt2 .a2-knapp {
  background: var(--vit); color: var(--svart);
  padding: .85rem 1.4rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.3;
  max-width: 22rem;
}
.alt2 .a2-ruta:hover .a2-knapp { background: var(--glod); }

/* Platshållare: ska SYNAS att det är en lucka, inte se ut som ett designval. */
.alt2 .a2-ruta.tom {
  background: repeating-linear-gradient(135deg, #12161c 0 14px, #0d1116 14px 28px);
  border: 1px dashed var(--ram-ljus);
}
.alt2 .a2-ruta.tom::after { background: rgba(6, 7, 10, .35); }
.alt2 .a2-saknas {
  position: absolute; left: var(--a2-ram); right: var(--a2-ram); bottom: var(--a2-ram); z-index: 2; margin: 0;
  background: rgba(6, 7, 10, .82); border-top: 1px solid var(--ram-ljus);
  padding: .7rem 1rem; text-align: left; font-size: .82rem; line-height: 1.4;
}
.alt2 .a2-saknas strong { display: block; color: var(--glod);
  letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
.alt2 .a2-saknas span { color: var(--dis); }

/* Kreditering på bilden den gäller. Liten men LÄSBAR — ett licensvillkor som
   inte går att läsa är inte uppfyllt. */
.alt2 .a2-kredit {
  position: absolute; right: var(--a2-ram); bottom: var(--a2-ram); z-index: 2;
  background: rgba(6, 7, 10, .72); color: var(--dis);
  padding: .32rem .7rem; font-size: .68rem; letter-spacing: .04em;
}

/* Svart textsektion, centrerad — förlagans «en plats för alla». */
.alt2 .a2-ord { background: var(--svart); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.alt2 .a2-ord h2 { text-align: center; font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  margin: 0 0 1.2rem; }
.alt2 .a2-ord p { max-width: 46ch; margin: 0 auto; text-align: center;
  font-size: clamp(1.02rem, 1.9vw, 1.25rem); line-height: 1.65; color: var(--dis); }

/* Bred sidfot i kolumner. */
.alt2 .a2-fot { border-top: 1px solid var(--ram); background: var(--natt);
  padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; }
.alt2 .a2-fotrutnat { display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* Sidfotens rubriker i samma ljusblå som resten av sajtens accenter, och ett
   snäpp större — de var .78rem i grått och försvann mot brödtexten under. */
.alt2 .a2-fotrutnat h3 { font-size: .95rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--glod); margin: 0 0 .8rem;
  font-weight: 800; }
.alt2 .a2-fotrutnat p { margin: 0 0 .35rem; color: var(--dis); }
.alt2 .a2-fotrutnat a { display: block; color: var(--dis); margin-bottom: .35rem; }
.alt2 .a2-fotrutnat a:hover { color: var(--vit); }
.alt2 .a2-fotslut { margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: 1.4rem;
  border-top: 1px solid var(--ram); color: var(--dis); font-size: .9rem; }


/* ── FÖRSLAG 3 (/3): vit överdel, mörk underdel ─────────────────────────────
 * Kundens beskrivning av gymmet.nu: vit bakgrund där mellanrummen mellan
 * bilderna visar vitt, en stor bild överst med tre mindre under och en stor
 * igen, och en mörkare nedre del av sidan.
 *
 * `.alt3` läggs UTANPÅ `.alt2` på samma body, så allt som är gemensamt ärvs och
 * bara skillnaderna står här. Ingen kopia av layouten.
 */
.alt3 { background: #ffffff; }

/* Mellanrummen visar vitt. Det är hela poängen med den ljusa versionen — den
   mörka versionens svarta fogar gör att rutorna flyter ihop till ett block. */
.alt3 #a2-bilder { background: #ffffff; }

/* ── Inga ramar på förslag 3 ────────────────────────────────────────────────
 * Fotona står flata mot vitt och skiljs åt av de vita fogarna — som förlagan.
 * En blå ram runt varje bild blev en inramning för mycket när bakgrunden redan
 * skiljer rutorna åt; på svart behövdes den, på vitt gör fogen jobbet.
 *
 * ⚠️ `--a2-ram: 0` räcker för att ta bort ramen ÖVERALLT: bakgrundens padding,
 * bildens inset och storlek, slöjan, texten och krediten räknar alla på den.
 * Det var precis därför tjockleken flyttades till en variabel.
 */
/* Ramarna är avstängda för båda förslagen ovan; inget extra behövs här. */

/* Sidhuvudet ljust. */
.alt3 .sidhuvud { background: #ffffff; border-bottom: 1px solid #e4e7ec; }
.alt3 .sidhuvud .marke, .alt3 .meny a { color: #10151c; }
.alt3 .meny a:hover { color: var(--blaa); }
.alt3 .meny a.knapp { background: var(--blaa); border-color: var(--blaa); color: #ffffff; }
.alt3 .menyknapp { color: #10151c; }

/* Textsektionen mellan bilderna: ljus, som förlagan. */
.alt3 .a2-ord { background: #ffffff; }
.alt3 .a2-ord h2 { color: #10151c; }
.alt3 .a2-ord p { color: #4a5361; }

/* ── Nedre delen mörkare ────────────────────────────────────────────────────
 * Allt från medlemskapen och ned. Skarv överst så bytet ser avsiktligt ut och
 * inte som att sidan tar slut.
 */
.alt3 #medlemskap { background: var(--natt); border-top: 6px solid var(--blaa); }
.alt3 #medlemskap, .alt3 .om, .alt3 #fragor, .alt3 .a2-fot { color: var(--vit); }
.alt3 .om { background: var(--svart); }
.alt3 #fragor { background: var(--natt); }
.alt3 .a2-fot { background: var(--svart); }


/* ── «Öppnar inom kort» ─────────────────────────────────────────────────────
 * Egen namnrymd `.snart` — ingenting härifrån får läcka in på sajten.
 *
 * Sidan är det FÖRSTA många ser av varumärket, ofta månader innan gymmet
 * öppnar. Därför byggs den av samma delar som förstasidan: lokalen som stor
 * bild, den roterande 3D-loggan, samma blå. En grå platta med «kommer snart»
 * hade sagt att ingen bryr sig.
 *
 * ⚠️ Rubrikstorleken är avsiktligt större än sajtens egen `--t-jatte`. Sidan
 * har EN sak att säga och inget att konkurrera med.
 */
.snart { min-height: 100vh; min-height: 100dvh; }

.snart-yta {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 5vw, 3rem);
}

/* Lokalen som bakgrund, kraftigt nedtonad. Bilden ligger i ett eget lager och
   inte på `body`: den ska kunna röra sig långsamt utan att texten gör det. */
.snart-bild {
  position: absolute; inset: -4%;
  background: url('/bild/lokalen.jpg') center 42% / cover no-repeat;
  opacity: .34;
  animation: snart-driv 40s ease-in-out infinite alternate;
}
.snart-yta::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 50% at 50% 34%, rgba(32, 84, 180, 0.30), transparent 72%),
    radial-gradient(120% 90% at 50% 50%, transparent 20%, rgba(6, 7, 10, 0.86) 78%),
    linear-gradient(180deg, rgba(6, 7, 10, 0.62), rgba(6, 7, 10, 0.30) 40%, rgba(6, 7, 10, 0.92));
}
@keyframes snart-driv {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(0, -1.5%, 0); }
}
/* Rörelse är en trevlighet, inte innehåll — den som bett om lugn får lugn. */
@media (prefers-reduced-motion: reduce) { .snart-bild { animation: none; } }

.snart-inre {
  position: relative; z-index: 2;
  width: 100%; max-width: 62rem; margin: 0 auto; text-align: center;
}

/* ⚠️ `#hero3d` och `#hero-reserv` är ID-selektorer med `position: absolute;
   inset: 0`. Föräldern måste ha egen storlek OCH `position: relative`, annars
   fäster canvasen på närmaste positionerade förfader — här hela `.snart-yta`
   — och loggan täcker sidan. */
.snart-figur {
  position: relative; width: min(230px, 44vw); aspect-ratio: 1 / 1;
  margin: 0 auto clamp(1.5rem, 3.5vw, 2.4rem);
}

.snart-etikett {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .9rem;
  margin: 0 0 1.4rem;
  font-size: var(--t-liten); font-weight: 700;
  letter-spacing: .34em; text-transform: uppercase; color: var(--glod);
}
.snart-etikett #snart-ort::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 4px; height: 4px; margin-right: .9rem; border-radius: 50%;
  background: currentColor; opacity: .6;
}

.snart h1 {
  font-size: clamp(2.4rem, 9vw, 6.5rem);
  line-height: .96; letter-spacing: -0.035em; text-transform: uppercase;
  margin: 0 auto; max-width: 14ch;
  text-shadow: 0 2px 40px rgba(6, 7, 10, .7);
}

.snart-text {
  margin: clamp(1.6rem, 3vw, 2.2rem) auto 0; max-width: 46ch;
  color: var(--dis); font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}

/* Öppningsdatumet är sidans enda löfte — det får bära varumärkets blå ensamt. */
.snart-datum {
  display: inline-block; margin: clamp(1.8rem, 4vw, 2.6rem) 0 0;
  padding: .85rem 1.9rem; border-radius: 999px;
  background: var(--blaa); border: 1px solid var(--blaa-ljus);
  font-weight: 800; font-size: 1.05rem;
  letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 18px 46px rgba(32, 84, 180, .34);
}

.snart-kontakt {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1.6rem; margin-top: clamp(2.2rem, 5vw, 3.2rem);
}
.snart-kontakt:empty { display: none; }
.snart-kontakt a {
  color: var(--dis); text-decoration: none; font-size: 1rem;
  padding-bottom: .3rem; border-bottom: 1px solid rgba(255, 255, 255, .16);
  transition: color .2s, border-color .2s;
}
.snart-kontakt a:hover { color: var(--vit); border-bottom-color: var(--glod); }

/* Inloggningen ska gå att hitta men inte tävla med budskapet. Den som söker
   den vet vad hon letar efter. */
.snart-logga-in {
  position: absolute; z-index: 3;
  top: calc(clamp(1rem, 3vw, 1.8rem) + env(safe-area-inset-top, 0px));
  right: clamp(1rem, 3vw, 1.8rem);
  padding: .6rem 1.25rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(6, 7, 10, .55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--dis); text-decoration: none;
  font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: color .2s, border-color .2s;
}
.snart-logga-in:hover { color: var(--vit); border-color: var(--glod); }

/* Intresseanmälan på «öppnar inom kort».
 *
 * ⚠️ FÖRSTA VERSIONEN VAR GENOMSKINLIG och gick inte att läsa. Kortet låg som
 * en glasskiva ovanpå fotot: ramen var `--ram` (#222831) mot ett nästan svart
 * gym — alltså osynlig — och lokalbilden syntes igenom bakom texten och
 * bråkade med varje bokstav. Fälten hade 1 px `--ram-ljus` på nästan svart
 * botten och såg ut som ingenting.
 *
 * Rättat genom att göra kortet till ett KORT: ogenomskinlig botten som är
 * ljusare än sidan, en ram som syns, en slagskugga som lyfter det från fotot,
 * och en blå linje i överkanten som säger att det hör till varumärket.
 *
 * Lärdomen är generell: genomskinlighet fungerar mot en jämn yta och slutar
 * fungera mot ett foto. Ett formulär man ska skriva i är fel plats att vara
 * subtil på.
 */
.snart-anmal {
  margin: clamp(2.4rem, 5vw, 3.4rem) auto 0; max-width: 32rem;
  padding: clamp(1.7rem, 3.5vw, 2.3rem);
  text-align: left;
  border-radius: 18px;
  /* Ogenomskinlig, och en aning ljusare upptill så kortet reser sig ur sidan
     i stället för att ligga platt på den. */
  background: linear-gradient(180deg, #141a23 0%, #0c1016 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 3px 0 0 var(--blaa),                 /* varumärkets linje i kanten */
    0 28px 70px rgba(0, 0, 0, 0.62),             /* lyfter kortet från fotot */
    0 2px 10px rgba(0, 0, 0, 0.4);
}
.snart-anmal h2 {
  font-size: clamp(1.2rem, 2.1vw, 1.5rem);
  margin-bottom: .75rem; color: var(--vit);
}
/* ⚠️ Ljusare än `--dis`. Brödtexten låg på #9aa5b3 och var på gränsen mot den
   mörka plattan — den ska gå att läsa i mobilen i solsken, inte bara i en
   skärmbild. */
.snart-anmal-text {
  margin: 0 0 1.5rem; color: #c3cbd6;
  font-size: 1rem; line-height: 1.65;
}
.snart-anmal-falt { display: grid; gap: .75rem; }
.snart-anmal input {
  width: 100%; padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px;
  background: #070b11; color: var(--vit);
  font: inherit; font-size: 1rem;
  transition: border-color .18s, box-shadow .18s;
}
.snart-anmal input::placeholder { color: #8b95a3; }
.snart-anmal input:hover { border-color: rgba(255, 255, 255, 0.32); }
.snart-anmal input:focus {
  outline: none; border-color: var(--glod);
  box-shadow: 0 0 0 3px rgba(156, 205, 247, 0.22);
}
.snart-anmal .knapp { justify-content: center; margin-top: .45rem; }
/* ⚠️ `.knapp` har `letter-spacing: .13em` och 2,4 rem sidopadding — bra på en
   bred sida, men i en 390 px mobil bröts «HÅLL MIG UPPDATERAD» på två rader
   mitt i kortet. Sidoluften och spärren krymper i stället för att texten
   kortas: ett tydligt uppmanande verb är värt mer än en millimeter marginal.

   Uppmätt efteråt med en Range över textnoden (antal radboxar, inte gissad
   höjd): 430, 390, 375 och 360 px ger EN rad. 320 px ger två — och det får
   den göra. Att laga det hade krävt mindre text än 1 rem, och sajtens regel
   är att inget textelement går under 1 rem. En bruten rad på en telefon från
   2016 är billigare än en knapp ingen kan läsa. */
@media (max-width: 430px) {
  .snart-anmal .knapp { padding-left: 1.1rem; padding-right: 1.1rem; letter-spacing: .07em; }
}

/* Etiketterna finns för skärmläsare men syns inte — platshållarna säger samma
   sak, och tre synliga etiketter i en ruta som ska kännas lätt är tre för
   mycket. ⚠️ `display: none` hade tagit bort dem ur uppläsningen också. */
.snart-doldtext {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Samtyckestexten skiljs av med en linje i stället för att bara vara mindre.
   Den är juridik och ska gå att läsa, inte gömmas i finstilt. */
.snart-anmal-liten {
  margin: 1.4rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: #97a1ae; font-size: .86rem; line-height: 1.6;
}
.snart-anmal-svar { margin: .9rem 0 0; font-size: .95rem; color: var(--glod); }
.snart-anmal-svar.fel { color: #ff9c8a; }

/* ── Kampanjkortet ──────────────────────────────────────────────────────────
 *
 * Goodiebagen studsar och puffar. Ren CSS: ingen bild att ladda, ingenting som
 * kan gå sönder tyst, och den står still för den som stängt av rörelse.
 *
 * ⚠️ Puffen är avsiktligt liten och ljusets färg, inte brun. Skämtet ska få
 * någon att titta en gång till på ett pris — inte ta över kortet.
 */
.kort.kampanj {
  border-color: color-mix(in srgb, var(--blaa) 65%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blaa) 35%, transparent),
              0 18px 50px rgba(32, 84, 180, .18);
  position: relative;
}
/* Står EFTER typen («Vuxen») och inte överst — annars ligger det under bandet.
   Egen rad så det inte trängs med något. */
/* Räknaren under rubriken — vanlig vikt, inte versaler. Två versalrader i rad
   läses som skrik. */
.kampanjkvar {
  margin: -.5rem 0 .7rem; font-size: .92rem; font-weight: 700;
  color: color-mix(in srgb, var(--blaa) 45%, var(--vit));
}
/* Nykter, inte säljande: en upplysning om återkommande dragningar hör inte
   hemma i samma färg som ett erbjudande. */
/* Grönt = pengar tillbaka. Enda gröna på kortet, så det inte tävlar med
   kampanjmärket om uppmärksamheten. */
.sparmarke {
  display: block; width: fit-content; margin: -.3rem 0 .7rem;
  padding: .25rem .7rem; border-radius: 999px;
  background: rgba(126, 226, 168, .14);
  border: 1px solid rgba(126, 226, 168, .45);
  color: #7ee2a8; font-size: .85rem; font-weight: 800; letter-spacing: .03em;
}
.abonnemangsrad {
  margin: -.4rem 0 .8rem; font-size: .95rem; font-weight: 700; color: var(--dis);
}
.kampanjtext {
  margin: .1rem 0 .9rem; padding: .7rem .85rem; border-radius: 12px;
  background: color-mix(in srgb, var(--blaa) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--blaa) 45%, transparent);
  font-weight: 600; line-height: 1.45;
}
.kampanjmarke {
  display: block; width: fit-content; max-width: 100%; margin: .2rem 0 .8rem;
  padding: .25rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--blaa) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--blaa) 55%, transparent);
  font-size: .8rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase;
  /* ⚠️ INTE `nowrap`. En lång rubrik rann rakt ut över kortkanten. */
  white-space: normal; line-height: 1.35;
}
/*
 * ⛔ Påsen sitter INUTI kampanjmärket, inte fritt på kortet.
 *
 * Den låg absolut placerad utanför kortets övre kant och landade då på kortet
 * OVANFÖR i medlemsappen, där korten staplas. Ett element som ligger utanför
 * sin låda krockar förr eller senare med någon annans.
 *
 * Som en del av märket följer den med texten, kan inte hamna fel, och betyder
 * dessutom något: den studsar bredvid ordet den hör till.
 */
.goodiebag {
  display: inline-block; margin-right: .35rem; vertical-align: -.15em;
  font-size: 1.15em; line-height: 1; pointer-events: none; position: relative;
  transform-origin: 50% 100%;
  animation: pashopp 1.6s cubic-bezier(.3,.7,.4,1) infinite;
}
/* Puffen: kommer ut i botten av varje studs, driver iväg och tonar bort. */
.goodiebag::after {
  content: ''; position: absolute; left: -7px; bottom: 1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 60% 60%,
              color-mix(in srgb, var(--glod) 70%, transparent), transparent 70%);
  animation: pasfis 1.6s ease-out infinite;
}
@keyframes pashopp {
  0%, 100% { transform: translateY(0) rotate(-6deg) scaleY(1); }
  12%      { transform: translateY(0) rotate(-6deg) scaleY(.82); }
  38%      { transform: translateY(-9px) rotate(9deg) scaleY(1.06); }
  62%      { transform: translateY(0) rotate(-4deg) scaleY(.9); }
  75%      { transform: translateY(-3px) rotate(3deg) scaleY(1); }
}
@keyframes pasfis {
  0%, 10%  { opacity: 0; transform: translate(0, 0) scale(.4); }
  16%      { opacity: .85; transform: translate(-4px, 1px) scale(.7); }
  40%      { opacity: 0; transform: translate(-22px, -8px) scale(1.6); }
  100%     { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .goodiebag { animation: none; }
  .goodiebag::after { display: none; }
}

/* Öppet och bemannat får inte läsas som samma lista. Rubriken skiljer dem, och
   noten säger vad som gäller resten av tiden. */
/* Underrubrik i sidfotsspalten: samma familj som h3 men tydligt mindre, så
   «Bemannat» inte konkurrerar med «Öppettider». */
.tiderrubrik { margin: .9rem 0 .25rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; font-size: .78rem;
  color: color-mix(in srgb, var(--glod) 65%, var(--dis)); }
.tiderrad { margin: 0; }
.tidernot { margin: .5rem 0 0; font-size: .88rem; color: var(--dis); line-height: 1.45; }
.intebryt { white-space: nowrap; }

/* Abonnemangspanelen. Knapparna får bryta rad — «Frys 1 mån / 2 / 3 / Säg upp»
   ryms inte på en rad i en telefon, och en knapp som klipps är en knapp man
   inte vågar trycka på. */
.abonnemangspanel { margin-bottom: 1.2rem; }
.abonnemangsknappar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.abonnemangsknappar .knapp { flex: 0 1 auto; }
.knapp.fara { border-color: rgba(255,128,128,.45); color: #ff8080; }

/* ⚠️ FLYTTADE HIT 2026-09-12 FRÅN `mina.css`.
 * `mina.html` laddar `/css/sajt.css` — INTE `mina.css`, som ingen sida länkar.
 * Reglerna nedan låg där i en timme och gjorde ingenting: avtalsrutan saknade
 * både radbrytningar och maxhöjd, och hela avtalet klumpade ihop sig till en
 * vägg text. Det syntes bara på fotot.
 * ⛔ Lägg aldrig en regel i `mina.css` — kontrollera vilken stilmall sidan
 * faktiskt länkar innan du skriver i en fil som HETER rätt.
 */
/* Avtalet i kassan. Rullbart med flit: det ska gå att läsa utan att arket växer
   förbi skärmen på en telefon, och det ska ändå synas att texten fortsätter. */
.ark-avtal { margin: 14px 0 10px; border: 1px solid var(--kant, #2a2a2a); border-radius: 10px; }
.ark-avtal > summary { cursor: pointer; padding: 10px 12px; font-weight: 600; font-size: .95rem; }
.ark-avtalstext {
  max-height: 44vh; overflow-y: auto; padding: 0 12px 12px;
  white-space: pre-wrap; font-size: .88rem; line-height: 1.5;
}

/* Avtalet under kvittoraden. Rullbart: ett medlemsavtal är elva kB, och rutan
   ska inte trycka ner resten av sidan när den öppnas. */
.kvittopost { display: block; }
.avtalsknapp {
  flex: 0 0 auto; margin-left: .6rem; padding: .35rem .8rem;
  border: 1px solid var(--kant, #2a2a2a); border-radius: 999px;
  background: transparent; color: inherit; font: inherit; font-size: .82rem;
  cursor: pointer; white-space: nowrap;
}
.avtalsknapp:hover { border-color: #666; }
.avtalsruta {
  max-height: 50vh; overflow-y: auto;
  margin: .2rem 0 .9rem; padding: .9rem 1rem;
  border: 1px solid var(--kant, #2a2a2a); border-radius: 12px;
  white-space: pre-wrap; font-size: .86rem; line-height: 1.55;
}

/* App-läsarvarningen. Varm, inte skrämmande: det är inte användarens fel att
   Instagram öppnar sidan i sin egen läsare, och mer än hälften av besökarna
   kommer den vägen. */
.applasare-varning {
  margin: 0 0 1rem; padding: 1rem 1.1rem; border-radius: 14px;
  background: color-mix(in srgb, #f4b942 12%, transparent);
  border: 1px solid color-mix(in srgb, #f4b942 45%, transparent);
  text-align: left;
}
.applasare-varning strong { display: block; margin-bottom: .35rem; font-size: 1rem; }
.applasare-varning p { margin: 0 0 .6rem; font-size: .92rem; line-height: 1.5; }
.applasare-hur { font-weight: 600; }
.applasare-knapp { display: inline-block; margin-top: .2rem; }

/* Gymbytets två fält. Samma ark som köprutan, men med inmatning — därför lite
   luft mellan etikett och fält, som i resten av appens formulär. */
.byte-falt { display: block; margin: .9rem 0; text-align: left; }
.byte-falt > span { display: block; margin-bottom: .3rem; font-size: .88rem; font-weight: 600; }
.byte-falt input {
  width: 100%; box-sizing: border-box; padding: .7rem .8rem;
  border: 1px solid var(--kant, #2a2a2a); border-radius: 10px;
  background: transparent; color: inherit; font: inherit; font-size: 1rem;
}
.byte-falt input:focus { outline: 2px solid currentColor; outline-offset: 1px; }

/* Gymbytets märke. Samma gröna form som gratismånaderna, men texten är längre
   än ett tal — därför radbrytning i stället för att rinna ut över kortkanten,
   vilket kampanjmärket en gång gjorde. */
.bytmarke { white-space: normal; line-height: 1.3; text-wrap: balance; }