/* IK Tord – klubbsajten. Färger och typsnitt följer varumärkesplattformen (utkast till styrelsen, oktober 2026):
   Tordlila #5c2e88 och Rosenlundsgult #ffed00 (märkets färger), Svealila, Protokollpapper och Sandbank.
   Rubriker i "Eskil" (Big Shoulders Display), brödtext i Libre Caslon Text, etiketter i Archivo Narrow.
   Former: raka och lugna, inga sneda hörn. Gult bara som markering, aldrig som stor yta. */
/* Typsnitten ligger på den egna sajten, så att inga anrop går till Google när sidorna visas */
@font-face { font-family: 'Eskil'; font-style: normal; font-weight: 800; font-display: swap; src: url(typsnitt/big-shoulders-display-latin-ext-800-normal.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Eskil'; font-style: normal; font-weight: 800; font-display: swap; src: url(typsnitt/big-shoulders-display-latin-800-normal.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: 'Eskil'; font-style: normal; font-weight: 900; font-display: swap; src: url(typsnitt/big-shoulders-display-latin-ext-900-normal.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Eskil'; font-style: normal; font-weight: 900; font-display: swap; src: url(typsnitt/big-shoulders-display-latin-900-normal.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: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(typsnitt/libre-caslon-text-latin-ext-400-normal.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(typsnitt/libre-caslon-text-latin-400-normal.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: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url(typsnitt/libre-caslon-text-latin-ext-400-italic.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url(typsnitt/libre-caslon-text-latin-400-italic.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: 'Libre Caslon Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(typsnitt/libre-caslon-text-latin-ext-700-normal.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(typsnitt/libre-caslon-text-latin-700-normal.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: 'Archivo Narrow'; font-style: normal; font-weight: 600; font-display: swap; src: url(typsnitt/archivo-narrow-latin-ext-600-normal.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 600; font-display: swap; src: url(typsnitt/archivo-narrow-latin-600-normal.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: 'Archivo Narrow'; font-style: normal; font-weight: 700; font-display: swap; src: url(typsnitt/archivo-narrow-latin-ext-700-normal.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 700; font-display: swap; src: url(typsnitt/archivo-narrow-latin-700-normal.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; }
/* Reserv för rubrikerna medan Eskil laddas: Arial nedskalad till ungefär Eskils bredd, så att rubrikerna inte hoppar när typsnittet byts in */
@font-face { font-family: 'Eskil reserv'; src: local('Arial'), local('ArialMT'); size-adjust: 85%; }
:root {
  --lila: #5c2e88;          /* Tordlila, märkets lila */
  --lila-djup: #47226b;     /* mörkare steg av Tordlila, för hover och undermenyer */
  --natt: #2a1640;          /* Svealila: text och kvällsytor */
  --gul: #ffed00;           /* Rosenlundsgult: bara som markering */
  --vit: #ffffff;
  --papper: #f4efe4;        /* Protokollpapper */
  --papper-djup: #ebe4d5;
  --kort: #fbf8f1;          /* ljusa kort på papper */
  --lila-tint: #ebe3ea;
  --text: #2a1640;           /* Svealila, som plattformen anger för text */
  --svag: #5e564b;          /* varm stödtext, godkänd kontrast på papper */
  --sand: #857d70;          /* Sandbank: linjer och dekor */
  --linje: #857d70;         /* Sandbank: linjer */
  --r: 0px;
  --snitt: 0px;
  --display: "Eskil", "Eskil reserv", "Arial Narrow", Arial, sans-serif;
  --brod: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --etikett: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 78px; }
body { margin: 0; background: var(--papper); color: var(--text); font-family: var(--brod); font-size: 1.06rem; line-height: 1.62; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lila); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--lila); outline-offset: 3px; }
.mork :focus-visible, .huvud :focus-visible, .topprad :focus-visible, .hero :focus-visible, footer :focus-visible, .sidhuvud :focus-visible, .lilabg :focus-visible, .cupband :focus-visible, .lagkort :focus-visible { outline-color: var(--gul); }
.wrap { width: min(1240px, 100% - 40px); margin-inline: auto; }
.dold { position: absolute; left: -9999px; }
.dold:focus { left: 16px; top: 16px; z-index: 200; background: var(--vit); color: var(--text); padding: 10px 14px; }

h1, h2, h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; line-height: .98; margin: 0; }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); }
h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: .005em; line-height: 1.15; }
.overrad { font-family: var(--etikett); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; color: var(--lila); margin: 0 0 10px; }
.mork .overrad { color: var(--gul); }
.rubrikrad { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 32px; }
.rubrikrad h2 { position: relative; }
.merlank { font-family: var(--etikett); font-weight: 700; font-size: .86rem; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--lila); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.merlank::after { content: "→"; transition: transform .15s; }
.merlank:hover::after { transform: translateX(4px); }
.mork .merlank { color: var(--vit); }
.mork a:not(.knapp):not(.merlank):not(.delaknapp) { color: var(--gul); }
section { padding: clamp(56px, 8vw, 104px) 0; }
.mork { background: var(--natt); color: var(--vit); }
.lilabg { background: var(--lila); color: var(--vit); }
.pappersbg { background: var(--papper-djup); }

.knapp, .toppnyhet, .bildkort, .nyhet, .cup, .paket, .matchkort { }
.knapp { --snitt: 11px; }
/* Avfasade element klipper bort en yttre fokusram, så den ritas innanför kanten */
.toppnyhet:focus-visible, .bildkort:focus-visible, .nyhet:focus-visible, .cup:focus-visible { outline-offset: -6px; }
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 8px 24px; font-family: var(--etikett); font-weight: 700; font-size: .9375rem; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; background: var(--lila); color: var(--vit); border: 2px solid var(--lila); border-radius: var(--r); cursor: pointer; transition: transform .15s, background .15s, color .15s; line-height: 1.15; }
.knapp:hover { background: var(--lila-djup); border-color: var(--lila-djup); color: var(--vit); }
/* På lila och mörka ytor blir knappen vit med lila text. Gult är bara markering. */
.hero .knapp:not(.kontur), .mork .knapp:not(.kontur), .lilabg .knapp:not(.kontur), .sidhuvud .knapp:not(.kontur), .cupband .knapp:not(.kontur), .huvud .knapp { background: var(--vit); color: var(--lila); border-color: var(--vit); }
.hero .knapp:not(.kontur):hover, .mork .knapp:not(.kontur):hover, .lilabg .knapp:not(.kontur):hover, .sidhuvud .knapp:not(.kontur):hover, .cupband .knapp:not(.kontur):hover, .huvud .knapp:hover { background: var(--papper); color: var(--lila); border-color: var(--papper); }
.knapp.kontur { background: transparent; color: var(--vit); border-color: rgba(255,255,255,.6); }
.knapp.kontur:hover { background: var(--vit); color: var(--natt); border-color: var(--vit); }
.knapp.lila { background: var(--lila); color: var(--vit); border-color: var(--lila); }
.knapp.lila:hover { background: var(--lila-djup); border-color: var(--lila-djup); }

/* Topprad och huvudmeny */
.topprad { background: var(--natt); color: rgba(255,255,255,.82); font-size: .82rem; }
.topprad .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; }
.topprad .slogan { font-family: var(--etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; color: var(--gul); }
.topprad nav { display: flex; gap: 18px; }
.topprad a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 38px; }
.topprad a:hover { color: var(--vit); text-decoration: underline; }
.huvud { position: sticky; top: 0; z-index: 50; background: var(--lila); color: var(--vit); box-shadow: 0 6px 24px -12px rgba(42,22,64,.6); }
.huvud .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; position: relative; }
.marke { display: flex; align-items: center; gap: 14px; color: var(--vit); text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .005em; padding-left: 0; min-height: 72px; white-space: nowrap; }
/* Klubbmärket ligger i konturversionen direkt på Tordlila (B4), med frizon minst en fjärdedel av märkets bredd. */
.marke::before { content: none; }
.marke img { width: 48px; height: auto; flex: none; }
.huvudnav { display: flex; align-items: center; gap: 4px; }
.huvudnav a { color: var(--vit); text-decoration: none; font-family: var(--etikett); font-weight: 700; font-size: .84rem; text-transform: uppercase; letter-spacing: .07em; padding: 12px 11px; border-radius: var(--r); position: relative; white-space: nowrap; }
.huvudnav a:not(.knapp)::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 3px; background: var(--gul); transform: scaleX(0); transform-origin: left; transition: transform .18s; }
.huvudnav a:not(.knapp):hover::after, .huvudnav a[aria-current="page"]::after { transform: scaleX(1); }
.huvudnav .knapp { min-height: 44px; padding: 6px 16px; margin-left: 10px; font-size: .8125rem; line-height: 1.15; }
.menyknapp { display: none; background: none; border: 2px solid rgba(255,255,255,.5); border-radius: var(--r); color: var(--vit); min-width: 48px; min-height: 48px; cursor: pointer; font-family: var(--etikett); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; padding: 0 14px; }
@media (max-width: 1300px) { .huvudnav a { font-size: .76rem; padding: 12px 8px; letter-spacing: .05em; } .huvudnav .knapp { padding: 9px 14px; margin-left: 6px; } }
@media (max-width: 1000px) {
  .menyknapp { display: inline-flex; align-items: center; gap: 10px; }
  .huvudnav { display: none; position: absolute; left: -20px; right: -20px; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--lila-djup); padding: 12px 20px 24px; box-shadow: 0 20px 30px -10px rgba(42,22,64,.6); }
  .huvudnav.oppen { display: flex; }
  .huvudnav a { padding: 16px 4px; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,.12); border-radius: 0; }
  .huvudnav a:not(.knapp)::after { display: none; }
  .huvudnav .knapp { margin: 18px 0 0; border-bottom: 2px solid var(--gul); border-radius: var(--r); }
}
@media (max-width: 620px) {
  .topprad .slogan { padding-left: 0; font-size: .75rem; white-space: nowrap; }
  .topprad nav a:not(:first-child) { display: none; }
  .marke { font-size: 1.25rem; }
  .marke img { width: 48px; }
}

/* Hero */
.hero { position: relative; isolation: isolate; color: var(--vit); background: var(--natt); overflow: hidden; }
.hero .bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* Bildspel i heron: bilderna ligger på varandra och tonas in en i taget */
.bildspel { position: absolute; inset: 0; z-index: -2; }
.bildspel .bild { z-index: auto; opacity: 0; transition: opacity 1.4s ease; }
.bildspel .bild.aktiv { opacity: 1; }
.hero .wrap { position: relative; }
.bildval { position: absolute; right: 0; bottom: clamp(120px, 14vw, 170px); display: flex; gap: 8px; }
.bildval button { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.bildval button::before { content: ""; width: 34px; height: 6px; background: rgba(255,255,255,.45); transition: background .2s; }
.bildval button[aria-pressed="true"]::before { background: var(--gul); }
.bildval button:hover::before { background: var(--vit); }
.bildval .paus::before { width: 12px; height: 14px; transform: none; background: none; border-inline: 4px solid var(--vit); }
.bildval .paus[data-pausad]::before { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--gul); background: none; }
.bildval .paus:hover::before { background: none; }
@media (max-width: 700px) { .bildval { position: static; margin-top: 18px; margin-left: -5px; } .bildval button { width: 40px; } }
@media (prefers-reduced-motion: reduce) { .bildspel .bild { transition: none; } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(42,22,64,.94) 0%, rgba(71,34,107,.78) 42%, rgba(92,46,136,.18) 78%), linear-gradient(0deg, rgba(42,22,64,.9) 0%, rgba(42,22,64,0) 45%); }
.hero .wrap { min-height: min(82vh, 760px); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(110px, 16vw, 190px) 0 clamp(120px, 14vw, 170px); }
.hero h1 { font-size: clamp(2.9rem, 10.5vw, 8rem); line-height: .88; letter-spacing: .005em; max-width: 11ch; }
.hero h1 span { display: block; }
.hero .lead { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 46ch; margin: 24px 0 0; color: rgba(255,255,255,.9); }
.hero .knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Matchrad */
.matchrad { padding: 0; position: relative; z-index: 5; }
.matchrad .wrap { filter: drop-shadow(0 26px 30px rgba(42,22,64,.28)); }
.matchkort { --snitt: 22px; margin-top: clamp(-96px, -9vw, -64px); background: var(--vit); overflow: hidden; }
.flikar { display: flex; gap: 0; overflow-x: auto; background: var(--natt); scrollbar-width: thin; }
.flikar button { flex: none; font-family: var(--etikett); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.75); background: none; border: 0; border-bottom: 4px solid transparent; padding: 0 20px; min-height: 48px; cursor: pointer; }
.flikar button:hover { color: var(--vit); }
.flikar button[aria-selected="true"] { color: var(--lila); background: var(--vit); border-bottom-color: var(--gul); }
/* Lila fältet går hela vägen ner: länkraden ligger i högerspalten i stället för under båda */
.matchkort { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto 1fr auto; }
.matchkort > .flikar { grid-column: 1 / -1; }
.matchyta { display: contents; }
.matchkort .nasta { grid-column: 1; grid-row: 2 / 4; }
.matchkort .senaste { grid-column: 2; grid-row: 2; padding-bottom: 14px; }
.matchkort .matchfot { grid-column: 2; grid-row: 3; padding-bottom: 26px; }
.nasta { padding: clamp(22px, 3.4vw, 40px); background: linear-gradient(135deg, var(--lila) 0%, var(--lila-djup) 100%); color: var(--vit); position: relative; overflow: hidden; }
/* Klubbmärket syns helt i nedre högra hörnet, i stället för att skäras av kanten */
.nasta::after { content: ""; position: absolute; right: clamp(16px, 2.4vw, 30px); bottom: clamp(16px, 2.4vw, 30px); width: clamp(120px, 15vw, 190px); aspect-ratio: 548 / 502; background: url(img/klubbmarke-kontur.webp) center / contain no-repeat; z-index: 0; }
/* Bara raderna i höjd med märket får extra högermarginal, datumraden överst får hela bredden */
.nasta > p:not(.overrad) { padding-right: clamp(130px, 17vw, 210px); }
.nasta { min-height: 170px; }
@media (max-width: 820px) { .nasta::after { width: 96px; right: 16px; bottom: 16px; } .nasta > p:not(.overrad) { padding-right: 106px; } }
.nasta > * { position: relative; z-index: 1; }
.nasta .overrad { color: var(--gul); }
.nasta .nar { font-family: var(--display); font-weight: 900; font-size: clamp(1.5rem, 3.4vw, 2.5rem); text-transform: uppercase; letter-spacing: .005em; line-height: 1; margin: 6px 0 18px; }
.nasta .lagen { font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.5rem); line-height: 1.2; text-transform: uppercase; letter-spacing: .005em; position: relative; z-index: 1; }
.nasta .lagen small { display: block; font-family: var(--brod); font-weight: 500; font-size: .8rem; letter-spacing: .12em; color: var(--gul); margin: 6px 0; }
.nasta .var { margin: 18px 0 0; font-size: .95rem; color: rgba(255,255,255,.85); position: relative; z-index: 1; }
.senaste { padding: clamp(22px, 3.4vw, 40px); }
.resultat { list-style: none; margin: 8px 0 0; padding: 0; }
.resultat li { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--linje); }
.resultat li:first-child { border-top: 0; }
.utfall { width: 34px; height: 34px; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: .85rem; background: var(--lila-tint); color: var(--lila-djup); }
.utfall.v { background: var(--lila); color: var(--vit); }
.utfall.f { background: var(--natt); color: var(--vit); }
.resultat .motst { font-weight: 600; line-height: 1.25; }
.resultat .motst small { display: block; font-weight: 400; font-size: .84rem; color: var(--svag); }
.resultat .siffror { font-family: var(--display); font-weight: 900; font-size: 1.35rem; letter-spacing: .005em; white-space: nowrap; }
.matchfot { padding: 0 clamp(22px, 3.4vw, 40px) 18px; text-align: right; }
.tomt { color: var(--svag); margin: 10px 0 0; }
.nasta .tomt { color: rgba(255,255,255,.8); }
@media (max-width: 820px) { .matchkort { grid-template-columns: 1fr; grid-template-rows: none; } .matchkort .nasta, .matchkort .senaste, .matchkort .matchfot { grid-column: 1; grid-row: auto; } }

/* Nyheter */
.nyhetsyta { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; }
.toppnyhet { position: relative; display: block; min-height: 440px; border-radius: var(--r); overflow: hidden; color: var(--vit); text-decoration: none; background: var(--lila-djup); isolation: isolate; }
.toppnyhet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s; }
.toppnyhet:hover img { transform: scale(1.04); }
.toppnyhet::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(42,22,64,.96) 0%, rgba(42,22,64,.55) 45%, rgba(42,22,64,0) 75%); }
.toppnyhet .text { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 3vw, 34px); }
.toppnyhet time, .nyhetsrad time { font-family: var(--etikett); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }
.toppnyhet time { color: var(--gul); }
.toppnyhet b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(1.4rem, 2.8vw, 2.2rem); text-transform: uppercase; letter-spacing: .005em; line-height: 1.04; margin-top: 10px; }
.nyhetslista { display: grid; align-content: start; }
.nyhetsrad { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--linje); color: var(--text); text-decoration: none; }
.nyhetsrad:first-child { border-top: 0; padding-top: 0; }
.nyhetsrad img, .nyhetsrad .utanbild { width: 132px; aspect-ratio: 16 / 10; object-fit: cover; background: var(--lila-tint); }
.nyhetsrad time { color: var(--lila); }
.nyhetsrad b { display: block; font-family: var(--display); font-weight: 800; font-size: 1rem; line-height: 1.2; margin-top: 4px; }
.nyhetsrad:hover b { color: var(--lila); }
@media (max-width: 900px) { .nyhetsyta { grid-template-columns: 1fr; } .toppnyhet { min-height: 340px; } }
@media (max-width: 440px) { .nyhetsrad { grid-template-columns: 96px 1fr; } .nyhetsrad img, .nyhetsrad .utanbild { width: 96px; } }

/* Siffror */
.siffror-band { padding: clamp(64px, 9vw, 110px) 0; position: relative; overflow: hidden; margin-block: -1px; }
.siffror-band .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.siffra b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: .95; letter-spacing: .005em; color: var(--gul); }
.siffra span { display: block; margin-top: 8px; font-family: var(--etikett); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; max-width: 22ch; }
@media (max-width: 780px) { .siffror-band .wrap { grid-template-columns: 1fr 1fr; gap: 32px 20px; } }

/* Fördjupning */
.trekort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bildkort { position: relative; display: flex; align-items: flex-end; min-height: 460px; border-radius: var(--r); overflow: hidden; color: var(--vit); text-decoration: none; isolation: isolate; background: var(--lila-djup); }
.bildkort img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s; }
.bildkort:hover img { transform: scale(1.05); }
.bildkort::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(71,34,107,.96) 0%, rgba(71,34,107,.5) 48%, rgba(71,34,107,.08) 100%); }
.bildkort .text { padding: 26px; }
.bildkort b { display: block; font-family: var(--display); font-weight: 900; font-size: 1.7rem; text-transform: uppercase; letter-spacing: .005em; line-height: 1; }
.bildkort p { margin: 10px 0 14px; color: rgba(255,255,255,.88); }
.bildkort .mer { font-family: var(--etikett); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gul); }
@media (max-width: 900px) { .trekort { grid-template-columns: 1fr; } .bildkort { min-height: 320px; } }

/* Lagen */
.laggrupp + .laggrupp { margin-top: 30px; }
.laggrupp h3 { color: var(--gul); margin-bottom: 14px; }
.lagrad { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }

.lagrad a:focus-visible { outline-offset: -5px; }
.lagrad a { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 24px; border: 2px solid rgba(255,255,255,.28); border-radius: var(--r); color: var(--vit); text-decoration: none; font-family: var(--etikett); font-weight: 700; font-size: .9375rem; text-transform: uppercase; letter-spacing: .08em; transition: background .15s, color .15s, border-color .15s; line-height: 1.15; }
.lagrad a:hover { background: var(--vit); border-color: var(--vit); color: var(--lila); }
.lagnot { margin: 26px 0 0; font-size: .92rem; color: rgba(255,255,255,.7); max-width: 60ch; }

/* Cuper */
.cupband { position: relative; isolation: isolate; color: var(--vit); overflow: hidden; background: var(--lila-djup); padding-block: clamp(84px, 11vw, 140px); }
.cupband .bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cupband::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(71,34,107,.95) 0%, rgba(71,34,107,.86) 60%, rgba(71,34,107,.62) 100%); }
.cupkort { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; }
.cup { --snitt: 22px; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.6vw, 32px); background: rgba(42,22,64,.72); color: var(--vit); text-decoration: none; border-left: 6px solid var(--gul); transition: background .15s, transform .15s; }
.cup:hover { background: rgba(42,22,64,.92); transform: translateY(-3px); }
.cup .format { font-family: var(--display); font-weight: 900; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: .005em; line-height: 1; color: var(--gul); }
.cup b { font-family: var(--display); font-weight: 900; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .005em; line-height: 1; }
.cup p { margin: 0; color: rgba(255,255,255,.88); }
.cup ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 6px; font-family: var(--etikett); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; }
.cup li::before { content: ""; display: inline-block; width: 9px; height: 9px; background: var(--gul); margin-right: 10px; }
.cup .mer { margin-top: auto; font-family: var(--etikett); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gul); }
.cup.huvudcup { background: var(--lila); color: var(--vit); border-left-color: var(--gul); }
.cup.huvudcup:hover { background: var(--lila-djup); }
.cup.huvudcup .format, .cup.huvudcup .mer { color: var(--gul); }
.cup.huvudcup p { color: rgba(255,255,255,.9); }
.cup.huvudcup li::before { background: var(--gul); }
@media (max-width: 900px) { .cupkort { grid-template-columns: 1fr; } }

/* Hemmaplan */
.tvadelad { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.tvadelad img { border-radius: var(--r); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.tvadelad p { color: var(--svag); max-width: 54ch; }
.punktlista { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 8px; }
.punktlista li { padding-left: 24px; position: relative; font-weight: 500; }
.punktlista li::before { content: ""; position: absolute; left: 0; top: .5em; width: 11px; height: 11px; background: var(--lila); }
@media (max-width: 860px) { .tvadelad { grid-template-columns: 1fr; } }

/* Partners */
.partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
/* Ramen ligger på li (linjefärg + 1px luft) så att även de snedskurna hörnen får en kant */
.partners li, .spar li { --snitt: 14px; padding: 1px; background: var(--linje); transition: background .15s, transform .15s; }
.partners li:hover, .spar li:hover, .partners li:focus-within, .spar li:focus-within { background: var(--lila); transform: translateY(-3px); }
.partners a, .spar a { display: grid; place-items: center; height: 110px; padding: 20px; background: var(--vit); }
.partners img, .spar img { height: 62px; width: auto; max-width: 100%; object-fit: contain; }
.marquee { overflow: hidden; padding-block: 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.spar { display: flex; gap: 12px; width: max-content; list-style: none; margin: 0; padding: 0; animation: rulla 60s linear infinite; }
.spar li { flex: none; width: 190px; }
.marquee:hover .spar, .marquee:focus-within .spar, .marquee.pausad .spar { animation-play-state: paused; }
.rubrikval { display: inline-flex; align-items: center; gap: 22px; }
.rullpaus { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--etikett); font-weight: 700; font-size: .86rem; text-transform: uppercase; letter-spacing: .08em; color: var(--svag); }
.rullpaus::before { content: ""; width: 10px; height: 13px; border-inline: 4px solid currentColor; box-sizing: border-box; }
.rullpaus[data-pausad]::before { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; }
.rullpaus:hover { color: var(--lila); }
@media (prefers-reduced-motion: reduce) { .rullpaus { display: none; } }
@keyframes rulla { to { transform: translateX(calc(-50% - 6px)); } }
.paketrad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.paket { --snitt: 20px; padding: 26px; background: var(--kort); border-top: 6px solid var(--lila); }
.paket.topp { background: var(--lila); color: var(--vit); border-top-color: var(--gul); }
.paket p { margin: 0; }
.paket .niva { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; }
.paket .pris { font-family: var(--display); font-weight: 900; font-size: 2.1rem; letter-spacing: .005em; line-height: 1; margin: 14px 0 4px; }
.paket.topp .pris { color: var(--vit); }
.paket .avtal { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--svag); margin-bottom: 14px; }
.paket.topp .avtal { color: rgba(255,255,255,.8); }
.paketnot { margin: 18px 0 0; color: var(--svag); font-size: .95rem; }
.smapaket { list-style: none; margin: 36px 0 0; padding: 0; border-top: 4px solid var(--lila); }
.smapaket li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--linje); }
.smapaket b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.smapaket span:first-child { color: var(--svag); }
.smapaket span:first-child b { color: var(--text); }
.smapaket .pris { font-family: var(--display); font-weight: 900; font-size: 1.2rem; white-space: nowrap; }
.mork .punktlista li::before { background: var(--gul); }
.mork .tvadelad p { color: rgba(255,255,255,.85); }
.mork .tvadelad h3 { color: var(--gul); margin: 0 0 12px; }
.mork .tvadelad h3 + p, .mork .tvadelad .punktlista + h3 { margin-top: 0; }
.mork .tvadelad { align-items: start; }
.kontaktband { text-align: left; }
.kontaktband p { max-width: 50ch; margin: 16px 0 0; font-size: 1.1rem; }
.kontaktband .knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 980px) { .paketrad { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .paketrad { grid-template-columns: 1fr; } .smapaket li { flex-direction: column; gap: 4px; } }

/* Sidfot */
footer { background: var(--natt); color: rgba(255,255,255,.78); padding: clamp(48px, 7vw, 88px) 0 28px; }
footer .devis { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; line-height: .9; font-size: clamp(2.2rem, 8.5vw, 6.6rem); color: var(--vit); margin: 0 0 clamp(36px, 5vw, 60px); }
footer .devis span { color: inherit; }
.fotkol { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px 24px; }
.fotkol h3 { font-size: .8rem; letter-spacing: .14em; color: var(--gul); margin-bottom: 12px; }
.fotkol ul { list-style: none; margin: 0; padding: 0; }
.fotkol a { color: rgba(255,255,255,.86); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.fotkol a:hover { color: var(--vit); text-decoration: underline; }
.fotkol .klubb img { width: 124px; height: auto; margin-bottom: 18px; }
.fotkol .klubb p { margin: 0; max-width: 32ch; }
.fotrad { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: .86rem; color: rgba(255,255,255,.6); }
@media (max-width: 820px) { .fotkol { grid-template-columns: 1fr 1fr; } .fotkol .klubb { grid-column: 1 / -1; } }

/* Undersidor: sidhuvud */
.sidhuvud { background: linear-gradient(120deg, var(--natt) 0%, var(--lila-djup) 70%, var(--lila) 100%); color: var(--vit); position: relative; overflow: hidden; padding-bottom: 2.6vw; }
.sidhuvud::after { content: ""; position: absolute; right: -40px; top: -30px; width: 360px; height: 360px; background: url(img/klubbmarke-kontur.webp) center / contain no-repeat; opacity: .13; pointer-events: none; }
.sidhuvud .wrap { padding: clamp(56px, 8vw, 96px) 0 clamp(36px, 5vw, 56px); position: relative; z-index: 1; }
.sidhuvud h1 { font-size: clamp(2.6rem, 8vw, 5.6rem); letter-spacing: .005em; }
.sidhuvud h1 em { font-style: normal; color: inherit; }
.sidhuvud.smal h1 { font-size: clamp(1.8rem, 4.6vw, 3.2rem); letter-spacing: .005em; line-height: 1.02; max-width: 24ch; }
.sidhuvud .lead { margin: 16px 0 0; max-width: 52ch; color: rgba(255,255,255,.88); font-size: 1.1rem; }
.sidhuvud .datumrad { margin: 0 0 14px; font-family: var(--etikett); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gul); }
.tillbaka { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 8px; color: rgba(255,255,255,.85); text-decoration: none; font-family: var(--etikett); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.tillbaka:hover { color: var(--gul); }
.laddar { color: var(--svag); margin: 0 0 20px; }

/* Nyhetsartikel med bilden som bakgrund i sidhuvudet */
.sidhuvud.medbild { isolation: isolate; background: var(--natt); }
.sidhuvud.medbild .bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.sidhuvud.medbild::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(42,22,64,.95) 0%, rgba(71,34,107,.86) 45%, rgba(71,34,107,.45) 100%), linear-gradient(0deg, rgba(42,22,64,.85) 0%, rgba(42,22,64,0) 55%); }
.sidhuvud.medbild::after { display: none; }
.sidhuvud.medbild.foto .bild { object-position: center 22%; }
.sidhuvud.medbild.foto::before { background: linear-gradient(90deg, rgba(42,22,64,.92) 0%, rgba(71,34,107,.7) 42%, rgba(71,34,107,.12) 100%), linear-gradient(0deg, rgba(42,22,64,.8) 0%, rgba(42,22,64,0) 50%); }
.sidhuvud.medbild.foto .wrap { min-height: clamp(420px, 52vw, 640px); }
.sidhuvud.medbild .wrap { min-height: clamp(380px, 46vw, 560px); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.artikel .bildtext { margin: 0 0 28px; padding-left: 14px; border-left: 4px solid var(--gul); font-size: .9rem; color: var(--svag); }
@media (max-width: 700px) { .sidhuvud.medbild::before { background: linear-gradient(0deg, rgba(42,22,64,.96) 0%, rgba(71,34,107,.8) 55%, rgba(71,34,107,.5) 100%); } }

/* Nyhetssidan */
.nyheter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.nyhet { display: flex; flex-direction: column; color: var(--text); text-decoration: none; border-radius: var(--r); overflow: hidden; background: var(--vit); border: 1px solid var(--linje); transition: transform .2s, box-shadow .2s; }
.nyhet:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -22px rgba(42,22,64,.5); }
.nyhet img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--lila-tint); }
.nyhet .text { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nyhet time { font-family: var(--etikett); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--lila); }
.nyhet b { font-family: var(--display); font-weight: 800; font-size: 1.1rem; line-height: 1.2; }
.nyhet .utdrag { margin: 0; font-size: .92rem; color: var(--svag); }
@media (max-width: 980px) { .nyheter { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .nyheter { grid-template-columns: 1fr; } }
.merrad { margin: 32px 0 0; text-align: center; }
button.pill, .pill { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 18px; border-radius: var(--r); border: 2px solid var(--lila); background: var(--vit); color: var(--lila); font-family: var(--etikett); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; cursor: pointer; line-height: 1.15; justify-content: center; }
.pill:hover { background: var(--lila); color: var(--vit); }
.artikel { max-width: 740px; margin-inline: auto; }
.artikel figure { margin: 0 0 32px; }
.artikel figure img { width: 100%; height: auto; border-radius: var(--r); background: var(--lila-tint); }
.artikel figcaption { margin-top: 10px; font-size: .88rem; color: var(--svag); }
.artikel .brod { font-size: 1.1rem; line-height: 1.72; overflow-wrap: anywhere; }
.artikel .brod p { margin: 0 0 1.1em; }
.artikel .brod h2, .artikel .brod h3, .artikel .brod h4 { font-size: 1.3rem; text-transform: none; letter-spacing: .005em; line-height: 1.2; margin: 1.6em 0 .5em; }
.artikel .brod ul, .artikel .brod ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.artikel .brod li { margin-bottom: .4em; }
.artikel .brod li p { margin: 0; }
.artikel .brod img { max-width: 100%; height: auto; border-radius: var(--r); margin: .6em 0; }
.artikel .brod blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 5px solid var(--gul); color: var(--svag); }
.artikel .fot { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--linje); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; font-size: .9rem; color: var(--svag); }

/* Matchsidan */
.lagflikar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.lagflikar button { font-family: var(--etikett); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; min-height: 44px; padding: 0 18px; border-radius: var(--r); border: 2px solid var(--linje); background: var(--vit); color: var(--text); cursor: pointer; line-height: 1.15; }
.lagflikar button:hover { border-color: var(--lila); color: var(--lila); }
.lagflikar button[aria-selected="true"] { background: var(--lila); border-color: var(--lila); color: var(--vit); }
.manad { margin-top: 36px; }
.manad:first-child { margin-top: 0; }
.manad h2 { font-size: 1.5rem; padding-bottom: 12px; border-bottom: 4px solid var(--lila); display: inline-block; }
.matchlista { list-style: none; margin: 6px 0 0; padding: 0; }
.matchlista li { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linje); }
.matchlista .dag { font-family: var(--display); font-weight: 900; font-size: 1.05rem; text-transform: uppercase; line-height: 1.1; }
.matchlista .dag small { display: block; font-family: var(--brod); font-weight: 500; font-size: .86rem; color: var(--svag); text-transform: none; }
.matchlista .par { font-weight: 600; }
.matchlista .par small { display: block; font-weight: 400; font-size: .86rem; color: var(--svag); }
.matchlista .slut { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 900; font-size: 1.3rem; white-space: nowrap; }
.matchlista li.kommande .slut { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lila); }
.matchlista li.nasta-match { background: var(--lila-tint); margin-inline: -16px; padding-inline: 16px; border-radius: var(--r); border-bottom-color: transparent; }
.kallrad { margin: 28px 0 0; font-size: .9rem; color: var(--svag); }
@media (max-width: 560px) { .matchlista li { grid-template-columns: 72px 1fr; } .matchlista .slut { grid-column: 2; } }

/* Dela */
.dela { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Luft mellan en knapprad och delningsraden under den */
.knapprad + .dela, .knappar + .dela, .knapp + .dela { margin-top: 28px; }
.delarubrik { font-family: var(--etikett); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; color: var(--svag); margin-right: 6px; }
.delaknapp { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; font-family: var(--etikett); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .07em; text-decoration: none; color: var(--lila-djup); background: var(--lila-tint); border: 0; cursor: pointer; padding-inline: 20px; transition: background .15s, color .15s; line-height: 1.15; }
.delaknapp:hover { background: var(--lila); color: var(--vit); }
.delaknapp.primar { background: var(--lila); color: var(--vit); }
.delaknapp.primar:hover { background: var(--natt); color: var(--gul); }
.delaknapp:focus-visible { outline-offset: -4px; }
.artikel .byline { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 0 0 26px; font-family: var(--etikett); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--svag); }
.artikel .byline time { color: var(--lila); }
.artikel .byline span::before { content: ""; display: inline-block; width: 9px; height: 9px; background: var(--gul); margin-right: 10px; }
.artikel #artikeldela2 { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--linje); }
.sidhuvud .dela, .lilabg .dela, .mork .dela { margin-top: 26px; }
.sidhuvud .delarubrik, .lilabg .delarubrik, .mork .delarubrik { color: rgba(255,255,255,.8); }
.sidhuvud .delaknapp, .lilabg .delaknapp, .mork .delaknapp { background: rgba(255,255,255,.14); color: var(--vit); }
.sidhuvud .delaknapp:hover, .lilabg .delaknapp:hover, .mork .delaknapp:hover { background: var(--vit); color: var(--natt); }
.sidhuvud .delaknapp.primar, .lilabg .delaknapp.primar, .mork .delaknapp.primar { background: var(--vit); color: var(--lila); }
.matchhuvud .dela { justify-content: center; }

/* Lägre fotohuvud på listsidor */
.sidhuvud.medbild.foto.lag .wrap { min-height: clamp(300px, 34vw, 430px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 22px; color: var(--vit); text-decoration: none; font-family: var(--etikett); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; background: rgba(255,255,255,.16); line-height: 1.15; }
.chips a:hover { background: var(--vit); color: var(--lila); }
.chips a:focus-visible { outline-offset: -5px; }
.knapprad { margin: 26px 0 0; }
.tvadelad.uppe { align-items: start; }

/* Klubbsidan */
.fotobg { position: relative; isolation: isolate; overflow: hidden; }
.fotobg > .bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fotobg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42,22,64,.94) 0%, rgba(71,34,107,.9) 100%); }
.syften { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.syften div { padding: 26px; background: rgba(255,255,255,.07); border-top: 6px solid var(--gul); }
.syften span { font-family: var(--display); font-weight: 900; font-size: 2.4rem; letter-spacing: .005em; line-height: 1; color: var(--gul); }
.syften p { margin: 14px 0 0; font-size: 1.1rem; font-weight: 500; }
.vision { margin: clamp(36px, 6vw, 64px) 0 0; padding: 0 0 0 clamp(18px, 3vw, 32px); border-left: 8px solid var(--gul); }
.vision p { margin: 0; font-family: var(--brod); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.4; max-width: 40ch; }
.vision footer { background: none; padding: 0; margin-top: 18px; max-width: 60ch; color: rgba(255,255,255,.85); font-size: 1.05rem; }
.motto { padding: clamp(48px, 7vw, 88px) 0; }
.motto ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.motto li { font-family: var(--display); font-weight: 900; font-size: clamp(1.9rem, 5vw, 3.8rem); line-height: .95; letter-spacing: .005em; text-transform: uppercase; color: var(--gul); }
.motto li span { display: block; color: var(--vit); font-size: .5em; letter-spacing: -.01em; margin-top: 6px; }
.tillfor { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; margin-bottom: clamp(36px, 5vw, 56px); }
.tillfor img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.tillfor h3 { color: var(--lila); font-size: .86rem; letter-spacing: .12em; margin: 26px 0 8px; }
.tillfor h3:first-child { margin-top: 0; }
.tillfor .stor { font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 8vw, 5rem); letter-spacing: .005em; line-height: .95; text-transform: uppercase; margin: 0; }
.tillfor p { margin: 10px 0 0; color: var(--svag); }
.tillfor .stor { color: var(--text); }
.beteenden { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.beteenden details { background: var(--kort); border-top: 6px solid var(--lila); padding: 6px 26px 12px; }
.beteenden summary { cursor: pointer; padding: 18px 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; font-size: 1.15rem; }
.beteenden .punktlista { margin: 0 0 14px; }
.historia { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.historiabild { position: sticky; top: 110px; }
.historiabild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.historiabild p { margin: 16px 0 0; color: var(--svag); font-size: .96rem; }
.tidslinje { list-style: none; margin: 0; padding: 0; border-top: 4px solid var(--lila); }
.tidslinje li { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--linje); }
.tidslinje .ar { font-family: var(--display); font-weight: 900; font-size: 1.6rem; letter-spacing: .005em; line-height: 1; color: var(--lila); }
.tidslinje b { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; font-size: 1.05rem; }
.tidslinje p { margin: 6px 0 0; color: var(--svag); }
.roller { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.roll { background: rgba(255,255,255,.06); display: flex; flex-direction: column; }
.roll img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 25%; }
.roll > div { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.roll h3 { font-size: 1.4rem; font-weight: 900; color: var(--gul); }
.roll p { margin: 0; color: rgba(255,255,255,.86); }
.roll .merlank { margin-top: auto; color: var(--vit); }
.smapaket.avgifter { margin-top: 0; }
.kontaktyta { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.kontaktyta h3 { color: var(--lila); font-size: .86rem; letter-spacing: .12em; margin-bottom: 12px; }
.kansli p { margin: 0 0 14px; font-size: 1.08rem; }
.uppgifter { margin: 28px 0 0; border-top: 4px solid var(--lila); }
.uppgifter div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linje); }
.uppgifter dt { color: var(--svag); }
.uppgifter dd { margin: 0; font-weight: 600; }
.personer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.personer li { background: var(--kort); border-left: 5px solid var(--lila); padding: 16px 18px; display: grid; gap: 2px; }
.personer b { font-family: var(--display); font-weight: 800; }
.personer span { color: var(--svag); font-size: .92rem; margin-bottom: 6px; }
.personer a { overflow-wrap: anywhere; font-size: .95rem; }
.kontaktbild { margin-top: 18px; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
@media (max-width: 900px) { .syften, .motto ul, .roller, .beteenden, .historia, .tillfor, .kontaktyta { grid-template-columns: 1fr; } .historiabild { position: static; } .tillfor img, .historiabild img { aspect-ratio: 16 / 10; } }
@media (max-width: 520px) { .personer { grid-template-columns: 1fr; } .tidslinje li { grid-template-columns: 1fr; gap: 6px; } }

/* Lila arkivet */
.visste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.visste li { padding: 26px; background: var(--kort); border-top: 6px solid var(--lila); }
.visste li:nth-child(3n+2) { background: var(--lila); color: var(--vit); border-top-color: var(--gul); }
.visste li:nth-child(3n+2) .stort { color: var(--gul); }
.visste li:nth-child(3n+2) p { color: rgba(255,255,255,.9); }
.visste .stort { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 4.6vw, 3.4rem); letter-spacing: .005em; line-height: 1; text-transform: uppercase; color: var(--lila); }
.visste p { margin: 14px 0 0; color: var(--svag); }
.epoker { list-style: none; margin: 0; padding: 0 0 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-color: var(--gul) rgba(255,255,255,.12); }
.epoker li { scroll-snap-align: start; padding: 24px; background: rgba(255,255,255,.07); border-top: 6px solid var(--gul); display: flex; flex-direction: column; gap: 10px; }
.epoker .epok { font-family: var(--display); font-weight: 900; font-size: 1.5rem; letter-spacing: .005em; line-height: 1; text-transform: uppercase; color: var(--gul); }
.epoker b { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; }
.epoker p { margin: 0; color: rgba(255,255,255,.86); font-size: .97rem; }
.citat { margin: 26px 0; padding-left: 20px; border-left: 8px solid var(--gul); }
.citat p { margin: 0; font-family: var(--brod); font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.4; color: var(--text); }
.citat footer { background: none; padding: 0; margin-top: 10px; color: var(--svag); font-size: .92rem; }
.foljetong { list-style: none; margin: 0; padding: 0; border-top: 4px solid var(--lila); }
.foljetong li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--linje); }
.foljetong span { font-family: var(--display); font-weight: 900; font-size: 2rem; letter-spacing: .005em; line-height: 1; color: var(--lila); }
.foljetong b { font-family: var(--display); font-weight: 800; text-transform: uppercase; }
.foljetong p { margin: 6px 0 0; color: var(--svag); }
.profiler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.profiler li { background: var(--kort); border-left: 6px solid var(--lila); padding: 20px 22px; }
.profiler b { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; font-size: 1.1rem; }
.profiler p { margin: 8px 0 0; color: var(--svag); }
.quiz { max-width: 720px; background: var(--natt); padding: clamp(24px, 4vw, 44px); }
.quiz p { margin: 0 0 20px; color: rgba(255,255,255,.88); }
.quiz .steg { font-family: var(--etikett); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gul); margin-bottom: 12px; }
.quiz h3 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; line-height: 1.08; margin-bottom: 22px; outline: none; }
.quiz .svar { display: grid; gap: 10px; }
.quiz .svar button { font: inherit; font-weight: 600; text-align: left; min-height: 52px; padding: 12px 18px; color: var(--vit); background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.22); cursor: pointer; }
.quiz .svar button:hover:not(:disabled) { border-color: var(--gul); }
.quiz .svar button:focus-visible { outline: 3px solid var(--gul); outline-offset: 2px; }
.quiz .svar button.ratt { background: var(--gul); border-color: var(--gul); color: var(--natt); }
.quiz .svar button.ratt::after { content: " ✓"; }
.quiz .svar button.fel { border-color: var(--vit); border-style: dashed; }
.quiz .svar button.fel::after { content: " ✗"; }
.quiz .svar button:disabled { cursor: default; }
.quiz .facit { margin: 20px 0 0; min-height: 1.6em; }
.quiz .facit .knapp { display: flex; width: fit-content; margin-top: 16px; }
.quiz .poang { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 9vw, 5.4rem); letter-spacing: .005em; line-height: .95; color: var(--gul); margin-bottom: 8px; }
.quizrad { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.quizrad .quiz { max-width: none; }
.topplista { background: rgba(42,22,64,.55); border-top: 6px solid var(--gul); padding: clamp(20px, 3vw, 30px); color: var(--vit); }
.topplista h3 { font-size: 1.3rem; margin-bottom: 6px; }
.toppingress, .topptom { margin: 0 0 14px; font-size: .9rem; color: rgba(255,255,255,.8); }
.topplista ol { list-style: none; margin: 0; padding: 0; }
.topplista li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 46px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.16); font-variant-numeric: tabular-nums; }
.topplista .plats { font-family: var(--display); font-weight: 900; color: var(--gul); }
.topplista .namn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topplista .res { font-family: var(--display); font-weight: 800; font-size: .86rem; }
.topplista .tid { text-align: right; font-size: .86rem; color: rgba(255,255,255,.8); }
.topplista li.jag { background: rgba(255,255,255,.12); box-shadow: inset 4px 0 0 var(--gul); margin-inline: -10px; padding-inline: 10px; border-top-color: transparent; }
.topplista li.jag .plats { color: var(--gul); }
.topplista li.jag .tid { color: rgba(255,255,255,.8); }
.toppform { margin: 0 0 24px; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.2); }
.toppform label { display: block; margin-bottom: 8px; font-family: var(--etikett); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gul); }
.toppform div { display: flex; flex-wrap: wrap; gap: 10px; }
.toppform input { flex: 1 1 200px; min-width: 0; min-height: 50px; padding: 0 14px; font: inherit; color: var(--text); background: var(--vit); border: 0; border-bottom: 3px solid var(--gul); border-radius: 0; }
.toppform input:focus-visible { outline: 3px solid var(--gul); outline-offset: 2px; }
.toppform .knapp { border: 0; cursor: pointer; }
.quiz .toppinfo { margin: 10px 0 0; font-size: .86rem; color: rgba(255,255,255,.8); }
.quiz .toppklar { margin: 0; font-weight: 600; color: var(--gul); }
@media (max-width: 900px) { .quizrad { grid-template-columns: 1fr; } }
.quizdela { margin: 4px 0 24px; }
.quiz .dela { margin-top: 0; }
.knapprad .pill { margin-left: 8px; vertical-align: top; min-height: 48px; padding-block: 8px; font-size: .9375rem; }
[id="2001"] img { margin-top: 8px; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 900px) { .visste, .profiler { grid-template-columns: 1fr; } }

/* Stötta IK Tord */
.stottakort { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stod { --snitt: 20px; display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--kort); border: 1px solid var(--linje); border-top: 6px solid var(--lila); color: var(--text); text-decoration: none; transition: transform .15s, border-color .15s; }
.stod:hover { transform: translateY(-3px); border-color: var(--lila); }
.stod:focus-visible { outline-offset: -6px; }
.stod .logo { height: 76px; display: grid; place-items: center start; margin-bottom: 6px; }
.stod .logo img { max-height: 76px; max-width: 170px; width: auto; object-fit: contain; }
.stod .logo.text { font-family: var(--display); font-weight: 900; font-size: 2.6rem; letter-spacing: .005em; text-transform: uppercase; color: var(--lila); }
.stod b { font-family: var(--display); font-weight: 900; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .005em; }
.stod p { margin: 0; color: var(--svag); font-size: .96rem; }
.stod .mer { margin-top: auto; padding-top: 8px; font-family: var(--etikett); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--lila); }
.stodnot { margin: 20px 0 0; font-size: .88rem; color: var(--svag); }
@media (max-width: 1000px) { .stottakort { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .stottakort { grid-template-columns: 1fr; } }

/* Tabell och matchdetalj */
.matchlayout { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: clamp(28px, 4vw, 56px); align-items: start; }
#tabellyta:empty { display: none; }
#tabellyta { position: sticky; top: 96px; }
@media (max-width: 980px) { .matchlayout { grid-template-columns: 1fr; } #tabellyta { position: static; order: -1; } }
.tabell h2 { font-size: 1.5rem; padding-bottom: 12px; border-bottom: 4px solid var(--lila); display: inline-block; }
.tabell .serie { margin: 10px 0 12px; font-size: .9rem; color: var(--svag); }
.tabell table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabell thead th { font-family: var(--etikett); font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--svag); padding: 8px 6px; text-align: right; border-bottom: 2px solid var(--text); }
.tabell abbr { text-decoration: none; }
.tabell tbody th { text-align: left; font-weight: 600; padding: 9px 6px 9px 0; display: flex; align-items: center; gap: 9px; line-height: 1.2; }
.tabell tbody td { text-align: right; padding: 9px 6px; }
.tabell tbody tr { border-bottom: 1px solid var(--linje); }
.tabell .plac { flex: none; width: 22px; font-family: var(--display); font-weight: 800; font-size: .86rem; color: var(--svag); }
.tabell tbody img, .utanmarke { flex: none; width: 22px; height: 22px; object-fit: contain; }
.tabell .poang { font-family: var(--display); font-weight: 900; }
.tabell tr.vi { background: var(--lila); color: var(--vit); }
.tabell tr.vi th { padding-left: 8px; }
.tabell tr.vi .plac { color: var(--gul); }
.tabell tr.vi img { background: var(--vit); padding: 2px; width: 26px; height: 26px; }
.matchhuvud .wrap { text-align: center; }
.matchhuvud .tillbaka { display: flex; width: fit-content; }
.stallning { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(12px, 4vw, 48px); align-items: center; margin-top: 18px; }
.stallning .sida { display: grid; justify-items: center; gap: 12px; }
/* Klubbmärkena får en vit kontur, samma som i sidfoten, så att de syns mot den lila bakgrunden */
.stallning .sida img, .utanmarke.stor { width: clamp(76px, 12vw, 124px); height: clamp(76px, 12vw, 124px); object-fit: contain; }
.stallning .sida img { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }
.utanmarke.stor { display: grid; place-items: center; background: rgba(255,255,255,.14); font-family: var(--display); font-weight: 900; font-size: 2rem; }
.stallning .sida b { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; font-size: clamp(.95rem, 2.2vw, 1.5rem); line-height: 1.1; }
.stallning .res { font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 9vw, 6rem); letter-spacing: .005em; line-height: 1; color: var(--gul); white-space: nowrap; }
.narvar { margin: 22px 0 0; color: rgba(255,255,255,.88); }
.minfotboll { --snitt: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: clamp(22px, 3vw, 32px); margin-bottom: clamp(36px, 5vw, 56px); background: var(--natt); color: var(--vit); border-left: 6px solid var(--gul); }
.minfotboll .overrad { color: var(--gul); margin-bottom: 6px; }
.minfotboll b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(1.3rem, 2.6vw, 1.9rem); text-transform: uppercase; letter-spacing: .005em; line-height: 1.05; }
.minfotboll p:not(.overrad) { margin: 8px 0 0; max-width: 56ch; color: rgba(255,255,255,.85); }
.matchdelar.tva { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .matchdelar.tva { grid-template-columns: 1fr; } }
.block h2 { font-size: 1.5rem; padding-bottom: 12px; border-bottom: 4px solid var(--lila); display: inline-block; margin-bottom: 14px; }
.block + .block { margin-top: 40px; }
.block h3 { margin: 28px 0 10px; color: var(--svag); font-size: .86rem; letter-spacing: .1em; }
.trupp { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.trupp li { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--linje); break-inside: avoid; font-weight: 500; }
.trupp .nr { flex: none; width: 28px; font-family: var(--display); font-weight: 900; color: var(--lila); text-align: right; }
.ledare { list-style: none; margin: 0; padding: 0; }
.ledare li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--linje); }
.ledare span { color: var(--svag); }
@media (max-width: 480px) { .trupp { columns: 1; } }
.matchlista a.par, .resultat a.motst, .nasta .lagen a { color: inherit; text-decoration: none; }
.matchlista a.par:hover, .resultat a.motst:hover { color: var(--lila); text-decoration: underline; }
.nasta .lagen a:hover { text-decoration: underline; text-decoration-color: var(--gul); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spar { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .spar li[aria-hidden] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; padding-inline: 20px; }
  * { transition: none !important; }
}
@media (prefers-contrast: more) {
  :root { --svag: #3e372f; --linje: #5e564b; }
  .hero::before { background: rgba(42,22,64,.88); }
}

/* Lagen och cuper som egna sidor */
.gruppintro { color: var(--svag); max-width: 60ch; margin: -10px 0 26px; }
.lagkortrad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.lagkort { --snitt: 18px; display: flex; flex-direction: column; gap: 4px; padding: 22px 22px 16px; background: var(--natt); color: var(--vit); border-left: 6px solid var(--gul); }
.lagkort b { font-family: var(--display); font-weight: 900; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .005em; line-height: 1.05; }
.lagkort > span { font-family: var(--etikett); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gul); }
.laglankar { display: grid; margin-top: 14px; }
.laglankar a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; color: var(--vit); text-decoration: none; font-weight: 500; border-top: 1px solid rgba(255,255,255,.16); }
.laglankar a::after { content: "→"; color: var(--gul); transition: transform .15s; }
.laglankar a:hover::after { transform: translateX(4px); }
.laglankar a:hover { color: var(--gul); }
.lagkort :focus-visible { outline-color: var(--gul); }
.cupband.platt { clip-path: none; padding-block: clamp(56px, 8vw, 96px); }

/* Grafisk profil */
.profil .markning { margin: 30px 0 0; padding: 14px 18px; border-left: 4px solid var(--gul); background: rgba(92,46,136,.06); font-size: .9rem; color: var(--svag); max-width: 78ch; }
.profil .mork .markning { background: rgba(255,255,255,.07); }
.profil .delrubrik { font-size: 1rem; letter-spacing: .04em; margin: 38px 0 16px; }
.markesrad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.markesrad .yta { --snitt: 20px; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 28px; margin-bottom: 16px; }
.markesrad .yta.vit { background: var(--vit); box-shadow: inset 0 0 0 1px var(--linje); }
.markesrad .yta.lila { background: var(--lila); }
.markesrad .yta.natt { background: var(--natt); }
.markesrad img { max-height: 100%; max-width: 62%; width: auto; object-fit: contain; }
.markesrad b, .formrad b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.markesrad p { margin: 4px 0 8px; color: var(--svag); }
.markesrad a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--etikett); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--lila); }
.regelrad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; padding-top: 30px; border-top: 4px solid var(--lila); }
.regelrad h3 { font-size: 1rem; margin-bottom: 8px; }
.regelrad p { margin: 0; color: var(--svag); }
.fargrad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fargrad.fyra { grid-template-columns: repeat(4, 1fr); }
/* Hela kortet är snedskuret, så att hörnet verkligen är borta och inte bara vitt */
.farg { --snitt: 22px; background: var(--vit); display: flex; flex-direction: column; }
.farg .prov { background: var(--f); color: var(--vit); min-height: 150px; padding: 18px; display: flex; align-items: flex-end; }
.farg.ljus .prov { color: var(--natt); box-shadow: inset 0 0 0 1px var(--linje); }
.farg .prov b { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.25rem; letter-spacing: .005em; }
.farg dl { margin: 0; padding: 14px 18px 0; display: flex; gap: 22px; }
.farg dt { font-family: var(--etikett); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--svag); }
.farg dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.farg p { margin: 10px 18px 0; color: var(--svag); font-size: .95rem; }
.farg .kalla { margin-top: auto; padding: 12px 0 16px; font-size: .8rem; }
.kopiera { font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); background: none; border: 0; border-bottom: 2px dotted var(--lila); padding: 4px 0; margin: -4px 0; min-height: 32px; cursor: copy; position: relative; }
.kopiera:hover { color: var(--lila); border-bottom-style: solid; }
.kopiera.klar { color: var(--lila); border-bottom-color: var(--gul); border-bottom-style: solid; }
.kopiera.klar::after { content: "Kopierat"; position: absolute; left: 0; bottom: calc(100% + 4px); padding: 3px 9px; background: var(--natt); color: var(--gul); font-family: var(--etikett); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.kopiatips { margin: -6px 0 0; font-size: .9rem; color: var(--svag); }
.kontraster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.kontraster li { padding: 20px 16px; display: grid; gap: 6px; box-shadow: inset 0 0 0 1px var(--linje); }
.kontraster .underkand > span { color: var(--text); }
.regelrad.tva { grid-template-columns: 1fr 1fr; border-top: 0; padding-top: 0; margin-top: 0; }
.regelrad .punktlista { margin: 0; }
.regelrad .punktlista li { font-weight: 400; color: var(--svag); }
span.provrubrik { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; }
.kontraster b { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1rem; line-height: 1.1; }
.kontraster span { font-size: .8rem; font-weight: 600; }
.typrad { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); }
.typ { border-top: 6px solid var(--lila); padding-top: 20px; }
.typnamn { font-family: var(--etikett); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--lila); margin: 0 0 14px; }
.typprov { margin: 0 0 16px; }
.typprov.rub { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; line-height: .98; font-size: clamp(1.8rem, 4vw, 3rem); }
.typprov.rub.mjuk { text-transform: none; font-weight: 800; letter-spacing: -.04em; color: var(--lila); }
.typprov.brod { font-size: 1.25rem; line-height: 1.5; }
.formrad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.formrad p { margin: 6px 0 0; color: rgba(255,255,255,.8); font-size: .95rem; }
.formprov { display: grid; place-items: center; height: 150px; margin-bottom: 16px; background: rgba(255,255,255,.06); padding: 16px; overflow: hidden; }
.snedlist { display: block; width: 100%; height: 90px; background: var(--lila); }
.provrubrik { color: var(--vit); font-size: 1.7rem; }
.provrubrik::before { content: ""; display: inline-block; width: .34em; height: .84em; margin-right: .22em; background: var(--gul); vertical-align: -.06em; }
.gulord { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.7rem; letter-spacing: .005em; }
.gulord em { font-style: normal; color: var(--gul); }
.exempelrad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.exempelrad img, .profil .tvadelad .exempelrad img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.devisprov { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; line-height: 1; font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--lila) !important; margin: 0; }
.devisprov span { background: var(--gul); color: var(--natt); padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.aldrigrad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 5vw, 64px); max-width: 1000px; }
.aldrigrad li { position: relative; padding: 16px 0 16px 40px; border-bottom: 1px solid var(--linje); font-weight: 500; }
.aldrigrad li::before { content: "×"; position: absolute; left: 0; top: 12px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--natt); color: var(--gul); font-family: var(--display); font-weight: 900; }
@media (max-width: 900px) {
  .markesrad, .regelrad, .regelrad.tva, .fargrad, .typrad, .aldrigrad { grid-template-columns: 1fr; }
  .fargrad.fyra, .formrad, .kontraster { grid-template-columns: 1fr 1fr; }
}

.rostrad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.rostrad li { --snitt: 20px; display: flex; flex-direction: column; padding: 24px; background: var(--vit); border-top: 6px solid var(--lila); }
.rostrad b { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; font-size: 1.5rem; color: var(--lila); }
.rostrad p { margin: 10px 0 16px; }
.rostrad span { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linje); font-size: .85rem; color: var(--svag); }
.tonlista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(20px, 4vw, 48px); border-top: 4px solid var(--lila); }
.tonlista > div { padding: 20px 0; border-bottom: 1px solid var(--linje); }
.tonlista b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.tonlista p { margin: 6px 0 0; color: var(--svag); }
.tonlista .exempel, .forefter p { color: var(--text); }
.tonlista .exempel { margin-top: 12px; padding-left: 14px; border-left: 4px solid var(--lila); font-weight: 500; }
.sprakrad { margin-top: 38px !important; gap: clamp(24px, 5vw, 64px); }
.sprakrad .punktlista li { color: var(--text); }
.forefter { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.forefter li { display: grid; grid-template-columns: 1fr 1fr; background: var(--vit); }
.forefter p { margin: 0; padding: 20px 22px; }
.forefter span { display: block; margin-bottom: 6px; font-family: var(--etikett); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.forefter .fore { color: var(--svag); border-left: 6px solid var(--natt); }
.forefter .fore span { color: var(--natt); }
.forefter .efter { background: var(--lila-tint); border-left: 6px solid var(--lila); font-weight: 500; }
.forefter .efter span { color: var(--lila); }
@media (max-width: 900px) { .rostrad { grid-template-columns: 1fr 1fr; } .tonlista, .forefter li { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .rostrad { grid-template-columns: 1fr; } }

/* Mallverkstaden */
.mallsida .markning { margin: 30px 0 0; padding: 14px 18px; border-left: 4px solid var(--gul); background: rgba(92,46,136,.06); font-size: .9rem; color: var(--svag); max-width: 78ch; }
.mallval { display: grid; grid-template-columns: repeat(9, 1fr); gap: 12px; margin-bottom: 36px; }
.mallval button { padding: 0 0 10px; min-width: 0; font-size: .75rem !important; letter-spacing: 0 !important; border: 0; background: var(--kort); cursor: pointer; display: grid; gap: 8px; font-family: var(--etikett); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text); border-bottom: 6px solid transparent; }
.mallnar { margin: -20px 0 32px; max-width: 62ch; font-size: 1rem; color: var(--text); }
.mallval canvas { width: 100%; height: auto; display: block; }
.mallval button[aria-pressed="true"] { border-bottom-color: var(--gul); background: var(--natt); color: var(--vit); }
.verkstad { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.dukyta { position: sticky; top: 96px; }
#duk { display: block; width: 100%; height: auto; max-height: 76vh; object-fit: contain; background: var(--papper); box-shadow: 0 18px 40px rgba(42,22,64,.18); }
.dukinfo { margin: 12px 0 0; font-size: .85rem; color: var(--svag); font-variant-numeric: tabular-nums; }
.mallvarning { margin: 12px 0 0; padding: 12px 16px; background: var(--kort); border-left: 4px solid var(--gul); color: var(--text); font-weight: 600; }
.laddayta { margin-top: 14px; padding: 14px 0 0; border-top: 4px solid var(--lila); }
.laddarubrik { margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; }
.laddarad { display: flex; flex-wrap: wrap; gap: 8px; }
.laddaknapp { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 0; cursor: pointer; background: var(--lila); color: var(--vit); font-family: var(--etikett); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; line-height: 1.15; }
.laddaknapp::before { content: "↓"; font-size: 1.1rem; line-height: 1; }
.laddaknapp.primar { background: var(--vit); color: var(--lila); }
.laddaknapp:hover { box-shadow: inset 0 -4px 0 var(--natt); }
.laddaknapp[disabled] { opacity: .55; cursor: progress; }
.laddayta .hjalp { margin: 10px 0 0; font-size: .88rem; color: var(--svag); }
.laddatips { display: none; }
@media (pointer: coarse) { .laddatips { display: block; } }
@media (max-width: 900px) {
  /* På mobilen ligger nedladdningen kvar i nederkant medan man skriver, så man slipper skrolla tillbaka */
  .laddayta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--vit); border-top: 4px solid var(--lila); box-shadow: 0 -10px 24px rgba(42,22,64,.16); }
  .laddayta .laddarubrik, .laddayta .hjalp { display: none; }
  .laddarad { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .laddaknapp { flex: none; }
  .mallsida { padding-bottom: 84px; }
}
.panel h3 { font-size: 1rem; letter-spacing: .04em; margin: 30px 0 14px; padding-top: 18px; border-top: 4px solid var(--lila); }
.panel h3:first-child { margin-top: 0; }
.valrad { display: flex; flex-wrap: wrap; gap: 8px; }
.valrad button { min-height: 44px; padding: 0 18px; border: 1px solid var(--linje); background: var(--vit); cursor: pointer; font-family: var(--etikett); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text); line-height: 1.15; }
.valrad button[aria-pressed="true"] { background: var(--lila); border-color: var(--lila); color: var(--vit); }
.faltyta { display: grid; gap: 14px; }
.bildrutor { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bildrutor button { aspect-ratio: 4 / 3; border: 0; padding: 0; background-size: cover; background-position: center; cursor: pointer; outline-offset: 2px; }
.bildrutor button[aria-pressed="true"] { box-shadow: inset 0 0 0 4px var(--gul), 0 0 0 2px var(--natt); }
.egenbild { display: grid; gap: 7px; margin-top: 16px; font-family: var(--etikett); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--lila-djup); }
.egenbild input { font: 400 1rem var(--brod); text-transform: none; letter-spacing: 0; color: var(--text); }
.reglage { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-top: 16px; font-weight: 500; }
.reglage input { grid-column: 1 / -1; width: 100%; accent-color: var(--lila); min-height: 28px; }
.reglage output { font-variant-numeric: tabular-nums; color: var(--svag); }
.panel .hjalp { margin: 8px 0 0; font-size: .88rem; color: var(--svag); }
.panel #laddaner { border: 0; cursor: pointer; margin-bottom: 20px; }
.panel .kopiera { margin-top: 10px; }
@media (max-width: 900px) {
  .mallval { grid-template-columns: repeat(3, 1fr); }
  .verkstad { grid-template-columns: minmax(0, 1fr); }
  .dukyta { position: static; }
  #duk { max-height: none; }
}

.bankintro { color: var(--svag); max-width: 62ch; }
.bankrad { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 20px 0; }
.bankrad span { color: var(--svag); font-size: .92rem; }
.bankalla { min-height: 48px; padding: 0 4px; border: 0; background: none; cursor: pointer; font-family: var(--etikett); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lila); text-decoration: underline; text-underline-offset: 4px; }
.bankbilder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.bankbilder label { position: relative; display: block; cursor: pointer; background: var(--kort); }
.bankbilder img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bankbilder span { display: block; }
.bankbilder input { position: absolute; left: 10px; top: 10px; width: 28px; height: 28px; margin: 0; accent-color: var(--lila); cursor: pointer; }
.bankbilder label:has(input:checked) { outline: 4px solid var(--gul); outline-offset: -4px; background: var(--lila-tint); }
.bankbilder label:has(input:checked) span { color: var(--text); font-weight: 600; }
.bankbilder label:has(input:focus-visible) { outline: 3px solid var(--lila); outline-offset: 2px; }
@media (max-width: 560px) { .bankbilder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bankbilder small { display: none; } }

.signaturprov { margin: 14px 0; padding: 18px; background: var(--vit); border: 1px solid var(--linje); overflow-x: auto; }
#kopierasignatur::before { content: none; }

.banksida .markning { margin: 30px 0 0; padding: 14px 18px; border-left: 4px solid var(--gul); background: rgba(92,46,136,.06); font-size: .9rem; color: var(--svag); max-width: 78ch; }
.bankfilter { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; gap: 18px clamp(18px, 3vw, 36px); align-items: end; padding-bottom: 22px; border-bottom: 4px solid var(--lila); }
.filterrubrik { margin: 0 0 7px; font-family: var(--etikett); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--lila-djup); }
.bankrad { position: sticky; top: 72px; z-index: 20; background: var(--vit); padding: 12px 0; margin: 0 0 8px; }
.bankrad .banktraffar { margin-left: auto; }
.bankbilder li { display: flex; flex-direction: column; background: var(--kort); }
.bankbilder label span { padding: 10px 12px 0; font-size: .95rem; font-weight: 600; color: var(--text); }
.bankbilder small { display: block; padding: 2px 12px 8px; font-size: .78rem; color: var(--svag); }
.bankbilder li > a { margin-top: auto; padding: 0 12px; min-height: 44px; display: flex; align-items: center; font-family: var(--etikett); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--lila); border-top: 1px solid var(--linje); text-decoration: none; }
.bankbilder li > a::after { content: "→"; margin-left: 8px; }
.bankbilder li > a:hover { background: var(--lila-tint); }
.bankbilder { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.banktomt { padding: 40px 0; color: var(--svag); }
.bildbanklank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: -4px 0 12px; }
.bildbanklank span { font-size: .88rem; color: var(--svag); }
@media (max-width: 900px) { .bankfilter { grid-template-columns: 1fr; } .bankrad { top: 64px; } .bankrad .banktraffar { margin-left: 0; } }

.presmall { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(56px, 8vw, 96px); padding-top: clamp(40px, 6vw, 64px); border-top: 6px solid var(--lila); }
.presmall p { color: var(--svag); max-width: 56ch; }
.presmall .hjalp { font-size: .88rem; }
.presmall img { width: 100%; height: auto; box-shadow: 0 18px 40px rgba(42,22,64,.18); }
@media (max-width: 900px) { .presmall { grid-template-columns: 1fr; } }

/* Inloggning */
.inloggruta { --snitt: 22px; max-width: 560px; padding: clamp(24px, 4vw, 40px); background: var(--kort); border-top: 6px solid var(--lila); }
.inloggruta h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 12px; }
.inloggruta p { color: var(--svag); }
.googleknapp { min-height: 44px; margin: 22px 0 10px; }
.inloggstatus { min-height: 1.6em; font-weight: 600; color: var(--text) !important; }
.inloggruta .hjalp { font-size: .9rem; margin-bottom: 0; }
.internrad { margin: 18px 0 0; font-size: .9rem; color: rgba(255,255,255,.8); }
.internrad a { color: var(--gul); }

/* Supportershop */
.shoprad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 4px solid var(--lila); }
.shopantal { margin: 0; color: var(--svag); font-size: .92rem; }
.produkter { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.produkt { --snitt: 20px; display: flex; flex-direction: column; background: var(--kort); min-width: 0; }
.pbild { display: block; width: 100%; padding: 0; border: 0; background: var(--lila); cursor: zoom-in; }
.pbild img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .25s; }
.pbild:hover img { transform: scale(1.04); }
.pbild:focus-visible { outline-offset: -5px; outline-color: var(--gul); }
.ptext { padding: 18px 20px 0; }
.pkat { margin: 0 0 4px; font-family: var(--etikett); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--lila); }
.produkt h3 { font-size: 1.25rem; letter-spacing: .005em; line-height: 1.05; }
.pkort { margin: 8px 0 0; color: var(--svag); font-size: .95rem; }
.pfot { margin-top: auto; padding: 16px 20px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ppris { font-family: var(--display); font-weight: 900; font-size: 1.5rem; letter-spacing: .005em; }
.pknappar { display: inline-flex; align-items: center; gap: 12px; }
.pmer { min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer; font-family: var(--etikett); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--lila); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.produkt .knapp { min-height: 44px; padding: 6px 18px; font-size: .8125rem; }
.shopfraga { margin: 28px 0 0; color: var(--svag); }
.produktruta { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; background: var(--vit); color: var(--text); overflow: auto; }
.produktruta::backdrop { background: rgba(42,22,64,.72); }
.pr-inne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pr-inne img { display: block; width: 100%; height: 100%; max-height: 80vh; object-fit: cover; background: var(--lila); }
.pr-inne > div { padding: clamp(24px, 4vw, 44px); align-self: center; }
.pr-inne h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.pr-pris { font-family: var(--display); font-weight: 900; font-size: 2rem; letter-spacing: .005em; margin: 10px 0 14px; color: var(--lila); }
.pr-not { padding: 10px 14px; border-left: 4px solid var(--gul); background: var(--kort); font-size: .92rem; }
.pr-info { margin: 14px 0 0; font-size: .88rem; color: var(--svag); }
.produktruta .stang { position: absolute; right: 8px; top: 8px; z-index: 2; width: 48px; height: 48px; border: 0; cursor: pointer; background: var(--natt); color: var(--vit); font-size: 1.7rem; line-height: 1; }
.produktruta .stang:focus-visible { outline: 3px solid var(--gul); outline-offset: -5px; }
@media (max-width: 700px) {
  .produkter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .ptext { padding: 14px 14px 0; } .pfot { padding: 12px 14px 18px; }
  .produkt h3 { font-size: 1.05rem; } .pkort { display: none; } .ppris { font-size: 1.25rem; }
  .pknappar { width: 100%; justify-content: space-between; }
  .pr-inne { grid-template-columns: 1fr; } .pr-inne img { max-height: 46vh; }
}

/* Rosenlunds IP */
.rosenlund .markning { margin: 26px 0 0; padding: 14px 18px; border-left: 4px solid var(--gul); background: rgba(92,46,136,.06); font-size: .9rem; color: var(--svag); max-width: 78ch; }
.delrubrik0 { font-size: 1rem; letter-spacing: .04em; margin: 0 0 12px; }
.punktlista + .delrubrik0, p + .delrubrik0 { margin-top: 28px; }
.plankarta { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.kartbild { position: relative; }
.kartbild img { display: block; width: 100%; height: auto; }
.prick { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.prick span { display: grid; place-items: center; width: 32px; height: 32px; background: var(--lila); color: var(--vit); font-family: var(--display); font-weight: 900; font-size: .95rem; box-shadow: 0 0 0 3px var(--vit); clip-path: none; transition: transform .15s, background .15s; }
.prick:hover span, .prick[aria-pressed="true"] span { background: var(--vit); color: var(--lila); box-shadow: 0 0 0 3px var(--lila); transform: scale(1.2); }
.prick:focus-visible { outline: 3px solid var(--lila); outline-offset: 0; }
.kartbild.ritad .prick:focus-visible span { background: var(--natt); color: var(--vit); transform: scale(1.25); }
.kartlista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 620px; overflow-y: auto; }
.kartlista li { background: var(--kort); border-left: 6px solid transparent; }
.kartlista button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--text); }
.kartlista .nr { flex: none; display: grid; place-items: center; width: 30px; height: 30px; background: var(--lila); color: var(--vit); font-family: var(--display); font-weight: 900; font-size: .9rem; }
.kartlista b { font-family: var(--etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: .92rem; }
.kartlista p { display: none; margin: 0; padding: 0 14px 14px 56px; color: var(--svag); font-size: .95rem; }
.kartlista li.vald { border-left-color: var(--lila); background: var(--lila-tint); }
.kartlista li.vald p { display: block; }
.kartlista li.vald .nr { background: var(--natt); color: var(--vit); }
.kartbild.ritad { background: var(--kort); }
.kartbild.ritad svg { display: block; width: 100%; height: auto; }
.kartbild.ritad .prick span { width: 36px; box-shadow: none; outline: 3px solid var(--vit); outline-offset: -3px; }
.kartbild.ritad .prick:hover span, .kartbild.ritad .prick[aria-pressed="true"] span { background: var(--vit); color: var(--lila); outline-color: var(--lila); transform: scale(1.25); }
.kartbild.ritad .plan { transition: opacity .15s; }
.kartbild.ritad.harval .plan:not(.vald) { opacity: .55; }
.kartforklaring { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 16px 0 0; font-size: .9rem; color: var(--svag); }
.kartforklaring .ruta { display: inline-block; width: 22px; height: 16px; margin-right: -14px; }
.kartforklaring .lila { background: var(--lila); } .kartforklaring .djup { background: var(--lila-djup); }
/* Samma gröna som planerna i kartan (_bygg/plankarta.py), med samma genomskinlighet mot pappret */
.kartforklaring .gras { background: rgba(63,154,74,.82); } .kartforklaring .konst { background: rgba(44,122,58,.82); }
.kartforklaring .gulkant { background: rgba(63,154,74,.82); box-shadow: 0 0 0 3px var(--gul); margin-left: 3px; }
.kartforklaring .natt { background: var(--natt); }
.kartforklaring .pil { display: inline-block; width: 0; height: 0; margin-right: -14px; border-style: solid; border-width: 9px 20px 9px 0; border-color: transparent var(--gul) transparent transparent; filter: drop-shadow(0 0 1px var(--natt)) drop-shadow(0 0 1px var(--natt)); }
.husforklaring { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; color: var(--svag); }
.husforklaring b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; background: var(--natt); color: var(--vit); font-family: var(--display); font-weight: 800; font-size: .75rem; }
.flygbild { margin: 36px 0 0; max-width: 860px; }
.flygbild img { display: block; width: 100%; height: auto; }
.flygbild figcaption { margin-top: 10px; font-size: .9rem; color: var(--svag); }
@media (max-width: 900px) { .kartbild.ritad .prick span { width: 32px; } }
.bildvagg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bildvagg li.bred { grid-column: span 2; grid-row: span 2; }
.bildvagg img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 900px) {
  .plankarta { grid-template-columns: 1fr; }
  .kartlista { max-height: none; }
  .bildvagg { grid-template-columns: 1fr 1fr; }
  .prick span { width: 26px; height: 26px; font-size: .8rem; }
}

.fotrad a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.fotrad a:hover { color: var(--vit); }
.fotrad { align-items: center; }

/* Kakor och samtycke */
.kakruta { padding: 0; margin: 0; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: var(--natt); color: var(--vit); border-top: 6px solid var(--gul); box-shadow: 0 -14px 40px rgba(42,22,64,.35); }
.kakinne { max-width: 1200px; margin: 0 auto; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; }
.kakruta h2 { font-size: 1.15rem; margin-bottom: 6px; color: var(--vit); }
.kakruta p { margin: 0; max-width: 70ch; font-size: .95rem; color: rgba(255,255,255,.88); }
.kakruta a { color: var(--gul); }
.kakknappar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Ja och nej har samma form, storlek och tyngd: det ska vara lika lätt att neka som att godkänna */
.kakknappar button { min-height: 44px; padding: 0 22px; border: 2px solid var(--vit); background: var(--vit); color: var(--lila); cursor: pointer; font-family: var(--etikett); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .07em; line-height: 1.15; }
.kakknappar button:hover { box-shadow: inset 0 -4px 0 var(--natt); }
.kakknappar button:focus-visible { outline: 3px solid var(--natt); outline-offset: -5px; }
.kakpanel .kakknappar button:focus-visible, .kakpanel .stang:focus-visible { outline: 3px solid var(--gul); outline-offset: -5px; }
.kakknappar .kaklank { background: none; border-color: transparent; color: var(--vit); text-decoration: underline; text-underline-offset: 4px; clip-path: none; padding-inline: 8px; }
.kakknappar .kaklank:hover { box-shadow: none; color: var(--gul); }
.kakpanel { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: clamp(24px, 4vw, 40px); border: 0; border-top: 6px solid var(--lila); background: var(--vit); color: var(--text); }
.kakpanel::backdrop { background: rgba(42,22,64,.72); }
.kakpanel h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 10px; padding-right: 48px; }
.kakpanel > p { color: var(--svag); margin: 0 0 18px; }
.kakpanel .stang { position: absolute; right: 10px; top: 10px; width: 48px; height: 48px; border: 0; cursor: pointer; background: var(--natt); color: var(--vit); font-size: 1.7rem; line-height: 1; }
.kaklista { list-style: none; margin: 0 0 22px; padding: 0; border-top: 4px solid var(--lila); }
.kaklista li { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--linje); }
.kaklista b { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.kaklista p { margin: 4px 0 0; color: var(--svag); font-size: .92rem; }
.kaklista .alltid { flex: none; font-family: var(--etikett); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--lila); }
.vaxel { flex: none; position: relative; width: 60px; height: 34px; cursor: pointer; }
.vaxel input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vaxel span { position: absolute; inset: 0; background: var(--vit); border: 2px solid var(--svag); transition: background .15s; }
.vaxel span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; background: var(--svag); transition: transform .15s, background .15s; }
.vaxel input:checked + span { background: var(--lila); border-color: var(--lila); }
.vaxel input:checked + span::after { transform: translateX(26px); background: var(--gul); }
.vaxel input:focus-visible + span { outline: 3px solid var(--lila); outline-offset: 3px; }
.kakpanel .kakknappar button { border-color: var(--lila); background: var(--lila); color: var(--vit); }
.kakpanel .kakknappar button:hover { box-shadow: inset 0 -4px 0 var(--gul); }
.kakfot { margin: 20px 0 0 !important; font-size: .9rem; }
.kakknapp { font: inherit; color: inherit; background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kakknapp:hover { color: var(--vit); }
.fotrad .fotlankar { display: inline-flex; flex-wrap: wrap; gap: 4px 22px; }
@media (max-width: 760px) {
  .kakinne { grid-template-columns: 1fr; }
  .kakknappar button:not(.kaklank) { flex: 1 1 140px; }
  .kaklista li { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .vaxel span, .vaxel span::after { transition: none; } }

.textknapp { font: inherit; color: var(--lila); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Löpande textsidor */
.lopande h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 44px 0 14px; padding-top: 18px; border-top: 4px solid var(--lila); }
.lopande p, .lopande li { max-width: 68ch; }
.lopande p { color: var(--text); }
.lopande .datumrad { color: var(--svag); font-size: .92rem; margin: 0; }
.lopande .punktlista li { font-weight: 400; }

/* Bli medlem */
.wrap.smal { max-width: 860px; }
.medlemssteg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.medlemssteg li { --snitt: 20px; padding: 26px; background: var(--kort); border-top: 6px solid var(--lila); }
.medlemssteg b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; margin: 14px 0 6px; }
.medlemssteg p { margin: 0; color: var(--svag); }
.medlemssteg .nr, .medlemsform legend .nr { display: inline-grid; place-items: center; width: 40px; height: 40px; background: var(--gul); color: var(--natt); font-family: var(--display); font-weight: 900; }
.formintro { color: var(--svag); max-width: 60ch; margin: -8px 0 28px; }
.formreserv { padding: 26px; background: var(--lila-tint); border-left: 6px solid var(--lila); }
.formreserv p:first-child { margin-top: 0; }
.medlemsform { display: grid; gap: 22px; }
.medlemsform fieldset { --snitt: 22px; margin: 0; min-width: 0; padding: clamp(20px, 3.4vw, 34px); border: 0; background: var(--kort); border-top: 6px solid var(--lila); display: grid; gap: 18px; }
.medlemsform fieldset[hidden], .medlemsform [hidden] { display: none; }
.medlemsform legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; display: flex; align-items: center; gap: 14px; font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(1.1rem, 2.4vw, 1.4rem); }
.medlemsform legend + * { clear: both; }
.medlemsform legend .nr { flex: none; font-size: 1rem; }
.faltrad { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.faltrad.kort { grid-template-columns: 180px 1fr; }
.faltrad > * { min-width: 0; }
.falt { display: grid; gap: 7px; align-content: start; }
.falt > span { font-family: var(--etikett); font-weight: 700; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--lila-djup); }
.falt .valfri { font-family: var(--brod, inherit); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--svag); margin-left: 6px; }
.falt input:not([type=radio]):not([type=checkbox]), .falt select, .falt textarea { width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--text); background: var(--vit); border: 1px solid var(--linje); border-bottom: 3px solid var(--lila); border-radius: 0; appearance: none; -webkit-appearance: none; }
.falt select { background-image: linear-gradient(45deg, transparent 50%, var(--lila) 50%), linear-gradient(135deg, var(--lila) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 15px) 22px; background-size: 7px 7px; background-repeat: no-repeat; padding-right: 44px; }
.falt textarea { resize: vertical; min-height: 84px; }
.falt input:focus-visible, .falt select:focus-visible, .falt textarea:focus-visible { outline: 3px solid var(--lila); outline-offset: 0; border-color: var(--lila); }
.falt.inskjuten { margin-left: 38px; }
.faltinfo { margin: 0; color: var(--svag); }
.faltgrupp { display: grid; gap: 18px; }
.faltgrupp + .faltgrupp { padding-top: 22px; border-top: 1px solid var(--linje); }
.faltgrupp h4, .faltgrupp .faltrubrik { margin: 0; font-family: var(--etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; }
.valkort { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.valkort label { position: relative; display: block; cursor: pointer; }
.valkort input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.valkort span { display: block; height: 100%; padding: 18px 20px; background: var(--vit); border: 1px solid var(--linje); border-left: 3px solid var(--linje); color: var(--svag); font-size: .95rem; transition: border-color .15s, background .15s; }
.valkort b { display: block; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--text); margin-bottom: 4px; }
.valkort input:checked + span { border-color: var(--lila); border-left-color: var(--lila); background: var(--lila-tint); }
.valkort input:focus-visible + span { outline: 3px solid var(--lila); outline-offset: 2px; }
.radrad { display: flex; flex-wrap: wrap; gap: 10px; }
.radrad label { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 18px; background: var(--vit); border: 1px solid var(--linje); cursor: pointer; font-weight: 500; }
.radrad input, .kryss input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--lila); flex: none; margin: 0; }
.kryss { display: flex; align-items: flex-start; gap: 14px; min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 500; }
.kryss + .kryss, .falt.inskjuten + .kryss { border-top: 1px solid var(--linje); }
.extrafalt { position: absolute; left: -9999px; width: 1px; height: 1px; }
.formslut { display: grid; gap: 16px; justify-items: start; }
.formslut .knapp { border: 0; cursor: pointer; padding-inline: 32px; }
.formslut .knapp[disabled] { opacity: .55; cursor: default; }
.formslut p { margin: 0; color: var(--svag); font-size: .92rem; max-width: 62ch; }
@media (max-width: 760px) {
  .medlemssteg, .valkort, .faltrad, .faltrad.kort { grid-template-columns: 1fr; }
  .falt.inskjuten { margin-left: 0; }
  .formslut .knapp { width: 100%; }
}

/* Mobilanpassning */
.matchdelar > div, .matchlayout > *, .tvadelad > *, .kontaktyta > *, .historia > *, .tillfor > * { min-width: 0; }
@media (max-width: 700px) {
  section { padding: 52px 0; }
  .wrap { width: min(1240px, 100% - 32px); }
  h2 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .rubrikrad { margin-bottom: 24px; }
  .hero .wrap { min-height: 0; padding: 96px 0 120px; }
  .hero h1 { font-size: clamp(2.6rem, 14vw, 4rem); }
  .hero .knappar .knapp:not(.kontur), .kontaktband .knappar .knapp:not(.kontur), .kontakt .knappar .knapp:not(.kontur) { flex: 1 1 100%; }
  .hero .knappar .knapp.kontur, .kontaktband .knappar .knapp.kontur, .kontakt .knappar .knapp.kontur { flex: 1 1 calc(50% - 6px); min-height: 44px; font-size: .8125rem; padding-inline: 12px; }
  .cuphero .wrap { padding-bottom: 72px; }
  .sidhuvud .wrap { padding: 44px 0 30px; }
  .sidhuvud::after { display: none; }
  .sidhuvud h1 { font-size: clamp(2.3rem, 12vw, 3.4rem); }
  .sidhuvud.medbild .wrap { min-height: 300px; }
  .sidhuvud.medbild.foto .wrap { min-height: 340px; }
  .sidhuvud.medbild.foto.lag .wrap { min-height: 250px; }
  .siffror-band { padding: 56px 0; }
  .siffra b { font-size: clamp(1.9rem, 10vw, 2.8rem); }
  .siffra span { font-size: .75rem; }
  .toppnyhet { min-height: 300px; }
  .bildkort { min-height: 280px; }
  .matchkort { --snitt: 16px; }
  .flikar button { padding: 0 16px; min-height: 48px; }
  .cupband { padding-block: 72px; }
  .cup { padding: 22px; }
  .stod .logo { height: 60px; }
  .partners { grid-template-columns: 1fr 1fr; }
  .partners a { height: 92px; padding: 14px; }
  .spar li { width: 150px; }
  .spar a { height: 92px; }
  footer .devis { font-size: clamp(2rem, 11vw, 3.2rem); }
  .fotkol { gap: 26px 20px; }
  .fotkol a, .topprad a { min-height: 44px; }
  .delaknapp { padding-inline: 16px; }
  .dela { gap: 6px; }
  .vision p { font-size: 1.2rem; }
  .motto li { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .tillfor .stor { font-size: clamp(2.4rem, 13vw, 3.4rem); }
  .beteenden details { padding: 4px 18px 10px; }
  .personer a, .kansli a { display: inline-flex; align-items: center; min-height: 44px; }
  .epoker { grid-auto-columns: 82%; }
  .quiz { padding: 22px 18px; }
  .stallning { gap: 10px; }
  .stallning .res { font-size: clamp(2.2rem, 12vw, 3.2rem); }
  .stallning .sida b { font-size: .86rem; }
  .minfotboll .knapp { width: 100%; }
  .matchlista li.nasta-match { margin-inline: -10px; padding-inline: 10px; }
  .smapaket li { flex-direction: column; gap: 2px; }
  .knapprad .pill { margin: 10px 0 0; }
  .artikel .brod { font-size: 1.04rem; }
}
@media (max-width: 560px) {
  /* Tabellen på matchsidan: bara matcher, målskillnad och poäng får plats */
  .tabell.full th:nth-child(3), .tabell.full td:nth-child(3), .tabell.full th:nth-child(4), .tabell.full td:nth-child(4), .tabell.full th:nth-child(5), .tabell.full td:nth-child(5), .tabell.full th:nth-child(6), .tabell.full td:nth-child(6) { display: none; }
  .tabell tbody th { font-size: .95rem; }
  .trupp { columns: 1; }
}

/* Smala telefoner (320–400 px): toppraden får plats och tabellen krymper */
@media (max-width: 400px) {
  .topprad .wrap { gap: 10px; }
  .topprad .slogan { letter-spacing: .04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topprad nav { flex: none; }
}
@media (max-width: 340px) {
  .tabell thead th, .tabell tbody td { padding-inline: 3px; }
  .tabell tbody th { gap: 6px; font-size: .92rem; }
  .tabell .plac { width: 16px; }
}
/* Grafisk profil och mallar på smala telefoner */
.fargrad > *, .formrad > *, .kontraster > *, .rostrad > *, .markesrad > * { min-width: 0; }
.egenbild input { max-width: 100%; min-width: 0; }
@media (max-width: 560px) {
  .fargrad.fyra, .formrad { grid-template-columns: 1fr; }
  .formprov { height: 120px; }
}

/* Fokusmarkering som syns mot sin egen yta: nattlila på gult, gult på lila och djuplila */
.cup.huvudcup:focus-visible { outline-color: var(--gul); }
.bildkort:focus-visible, .toppnyhet:focus-visible, .nasta :focus-visible { outline-color: var(--gul); }
.flikar button:focus-visible { outline-color: var(--gul); outline-offset: -4px; }
.flikar button[aria-selected="true"]:focus-visible { outline-color: var(--natt); }
.laddaknapp:focus-visible { outline: 3px solid var(--gul); outline-offset: -5px; }
.laddaknapp.primar:focus-visible { outline-color: var(--natt); }

/* Långa nyhetsrubriker från iktord.nu sätts i den mjuka rubrikvarianten, inte versaler */
.sidhuvud.smal h1, .toppnyhet b { text-transform: none; font-weight: 800; letter-spacing: .005em; line-height: 1.12; }

/* Affischer från iktord.nu har egen text: bilden visas hel ovanför rubriken i stället för som bakgrund */
.toppnyhet.affisch { display: flex; flex-direction: column; min-height: 0; background: var(--natt); }
.toppnyhet.affisch img { position: static; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--natt); z-index: auto; }
.toppnyhet.affisch:hover img { transform: none; }
.toppnyhet.affisch::after { display: none; }
.toppnyhet.affisch .text { position: static; }

/* Heron på mobil: ingressen går över hela bredden, så toningen behöver täcka hela bilden */
@media (max-width: 700px) {
  .hero::before { background: linear-gradient(0deg, rgba(42,22,64,.94) 0%, rgba(71,34,107,.78) 60%, rgba(71,34,107,.7) 100%); }
  }

/* Plankartan: plannumren på en rak lila kvadrat (inte sned) */
.kartbild.ritad .prick span { width: 30px; height: 30px; background: var(--lila); color: var(--vit); clip-path: none; outline: none; }
.kartbild.ritad .prick span { box-shadow: 0 0 0 2px var(--vit); }
.kartbild.ritad .prick:hover span, .kartbild.ritad .prick[aria-pressed="true"] span { background: var(--lila); color: var(--vit); outline: none; box-shadow: 0 0 0 3px var(--vit); transform: scale(1.25); }
.kartbild.ritad .prick:focus-visible { outline: 3px solid var(--natt); outline-offset: 2px; box-shadow: 0 0 0 5px var(--vit); }
.kartbild.ritad .prick:focus-visible span { background: var(--natt); color: var(--vit); }
@media (max-width: 700px) { .kartbild.ritad .prick span { width: 26px; height: 26px; } }

/* Startsidan under 1919 Cupen: IK Tords matcher */
.cuplive { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(auto-fit, minmax(260px, 1.3fr)); gap: clamp(18px, 3vw, 36px); margin: 0 0 clamp(24px, 4vw, 40px); padding: clamp(20px, 3vw, 32px); background: rgba(42,22,64,.72); border-left: 6px solid var(--gul); color: var(--vit); }
.cuplive .overrad { color: var(--gul); }
.cuplive h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 4px 0 16px; }
.cuplive h4 { font-family: var(--etikett); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); margin: 0 0 8px; }
.cuplive ul { list-style: none; margin: 0; padding: 0; }
.cuplive li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.cuplive .nar { grid-column: 1 / -1; font-family: var(--etikett); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gul); }
.cuplive .nar small { margin-left: 8px; font-family: var(--brod); font-weight: 500; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.75); }
.cuplive .par { font-weight: 600; }
.cuplive .res { font-family: var(--display); font-weight: 900; font-size: 1.1rem; }
@media (max-width: 900px) { .cuplive { grid-template-columns: 1fr; } }

/* Matcher: välj mellan kommande och spelade. Ett lågmält reglage med understrykning, så att det skiljs från lagflikarna ovanför. */
.vyval { display: flex; gap: 26px; margin: 0 0 26px; border-bottom: 2px solid var(--linje); }
.vyval button { min-height: 46px; padding: 0 2px; margin-bottom: -2px; font-family: var(--etikett); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--svag); background: none; border: 0; border-bottom: 4px solid transparent; cursor: pointer; }
.vyval button span { margin-left: 4px; font-variant-numeric: tabular-nums; }
.vyval button:hover { color: var(--lila); }
.vyval button[aria-pressed="true"] { color: var(--lila); border-bottom-color: var(--lila); }
.vyval button:focus-visible { outline-offset: 2px; }
.vyval + .manad, .vyval + .tomt { margin-top: 0; }

/* Länkarna i sidfotens listor får en klickyta på minst 24 px */
footer li a { display: inline-block; padding: 3px 0; }

/* Nyhetens affisch: plats reserveras tills bilden laddats, så att texten under inte hoppar */
.artikel figure.affisch img:not(.laddad) { min-height: min(56vw, 480px); }

/* Varumärkesplattformen 2026: små justeringar som hör till de nya typsnitten.
   Archivo Narrow är smalare än Montserrat, så etiketter och menyer får ett steg större grad. */
h1 { font-weight: 800; }
h2 { font-weight: 800; font-size: clamp(2.2rem, 5.2vw, 3.9rem); line-height: .95; }
h3 { font-weight: 800; font-size: 1.3rem; letter-spacing: .01em; }
.huvudnav a { font-family: var(--etikett); font-size: .98rem; letter-spacing: .07em; }
.topprad, .topprad a, .topprad .slogan { font-family: var(--etikett); font-size: .84rem; font-weight: 700; }
.overrad { font-weight: 700; font-size: .9rem; letter-spacing: .12em; }

.menyknapp { font-family: var(--etikett); font-size: .9rem; }
.siffra { border-top: 3px solid var(--gul); padding-top: 14px; }
.siffra b { font-weight: 800; }
.siffra span { font-size: .9rem; }
/* Citat och ingresser i Caslon kursiv, som löften och citat i plattformen */
.lead { font-style: italic; }
.citat { font-style: italic; }
@media (max-width: 1300px) { .huvudnav a { font-size: .9rem; padding: 12px 8px; } }
@media (max-width: 1000px) { .huvudnav a { font-size: 1.1rem; } }

/* Historien på fler ställen: fem ögonblick, de tolv och arkivraden på startsidan */
.berattelse { font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.5; color: var(--text) !important; max-width: 48ch; }
.lilabg .berattelse, .mork .berattelse { color: var(--vit) !important; }
.lilabg .tvadelad p { color: rgba(255,255,255,.9); }
.arkivingress { font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.3rem); margin: -12px 0 28px; max-width: 52ch; }
.ogonblick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ogonblick.fem { grid-template-columns: repeat(5, 1fr); }
.ogonblick li { background: var(--kort); border-top: 3px solid var(--lila); }
.ogonblick li > a, .ogonblick.fem li { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; color: var(--text); text-decoration: none; }
.ogonblick li > a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.ogonblick .ar { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: .9; color: var(--lila); }
.ogonblick b { font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
.ogonblick p { margin: 0; color: var(--svag); font-size: .98rem; }
@media (max-width: 1100px) { .ogonblick.fem { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .ogonblick, .ogonblick.fem { grid-template-columns: 1fr; } }
.minnestavla { margin: 0; padding: clamp(26px, 4vw, 44px); background: var(--natt); color: var(--vit); text-align: center; border-top: 3px solid var(--gul); }
.minnestavla .overrad { color: var(--gul); }
.minnestavla .tavlaintro { font-style: italic; margin: 0 0 18px; color: rgba(255,255,255,.85); }
.minnestavla ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.minnestavla li { font-family: var(--etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: clamp(.95rem, 1.6vw, 1.1rem); }
.minnestavla figcaption { margin-top: 20px; font-family: var(--etikett); font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.7); }
.citat p { font-family: var(--brod); font-style: italic; }
/* En rad ur Lila arkivet på cup- och lagsidor */
.arkivnot { margin: 26px 0 0; padding-left: 14px; border-left: 3px solid var(--gul); max-width: 52ch; font-style: normal; font-size: 1rem; color: rgba(255,255,255,.9); }
.arkivnot a { font-style: normal; font-family: var(--etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--gul); margin-left: 6px; white-space: nowrap; }

/* Grafisk profil 2026 */
.statusrad { padding: 22px 0; background: var(--kort); border-bottom: 1px solid var(--linje); }
.statusrad p { margin: 0; max-width: 80ch; padding-left: 14px; border-left: 3px solid var(--gul); }
.typrad.tre { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .typrad.tre { grid-template-columns: 1fr; } }
.typprov.etikettprov { font-family: var(--etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: .95rem; color: var(--lila); }
.lilayta { display: grid; place-items: center; width: 100%; height: 100%; background: var(--lila); color: var(--vit); font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; }
.gullinje { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; color: var(--vit); padding-bottom: 8px; border-bottom: 3px solid var(--gul); }
.hjartrad { font-style: italic; color: var(--vit); font-size: 1.2rem; }
.bildregler { margin-top: 36px; }
.mork .bildregler h3 { color: var(--gul); }
.mork .bildregler .punktlista li { color: rgba(255,255,255,.85); }
ol.punktlista.numrerad { counter-reset: n; }
ol.punktlista.numrerad li { counter-increment: n; }
ol.punktlista.numrerad li::before { content: counter(n); width: auto; height: auto; background: none; top: 0; font-family: var(--display); font-weight: 800; color: var(--lila); }
.rostrad.symbolrad { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .rostrad.symbolrad { grid-template-columns: 1fr; } }

/* Knappar är lila eller vita, så fokusramen ritas utanför kanten: lila på ljus botten, gul på lila och mörk botten */
.knapp:focus-visible { outline-offset: 3px; }
.nasta a { color: var(--gul); }

.delaknapp.primar:focus-visible { outline-offset: 3px; }
/* På lila och mörka ytor är linjerna gula, på ljus botten lila */
.mork .smapaket, .mork .tidslinje, .mork .uppgifter, .mork .foljetong, .mork .regelrad, .mork .tonlista, .mork .lopande h2, .mork .block h2,
.lilabg .smapaket, .lilabg .tidslinje, .lilabg .uppgifter, .lilabg .regelrad, .lilabg .tonlista { border-color: var(--gul); }
.internrad a, .arkivnot a { display: inline-block; padding-block: 3px; }
/* Eskil bara i versaler. Långa nyhetsrubriker och namn sätts i Caslon */
.sidhuvud.smal h1, .toppnyhet b, .nyhet b, .nyhetsrad b, .artikel .brod h2, .artikel .brod h3, .artikel .brod h4 { font-family: var(--brod); font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.2; }
.personer b, .cup .format, .pris, .ppris, .summa, .siffra b, .klasser .klass, .tidslinje .ar { text-transform: uppercase; }
.arkivquiz { margin: 22px 0 0; }

/* A-lagets sida */
.truppgrupper { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.truppgrupp { background: var(--kort); border-top: 3px solid var(--lila); padding: 20px 22px; }
.truppgrupp h3 { font-size: 1.15rem; margin: 0 0 10px; color: var(--lila); }
.truppgrupp ul { list-style: none; margin: 0; padding: 0; }
.truppgrupp li { display: grid; grid-template-columns: 2.4em 1fr; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--linje); }
.truppgrupp li:first-child { border-top: 0; }
.truppgrupp .nr { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--lila); text-align: right; }
.kallrad { margin: 22px 0 0; font-size: .95rem; color: var(--svag); }
.lagfoto { margin: 0; }
.lagfoto img { width: 100%; height: auto; }
.lagfoto figcaption { margin-top: 10px; font-family: var(--etikett); font-size: .85rem; letter-spacing: .06em; color: var(--svag); }
#matcher .matchlista .tomt, #trupp .tomt { color: var(--svag); }
@media (max-width: 860px) { .personer { grid-template-columns: 1fr; } }
.matchlista li.tomt { display: block; padding: 16px 0; color: var(--svag); }
.lagfotonamn { margin-top: 14px; max-width: 80ch; font-size: .95rem; color: var(--svag); } .lagfotonamn p { margin: 0 0 6px; } .lagfotonamn b { color: var(--text); }
/* Knappar i sidhuvuden (A-laget) och cookierutan på mobil */
.sidhuvud .knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.kakknappar button { white-space: nowrap; }
/* A-lagets sidhuvud: kraftigare toning till vänster så att texten inte ligger över ansiktena */
.sidhuvud.alag::before { background: linear-gradient(90deg, rgba(42,22,64,.96) 0%, rgba(71,34,107,.88) 38%, rgba(71,34,107,.35) 70%, rgba(71,34,107,.1) 100%), linear-gradient(0deg, rgba(42,22,64,.8) 0%, rgba(42,22,64,0) 50%); }
.sidhuvud.alag .bild { object-position: 70% 40% !important; }
@media (max-width: 700px) { .sidhuvud.alag::before { background: linear-gradient(0deg, rgba(42,22,64,.96) 0%, rgba(71,34,107,.8) 55%, rgba(71,34,107,.5) 100%); } }
/* Startsidans Stötta-rad: en uppmaning, inte fyra kort */
.stottarad { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 16px clamp(24px, 4vw, 56px); align-items: center; }
.stottarad h2 { margin: 0; }
.stottarad p { margin: 0; color: var(--svag); max-width: 60ch; }
.stottarad .knapprad { margin: 0; }
@media (max-width: 860px) { .stottarad { grid-template-columns: 1fr; } }

/* Beslut 2026-10-31: en regel för kort. En kort linje överst, gul på mörk botten och lila på ljus.
   Inga kantlinjer i full bredd eller höjd. Stora siffror är vita, gult bara som linjen. */
.paket, .beteenden details, .personer li, .visste li, .profiler li, .stod, .rostrad li, .inloggruta, .medlemssteg li, .ogonblick li, .truppgrupp,
.syften div, .epoker li, .topplista, .lagkort, .cup, .siffra, .minnestavla {
  border-top: 0 !important; border-left: 0 !important; position: relative;
}
.paket::before, .beteenden details::before, .personer li::before, .visste li::before, .profiler li::before, .stod::before, .rostrad li::before,
.inloggruta::before, .medlemssteg li::before, .ogonblick li::before, .truppgrupp::before,
.syften div::before, .epoker li::before, .topplista::before, .lagkort::before, .cup::before, .siffra::before, .minnestavla::before {
  content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 4px; background: var(--lila);
}
.syften div::before, .epoker li::before, .topplista::before, .lagkort::before, .cup::before, .siffra::before, .minnestavla::before,
.visste li:nth-child(3n+2)::before, .mork .stod::before, .mork .personer li::before { background: var(--gul); }
.minnestavla::before { left: 50%; transform: translateX(-50%); }
.siffra { padding-top: 18px; }
/* Siffror och stora tal i vitt */
.siffra b, .cup .format, .cup.huvudcup .format, .quiz .poang, .visste li:nth-child(3n+2) .stort, .syften span, .epoker .epok { color: var(--vit) !important; }
.motto li { color: var(--vit); }
.motto li span { color: rgba(255,255,255,.75); }

/* Grafisk profil: signatur, exempel, bildpar, filer och tabeller */
.signatur { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: s; }
.signatur li { position: relative; padding: 22px 20px 20px; background: rgba(255,255,255,.07); counter-increment: s; }
.signatur li::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 4px; background: var(--gul); }
.signatur b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.35rem; line-height: 1.05; text-transform: uppercase; color: var(--vit); }
.signatur b::before { content: counter(s) ". "; color: var(--gul); }
.signatur p { margin: 10px 0 0; color: rgba(255,255,255,.85); font-size: .98rem; }
@media (max-width: 1100px) { .signatur { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .signatur { grid-template-columns: 1fr; } }
.exempelgalleri { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: end; }
.exempelgalleri li { margin: 0; }
.exempelgalleri li.bred { grid-column: 1 / -1; max-width: 760px; }
.exempelgalleri img { width: 100%; height: auto; box-shadow: 0 10px 30px -12px rgba(42,22,64,.45); }
.exempelgalleri span { display: block; margin-top: 8px; font-family: var(--etikett); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--svag); }
@media (max-width: 900px) { .exempelgalleri { grid-template-columns: repeat(2, 1fr); } }
.bildpar-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bildpar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.par-ok, .par-fel { background: var(--kort); padding: 14px; }
.par-ok p, .par-fel p { margin: 10px 0 0; font-size: .95rem; color: var(--svag); }
.par-ok b, .par-fel b { font-family: var(--etikett); text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; margin-right: 6px; }
.par-ok b { color: var(--lila); } .par-fel b { color: var(--text); }
.par-fel b::before { content: "× "; }
.par-ok b::before { content: "✓ "; }
.parprov { height: 130px; display: grid; }
.parprov > span { display: grid; place-items: center; overflow: hidden; position: relative; }
.parprov img { width: 72px; height: auto; }
.yta-lila { background: var(--lila); } .yta-gul { background: var(--gul); } .yta-papper { background: var(--papper); }
.yta-papper.kantlinje { box-shadow: inset 0 0 0 2px var(--lila); }
.parprov .text em { font-style: normal; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; line-height: 1; color: var(--vit); text-align: center; padding: 0 14px; }
.parprov .kantlinje em { color: var(--lila); }
.parprov em.lang { font-size: 1.15rem; max-width: 9ch; }
.gul-linje { display: block; width: 48px; height: 4px; background: var(--gul); margin: 10px auto 0; }
.parprov .text { display: flex !important; flex-direction: column; justify-content: center; align-items: center; }
.gul-knapp { background: var(--gul); color: var(--natt); font-family: var(--etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 14px 26px; }
.rak-knapp, .sned-knapp { background: var(--lila); color: var(--vit); font-family: var(--etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 12px 22px; }
.sned-knapp { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important; transform: skewX(-8deg); }
.caslon { font-family: var(--brod); font-style: italic; font-size: 1.2rem; color: var(--text); }
.skrik { font-family: var(--display); font-weight: 900; font-size: 1.5rem; color: var(--text); }
.yta-foto { background: url(/img/webb/match-900.webp) center / cover; }
.yta-foto.lugn::after { content: ""; position: absolute; inset: 0; background: rgba(71,34,107,.8); }
.yta-foto img { position: relative; z-index: 1; }
@media (max-width: 620px) { .bildpar { grid-template-columns: 1fr; } }
.fillista { list-style: none; margin: 0 0 36px; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--linje); }
.fillista li { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 6px 24px; padding: 14px 0; border-bottom: 1px solid var(--linje); }
.fillista a { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.15rem; }
.fillista span { color: var(--svag); }
@media (max-width: 700px) { .fillista li { grid-template-columns: 1fr; } }
.hierarki { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: .98rem; }
.hierarki th { text-align: left; font-family: var(--etikett); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--vit); background: var(--lila); padding: 10px 12px; }
.hierarki td { padding: 10px 12px; border-bottom: 1px solid var(--linje); vertical-align: top; }
.avsandarprov { font-family: var(--etikett); font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: .85rem; color: var(--vit) !important; background: var(--natt); padding: 18px 16px 14px; position: relative; }
.avsandarprov::before { content: ""; position: absolute; left: 16px; top: 8px; width: 40px; height: 3px; background: var(--gul); }
.webbdetaljer { margin: 0 0 14px; background: var(--kort); padding: 0 20px; }
.webbdetaljer summary { cursor: pointer; padding: 16px 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.2rem; }
.webbdetaljer[open] { padding-bottom: 20px; }
/* Veras efterkontroll: kort på lila får gul linje, formulärets fält följer kortregeln, quizrutan får linje */
.paket.topp::before { background: var(--gul); }
.medlemsform fieldset { border-top: 0 !important; position: relative; }
.medlemsform fieldset::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 4px; background: var(--lila); }
.quiz { position: relative; }
.quiz::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 4px; background: var(--gul); }
.parprov em.lang { max-width: 16ch; font-size: 1.1rem; }
.exempelgalleri a { display: block; }
.exempelgalleri a:hover span { color: var(--lila); text-decoration: underline; }

/* Beslut 2026-11-11: citat och notiser följer kortregeln. Ingen lodrät linje i full höjd, utan en kort linje
   överst: lila på ljus botten, gul på mörk. */
.citat, .vision, .arkivnot, .statusrad p, .artikel .bildtext, .artikel .brod blockquote {
  border-left: 0 !important; padding-left: 0 !important; padding-top: 16px; position: relative;
}
.markning, .mallvarning, .pr-not, .notis, .plats-art .hitta {
  border-left: 0 !important; position: relative;
}
.citat::before, .vision::before, .arkivnot::before, .statusrad p::before, .artikel .bildtext::before, .artikel .brod blockquote::before,
.markning::before, .mallvarning::before, .pr-not::before, .notis::before, .plats-art .hitta::before {
  content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 4px; background: var(--lila);
}
.vision::before, .arkivnot::before, .mork .citat::before, .mork .markning::before { background: var(--gul); }

/* Lansering 2026-11-11: plats reserveras medan nyhetslistan hämtas, så att sidfoten inte hoppar (CLS). */
.nyheter#nyhetslista:empty { min-height: 140vh; }
.nyheter[hidden] { display: none; }
#matchsida:empty { min-height: 140vh; }
/* Laddningsraden på Matcher tar ingen plats, så att listan inte hoppar upp när den döljs.
   Utan top/left ligger den kvar där den annars hade stått, ovanpå den tomma listan. */
#lagflikar + #status { position: absolute; max-width: calc(100% - 32px); }
/* Spelschemat och resultaten: plats reserveras medan de hämtas, så att sidfoten inte hoppar */
#cupschema { min-height: 70vh; }