/* =====================================================================
   Kunskapsstjärnan – Kroppen
   css/humanbody.css   (humanbodymenu.php och humanbody.php)

   Allt ligger under .hb-app och använder temats variabler. Planschen
   med figurerna är alltid ljus, som en skolplansch – hudtoner, ben och
   muskler ska se likadana ut i alla teman.
   ===================================================================== */
.hb-app {
    --hb-text: var(--color-text-primary, #e6e8f5); --hb-dov: var(--color-text-secondary, #a3a8cc);
    --hb-yta: var(--color-bg-secondary, #1a1a4a); --hb-yta2: var(--color-bg-tertiary, #252550); --hb-kant: var(--color-border-subtle, #3a3a6a);
    --hb-guld: #f5c518; --hb-gron: #22c55e; --hb-rod: #ef4444; --hb-bla: #4f7ef7;
    /* planschen */
    --hb-papper: #fbf8f0; --hb-papper-kant: #d9cfbb; --hb-blyerts: #7a5236;
    --hb-hud: #f2c9a5; --hb-har: #6b4226; --hb-benfarg: #fbf6e6; --hb-benkant: #7d6f55; --hb-muskel: #d9695f; --hb-muskelkant: #8e3029; --hb-sil: #e9e1d4;
}
html[data-theme="ljus"] .hb-app { --hb-gron: #15803d; --hb-rod: #c0392b; --hb-guld: #c98a00; }
/* Markerat val: --hb-vald är kant- och textfärgen, --hb-vald-fyll bocken. I ljust tema
   behövs en mörkare ton för att synas mot vitt. */
.hb-app { --hb-vald: #f5c518; --hb-vald-fyll: #f5c518; --hb-pa-vald: #1a1a2e; }
html[data-theme="ljus"] .hb-app { --hb-vald: #92400e; --hb-vald-fyll: #facc15; }
.hb-app .content-container, .hb-app .left-container { color: var(--hb-text); font-family: 'Nunito', system-ui, sans-serif; }
.hb-app *, .hb-app *::before { box-sizing: border-box; }

/* ══ MENYSIDAN ═══════════════════════════════════════════════════════ */
.hb-titelrad { display: flex; gap: 14px; align-items: center; }
.hb-symbol { font-size: 2.6rem; line-height: 1; }
.hb-app h1.hb-rubrik { margin: 0; font: 400 clamp(1.5rem, 3vw, 2.1rem)/1.15 'Fredoka One', 'Nunito', sans-serif; color: var(--hb-text); }
.hb-under { margin: 4px 0 0; color: var(--hb-dov); font-size: .98rem; }
.hb-app h2.hb-steg { margin: 22px 0 8px; font: 400 1.15rem 'Fredoka One', 'Nunito', sans-serif; color: var(--hb-text); }
.hb-kort-rad, .hb-figurval { padding: 6px 6px 0 0; }
.hb-kort-rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
html .hb-app button.hb-kort:not(.sc-start):not(.ks-tts-figur) { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 16px; cursor: pointer; text-align: center;
    background: var(--hb-yta2); color: var(--hb-text); border: 2px solid var(--hb-kant); font: 800 1rem 'Nunito', sans-serif; transition: transform .1s, border-color .15s; }
html .hb-app button.hb-kort:hover:not(.sc-start) { transform: translateY(-2px); }
/* Det markerade kortet: tydlig kant, tonad bakgrund, färgat namn och en bock i hörnet
   (samma mönster som ourwordmenu.php) – syns i alla teman. */
html .hb-app button.hb-kort[aria-pressed="true"]:not(.sc-start):not(.ks-tts-figur) { border-color: var(--hb-vald); background: color-mix(in srgb, var(--hb-vald-fyll) 20%, var(--hb-yta2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hb-vald-fyll) 40%, transparent); }
.hb-app button.hb-kort { position: relative; }
.hb-app button.hb-kort[aria-pressed="true"]::after { content: '✓'; position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--hb-vald-fyll); color: var(--hb-pa-vald); font: 900 .95rem/1 system-ui, sans-serif; border: 2px solid var(--hb-yta); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.hb-app button.hb-kort[aria-pressed="true"] .hb-kort-namn { color: var(--hb-vald); }
.hb-app button.hb-kort:focus-visible, .hb-app button.hb-knapp:focus-visible, .hb-app button.hb-valknapp:focus-visible { outline: 3px solid var(--hb-bla); outline-offset: 2px; }
.hb-kort-emoji { font-size: 2rem; line-height: 1.1; }
.hb-kort small { display: block; margin-top: 2px; font-weight: 600; font-size: .8rem; color: var(--hb-dov); line-height: 1.35; }
.hb-figurval { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html .hb-app button.hb-kort.hb-figurkort:not(.sc-start):not(.ks-tts-figur) { flex-direction: column; text-align: center; gap: 4px; padding: 8px 6px 10px; }
.hb-figurbild { display: block; width: 100%; max-width: 92px; border-radius: 12px; background: var(--hb-papper); border: 1px solid var(--hb-papper-kant); padding: 4px 4px 0; overflow: hidden; }
.hb-figurbild .hb-svg { max-height: none; pointer-events: none; }
.hb-figurinfo { margin: 6px 0 0; font-size: .8rem; color: var(--hb-dov); line-height: 1.4; }
.hb-kryss { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: .92rem; cursor: pointer; margin-top: 16px; color: var(--hb-text); }
.hb-kryss input { width: 18px; height: 18px; }
html .hb-app button.hb-knapp:not(.sc-start):not(.ks-tts-figur), .hb-app a.hb-knapp { display: inline-block; padding: 10px 16px; border-radius: 12px; cursor: pointer; text-decoration: none; text-align: center;
    font: 800 .95rem 'Nunito', sans-serif; border: 1px solid var(--hb-kant); background: var(--hb-yta2); color: var(--hb-text); }
html .hb-app button.hb-knapp.hb-start:not(.sc-start):not(.ks-tts-figur), .hb-app a.hb-knapp.hb-start { background: linear-gradient(135deg, #22c55e, #16a34a); border: 0; color: #fff; }
html .hb-app button.hb-knapp.hb-stor:not(.sc-start):not(.ks-tts-figur) { width: 100%; padding: 14px; font-size: 1.15rem; margin-top: 22px; }

/* ══ SPELET ══════════════════════════════════════════════════════════ */
/* Mobil: figuren först, status och fakta under. */
body.hb-spelsida > main.hb-app > .content-container { order: -1; }
@media (max-width: 48em), (max-height: 30em) { body.hb-spelsida > main.hb-app { display: flex !important; flex-direction: column; } }

.hb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-chip { padding: 4px 11px; border-radius: 999px; font-weight: 800; font-size: .85rem; background: color-mix(in srgb, var(--hb-guld) 18%, transparent); border: 1px solid color-mix(in srgb, var(--hb-guld) 50%, transparent); color: var(--hb-text); }
.hb-fraganr { margin: 12px 0 6px; font-weight: 700; color: var(--hb-dov); font-size: .92rem; }
.hb-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--hb-dov) 28%, transparent); overflow: hidden; }
.hb-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hb-bla), #8b5cf6); border-radius: 99px; transition: width .4s; }
.hb-rattantal { margin: 8px 0 0; font-weight: 700; font-size: .9rem; color: var(--hb-dov); }
.hb-fakta { margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--hb-yta2); border: 1px solid var(--hb-kant); }
.hb-fakta[hidden] { display: none; }
.hb-fakta.hb-in { animation: hbIn .3s ease; }
@keyframes hbIn { from { opacity: 0; transform: translateY(6px); } }
.hb-fakta-etikett { font: 800 .7rem 'Nunito', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--hb-dov); }
.hb-fakta h3 { margin: 2px 0 6px; font: 400 1.3rem 'Fredoka One', 'Nunito', sans-serif; color: var(--hb-guld); }
.hb-fakta p { margin: 0 0 10px; line-height: 1.5; font-size: .95rem; color: var(--hb-text); }

/* Uppgiften överst */
.hb-uppgift { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; min-height: 58px; padding: 8px 14px; border-radius: 14px;
    background: var(--hb-yta2); border: 1px solid var(--hb-kant); text-align: center; }
.hb-uppgift[hidden] { display: none; }
.hb-uppgift-etikett { font-weight: 700; color: var(--hb-dov); font-size: 1.02rem; }
.hb-uppgift-namn { font: 400 clamp(1.5rem, 3.4vw, 2.2rem)/1.1 'Fredoka One', 'Nunito', sans-serif; color: var(--hb-text); }
html .hb-app button.hb-las:not(.sc-start):not(.ks-tts-figur) { width: 42px; height: 42px; padding: 0; border-radius: 50%; cursor: pointer; font-size: 1.2rem;
    border: 1px solid var(--hb-kant); background: var(--hb-yta); color: var(--hb-text); }
.hb-las[hidden] { display: none; }

/* ── Tvåspråksläget: samma text på det sekundära språket ── */
.hb-sek[hidden] { display: none !important; }
.hb-flagga { width: 22px; height: 15px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); vertical-align: middle; flex: none; }
.hb-flagga[hidden] { display: none; }
.hb-sek-kod { font: 800 .68rem ui-monospace, monospace; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--hb-kant); color: var(--hb-dov); flex: none; }
.hb-sek-kod[hidden] { display: none; }
.hb-uppgift-sek { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; padding: 6px 0 2px; border-top: 1px dashed var(--hb-kant); }
.hb-uppgift-sek .hb-sek-text { font: 400 clamp(1.1rem, 2.3vw, 1.45rem)/1.15 'Fredoka One', 'Nunito', sans-serif; color: var(--hb-guld); }
html .hb-app button.hb-las.hb-las-liten:not(.sc-start):not(.ks-tts-figur) { width: 34px; height: 34px; font-size: 1rem; }
.hb-fakta-sek { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--hb-kant); }
.hb-sek-rubrik { display: flex; align-items: center; gap: 7px; font-size: 1.05rem; color: var(--hb-guld); margin-bottom: 4px; }
.hb-val-namn, .hb-val-sek { display: block; }
.hb-val-sek { margin-top: 2px; font-weight: 700; font-size: .86rem; color: var(--hb-dov); }
.hb-valknapp.hb-ratt .hb-val-sek { color: rgba(255, 255, 255, .9); }
.hb-kort-sek { display: block; font-weight: 700; font-size: .82rem; color: var(--hb-guld); }

/* Flikar för vyerna – bara på smala skärmar, där en vy visas i taget */
.hb-flikar { display: none; gap: 6px; margin-top: 10px; }
html .hb-app button.hb-flik:not(.sc-start):not(.ks-tts-figur) { flex: 1; padding: 8px 6px; border-radius: 10px; cursor: pointer; font: 800 .86rem 'Nunito', sans-serif;
    border: 1px solid var(--hb-kant); background: var(--hb-yta2); color: var(--hb-text); }
html .hb-app button.hb-flik[aria-pressed="true"]:not(.sc-start):not(.ks-tts-figur) { background: var(--hb-vald-fyll); border-color: var(--hb-vald-fyll); color: var(--hb-pa-vald); }

/* Planschen */
.hb-plansch { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin-top: 10px; padding: 12px 8px 8px; border-radius: 16px;
    background: var(--hb-papper); border: 2px solid var(--hb-papper-kant); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .6); }
.hb-vy { flex: 1 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; }
.hb-vy figcaption { margin-top: 4px; font: 800 .78rem 'Nunito', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #8a7b62; }
.hb-svg { display: block; width: 100%; height: auto; max-height: min(62vh, 620px); touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.hb-vyer-1 .hb-vy { max-width: 440px; }
.hb-vyer-1 .hb-svg { max-height: min(68vh, 720px); }
.hb-vyer-3 .hb-vy[data-vy="ansikte"] { flex: 1.25 1 0; align-self: center; }

/* ── Figurernas färger ──
   Kroppen (fram/bak): delarna har samma färg på kant och yta, så skarvarna
   mellan dem syns inte. Ytterkonturen kommer från .hb-kontur, som ligger
   under med en tjock mörk linje. Hår, tröja och shorts får sin färg från
   variabler som js/humanbody-figures.js sätter på <svg> (kille eller tjej). */
.hb-svg { --hb-har: #5a3a22; --hb-harljus: #7a5433; --hb-troja: #2a9d8f; --hb-byxa: #2f4f7f; --hb-tofs: #e4577c; overflow: visible; }
.hb-kontur * { fill: var(--hb-blyerts) !important; stroke: var(--hb-blyerts) !important; stroke-width: 2.6 !important; stroke-linejoin: round; opacity: 1 !important; }
.hb-kontur, .hb-ljus, .hb-golv, .hb-dekor { pointer-events: none; }
.hb-golv { fill: rgba(70, 45, 20, .13); }
.hb-ljus * { fill: #fff; opacity: .24; stroke: none; }
.hb-a { fill: var(--hb-hud); stroke: var(--hb-hud); stroke-width: .8; stroke-linejoin: round; cursor: pointer; outline: none; transition: fill .15s; }
.hb-a.hb-neutral { cursor: default; }
.hb-linje { fill: none !important; stroke: var(--hb-blyerts) !important; stroke-width: 1; stroke-linecap: round; pointer-events: none; }
.hb-linje.hb-lock { stroke-width: 1.7; } .hb-linje.hb-svag { opacity: .3; }
/* plagg och hår */
.hb-a.hb-troja, .hb-egen.hb-troja, .hb-dekor.hb-troja { fill: var(--hb-troja); stroke: var(--hb-troja); }
.hb-a.hb-byxa, .hb-egen.hb-byxa { fill: var(--hb-byxa); stroke: var(--hb-byxa); }
.hb-a.hb-harfarg, .hb-egen.hb-harfarg { fill: var(--hb-har); stroke: var(--hb-har); }
.hb-egen.hb-tofs { fill: var(--hb-tofs); stroke: none; }
.hb-egen.hb-hudton, .hb-dekor.hb-hudton { fill: var(--hb-hud); stroke: var(--hb-hud); }
.hb-harglans { fill: none !important; stroke: var(--hb-harljus) !important; stroke-width: 3.2; stroke-linecap: round; opacity: .85; pointer-events: none; }
.hb-skuggyta { fill: rgba(120, 70, 30, .17) !important; stroke: none !important; pointer-events: none; }
.hb-egen.hb-kindton { fill: #f29a92; opacity: .55; stroke: none; }
.hb-egen.hb-vit { fill: #fff; stroke: var(--hb-blyerts); stroke-width: .6; }
.hb-iris { fill: #4a7fb5; stroke: none; } .hb-pupill { fill: #2a1d14; stroke: none; } .hb-glans { fill: #fff; stroke: none; }
/* närbilden av ansiktet: här behövs konturer runt ansikte, öron, hals och hår */
.hb-vy-ansikte .hb-a { stroke: var(--hb-blyerts); stroke-width: 1.5; }
.hb-vy-ansikte .hb-a[data-a="panna"], .hb-vy-ansikte .hb-a[data-a="haka"] { stroke: none; }
.hb-vy-ansikte .hb-a.hb-kind { fill: #f4a39b; stroke: none; opacity: .8; }
.hb-vy-ansikte .hb-a.hb-nasa { fill: #e9b88f; stroke: none; }
.hb-vy-ansikte .hb-a.hb-lapp { fill: #d9727a; stroke: #b4505a; stroke-width: 1; }
.hb-vy-ansikte .hb-a.hb-harfarg { stroke: var(--hb-blyerts); }
.hb-vy-ansikte .hb-egen.hb-vit { stroke-width: 1; }
.hb-dekor.hb-troja { stroke: var(--hb-blyerts); stroke-width: 1.5; }
.hb-traff * { fill: transparent !important; stroke: none !important; }
/* skelett och muskler ligger på en ljus siluett av kroppen */
.hb-silkontur * { fill: #cbbda8 !important; stroke: #cbbda8 !important; stroke-width: 2.2 !important; }
.hb-sil { pointer-events: none; }
.hb-sil * { fill: var(--hb-sil); stroke: var(--hb-sil); stroke-width: .8; }
.hb-vy-skelett .hb-a { fill: var(--hb-benfarg); stroke: var(--hb-benkant); stroke-width: 1.1; }
.hb-streck { fill: none !important; stroke: var(--hb-benkant); stroke-width: 2.4; stroke-linecap: round; }
.hb-revyta { fill: rgba(251, 246, 230, .55) !important; stroke: none !important; }
.hb-hal { fill: #4a4336 !important; stroke: none !important; pointer-events: none; }
.hb-benljus { fill: none !important; stroke: #fff !important; stroke-width: 1.4; stroke-linecap: round; opacity: .75; pointer-events: none; }
.hb-vy-mfram .hb-a, .hb-vy-mbak .hb-a { fill: var(--hb-muskel); stroke: var(--hb-muskelkant); stroke-width: 1.1; }
.hb-fiber { fill: none !important; stroke: var(--hb-muskelkant) !important; stroke-width: .7; opacity: .65; pointer-events: none; }
.hb-muskelljus { fill: #fff !important; stroke: none !important; opacity: .2; pointer-events: none; }
.hb-sena { fill: #f3ead9 !important; stroke: #cdbfa9 !important; stroke-width: .8; pointer-events: none; }

/* ── Lägen: hovra, rätt, fel, visa, vald, hittad ──
   (!important behövs för delar med egen färg, t.ex. hår, läppar och kinder.) */
@media (hover: hover) { .hb-a:not(.hb-neutral):hover { fill: #ffe08a !important; } .hb-a:not(.hb-neutral):hover .hb-streck { stroke: #c98a00; } }
.hb-a:focus-visible { stroke: #1d4ed8 !important; stroke-width: 2.4 !important; }
.hb-a.hb-hittad { fill: #cdeccf !important; }
.hb-vy-fram .hb-a.hb-hittad, .hb-vy-bak .hb-a.hb-hittad { stroke: #a5d6aa !important; }
.hb-a.hb-vald { fill: #ffd24d !important; stroke: #a66a00 !important; stroke-width: 1.8; }
.hb-a.hb-ratt { fill: #5fd17f !important; stroke: #15803d !important; stroke-width: 1.8; }
.hb-a.hb-fel { fill: #f58b84 !important; stroke: #b91c1c !important; }
.hb-a.hb-visa { fill: #ffd24d !important; stroke: #a66a00 !important; stroke-width: 1.8; animation: hbPuls 1s ease-in-out infinite; }
.hb-a.hb-ratt .hb-streck, .hb-a.hb-vald .hb-streck, .hb-a.hb-visa .hb-streck, .hb-a.hb-hittad .hb-streck { stroke: #a66a00; }
.hb-a.hb-ratt .hb-streck { stroke: #15803d; } .hb-a.hb-fel .hb-streck { stroke: #b91c1c; }
.hb-a.hb-ratt .hb-revyta, .hb-a.hb-visa .hb-revyta, .hb-a.hb-vald .hb-revyta { fill: rgba(255, 210, 77, .45) !important; }
.hb-a.hb-ratt .hb-revyta { fill: rgba(95, 209, 127, .45) !important; } .hb-a.hb-fel .hb-revyta { fill: rgba(245, 139, 132, .5) !important; } .hb-a.hb-hittad .hb-revyta { fill: rgba(205, 236, 207, .7) !important; }
/* delar med egen färg inuti en del (shorts på låret, hår på huvudet,
   ögonvitor …) följer med när hela delen färgas */
.hb-a.hb-ratt .hb-egen, .hb-a.hb-visa .hb-egen, .hb-a.hb-vald .hb-egen, .hb-a.hb-fel .hb-egen, .hb-a.hb-hittad .hb-egen { fill: inherit; stroke: inherit; opacity: 1; }
@media (hover: hover) { .hb-a:not(.hb-neutral):hover .hb-egen { fill: inherit; stroke: inherit; opacity: 1; } }
.hb-a.hb-ratt, .hb-a.hb-visa, .hb-a.hb-vald, .hb-a.hb-fel { opacity: 1 !important; }
@keyframes hbPuls { 50% { fill: #fff3c4; } }
@media (prefers-reduced-motion: reduce) { .hb-a.hb-visa { animation: none; } .hb-fakta.hb-in { animation: none; } }

/* Svarsknappar (Vad heter den?) */
.hb-val { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.hb-val[hidden] { display: none; }
html .hb-app button.hb-valknapp:not(.sc-start):not(.ks-tts-figur) { min-height: 54px; padding: 10px; border-radius: 14px; cursor: pointer; font: 800 1.08rem 'Nunito', sans-serif;
    border: 2px solid var(--hb-kant); background: var(--hb-yta2); color: var(--hb-text); }
html .hb-app button.hb-valknapp.hb-ratt:not(.sc-start):not(.ks-tts-figur) { background: var(--hb-gron); border-color: var(--hb-gron); color: #fff; opacity: 1; }
html .hb-app button.hb-valknapp.hb-fel:not(.sc-start):not(.ks-tts-figur) { background: color-mix(in srgb, var(--hb-rod) 22%, var(--hb-yta2)); border-color: var(--hb-rod); opacity: .75; }
.hb-meddelande { min-height: 1.6em; margin: 10px 0 0; text-align: center; font-weight: 800; font-size: 1.08rem; color: var(--hb-text); }
.hb-meddelande.hb-ratt { color: var(--hb-gron); } .hb-meddelande.hb-fel { color: var(--hb-rod); } .hb-meddelande.hb-tips { color: var(--hb-guld); }

/* Resultatet */
.hb-klar { margin-top: 12px; padding: 18px; border-radius: 16px; text-align: center; background: var(--hb-yta2); border: 2px solid var(--hb-guld); }
.hb-klar[hidden] { display: none; }
.hb-klar-emoji { font-size: 2.6rem; line-height: 1; }
.hb-klar h2 { margin: 6px 0 4px; font: 400 1.6rem 'Fredoka One', 'Nunito', sans-serif; color: var(--hb-text); }
.hb-klar p { margin: 0 0 10px; color: var(--hb-text); font-size: 1.05rem; }
.hb-klar-ova[hidden] { display: none; }
.hb-klar-ova ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
html .hb-app button.hb-ovaknapp:not(.sc-start):not(.ks-tts-figur) { padding: 6px 12px; border-radius: 999px; cursor: pointer; font: 800 .9rem 'Nunito', sans-serif;
    border: 1px solid var(--hb-guld); background: color-mix(in srgb, var(--hb-guld) 16%, transparent); color: var(--hb-text); }
.hb-knapprad { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hb-gnista { position: fixed; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; z-index: 9999; animation: hbGnista 1s ease-out forwards; }
@keyframes hbGnista { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(-90px) scale(.2); opacity: 0; } }

@media (max-width: 48em) {
    .hb-kort-rad { grid-template-columns: 1fr; }
    html .hb-app button.hb-kort:not(.sc-start):not(.ks-tts-figur) { flex-direction: row; text-align: left; gap: 12px; padding: 10px 12px; }
    .hb-kort > span:last-child { display: flex; flex-direction: column; }
    /* en vy i taget */
    .hb-flikar:not([hidden]) { display: flex; }
    .hb-vyer-2 .hb-vy, .hb-vyer-3 .hb-vy { display: none; }
    .hb-vyer-2 .hb-vy.hb-aktiv, .hb-vyer-3 .hb-vy.hb-aktiv { display: flex; }
    .hb-vy { max-width: 340px; }
    .hb-svg { max-height: 58vh; }
}