/* Mordpromenad – designsystem
   Nordisk noir: nästan svart och kallt blågrått, varmt lyktljus, röd accent för det viktigaste.
   Ljusa pappersytor där texten ska läsas länge. */

:root {
  --svart: #07090c;
  --natt: #0b0f14;
  --natt-2: #111821;
  --natt-3: #18212c;
  --natt-4: #222d3a;
  --linje: rgba(236, 235, 231, .12);
  --linje-stark: rgba(236, 235, 231, .28);
  --text: #ecebe7;
  --text-2: #b9c0c8;
  --text-3: #8a949e;
  --rod: #d4142f;
  --rod-hover: #ec2a45;
  --rod-ljus: #ff5a6e;
  --lykta: #f3b45a;
  --gron: #45c27a;
  --papper: #f2eee6;
  --papper-2: #e9e3d7;
  --papper-3: #fbf9f5;
  --black: #161a1f;
  --black-2: #4b535c;
  --papper-linje: #d8d0c1;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --t-hero: clamp(2.4rem, 1.3rem + 3.7vw, 4.7rem);
  --t-h2: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  --t-h3: clamp(1.15rem, 1rem + .4vw, 1.35rem);
  --t-ingress: clamp(1.06rem, 1rem + .3vw, 1.25rem);
  --t-bas: 1.0625rem;
  --t-liten: .9rem;

  --gutter: clamp(16px, 4vw, 40px);
  --sektion: clamp(72px, 9vw, 128px);
  --radie: 6px;
  --radie-stor: 12px;
  --skugga: 0 24px 60px rgba(0, 0, 0, .45);
  --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--natt); color: var(--text); font-family: var(--sans); font-size: var(--t-bas); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 700; }
h1, h2 { font-family: var(--serif); letter-spacing: -.01em; line-height: 1.05; }
h2 { font-size: var(--t-h2); margin-bottom: .35em; }
h3 { font-size: var(--t-h3); line-height: 1.25; }
:focus-visible { outline: 3px solid var(--lykta); outline-offset: 3px; border-radius: 3px; }
.visuellt-dold { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hoppa { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--papper); color: var(--black); padding: 10px 16px; border-radius: var(--radie); font-weight: 600; }
.hoppa:focus { top: 12px; }

.behallare { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.behallare.smal { max-width: 880px; }
.sektion { padding: var(--sektion) 0; position: relative; }
.ljus { background: var(--papper); color: var(--black); }

/* ---------- Typografiska byggstenar ---------- */
.kicker { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rod-ljus); margin: 0 0 1.1em; }
.ljus .kicker { color: #b3102a; }
.kicker-live { display: inline-flex; align-items: center; gap: 10px; color: var(--text); background: rgba(7, 9, 12, .78); border: 1px solid var(--linje); padding: 7px 14px 7px 12px; border-radius: 999px; letter-spacing: .1em; }
.kicker-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gron); box-shadow: 0 0 0 0 rgba(69, 194, 122, .6); animation: puls 2.4s infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(69, 194, 122, .55); } 70% { box-shadow: 0 0 0 9px rgba(69, 194, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(69, 194, 122, 0); } }
.ingress { font-size: var(--t-ingress); line-height: 1.55; color: var(--text-2); max-width: 40rem; }
.ljus .ingress { color: var(--black-2); }
.underrubrik { font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 18px; }
.sektionsrubrik { max-width: 44rem; margin-bottom: clamp(36px, 5vw, 60px); }
.sektionsrubrik.ljus { background: none; }

/* ---------- Knappar ---------- */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 4px; border: 1px solid transparent; font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; text-align: center; }
.knapp:active { transform: translateY(1px); }
.knapp .ikon { width: 18px; height: 18px; flex: none; }
.knapp-primar { background: var(--rod); color: #fff; box-shadow: 0 10px 30px rgba(212, 20, 47, .28); }
.knapp-primar:hover { background: var(--rod-hover); }
.knapp-sekundar { background: rgba(7, 9, 12, .55); color: var(--text); border-color: var(--linje-stark); }
.knapp-sekundar:hover { border-color: var(--text); background: rgba(255, 255, 255, .06); }
.ljus .knapp-sekundar { color: var(--black); border-color: var(--black); background: transparent; }
.knapp-ljus { background: var(--papper); color: var(--black); }
.knapp-ljus:hover { background: #fff; }
.knapp.liten { min-height: 42px; padding: 0 16px; font-size: .92rem; }
.knapp.bred { width: 100%; }
.knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Logga och sidhuvud ---------- */
.logga { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; color: var(--text); flex: none; }
.logga-text { font-family: var(--sans); font-weight: 800; font-size: 1.12rem; letter-spacing: .04em; transform: scaleX(.92); transform-origin: left; }
.logga-flack { width: 18px; height: 18px; color: var(--rod); margin-left: -2px; transform: translateY(-5px); }

.sidhuvud { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background-color .25s ease, box-shadow .25s ease; }
.sidhuvud.fast { background: rgba(9, 12, 16, .97); box-shadow: 0 1px 0 var(--linje); }
.sidhuvud-inre { display: flex; align-items: center; gap: 28px; height: 72px; }
.huvudmeny { margin-right: auto; }
.huvudmeny ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.huvudmeny a { display: block; padding: 10px 12px; font-size: .92rem; font-weight: 500; color: var(--text-2); text-decoration: none; border-radius: 4px; }
.huvudmeny a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.sidhuvud-hoger { display: flex; align-items: center; gap: 10px; }
.sidhuvud .lang summary { min-height: 42px; }
.menyknapp { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 4px; border: 1px solid var(--linje-stark); background: rgba(7, 9, 12, .35); color: var(--text); cursor: pointer; }
.menyknapp .ikon { width: 22px; height: 22px; }
.mobilmeny { position: fixed; left: 0; right: 0; top: calc(64px + env(safe-area-inset-top, 0px)); bottom: 0; border-top: 1px solid var(--linje); background: var(--natt); padding: 8px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px)); overflow: auto; overscroll-behavior: contain; }
@media (min-width: 601px) { .mobilmeny { top: calc(72px + env(safe-area-inset-top, 0px)); } }
.menyknapp .ikon-stang { display: none; }
.menyknapp[aria-expanded="true"] .ikon-meny { display: none; }
.menyknapp[aria-expanded="true"] .ikon-stang { display: block; }
body.meny-oppen { overflow: hidden; }
.mobilmeny ul { list-style: none; margin: 0 0 18px; padding: 0; }
.mobilmeny li + li { border-top: 1px solid var(--linje); }
.mobilmeny a:not(.knapp) { display: flex; align-items: center; min-height: 58px; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; text-decoration: none; }
@media (max-width: 1079px) {
  .huvudmeny { display: none; }
  .sidhuvud-inre { gap: 12px; }
  .logga { margin-right: auto; }
  .menyknapp { display: inline-flex; }
}
@media (max-width: 600px) { .sidhuvud-hoger > .knapp { display: none; } .sidhuvud-inre { height: 64px; } }
@media (min-width: 1080px) { .mobilmeny { display: none !important; } }
.sidhuvud.oppen { background: rgba(9, 12, 16, .98); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(100svh, 920px); display: flex; flex-direction: column; justify-content: flex-end; padding: calc(96px + env(safe-area-inset-top, 0px)) 0 0; overflow: hidden; background: var(--svart); }
.hero-bakgrund { position: absolute; inset: 0; z-index: 0; }
/* Innehållet ligger ovanpå bakgrunden utan isolation och negativa lager, som får Chrome att flimra på vissa Mac-datorer. */
.hero > .behallare, .fall > .behallare { position: relative; z-index: 1; }
.hero-bakgrund > *, .hero-bakgrund img, .hero-bakgrund svg { width: 100%; height: 100%; object-fit: cover; }
.hero-bakgrund .bild-reserv { width: 100%; height: 100%; }
.hero-bakgrund::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(7, 9, 12, .9) 0%, rgba(7, 9, 12, .62) 36%, rgba(7, 9, 12, .08) 68%, rgba(7, 9, 12, .2) 100%),
  linear-gradient(0deg, rgba(7, 9, 12, .96) 0%, rgba(7, 9, 12, 0) 34%); }
.hero-inre { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: 40px; flex: 1; padding-bottom: clamp(40px, 6vw, 72px); }
.hero h1 { font-size: var(--t-hero); line-height: 1.04; margin: 0 0 .4em; max-width: 15ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
.hero h1 span { display: block; }
.hero-ingress { font-size: var(--t-ingress); color: var(--text-2); max-width: 34rem; line-height: 1.6; }
.hero-not { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; color: var(--text-3); font-size: var(--t-liten); }
.hero-not .ikon { width: 16px; height: 16px; }
.hero-mobil { display: flex; justify-content: center; }
.hero-fall { min-height: min(78svh, 760px); }
.hero-fall h1 { max-width: 16ch; }
.fall-ort { display: block; font-family: var(--sans); font-size: .3em; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rod-ljus); margin-bottom: .6em; }
@media (max-width: 899px) {
  .hero { min-height: auto; }
  .hero-inre { grid-template-columns: 1fr; gap: 8px; padding-bottom: 32px; }
  .hero-bakgrund::after { background: linear-gradient(180deg, rgba(7, 9, 12, .55) 0%, rgba(7, 9, 12, .7) 40%, rgba(7, 9, 12, .97) 100%); }
  .hero-mobil { margin: 28px 0 -4px; }
}

/* Mobilen med kartvyn (illustration) */
.mobil { margin: 0; }
.mobil-ram { width: clamp(220px, 21vw, 280px); aspect-ratio: 9 / 18.5; padding: 9px; border-radius: 40px; background: linear-gradient(145deg, #2a313a, #090c10 45%); box-shadow: 0 0 0 1px #2c343e, var(--skugga), 0 0 90px rgba(243, 180, 90, .08); transform: rotate(4deg); }
.mobil-skarm { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: #151c24; }
.mobil-karta { width: 100%; height: 100%; }
.mobil-topp { position: absolute; inset: 14px 14px auto 14px; display: flex; justify-content: center; }
.mobil-topp span { font-size: .72rem; font-weight: 600; color: var(--text); background: rgba(7, 9, 12, .72); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linje); }
.mobil-kort { position: absolute; left: 12px; right: 12px; bottom: 14px; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; background: var(--papper-3); color: var(--black); border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.mobil-kort-etikett { grid-column: 1; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #b3102a; }
.mobil-kort b { grid-column: 1; font-family: var(--serif); font-size: 1.12rem; line-height: 1.2; }
.mobil-kort-avstand { grid-column: 1; font-size: .78rem; color: var(--black-2); }
.mobil-kort .ikon { grid-column: 2; grid-row: 1 / span 3; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--rod); color: #fff; }
@media (max-width: 899px) { .mobil-ram { width: min(230px, 62vw); transform: rotate(3deg); } }

/* Fördelar under heron */
.fordelar { list-style: none; margin: 0; padding: 26px 0 clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid var(--linje); }
.fordelar li { display: flex; gap: 14px; align-items: flex-start; }
.fordelar .ikon { width: 30px; height: 30px; flex: none; color: var(--text); padding: 2px; }
.fordelar b { display: block; font-weight: 600; font-size: .98rem; line-height: 1.3; margin-bottom: 2px; }
.fordelar span { display: block; font-size: .86rem; color: var(--text-3); line-height: 1.45; }
@media (max-width: 899px) { .fordelar { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; } }
@media (max-width: 380px) { .fordelar { grid-template-columns: 1fr; } }

/* ---------- Så fungerar det ---------- */
.steg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.stegkort { background: var(--papper-3); border: 1px solid var(--papper-linje); border-radius: var(--radie-stor); display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(0, 0, 0, .03), 0 18px 40px rgba(40, 30, 20, .08); }
.stegkort-media { position: relative; aspect-ratio: 16 / 10; background: var(--natt-2); overflow: hidden; }
.stegkort-media > :not(.stegkort-nr) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stegkort-media .bild-reserv > * { width: 100%; height: 100%; object-fit: cover; }
.stegkort { overflow: visible; }
.stegkort-media { border-radius: var(--radie-stor) var(--radie-stor) 0 0; }
.stegkort-nr { position: absolute; z-index: 1; left: 16px; bottom: 16px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--black); color: #fff; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; border: 3px solid var(--papper-3); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.stegkort-text { padding: 22px 22px 24px; }
.stegkort h3 { font-family: var(--serif); font-size: 1.4rem; margin-bottom: .4em; }
.stegkort p { color: var(--black-2); margin: 0; font-size: .98rem; }
.faktarad { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 26px clamp(16px, 3vw, 32px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: var(--papper-2); border-radius: var(--radie-stor); }
.faktarad li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.faktarad .ikon { grid-row: 1 / span 2; width: 30px; height: 30px; color: var(--black); }
.faktarad b { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.faktarad span { font-size: .86rem; color: var(--black-2); }
@media (max-width: 899px) { .steg { grid-template-columns: 1fr; } .stegkort { display: grid; grid-template-columns: 1fr; } .faktarad { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 600px) and (max-width: 899px) { .stegkort { grid-template-columns: 220px 1fr; } .stegkort-media { aspect-ratio: auto; min-height: 180px; border-radius: var(--radie-stor) 0 0 var(--radie-stor); } .stegkort-nr { bottom: auto; top: 14px; left: 14px; } .stegkort-text { padding: 22px; } }

/* ---------- Aktuellt fall ---------- */
.fall { background: var(--natt); overflow: hidden; }
.fall-bakgrund { position: absolute; inset: 0 0 auto 0; height: min(760px, 100%); z-index: 0; opacity: .9; }
.fall-bakgrund > *, .fall-bakgrund img, .fall-bakgrund svg { width: 100%; height: 100%; object-fit: cover; }
.fall-bakgrund::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 15, 20, .95) 0%, rgba(11, 15, 20, .65) 55%, rgba(11, 15, 20, .3) 100%), linear-gradient(0deg, var(--natt) 0%, rgba(11, 15, 20, 0) 60%); }
.fall-intro { max-width: 40rem; margin-bottom: clamp(48px, 7vw, 88px); }
.fall-intro h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); }
.fall-tid { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--lykta); margin: .2em 0 .8em; }
.fall-ingress { font-size: var(--t-ingress); color: var(--text); line-height: 1.55; }
.fall-intro p:not(.kicker):not(.fall-tid):not(.fall-ingress) { color: var(--text-2); }

.karaktarer { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 22px); }
.karaktarer.vittnen { grid-template-columns: repeat(4, 1fr); }
.karaktarer + .underrubrik { margin-top: 48px; }
.karaktarskort { background: var(--natt-2); border: 1px solid var(--linje); border-radius: var(--radie); overflow: hidden; display: flex; flex-direction: column; }
.karaktarskort-bild { position: relative; aspect-ratio: 4 / 5; background: var(--natt-3); overflow: hidden; }
.karaktarskort-bild > img { position: absolute; inset: 0; }
.karaktarskort-bild img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); }
.karaktarskort-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(17, 24, 33, .9) 0%, rgba(17, 24, 33, 0) 45%); pointer-events: none; }
.akt-silhuett { position: absolute; inset: 0; display: grid; place-items: end center; background: radial-gradient(circle at 50% 35%, #2a3542 0%, #161e28 70%); }
.akt-silhuett svg { width: 78%; fill: #0d131a; opacity: .9; }
.akt-silhuett span { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%); font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; color: rgba(236, 235, 231, .16); letter-spacing: .06em; }
.akt-nr { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--rod); padding: 4px 8px; border-radius: 2px; }
.karaktarskort-text { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.karaktarskort h3 { font-family: var(--serif); font-size: 1.2rem; }
.karaktarskort .roll { font-size: .86rem; color: var(--text-3); margin: 0; }
.karaktarskort blockquote { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--linje); font-family: var(--serif); font-style: italic; font-size: .98rem; line-height: 1.45; color: var(--text-2); }
@media (max-width: 899px) { .karaktarer, .karaktarer.vittnen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .karaktarskort-text { padding: 12px; } .karaktarskort blockquote { font-size: .9rem; } }

/* ---------- Kommande städer ---------- */
#kommande-stader { background: linear-gradient(180deg, var(--natt) 0%, var(--natt-2) 100%); }
.stader { display: grid; gap: clamp(14px, 2vw, 22px); }
.stader-ovriga { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.stadskort { position: relative; border-radius: var(--radie-stor); overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; border: 1px solid var(--linje); background: var(--natt-3); }
.stadskort.stor { min-height: clamp(360px, 42vw, 480px); }
.stadskort-bild { position: absolute; inset: 0; z-index: 0; }
.stadskort-bild > *, .stadskort-bild img, .stadskort-bild svg { width: 100%; height: 100%; object-fit: cover; }
.stadskort-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 9, 12, .94) 0%, rgba(7, 9, 12, .55) 45%, rgba(7, 9, 12, .1) 100%); }
.stadskort.stor .stadskort-bild::after { background: linear-gradient(90deg, rgba(7, 9, 12, .92) 0%, rgba(7, 9, 12, .55) 50%, rgba(7, 9, 12, .1) 100%), linear-gradient(0deg, rgba(7, 9, 12, .6), rgba(7, 9, 12, 0) 50%); }
.stadskort-innehall { position: relative; z-index: 1; padding: clamp(20px, 3vw, 36px); max-width: 34rem; }
/* De mindre korten bredvid varandra: etikett och rubrik på samma höjd, knappen längst ner. */
.stader-ovriga .stadskort { align-items: stretch; }
.stader-ovriga .stadskort-innehall { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding-top: clamp(64px, 7vw, 96px); }
.stader-ovriga .stadskort .knapp { margin-top: auto; }
.stader-ovriga .stadskort p:last-of-type { margin-bottom: 18px; }
.stader-ovriga .stadskort-bild::after { background: linear-gradient(0deg, rgba(7, 9, 12, .94) 0%, rgba(7, 9, 12, .7) 55%, rgba(7, 9, 12, .3) 100%); }
.stadskort h3 { font-family: var(--serif); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: .2em; }
.stadskort.stor h3 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); }
.stadskort p { color: var(--text-2); font-size: .98rem; }
.stadskort-fall { font-size: .92rem !important; color: var(--lykta) !important; margin-bottom: .6em; }
.stadskort-fall i { font-family: var(--serif); font-size: 1.05rem; }
.status { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(7, 9, 12, .6); border: 1px solid var(--linje-stark); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.status-beta::before { background: var(--gron); }
.status-arbete::before { background: var(--lykta); }
.status-intresse::before { background: var(--rod-ljus); }
.stadskort .knapp { margin-top: 6px; }
@media (max-width: 899px) { .stader-ovriga { grid-template-columns: 1fr; } .stadskort { min-height: 280px; } }
@media (min-width: 600px) and (max-width: 899px) { .stader-ovriga { grid-template-columns: repeat(2, 1fr); } .stader-ovriga > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---------- Platsspanare ---------- */
.spanare { background: var(--natt-3); border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); }
.spanare-inre { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.spanare h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); }
.bockar { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.bockar li { display: flex; gap: 12px; align-items: flex-start; }
.bockar .ikon { width: 22px; height: 22px; flex: none; color: var(--gron); margin-top: 2px; }
@media (max-width: 899px) { .spanare-inre { grid-template-columns: 1fr; } }

/* ---------- Om ---------- */
.om-inre { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 6vw, 96px); }
.om-text p:not(.ingress) { color: var(--text-2); max-width: 40rem; }
@media (max-width: 899px) { .om-inre { grid-template-columns: 1fr; } }

/* ---------- Vanliga frågor ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--papper-3); border: 1px solid var(--papper-linje); border-radius: var(--radie); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; min-height: 60px; cursor: pointer; font-weight: 600; font-size: 1.04rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq-tecken { position: relative; width: 16px; height: 16px; flex: none; }
.faq-tecken::before, .faq-tecken::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: currentColor; transition: transform .2s ease; }
.faq-tecken::after { transform: rotate(90deg); }
.faq details[open] .faq-tecken::after { transform: rotate(0); }
.faq details[open] summary { padding-bottom: 6px; }
.faq-svar { padding: 0 20px 18px; color: var(--black-2); }
.faq-svar p { margin: 0; max-width: 42rem; }

/* ---------- Anmälan ---------- */
.anmal { background: radial-gradient(80% 60% at 85% 20%, rgba(212, 20, 47, .12), transparent 70%), var(--natt); }
.anmal-inre { display: grid; grid-template-columns: 1fr minmax(0, 480px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.anmal h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); }
.anmal-text .underrubrik { margin-top: 32px; }
.anmalan { background: var(--papper); color: var(--black); border-radius: var(--radie-stor); padding: clamp(22px, 3vw, 34px); box-shadow: var(--skugga); }
.falt { margin: 0 0 18px; padding: 0; border: 0; }
.falt label, .falt legend { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 8px; padding: 0; }
.anmalan input[type=email], .anmalan select { width: 100%; min-height: 52px; padding: 0 14px; border-radius: var(--radie); border: 1px solid #c9c0af; background: #fff; color: var(--black); font: inherit; font-size: 1rem; }
.anmalan select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23161a1f' stroke-width='1.8' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.anmalan input:focus, .anmalan select:focus { outline: 3px solid rgba(212, 20, 47, .35); outline-offset: 0; border-color: var(--rod); }
.val { display: flex; flex-wrap: wrap; gap: 8px; }
.val label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid #c9c0af; border-radius: 999px; background: #fff; font-weight: 500; cursor: pointer; margin: 0; }
.val label:has(input:checked) { border-color: var(--rod); box-shadow: inset 0 0 0 1px var(--rod); }
.val input, .kryss input { accent-color: var(--rod); width: 18px; height: 18px; margin: 0; }
.kryss { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; font-size: .95rem; line-height: 1.45; cursor: pointer; }
.kryss input { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.honung { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.meddelande { margin: 14px 0 0; min-height: 1.4em; font-weight: 500; }
.meddelande.fel { color: #b3102a; }
.klart h3 { font-family: var(--serif); font-size: 1.8rem; margin-bottom: .4em; }
.klart p { color: var(--black-2); }
.anmalan.markerad { animation: markera 1.2s ease; }
@keyframes markera { 0% { box-shadow: 0 0 0 0 rgba(212, 20, 47, .6), var(--skugga); } 100% { box-shadow: 0 0 0 18px rgba(212, 20, 47, 0), var(--skugga); } }
@media (max-width: 899px) { .anmal-inre { grid-template-columns: 1fr; } }

/* ---------- Fallsidan ---------- */
.brodsmulor { font-size: .86rem; color: var(--text-3); margin-bottom: 22px; }
.brodsmulor a { color: var(--text-2); }
.fall-detaljer { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.fall-detaljer h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.fallakt { margin: 0; padding: 24px 26px; background: var(--papper-3); border: 1px solid var(--papper-linje); border-left: 4px solid var(--rod); border-radius: var(--radie); font-family: var(--serif); font-size: 1.12rem; line-height: 1.7; color: var(--black); }
.faktaruta { background: var(--black); color: var(--text); border-radius: var(--radie-stor); padding: 24px 26px; }
.faktaruta h2 { font-size: 1.4rem; margin-bottom: 14px; }
.faktaruta dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; }
.faktaruta dt { font-size: .86rem; font-weight: 600; color: var(--text-3); }
.faktaruta dd { margin: 0; }
.numrerad { padding-left: 1.3em; display: grid; gap: 10px; color: var(--text-2); font-size: 1.05rem; }
@media (max-width: 899px) { .fall-detaljer { grid-template-columns: 1fr; } }

/* ---------- Sidfot ---------- */
.sidfot { background: var(--svart); border-top: 1px solid var(--linje); padding: 56px 0 calc(40px + env(safe-area-inset-bottom, 0px)); font-size: .92rem; color: var(--text-3); }
.sidfot-rad { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
.sidfot-marke p { margin: 14px 0 0; max-width: 22rem; }
.sidfot-lankar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sidfot a { color: var(--text-2); text-decoration: none; }
.sidfot a:hover { color: var(--text); text-decoration: underline; }
.integritet { margin-top: 36px; max-width: 46rem; }
.integritet summary { cursor: pointer; color: var(--text-2); }
.integritet p { margin-top: 10px; }
.copy { margin: 24px 0 0; }
@media (max-width: 899px) { .sidfot-rad { grid-template-columns: 1fr; } }

/* ---------- Grafik som ersätter foton ---------- */
.bild-reserv { width: 100%; height: 100%; background: var(--natt-3); }
.bild-reserv > svg, .bild-reserv > img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 520px) { .hero .knappar .knapp, .fall-intro .knappar .knapp, .anmal .knappar .knapp { flex: 1 1 100%; } .spanare .knapp { width: 100%; } }