/* Hundini – stilmall
   Färger: se CLAUDE.md. Små texter och knappar använder de mörkare
   arbetsfärgerna (--terra-mork, --salvia-mork) för att klara kontrastkraven. */

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/nunito-sans-latin.woff2') format('woff2');
}

:root {
  --salvia: #72876a;
  --salvia-mork: #5e7058;
  --terra: #da8156;
  --terra-mork: #ae5029;
  --terra-morkare: #983f1f;
  --terra-ljus: #da8156; /* = paletten, används bara på --skog-djup */
  --terra-tona: #fae3cf;
  --skog: #293f32;
  --skog-djup: #1f3127;
  --linne: #f7f1e8;
  --varm-vit: #fffcf7;
  --vit: #ffffff;
  --text: #293f32;
  --text-mjuk: #4a5a4f;
  --linje: #e4dccd;
  --fel: #a12c1c;
  --ok: #3f6b3a;

  --radie: 14px;
  --radie-liten: 10px;
  --skugga: 0 1px 2px rgba(41, 63, 50, 0.06), 0 10px 28px -12px rgba(41, 63, 50, 0.18);
  --bredd: 1180px;
  --topp-hojd: 72px;
  --font: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topp-hojd) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; color: var(--text); background: var(--linne); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--terra-mork); text-underline-offset: 0.18em; }
a:hover { color: var(--terra-morkare); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0; font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; }
:focus-visible { outline: 3px solid var(--terra-mork); outline-offset: 3px; border-radius: 4px; }

.ikon { width: 1.25em; height: 1.25em; flex: none; }
.inre { width: min(100% - 2.5rem, var(--bredd)); margin-inline: auto; }
.inre--smal { width: min(100% - 2.5rem, 860px); }

.hoppa { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--skog); color: var(--linne); padding: 0.6rem 1rem; border-radius: var(--radie-liten); }
.hoppa:focus { top: 1rem; color: var(--linne); }

/* ---------- Knappar ---------- */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.4rem; border: 2px solid var(--terra-mork); border-radius: var(--radie-liten);
  background: var(--terra-mork); color: var(--vit); font: inherit; font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}
.knapp:hover { background: var(--terra-morkare); border-color: var(--terra-morkare); color: var(--vit); }
.knapp:active { transform: translateY(1px); }
.knapp .ikon { width: 1.1em; height: 1.1em; }
.knapp--liten { min-height: 40px; padding: 0.45rem 1rem; font-size: 0.95rem; }
.knapp--bred { width: 100%; }
.knapp--kontur { background: transparent; color: var(--skog); border-color: var(--skog); }
.knapp--kontur:hover { background: var(--skog); border-color: var(--skog); color: var(--linne); }
.knapp--kontur-ljus { background: transparent; color: var(--vit); border-color: rgba(255, 255, 255, 0.85); }
.knapp--kontur-ljus:hover { background: var(--vit); border-color: var(--vit); color: var(--skog); }
.knapp--ljus { background: var(--linne); color: var(--skog); border-color: var(--linne); }
.knapp--ljus:hover { background: var(--vit); border-color: var(--vit); color: var(--skog); }
.knapp[disabled] { opacity: 0.55; cursor: not-allowed; }
.knapprad { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Sidhuvud ---------- */
.topp { position: sticky; top: 0; z-index: 50; background: rgba(247, 241, 232, 0.96); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--linje); }
.topp__inre { width: min(100% - 2.5rem, var(--bredd)); margin-inline: auto; height: var(--topp-hojd); display: flex; align-items: center; gap: 1.5rem; }
/* Ordet står i höjd med hundens bröst och är ungefär hälften så högt som hundhuvudet. Allt i em så att loggan skalar ihop. */
.logga { display: inline-flex; align-items: flex-end; gap: 0.18em; text-decoration: none; color: var(--skog); font-weight: 700; font-size: 2.25rem; letter-spacing: 0; }
.logga:hover { color: var(--skog); }
.logga__ord { display: inline-block; line-height: 1; position: relative; top: 0.17em; } /* baslinjen i jämnhöjd med hundens bröst, längst ner */
.logga__i { position: relative; display: inline-block; }
.logga__tass { position: absolute; width: 0.38em; height: 0.38em; left: 50%; top: -0.09em; transform: translateX(-50%); fill: var(--terra-mork); }
.logga--ljus .logga__tass { fill: var(--terra-ljus); }
.logga img { width: auto; height: 1.42em; }
.logga--ljus, .logga--ljus:hover { color: var(--linne); }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 0.25rem; list-style: none; padding: 0; }
.nav a { display: block; padding: 0.5rem 0.9rem; border-radius: 8px; color: var(--skog); font-weight: 600; text-decoration: none; }
.nav a:hover { background: rgba(41, 63, 50, 0.07); color: var(--skog); }
.menyknapp { display: none; }
.topp__tillbaka { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; color: var(--skog); font-weight: 600; text-decoration: none; padding: 0.5rem 0.75rem; border-radius: 8px; }
.topp__tillbaka:hover { background: rgba(41, 63, 50, 0.07); color: var(--skog); }

@media (max-width: 760px) {
  .topp__inre { gap: 0.75rem; }
  .logga { font-size: 1.9rem; }
  .topp__boka { margin-left: auto; }
  .menyknapp { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--skog); cursor: pointer; }
  .menyknapp .ikon { width: 26px; height: 26px; }
  .menyknapp .ikon--stang, .menyknapp[aria-expanded='true'] .ikon--oppna { display: none; }
  .menyknapp[aria-expanded='true'] .ikon--stang { display: block; }
  .nav { position: absolute; left: 0; right: 0; top: var(--topp-hojd); background: var(--linne); border-bottom: 1px solid var(--linje); box-shadow: var(--skugga); display: none; }
  .nav.oppen { display: block; }
  .nav ul { flex-direction: column; padding: 0.5rem 1.25rem 1rem; }
  .nav a { padding: 0.85rem 0.5rem; font-size: 1.1rem; border-bottom: 1px solid var(--linje); border-radius: 0; }
}

/* ---------- Typografi ---------- */
.overrubrik { display: block; margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terra-mork); }
.overrubrik--ljus { color: var(--terra-ljus); }
.rubrik { font-size: clamp(1.85rem, 1.3rem + 2vw, 2.75rem); margin-bottom: 1rem; }
.ingress { font-size: 1.125rem; color: var(--text-mjuk); max-width: 62ch; }
.underrubrik { font-size: 1.35rem; margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.underrubrik span { font-size: 0.98rem; font-weight: 600; color: var(--text-mjuk); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--skog-djup); color: var(--vit); }
.hero__bild { position: absolute; top: 0; right: 0; height: 100%; width: min(64%, 1000px); object-fit: cover; object-position: 60% 60%; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--skog-djup) 34%, rgba(31, 49, 39, 0.75) 48%, rgba(31, 49, 39, 0.1) 72%, rgba(31, 49, 39, 0) 100%); }
.hero__inre { position: relative; z-index: 1; width: min(100% - 2.5rem, var(--bredd)); margin-inline: auto; padding: clamp(4rem, 9vw, 7.5rem) 0; }
.hero__rubrik { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.4rem); max-width: 11ch; margin-bottom: 1.25rem; letter-spacing: -0.02em; }
.hero__text { font-size: 1.2rem; max-width: 34ch; color: rgba(255, 255, 255, 0.92); margin-bottom: 2rem; }
@media (max-width: 760px) {
  .hero__bild { width: 100%; height: 58%; object-position: 70% 70%; }
  .hero::after { background: linear-gradient(180deg, rgba(31, 49, 39, 0.05) 0%, rgba(31, 49, 39, 0.55) 35%, var(--skog-djup) 58%); }
  .hero__inre { padding: 15rem 0 3rem; }
}

/* ---------- Fördelar ---------- */
.fordelar { background: var(--varm-vit); border-bottom: 1px solid var(--linje); }
.fordelar__lista { list-style: none; padding: 2rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.fordelar__lista li { padding: 0 0.5rem; }
.fordelar__lista li + li { border-left: 1px solid var(--linje); }
.fordelar__ikon { width: 34px; height: 34px; color: var(--salvia-mork); margin: 0 auto 0.6rem; stroke-width: 1.5; }
.fordelar__titel { font-weight: 800; margin: 0; }
.fordelar__lista p:last-child { margin: 0; font-size: 0.95rem; color: var(--text-mjuk); }
@media (max-width: 760px) {
  .fordelar__lista { grid-template-columns: 1fr 1fr; gap: 1.5rem 0.5rem; }
  .fordelar__lista li + li { border-left: 0; }
}

/* ---------- Sektioner ---------- */
.sektion { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.sektion--sand { background: var(--varm-vit); border-block: 1px solid var(--linje); }
.kursgrupp { margin-top: 2.75rem; }
.tvakol { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.tvakol--bild { align-items: center; }
.tvakol--kurser { margin-top: 2.75rem; gap: 2rem; align-items: stretch; }
@media (max-width: 860px) { .tvakol { grid-template-columns: 1fr; } }
.rundbild img { width: 100%; border-radius: var(--radie); aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--skugga); }

/* ---------- Kurskort ---------- */
.kortgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.kortgrid--tva { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 960px) { .kortgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .kortgrid, .kortgrid--tva { grid-template-columns: 1fr; } }
.kurskort { display: flex; flex-direction: column; background: var(--vit); border: 1px solid var(--linje); border-radius: var(--radie); overflow: hidden; color: var(--text); text-decoration: none; box-shadow: var(--skugga); transition: transform 0.18s, box-shadow 0.18s; }
.kurskort:hover { color: var(--text); transform: translateY(-3px); box-shadow: 0 2px 4px rgba(41, 63, 50, 0.08), 0 18px 36px -14px rgba(41, 63, 50, 0.3); }
.kurskort__bild { aspect-ratio: 16 / 10; overflow: hidden; background: var(--linje); }
.kortgrid--tva .kurskort__bild { aspect-ratio: 16 / 8; }
.kurskort__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.kurskort:hover .kurskort__bild img { transform: scale(1.04); }
.kurskort__text { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.kurskort__namn { font-size: 1.25rem; margin-bottom: 0.3rem; }
.kurskort__text > p { margin-bottom: 0.6rem; color: var(--text-mjuk); font-size: 0.98rem; }
.kurskort__meta { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem !important; }
.kurskort__meta .ikon { color: var(--salvia-mork); width: 1.1em; height: 1.1em; }
.kurskort__pris { margin: auto 0 0 !important; padding-top: 0.6rem; display: flex; align-items: center; justify-content: space-between; font-weight: 800; color: var(--text) !important; font-size: 1.05rem !important; }
.kurskort__pil { color: var(--terra-mork); transition: transform 0.18s; }
.kurskort:hover .kurskort__pil { transform: translateX(4px); }
.kurskort--liggande { flex-direction: row; }
.kurskort--liggande .kurskort__bild { aspect-ratio: auto; width: 38%; flex: none; }
@media (max-width: 480px) { .kurskort--liggande { flex-direction: column; } .kurskort--liggande .kurskort__bild { width: 100%; aspect-ratio: 16 / 10; } }

/* Framhävd kurs (Nima) */
.framhavd { margin-top: 2.75rem; display: grid; grid-template-columns: 1.15fr 1fr; background: var(--skog-djup); color: var(--linne); border-radius: calc(var(--radie) + 4px); overflow: hidden; box-shadow: var(--skugga); }
.framhavd__text { padding: clamp(1.75rem, 4vw, 3rem); }
.framhavd__rubrik { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); margin-bottom: 1rem; }
.framhavd p { color: rgba(247, 241, 232, 0.92); max-width: 52ch; }
.framhavd__meta { font-weight: 700; color: var(--terra-ljus) !important; }
.framhavd__meta span { display: block; text-wrap: balance; }
.framhavd__bild { position: relative; min-height: 240px; }
.framhavd__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .framhavd { grid-template-columns: 1fr; } .framhavd__bild { order: -1; min-height: 180px; } }

/* Länklista (intensivkurser) */
.listkort { background: var(--vit); border: 1px solid var(--linje); border-radius: var(--radie); padding: 1.4rem 1.5rem; box-shadow: var(--skugga); }
.lanklista { list-style: none; padding: 0; }
.lanklista a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--linje); color: var(--text); text-decoration: none; }
.lanklista li:first-child a { padding-top: 0.25rem; }
.lanklista a:hover { color: var(--terra-mork); }
.lanklista a .ikon { color: var(--terra-mork); transition: transform 0.18s; }
.lanklista a:hover .ikon { transform: translateX(4px); }
.lanklista strong { display: block; font-size: 1.08rem; }
.lanklista small { display: block; font-size: 0.95rem; color: var(--text-mjuk); }
.listkort__not { margin: 1rem 0 0; font-size: 0.95rem; color: var(--text-mjuk); }

/* ---------- Kontakt ---------- */
.kontaktlista { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: 1rem; }
.kontaktlista li, .fot__kontakt li { display: flex; gap: 0.75rem; align-items: flex-start; }
.kontaktlista .ikon { color: var(--salvia-mork); margin-top: 0.15em; }
.kontaktlista a { color: var(--text); font-weight: 600; text-decoration: none; }
.kontaktlista a:hover { color: var(--terra-mork); text-decoration: underline; }

/* ---------- Formulär ---------- */
.formkort { background: var(--vit); border: 1px solid var(--linje); border-radius: var(--radie); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--skugga); }
.formular__rubrik { font-size: 1.35rem; margin-bottom: 0.35rem; }
.formular__text { color: var(--text-mjuk); }
.falt { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; flex: 1; min-width: 0; }
.falt-rad { display: flex; gap: 1rem; }
@media (max-width: 520px) { .falt-rad { flex-direction: column; gap: 0; } }
.falt label { font-weight: 700; font-size: 0.95rem; }
.valfritt { font-weight: 400; color: var(--text-mjuk); }
.falt input, .falt select, .falt textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--vit);
  border: 1.5px solid #c9bfae; border-radius: var(--radie-liten); padding: 0.7rem 0.85rem; min-height: 48px;
}
.falt textarea { resize: vertical; min-height: 110px; }
.falt input::placeholder, .falt textarea::placeholder { color: #6b7a70; }
.falt input:focus, .falt select:focus, .falt textarea:focus { outline: none; border-color: var(--salvia-mork); box-shadow: 0 0 0 3px rgba(94, 112, 88, 0.25); }
.falt [aria-invalid='true'] { border-color: var(--fel); }
.falt__fel { color: var(--fel); font-size: 0.9rem; font-weight: 600; margin: 0; }
.kryss { display: flex; gap: 0.65rem; align-items: flex-start; margin-bottom: 1rem; font-size: 0.98rem; }
.kryss input { width: 22px; height: 22px; margin: 0.15rem 0 0; accent-color: var(--salvia-mork); flex: none; }
.honung { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular { position: relative; }
.formular__status { margin: 1rem 0 0; font-weight: 600; }
.formular__status:empty { display: none; }
.formular__status.fel { color: var(--fel); }
.tackruta { text-align: center; padding: 1.5rem 0.5rem; }
.tackruta .ikon { width: 52px; height: 52px; color: var(--salvia-mork); margin: 0 auto 0.75rem; }
.tackruta h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }

/* ---------- Kurssida ---------- */
.brodsmulor { padding: 1.25rem 0 0; font-size: 0.92rem; }
.brodsmulor ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; color: var(--text-mjuk); }
.brodsmulor li + li::before { content: '/'; margin-right: 0.4rem; color: #9aa59d; }
.brodsmulor a { color: var(--text-mjuk); }
.kurstopp { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.75rem, 4vw, 3.5rem); padding: 1.5rem 0 3rem; align-items: start; }
@media (max-width: 860px) { .kurstopp { grid-template-columns: 1fr; } }
.kurstopp__bild img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--radie); box-shadow: var(--skugga); }
.kurstopp__rubrik { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); margin-bottom: 1rem; }
.kurstopp__rubrik .overrubrik { margin-bottom: 0.75rem; }
.fakta { list-style: none; padding: 1.1rem 1.25rem; margin: 1.5rem 0; background: var(--varm-vit); border: 1px solid var(--linje); border-radius: var(--radie); display: grid; gap: 0.6rem; }
.fakta li { display: flex; gap: 0.75rem; align-items: flex-start; }
.fakta .ikon { color: var(--salvia-mork); margin-top: 0.2em; }
.fakta__etikett { font-weight: 800; }
.fakta__etikett::after { content: ':'; }
.kurstopp__not { margin: 0.75rem 0 0; color: var(--text-mjuk); font-size: 0.95rem; }
.kursdelar { display: grid; gap: 1.25rem; }
.kursdel { background: var(--vit); border: 1px solid var(--linje); border-radius: var(--radie); padding: clamp(1.25rem, 3vw, 1.9rem); }
.kursdel__rubrik { font-size: 1.4rem; margin-bottom: 1rem; }
.tillfallen { padding: 0; list-style: none; counter-reset: t; display: grid; gap: 0.6rem; }
.tillfallen li { counter-increment: t; display: flex; gap: 0.85rem; align-items: baseline; }
.tillfallen li::before { content: counter(t); flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--terra-tona); color: var(--terra-morkare); font-weight: 800; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; transform: translateY(0.35rem); }
.punkter { padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.punkter li::marker { color: var(--salvia-mork); }
.fraga { border-top: 1px solid var(--linje); }
.fraga:last-child { border-bottom: 1px solid var(--linje); }
.fraga summary { cursor: pointer; padding: 0.9rem 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.fraga summary::-webkit-details-marker { display: none; }
.fraga summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--terra-mork); }
.fraga[open] summary::after { content: '–'; }
.fraga p { color: var(--text-mjuk); }
.omgangar { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
.omgang { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--linje); border-radius: var(--radie-liten); background: var(--varm-vit); }
.omgang p { margin: 0; }
.omgang__datum { font-weight: 800; }
.omgang__info { font-size: 0.95rem; color: var(--text-mjuk); }
.omgang__kvar.fa { color: var(--terra-mork); font-weight: 700; }
.omgang__kvar.slut { color: var(--fel); font-weight: 700; }
.formkort--kurs { margin: 1.25rem 0 0; }
.fler { padding: 3rem 0 4rem; }

/* ---------- Bokning ---------- */
.enkel main { min-height: calc(100vh - 160px); }
.bokning { padding: 2rem 0 4rem; }
.bokning__rubrik { margin-bottom: 1.25rem; }
.steg { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; gap: 0.5rem; }
.steg__punkt { flex: 1; display: flex; align-items: center; gap: 0.55rem; font-weight: 700; color: var(--text-mjuk); font-size: 0.95rem; padding-bottom: 0.75rem; border-bottom: 3px solid var(--linje); }
.steg__punkt span { width: 28px; height: 28px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--linje); color: var(--text); font-size: 0.85rem; }
.steg__punkt[aria-current='step'] { color: var(--terra-mork); border-color: var(--terra-mork); }
.steg__punkt[aria-current='step'] span, .steg__punkt.klar span { background: var(--terra-mork); color: var(--vit); }
.steg__punkt.klar { border-color: var(--terra-mork); }
@media (max-width: 520px) { .steg__punkt { font-size: 0.8rem; flex-direction: column; align-items: flex-start; gap: 0.3rem; } }
.bokning__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 760px) { .bokning__grid { grid-template-columns: 1fr; } }
.panel { background: var(--vit); border: 1px solid var(--linje); border-radius: var(--radie); padding: clamp(1.1rem, 3vw, 1.6rem); box-shadow: var(--skugga); }
.panel__rubrik { font-size: 1.2rem; margin-bottom: 1rem; }
.kursval { margin-bottom: 1.25rem; }
.laddar, .ruta { padding: 1.25rem; background: var(--vit); border: 1px solid var(--linje); border-radius: var(--radie); }

.kal__huvud { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.kal__manad { font-weight: 800; font-size: 1.1rem; }
.kal__pil { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linje); background: var(--vit); color: var(--skog); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kal__pil:hover:not([disabled]) { background: var(--linne); }
.kal__pil[disabled] { opacity: 0.35; cursor: default; }
.kal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.kal__vd { font-size: 0.78rem; font-weight: 700; color: var(--text-mjuk); padding: 0.25rem 0; }
.kal__dag { aspect-ratio: 1; max-height: 46px; width: 100%; border: 0; border-radius: 50%; background: transparent; font: inherit; font-size: 0.95rem; color: #8a948d; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.kal__dag--ledig { color: var(--text); font-weight: 800; background: var(--terra-tona); cursor: pointer; }
.kal__dag--ledig:hover { background: #f6d5b8; }
.kal__dag--vald, .kal__dag--vald:hover { background: var(--terra-mork); color: var(--vit); }
.kal__dag--full { text-decoration: line-through; }
.kal__forklaring { display: flex; align-items: center; gap: 0.5rem; margin: 0.9rem 0 0; font-size: 0.88rem; color: var(--text-mjuk); }
.kal__forklaring i { width: 14px; height: 14px; border-radius: 50%; background: var(--terra-tona); display: inline-block; }
.starter { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linje); }
.starter p { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.5rem; }
.starter__lista { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { border: 1px solid var(--linje); background: var(--varm-vit); border-radius: 999px; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.88rem; color: var(--text); cursor: pointer; }
.chip:hover { border-color: var(--terra-mork); }
.chip[aria-pressed='true'] { background: var(--terra-mork); color: var(--vit); border-color: var(--terra-mork); }

.tider { display: grid; gap: 0.65rem; }
.tid { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.9rem 1rem; border: 1.5px solid var(--linje); border-radius: var(--radie-liten); cursor: pointer; background: var(--vit); }
.tid:hover { border-color: #cdbfae; }
.tid input { width: 22px; height: 22px; margin: 0.1rem 0 0; accent-color: var(--terra-mork); flex: none; }
.tid:has(input:checked) { border-color: var(--terra-mork); background: #fef4ea; }
.tid:has(input:disabled) { cursor: not-allowed; opacity: 0.6; }
.tid__titel { font-weight: 800; display: block; }
.tid__info { display: block; font-size: 0.92rem; color: var(--text-mjuk); }
.tid__kvar { display: block; font-size: 0.92rem; font-weight: 700; color: var(--terra-mork); }
.tid__kvar.slut { color: var(--fel); }
.tom-tider { color: var(--text-mjuk); }
.bokning__fot { margin-top: 1.25rem; display: flex; gap: 0.75rem; justify-content: space-between; flex-wrap: wrap; }
.bokning__fel { color: var(--fel); font-weight: 600; margin: 0.75rem 0 0; }
.sammanfattning { background: var(--varm-vit); border: 1px solid var(--linje); border-radius: var(--radie); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.sammanfattning h2 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.sammanfattning p { margin: 0.15rem 0; color: var(--text-mjuk); }
.sammanfattning__datum { font-size: 0.92rem; }
.bekraftelse { text-align: center; padding: 2.5rem 1.25rem 0; }
.bekraftelse__ikon { width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--skog); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.bekraftelse__ikon .ikon { width: 40px; height: 40px; stroke-width: 2.2; }
.bekraftelse h2 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.2rem); margin-bottom: 0.75rem; }
.bekraftelse p { color: var(--text-mjuk); max-width: 52ch; margin-inline: auto; }
.bekraftelse .knapprad { justify-content: center; margin-top: 1.5rem; }
.bekraftelse__datum { list-style: none; padding: 0; margin: 1rem auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; max-width: 40rem; }
.bekraftelse__datum li { background: var(--vit); border: 1px solid var(--linje); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.92rem; }
.skog-silhuett { display: block; width: 100%; max-width: 720px; height: auto; margin: 2.5rem auto 0; color: var(--salvia); opacity: 0.55; }

/* ---------- 404 ---------- */
.tom { padding: 5rem 0; }

/* ---------- Sidfot ---------- */
.fot { background: var(--skog-djup); color: rgba(247, 241, 232, 0.88); margin-top: 0; }
.fot__inre { width: min(100% - 2.5rem, var(--bredd)); margin-inline: auto; padding: 3.5rem 0 2.5rem; display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 1.1fr; gap: 2rem; }
@media (max-width: 860px) { .fot__inre { grid-template-columns: 1fr 1fr; } .fot__marke { grid-column: 1 / -1; } }
@media (max-width: 480px) { .fot__inre { grid-template-columns: 1fr; } }
.fot__marke p { margin-top: 1rem; max-width: 30ch; }
.fot__rubrik { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terra-ljus); margin-bottom: 0.9rem; }
.fot ul { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.fot a { color: var(--linne); text-decoration: none; }
.fot a:hover { color: var(--vit); text-decoration: underline; }
.fot__kontakt .ikon { color: var(--terra-ljus); margin-top: 0.2em; }
.fot__botten { border-top: 1px solid rgba(247, 241, 232, 0.15); }
.fot__botten p { width: min(100% - 2.5rem, var(--bredd)); margin: 0 auto; padding: 1.25rem 0; font-size: 0.9rem; }
.fot--enkel .fot__botten { border: 0; }

/* Granskning 2: nästa start, säsongsmärke, så går det till */
.kurskort__start { display: inline-flex; align-self: flex-start; margin: 0 0 0.6rem !important; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--terra-tona); color: var(--terra-morkare) !important; font-size: 0.85rem !important; font-weight: 800; }
.kurskort__punkter { margin: 0 0 0.6rem; padding-left: 1.1rem; display: grid; gap: 0.25rem; font-size: 0.95rem; color: var(--text-mjuk); }
.kurskort__punkter li::marker { color: var(--salvia-mork); }
.hero__marke { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0.45rem 0.9rem; border-radius: 999px; background: rgba(247, 241, 232, 0.12); border: 1px solid rgba(247, 241, 232, 0.25); color: var(--linne); font-weight: 700; font-size: 0.95rem; }
.hero__marke .ikon { color: var(--terra-ljus); }
.sektion--smal { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--linje); }
.steglista { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 860px) { .steglista { grid-template-columns: 1fr; } }
.steglista li { background: var(--vit); border: 1px solid var(--linje); border-radius: var(--radie); padding: 1.4rem 1.4rem 1.2rem; box-shadow: var(--skugga); }
.steglista__nr { display: inline-flex; width: 2.4rem; height: 2.4rem; border-radius: 50%; align-items: center; justify-content: center; background: var(--salvia-mork); color: var(--vit); font-weight: 800; margin-bottom: 0.8rem; }
.steglista h3 { font-size: 1.2rem; margin-bottom: 0.35rem; }
.steglista p { color: var(--text-mjuk); margin: 0; }

/* Intresse + privat träning som eget alternativ */
.intresse { margin: 1.25rem 0 0; }
.intresse .formkort--kurs { margin: 0; }
.intresse--med-privat { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .intresse--med-privat { grid-template-columns: 1fr; } }
.privatruta { background: var(--varm-vit); border: 1px solid var(--linje); border-left: 5px solid var(--salvia-mork); border-radius: 0 var(--radie) var(--radie) 0; padding: clamp(1.25rem, 3vw, 1.75rem); }
.privatruta__rubrik { font-size: 1.3rem; margin-bottom: 0.5rem; }
.privatruta > p:not(.overrubrik) { color: var(--text-mjuk); }
.privatruta .punkter { margin: 0 0 1.25rem; }

/* ===== Inloggning och admin ===== */
.konto { padding: 3rem 0 4rem; max-width: 560px; }
.konto .formular { background: var(--varm-vit); border: 1px solid var(--linje); border-radius: var(--radie); padding: 1.5rem; box-shadow: var(--skugga); margin-top: 1.25rem; }
.konto__lokal { margin: 0.75rem 0 0; padding: 0.75rem 1rem; background: var(--terra-tona); border-radius: var(--radie-liten); color: var(--text); font-size: 0.95rem; }
.admin { padding: 2rem 0 4rem; }
.admin__topp { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.admin__vem { color: var(--text-mjuk); margin: 0.25rem 0 0; }
.admin__genvagar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin: 1.5rem 0 2rem; }
.admin__genvag { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.25rem; background: var(--varm-vit); border: 1px solid var(--linje); border-left: 6px solid var(--salvia-mork); border-radius: var(--radie); color: var(--text); text-decoration: none; box-shadow: var(--skugga); }
.admin__genvag:hover { border-left-color: var(--terra-mork); color: var(--text); }
.admin__genvag strong { color: var(--terra-mork); font-size: 1.05rem; }
.admin__genvag span { color: var(--text-mjuk); font-size: 0.9rem; }
.admin__del { margin-top: 2rem; }
.admin__rubrik { font-size: 1.3rem; margin: 0 0 0.75rem; }
.admin__rubrik span { color: var(--text-mjuk); font-weight: 600; }
.admin__tabell { overflow-x: auto; background: var(--varm-vit); border: 1px solid var(--linje); border-radius: var(--radie); }
.admin__tabell table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin__tabell th { text-align: left; background: var(--linne); color: var(--text); padding: 0.6rem 0.85rem; font-weight: 800; white-space: nowrap; }
.admin__tabell td { padding: 0.65rem 0.85rem; border-top: 1px solid var(--linje); vertical-align: top; }
.admin__tom { padding: 1rem 1.25rem; margin: 0; color: var(--text-mjuk); }
.admin__id { font-size: 0.8rem; color: var(--text-mjuk); }

/* ===== Inloggat läge (Mitt Hundini) ===== */
.topp--inloggad .nav a[aria-current='page'] { color: var(--terra-mork); background: rgba(174, 80, 41, 0.08); }
.nav__ut { display: block; padding: 0.5rem 0.9rem; border: 1px solid var(--linje); border-radius: 8px; background: transparent; color: var(--skog); font: inherit; font-weight: 600; cursor: pointer; margin-left: 0.5rem; }
.nav__ut:hover { background: rgba(41, 63, 50, 0.07); }
@media (max-width: 760px) {
  .topp--inloggad .menyknapp { margin-left: auto; }
  .nav__ut { width: 100%; text-align: left; margin: 0.75rem 0 0; padding: 0.85rem 0.5rem; font-size: 1.1rem; }
}
.mitt { padding: 2.5rem 0 4rem; }
.mitt__kort { background: var(--varm-vit); border: 1px solid var(--linje); border-radius: var(--radie); padding: 1.25rem 1.5rem; box-shadow: var(--skugga); margin-top: 1.25rem; }
.mitt__rubrik { font-size: 1.15rem; margin: 0 0 0.75rem; }
.mitt__under { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mjuk); margin: 0.75rem 0 0.4rem; }
.mitt__uppgifter { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0; }
.mitt__uppgifter dt { color: var(--text-mjuk); }
.mitt__uppgifter dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.mitt__hundar, .mitt__lista { list-style: none; padding: 0; margin: 0 0 1rem; }
.mitt__hundar li { padding: 0.5rem 0; border-top: 1px solid var(--linje); }
.mitt__hundar li:first-child { border-top: 0; }
.mitt__bokning { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--linje); }
.mitt__bokning span { color: var(--text-mjuk); font-size: 0.95rem; }
.mitt__bokning-hoger { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; }
.mitt__id { font-size: 0.8rem; }
.mitt__tom { color: var(--text-mjuk); margin: 0 0 1rem; }
.bokning__ingress { margin-top: -0.5rem; }
.mitt__nasta { margin: 0 0 1rem; }
.mitt__nasta span { color: var(--text-mjuk); }
.bokningar__del { margin-top: 1.5rem; }
.bokkort { background: var(--varm-vit); border: 1px solid var(--linje); border-left: 6px solid var(--terra-mork); border-radius: var(--radie); padding: 1.25rem 1.5rem; box-shadow: var(--skugga); margin: 0.75rem 0 1rem; }
.bokkort--tidigare { border-left-color: var(--linje); opacity: 0.85; }
.bokkort__topp { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.bokkort__kurs { font-size: 1.25rem; margin: 0; }
.bokkort__hund { margin: 0.1rem 0 0; color: var(--text-mjuk); }
.bokkort__status { font-size: 0.85rem; font-weight: 700; color: var(--salvia-mork); background: rgba(94, 112, 88, 0.1); border-radius: 999px; padding: 0.25rem 0.75rem; }
.bokkort__status--av { color: var(--fel); background: rgba(161, 44, 28, 0.08); }
.bokkort__fakta { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.25rem; margin: 1rem 0; }
.bokkort__fakta dt { color: var(--text-mjuk); }
.bokkort__fakta dd { margin: 0; font-weight: 600; }
.bokkort__datum { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0; }
.bokkort__datum li { background: var(--linne); border-radius: 6px; padding: 0.15rem 0.5rem; font-size: 0.9rem; }
.bokkort__datum li.passerad { text-decoration: line-through; color: var(--text-mjuk); }
.bokkort__andra { margin: 0.75rem 0 0; font-size: 0.92rem; color: var(--text-mjuk); }
@media (max-width: 520px) { .bokkort__fakta { grid-template-columns: 1fr; gap: 0.1rem; } .bokkort__fakta dd { margin-bottom: 0.5rem; } }

/* Fotnoten ligger alltid längst ner, även på korta sidor (inloggat läge, inloggning, bokning). */
body.enkel { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.enkel > main { flex: 1 0 auto; }

/* Logga in-knappen i hemsidans sidhuvud */
.nav__konto a { border: 2px solid var(--skog); padding: 0.4rem 0.9rem; margin-left: 0.4rem; border-radius: var(--radie-liten); font-weight: 700; }
.nav__konto a:hover { background: var(--skog); color: var(--linne); }
@media (max-width: 760px) { .nav__konto a { border: 0; border-bottom: 1px solid var(--linje); border-radius: 0; margin: 0; padding: 0.85rem 0.5rem; } .nav__konto a:hover { background: transparent; color: var(--skog); } }
.tider__hint { margin: 0 0 0.75rem; font-size: 0.92rem; color: var(--text-mjuk); }

/* Kursstarter som kort (kursomgångar – ingen kalender behövs) */
.starter-lista__huvud { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.starter-lista__huvud .panel__rubrik { margin-bottom: 0.5rem; }
.starter-lista__info { margin: 0 0 0.5rem; color: var(--text-mjuk); }
.startkort-lista { display: grid; gap: 0.75rem; }
.startkort { display: grid; gap: 0.6rem; width: 100%; text-align: left; font: inherit; color: var(--text); background: var(--vit); border: 1.5px solid var(--linje); border-radius: var(--radie); padding: 1rem 1.25rem; box-shadow: var(--skugga); cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
button.startkort:hover { border-color: var(--terra-mork); transform: translateY(-1px); }
.startkort--vald { border-color: var(--terra-mork); background: #fef4ea; }
.startkort--full { cursor: default; background: var(--varm-vit); box-shadow: none; }
.startkort--full .startkort__nar, .startkort--full .startkort__datum { opacity: 0.6; }
.startkort__nar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; }
.startkort__dag { font-weight: 800; font-size: 1.1rem; }
.startkort__tid { color: var(--text-mjuk); }
.startkort__datum { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.startkort__datum span { background: var(--linne); border-radius: 6px; padding: 0.15rem 0.55rem; font-size: 0.9rem; }
.startkort__fot { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.startkort__kvar { font-weight: 700; color: var(--salvia-mork); font-size: 0.95rem; }
.startkort__kvar.fa { color: var(--terra-mork); }
.startkort__kvar.slut { color: var(--fel); }
.startkort__valj { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 800; color: var(--terra-mork); }
.startkort__valj .ikon { width: 18px; height: 18px; }
.intresse-ruta { display: inline-flex; flex-direction: column; gap: 0.25rem; }

/* Luft i inloggat läge: knappar under innehållet och jämn inre marginal i korten */
.mitt > .knapp, .mitt > .knapprad { margin-top: 1.75rem; }
.mitt__kort > :last-child, .mitt__kort [data-hundar] > :last-child, .mitt__kort [data-nasta] > :last-child { margin-bottom: 0; }
.mitt__kort .knapprad { margin-top: 1rem; }
.mitt__kort > div + .knapprad, .mitt__kort > [data-nasta] + .knapprad { margin-top: 1rem; }
.mitt [data-bokningar] > .mitt__kort { margin-top: 1.5rem; }
.mitt__kort { padding: 1.4rem 1.6rem; }

/* Inloggat läge: alla flikar har rubriken på samma plats och i samma storlek (Min profil, Mina bokningar, Kurser, Akademini, Admin) */
.mitt, .mitt.bokning, .mitt.admin { padding: 2.5rem 0 4rem; }
.mitt > h1.rubrik { margin: 0 0 1.25rem; }
.mitt__halsning { margin: -0.75rem 0 1.25rem; font-size: 1.125rem; color: var(--text-mjuk); }
.mitt.bokning .bokning__ingress { margin-top: -0.5rem; }
.mitt .admin__genvagar { margin-top: 0; }
/* Inloggat läge: lugnare rubriker än på hemsidan (≈34 px dator, 26 px mobil) */
.mitt > h1.rubrik { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.125rem); }

/* Kursval: alla kurser som bildkort när ingen kurs är vald */
.kursval-lista { list-style: none; padding: 0; margin: 0.25rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.kursval-kort { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; text-align: left; font: inherit; color: var(--text); background: var(--varm-vit); border: 1.5px solid var(--linje); border-radius: var(--radie); overflow: hidden; box-shadow: var(--skugga); cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.kursval-kort:hover { border-color: var(--terra-mork); transform: translateY(-2px); }
.kursval-kort img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--linje); }
.kursval-kort__text { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1.1rem 1.1rem; flex: 1; }
.kursval-kort__kategori { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra-mork); }
.kursval-kort__namn { font-size: 1.15rem; font-weight: 800; line-height: 1.25; }
.kursval-kort__kort { color: var(--text-mjuk); font-size: 0.95rem; }
.kursval-kort__info { margin-top: auto; padding-top: 0.5rem; font-size: 0.9rem; font-weight: 700; color: var(--salvia-mork); }
.kursval-kort__info--intresse { color: var(--text-mjuk); }
@media (max-width: 600px) {
  .kursval-lista { grid-template-columns: 1fr; gap: 0.75rem; }
  .kursval-kort { flex-direction: row; align-items: stretch; }
  .kursval-kort img { width: 112px; aspect-ratio: auto; height: auto; min-height: 100%; flex: none; }
  .kursval-kort__text { padding: 0.75rem 0.9rem; }
  .kursval-kort__namn { font-size: 1.05rem; }
  .kursval-kort__kort { font-size: 0.9rem; }
}

/* Integritetspolicy */
.integritet { padding: 3rem 0 4rem; }
.integritet h2 { font-size: 1.25rem; margin: 2.25rem 0 0.5rem; }
.integritet ul { padding-left: 1.25rem; }
.integritet li { margin-bottom: 0.5rem; }
.integritet__datum { margin-top: 2.5rem; color: var(--text-mjuk); font-size: 0.9rem; }
.formular__liten { font-size: 0.9rem; margin-top: 0.75rem; }