/* Jordlagets utseende (25 okt 2026, andra försöket): laddas efter app.css och bestämmer färger, typsnitt och bilder.
   Ljust och mörkt läge: följer telefonen eller datorn, eller medlemmens val med knappen i sidhuvudet (data-theme på <html>, se tema.js).
   Rubrikerna i Spectral (serif), brödtexten i Hanken Grotesk. Bilderna ligger i bilder/ (AI-bilder, föreställer inga riktiga personer). */
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/spectral-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/spectral-500-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------------------------------------- färger */
:root {
  --bg: #f7f5ef; --yta: #ffffff; --yta2: #fbfaf6; --text: #14211a; --dov: #59655c; --linje: #e2ded2; --linje2: #ece9df;
  --accent: #1f6b45; --accent-hover: #175536; --accent-text: #ffffff; --accent-ljus: #dcefe2; --accent-mjuk: #eef6f0;
  --lime: #c8ec7a; --terra: #b9562f; --terra-ljus: #fbe8de;
  --vete: #ead9b2; --vete-ljus: #faf2df; --jord: #8a5a2b;
  --varning: #8a4b08; --varning-ljus: #fbf0e1; --fel: #a32020; --fel-ljus: #fbe9e9; --ok: #1f6b3a;
  --kort-bg: #12382a; --kort-bg2: #2d6a3e;
  --radie: 20px; --radie-liten: 12px;
  --skugga: 0 1px 2px rgba(20, 33, 26, .04), 0 6px 24px rgba(20, 33, 26, .06);
  --skugga-hog: 0 2px 6px rgba(20, 33, 26, .06), 0 18px 48px rgba(20, 33, 26, .14);
  --topp-bg: rgba(247, 245, 239, .82);
  --bild-ton: linear-gradient(180deg, rgba(8, 20, 13, .15) 0%, rgba(8, 20, 13, .35) 45%, rgba(8, 20, 13, .82) 100%);
  --bild-filter: none;
  --rubrik: "Spectral", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c120f; --yta: #141c17; --yta2: #10170f; --text: #edf2ec; --dov: #a4b0a7; --linje: #28332c; --linje2: #1d2721;
    --accent: #8fd694; --accent-hover: #a9e3ad; --accent-text: #0a1a0f; --accent-ljus: #1d3526; --accent-mjuk: #14231a;
    --lime: #c8f07a; --terra: #f09a72; --terra-ljus: #38221a;
    --vete: #3f331d; --vete-ljus: #221d12; --jord: #e3b383;
    --varning: #f0b46a; --varning-ljus: #3a2a14; --fel: #ff8f8f; --fel-ljus: #3d1c1c; --ok: #8fd6a8;
    --kort-bg: #0f2b20; --kort-bg2: #24553a;
    --skugga: 0 1px 2px rgba(0, 0, 0, .35); --skugga-hog: 0 12px 40px rgba(0, 0, 0, .55);
    --topp-bg: rgba(12, 18, 15, .78);
    --bild-ton: linear-gradient(180deg, rgba(5, 10, 7, .2) 0%, rgba(5, 10, 7, .38) 45%, rgba(5, 10, 7, .86) 100%);
    --bild-filter: brightness(.9) saturate(.95);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c120f; --yta: #141c17; --yta2: #10170f; --text: #edf2ec; --dov: #a4b0a7; --linje: #28332c; --linje2: #1d2721;
  --accent: #8fd694; --accent-hover: #a9e3ad; --accent-text: #0a1a0f; --accent-ljus: #1d3526; --accent-mjuk: #14231a;
  --lime: #c8f07a; --terra: #f09a72; --terra-ljus: #38221a;
  --vete: #3f331d; --vete-ljus: #221d12; --jord: #e3b383;
  --varning: #f0b46a; --varning-ljus: #3a2a14; --fel: #ff8f8f; --fel-ljus: #3d1c1c; --ok: #8fd6a8;
  --kort-bg: #0f2b20; --kort-bg2: #24553a;
  --skugga: 0 1px 2px rgba(0, 0, 0, .35); --skugga-hog: 0 12px 40px rgba(0, 0, 0, .55);
  --topp-bg: rgba(12, 18, 15, .78);
  --bild-ton: linear-gradient(180deg, rgba(5, 10, 7, .2) 0%, rgba(5, 10, 7, .38) 45%, rgba(5, 10, 7, .86) 100%);
  --bild-filter: brightness(.9) saturate(.95);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- grunden */
html { overflow-x: clip; }
body { background: var(--bg); color: var(--text); transition: background-color .25s, color .25s; overflow-x: clip; }
h1, .start-text h1, .banner h1 { font-family: var(--rubrik); font-weight: 500; letter-spacing: -.01em; }
h1 { font-size: 2.2rem; line-height: 1.1; }
h2 { font-size: 1.3rem; letter-spacing: -.01em; }
.kort { border-radius: var(--radie); border-color: var(--linje2); }
.knapp, button.knapp { border-radius: 999px; padding-left: 22px; padding-right: 22px; }
.knapp.liten { border-radius: 999px; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=password], input[type=search], select, textarea {
  border-radius: var(--radie-liten); background: var(--yta2); min-height: 50px; }
.etikett { border-radius: 999px; }
.utkastrad { background: var(--vete-ljus); color: var(--jord); border-bottom: 1px solid var(--vete); }

/* Sidhuvudet: halvgenomskinligt, loggan med groddan, språk och läge */
.topp { background: var(--topp-bg); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--linje2); position: sticky; top: 0; }
.topp-hoger { display: flex; align-items: center; gap: 8px; flex: none; }
.logo-mark rect { fill: var(--accent); }
.logo-mark path { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logo-mark .mark-blad { fill: var(--lime); stroke: none; }
:root[data-theme="dark"] .logo-mark .mark-blad { fill: var(--accent-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-mark .mark-blad { fill: var(--accent-text); } }
.logo span, .logo #logo { white-space: nowrap; -webkit-line-clamp: unset; display: inline; }
.logo span { font-family: var(--rubrik); font-weight: 500; font-size: 1.12rem; letter-spacing: 0; }
.sprakval { position: relative; }
.sprak-knapp { height: 40px; border-radius: 999px; border: 1px solid var(--linje2); background: var(--yta2); color: var(--text); display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.sprak-knapp:hover, .sprak-knapp[aria-expanded="true"] { border-color: var(--accent); }
.sprak-knapp svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sprak-meny { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; display: grid; gap: 2px; min-width: 170px; padding: 6px; background: var(--yta); border: 1px solid var(--linje2); border-radius: 14px; box-shadow: var(--skugga); }
.sprak-meny[hidden] { display: none; }
.sprak-meny button { border: 0; background: none; color: var(--text); text-align: left; padding: 10px 12px; border-radius: 10px; font: inherit; font-size: .95rem; cursor: pointer; }
.sprak-meny button:hover { background: var(--yta2); }
.sprak-meny button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.tema-knapp { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linje2); background: var(--yta2); color: var(--text); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.tema-knapp:hover { border-color: var(--accent); }
.tema-knapp svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; grid-area: 1 / 1; transition: transform .35s, opacity .25s; }
.tema-knapp .mane { fill: currentColor; stroke: none; }
.tema-knapp[data-lage="light"] .sol, .tema-knapp:not([data-lage]) .sol { opacity: 0; transform: rotate(-60deg) scale(.6); }
.tema-knapp[data-lage="dark"] .mane { opacity: 0; transform: rotate(40deg) scale(.6); }
@media (max-width: 640px) {
  .topp-hoger { gap: 6px; }
  .tema-knapp { width: 36px; height: 36px; }
  .logo span { font-size: 1.12rem; }
  .logo .logo-resten { display: none; }
  .sprak-knapp { height: 36px; padding: 0 10px 0 8px; }
}
@media (max-width: 340px) { #logo { display: none; } }

/* ---------------------------------------------------------------- bilder */
.fullbredd { width: 100vw; margin-left: calc(50% - 50vw); }
img.banner-bild, img.start-bild, img.bildkort-bild { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--bild-filter); }

/* Startsidan: bilden över hela bredden, rubriken på bilden och inloggningen bredvid (under på mobilen) */
body.pa-start .sida { padding-top: 0; }
body.pa-start .utkastrad { position: relative; z-index: 2; }
.start-hjalte { position: relative; min-height: 600px; display: flex; align-items: flex-end; color: #fff; margin-bottom: 8px; }
.start-hjalte .start-bild { position: absolute; inset: 0; object-position: 50% 50%; }
.start-hjalte::before { content: ""; position: absolute; inset: 0; background: var(--bild-ton); z-index: 1; }
.start-inre { position: relative; z-index: 2; width: 100%; max-width: 1040px; margin: 0 auto; padding: 72px 20px 48px; display: grid; gap: 40px; grid-template-columns: 1.15fr 1fr; align-items: end; }
.start-text h1 { font-size: 3.4rem; color: #fff; margin-bottom: 14px; text-shadow: 0 2px 24px rgba(0, 0, 0, .3); }
.overrad { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin: 0 0 10px; color: var(--lime); }
.start-lead { font-size: 1.15rem; max-width: 30em; color: rgba(255, 255, 255, .92); margin: 0; }
.start-kort { margin: 0; color: var(--text); box-shadow: var(--skugga-hog); border: 0; padding: 26px; }
@media (max-width: 820px) {
  .start-hjalte { min-height: 0; display: block; color: var(--text); }
  .start-hjalte .start-bild { position: relative; inset: auto; height: 380px; }
  .start-hjalte::before { bottom: auto; height: 380px; }
  .start-inre { grid-template-columns: 1fr; padding: 0 16px; gap: 0; margin-top: -230px; }
  .start-text { padding: 0 4px 22px; }
  .start-text h1 { font-size: 2.35rem; }
  .start-lead { font-size: 1rem; }
}

/* Tre kort med bild under startsidans topp */
.bildkort-rad { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); margin: 40px 0 8px; }
.bildkort { background: var(--yta); border: 1px solid var(--linje2); border-radius: var(--radie); overflow: hidden; box-shadow: var(--skugga); }
.bildkort-bild { aspect-ratio: 4 / 3; height: auto !important; }
.bildkort-text { padding: 18px 20px 20px; }
.bildkort-text h3 { font-family: var(--rubrik); font-weight: 500; font-size: 1.3rem; margin: 0 0 6px; }
.bildkort-text p { margin: 0; color: var(--dov); }
@media (max-width: 820px) {
  .bildkort-rad { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .bildkort { display: grid; grid-template-columns: 112px 1fr; }
  .bildkort-bild { aspect-ratio: auto; height: 100% !important; min-height: 118px; }
  .bildkort-text { padding: 14px 16px; }
  .bildkort-text h3 { font-size: 1.12rem; }
  .bildkort-text p { font-size: .92rem; line-height: 1.45; }
}

/* Rubrik med bild bakom (Hem, Röstning, Föreningen, Skapa konto) */
.banner { position: relative; border-radius: var(--radie); overflow: hidden; min-height: 210px; display: flex; align-items: flex-end; color: #fff; margin: 0 0 20px; box-shadow: var(--skugga); isolation: isolate; }
.banner .banner-bild { position: absolute; inset: 0; z-index: -2; }
.banner::before { content: ""; position: absolute; inset: 0; background: var(--bild-ton); z-index: -1; }
.banner-inre { padding: 26px 26px 22px; max-width: 46em; }
.banner h1 { color: #fff; font-size: 2.2rem; margin: 0 0 4px; }
.banner p { margin: 0; color: rgba(255, 255, 255, .9); }
.banner .overrad { margin-bottom: 4px; }
.hem-banner { min-height: 190px; }
.hem-banner .banner-bild { object-position: 50% 70%; }
.smal-banner { max-width: 580px; }
@media (max-width: 700px) {
  .banner { min-height: 170px; border-radius: 18px; margin-left: -4px; margin-right: -4px; }
  .banner-inre { padding: 20px 18px 16px; }
  .banner h1 { font-size: 1.75rem; }
  .banner p { font-size: .94rem; line-height: 1.45; }
}

/* ---------------------------------------------------------------- medlemmens sidor */
.medlemsmeny a[aria-current="page"] .ikon { stroke: var(--accent); }
@media (max-width: 700px) {
  .medlemsmeny { background: var(--topp-bg); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-top-color: var(--linje2); }
  .medlemsmeny a[aria-current="page"]::before { left: 22%; right: 22%; top: 6px; bottom: auto; height: 32px; border-radius: 999px; background: var(--accent-ljus); z-index: -1; }
  .medlemsmeny a { isolation: isolate; }
}
.att-gora { border-radius: var(--radie); }
.att-gora.viktig { background: linear-gradient(120deg, var(--accent) 0%, var(--accent-hover) 100%); box-shadow: var(--skugga); }
.medlemskort { background: radial-gradient(120% 140% at 0% 0%, var(--kort-bg2) 0%, var(--kort-bg) 60%); border-radius: var(--radie); }
.medlemskort .mk-namn { font-family: var(--rubrik); font-weight: 500; font-size: 1.7rem; }
.medlemskort .mk-forening { color: var(--lime); opacity: 1; }
.klart { border-radius: var(--radie); }

/* Personer i styrelserna */
.personer { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.personer li { display: flex; gap: 12px; align-items: center; background: var(--yta); border: 1px solid var(--linje2); border-radius: var(--radie-liten); padding: 12px 14px; }
.personer strong, .personer .dov { display: block; }
.kandidat-bild { background: var(--accent-ljus); color: var(--accent); }

/* Röstning */
.rostkort { border-radius: var(--radie); }
.rostkort.vantar { border-color: transparent; box-shadow: 0 0 0 2px var(--accent), var(--skugga); }
.rostval button { border-radius: 16px; }
.rostval button[data-v="ja"][aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.rostval button[data-v="nej"][aria-pressed="true"] { background: var(--terra); border-color: var(--terra); color: #fff; }
.deltagande { border-radius: var(--radie); }

/* Styrelsens sidor: samma färger, inga bilder */
.flikar a[aria-current="page"] { border-bottom-color: var(--accent); }
.tabell-ram { border-radius: var(--radie); }

@media (prefers-reduced-motion: reduce) { body, .tema-knapp svg { transition: none; } }
@media print { .tema-knapp, .banner { display: none !important; } }

/* Filmen bakom startsidans rubrik */
.start-film { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; filter: var(--bild-filter); pointer-events: none; }
.film-spelar .start-film.synlig { opacity: 1; }
.film-knapp { position: absolute; z-index: 3; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .28); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.film-knapp svg { width: 16px; height: 16px; }
.film-knapp .paus { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.film-knapp .spela { fill: currentColor; }
.film-knapp[data-lage="spelar"] .spela, .film-knapp[data-lage="paus"] .paus { display: none; }
@media (max-width: 820px) { .start-film { height: 380px; } }
#app:focus, #app:focus-visible { outline: none; }
body.har-meny .sida { padding-top: 16px; }