/* =====================================================================
   sc8.2 - Oxidationstal
   Stilark. Samme udtryk som de andre superanimationer (grundlaget er sc5.1
   med den gule hjaelpeknap). Nyt nederst: tavlen paa fane 1, brikkerne,
   arbejdsfeltet i scenen (spoergsmaal, felt og Giv hint samlet ét sted),
   listen med formlerne, gaettet og regnskabet.
   BEMAERK: decimaltal skrives med PUNKTUM i CSS (0.25rem) - aldrig med
   dansk komma. Dansk komma bruges kun i tekst, som brugeren laeser.
   ===================================================================== */

:root {
    --bund:        #1b1b21;
    --scene-bund:  #14141a;
    --panel:       #2b2b36;
    --panel-2:     #333340;
    --panel-3:     #3d3d4b;
    --linje:       #464655;
    --tekst:       #f2f3f5;
    --tekst-svag:  #a9b0ba;
    --tekst-mat:   #7e8590;

    --blaa:        #3d9ee0;
    --blaa-mork:   #2a76ac;
    --orange:      #e6892a;
    --groen:       #3fae72;
    --groen-mork:  #2b7d51;
    --roed:        #e05446;
    --roed-mork:   #a33529;
    --gul:         #f2c53d;
    --lilla:       #9b6bd6;

    --plus-lys:    #f7a79d;
    --minus-lys:   #97cff5;

    --radius:      10px;
    --radius-lil:  6px;
    --skygge:      0 4px 14px rgba(0, 0, 0, 0.35);
    --panel-bredde: 430px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bund);
    color: var(--tekst);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   TOPLINJE
   --------------------------------------------------------------------- */
.top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background-color: #15151b;
    border-bottom: 1px solid #33333f;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
    z-index: 20;
    flex-shrink: 0;
}

/* I en samling i fuld skaerm staar knappen, der gendanner panelet, i hjoernet */
.samling-fuld .top { padding-left: 56px; }

.top h1 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.top h1 .ikon { font-size: 1.1rem; margin-right: 3px; color: var(--gul); }

.faneknapper {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.faneknapper::-webkit-scrollbar { display: none; }

.faneknap {
    background-color: var(--panel-2);
    color: var(--tekst-svag);
    border: 1px solid transparent;
    padding: 8px 14px;
    border-radius: var(--radius-lil);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.faneknap .nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: var(--panel-3);
    color: var(--tekst-svag);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.faneknap:hover { background-color: var(--panel-3); color: var(--tekst); }
.faneknap.aktiv { background-color: var(--blaa); color: #ffffff; }
.faneknap.aktiv .nr { background-color: rgba(255, 255, 255, 0.25); color: #ffffff; }

.ikonknap {
    background: transparent;
    border: 1px solid #4a4a58;
    color: var(--tekst-svag);
    border-radius: 4px;
    width: 30px;
    height: 28px;
    font-size: 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
}

.ikonknap:hover { background-color: var(--panel-3); color: var(--tekst); }

/* ---------------------------------------------------------------------
   HOVEDLAYOUT
   --------------------------------------------------------------------- */
main { flex: 1; position: relative; min-height: 0; }

.fane {
    position: absolute;
    inset: 0;
    display: none;
    grid-template-columns: minmax(0, 1fr) var(--panel-bredde);
}

.fane.aktiv { display: grid; }

.scene {
    position: relative;
    min-width: 0;
    min-height: 0;
    background-color: var(--scene-bund);
    overflow: hidden;
}

.scene > canvas { display: block; width: 100%; height: 100%; }

/* Usynlige felter oven paa laerredet, som rundvisningen peger paa */
.anker { position: absolute; pointer-events: none; }


/* ---------------------------------------------------------------------
   HOEJRE SPALTE
   --------------------------------------------------------------------- */
.panel {
    background-color: var(--panel);
    border-left: 1px solid #1f1f27;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: #4d4d5c var(--panel);
}

.panel::-webkit-scrollbar { width: 9px; }
.panel::-webkit-scrollbar-track { background: var(--panel); }
.panel::-webkit-scrollbar-thumb { background: #4d4d5c; border-radius: 5px; }

.kort {
    background-color: rgba(0, 0, 0, 0.22);
    border: 1px solid #3a3a47;
    border-radius: var(--radius);
    padding: 11px;
}

.kort > h2 {
    margin: 0 0 8px 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gul);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.kort.maaling { border-left: 3px solid var(--groen); }
.kort.opgavekort { border-left: 3px solid var(--lilla); }

.kort > h2 .taeller {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--tekst-mat);
    white-space: nowrap;
}

.kort > h2 .taeller b { color: var(--tekst); }

.hyldeprik {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: 0;
}

.note { margin: 8px 0 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--tekst-svag); }
.note:empty { display: none; }

.besked { margin: 0; font-size: 0.86rem; line-height: 1.5; color: #c8ced6; }
.besked:empty { display: none; }
.besked.god   { color: #7ee0a8; }

/* ---------------------------------------------------------------------
   OPGAVEKORTET: raekker med felter
   --------------------------------------------------------------------- */
.opgave-prompt {
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 2px 0 4px;
    word-break: break-word;
}

.opgave-spm { margin: 0 0 4px; font-size: 0.86rem; line-height: 1.45; color: var(--tekst-svag); }

.raekker { display: flex; flex-direction: column; gap: 9px; margin: 8px 0 10px; }
@keyframes ryst {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.felt.ryst { animation: ryst 0.35s ease 1; border-color: var(--roed); }

@keyframes glimt {
    0%   { box-shadow: 0 0 0 0 rgba(63, 174, 114, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(63, 174, 114, 0); }
    100% { box-shadow: 0 0 0 0 rgba(63, 174, 114, 0); }
}

.opgavekort .besked { margin-top: 2px; }
.opgavekort.sejr { border-left-color: var(--groen); animation: glimt 0.9s ease-out 2; }


/* ----- Hylderne i panelet --------------------------------------------- */
.hyldeliste { display: flex; flex-direction: column; gap: 5px; }

.hyldelinje {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.045);
    border: 1px solid transparent;
    border-radius: var(--radius-lil);
    padding: 7px 10px;
    font-family: inherit;
    color: var(--tekst);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hyldelinje:hover { background-color: var(--panel-3); border-color: #5e5e70; }
.hl-farve { width: 4px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.hl-navn { flex: 1; font-size: 0.88rem; font-weight: 600; }
.hl-navn em { display: block; font-style: normal; font-weight: 400; font-size: 0.76rem; color: var(--tekst-mat); }
.hl-tal { font-size: 0.88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hl-stjerner { min-width: 34px; text-align: right; font-size: 0.82rem; font-weight: 700; color: var(--gul); }

/* ---------------------------------------------------------------------
   KNAPPER
   --------------------------------------------------------------------- */
.knapper { display: flex; flex-direction: column; gap: 7px; }

.knap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background-color: var(--panel-2);
    color: var(--tekst);
    border: 1px solid #4a4a58;
    border-radius: var(--radius-lil);
    padding: 8px 11px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.knap:hover:not(:disabled) { background-color: var(--panel-3); border-color: #5e5e70; }
.knap:active:not(:disabled) { transform: scale(0.985); }
.knap:disabled { opacity: 0.4; cursor: not-allowed; }

.knap .tegn { font-size: 1rem; flex-shrink: 0; }
.knap.stor { padding: 11px 13px; font-size: 0.92rem; width: 100%; }

.knap.blaa { background-color: var(--blaa-mork); border-color: var(--blaa); }
.knap.blaa:hover:not(:disabled) { background-color: var(--blaa); }

.knap.nulstil {
    background-color: transparent;
    border-color: #5b3b39;
    color: #e08b81;
    margin-top: 10px;
    width: 100%;
}

.knap.nulstil:hover:not(:disabled) { background-color: rgba(224, 84, 70, 0.16); border-color: var(--roed); }

.knaprad { display: flex; gap: 6px; margin-top: 9px; }
.knaprad.taet { margin-top: 0; }
.knaprad .knap { flex: 1; justify-content: center; padding: 8px 6px; }

/* Den knap, der er det naturlige naeste skridt, banker stille. */
@keyframes bank {
    0%   { box-shadow: 0 0 0 0 rgba(61, 158, 224, 0.6); }
    70%  { box-shadow: 0 0 0 11px rgba(61, 158, 224, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 158, 224, 0); }
}

.knap.banker { animation: bank 1.7s ease-out infinite; }


/* ---------------------------------------------------------------------
   OVERLAYS: teorien
   --------------------------------------------------------------------- */
.overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(8, 8, 12, 0.78);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 50;
}

.overlay.vis { display: flex; }

.overlay-boks {
    background-color: var(--panel);
    border: 1px solid var(--linje);
    border-radius: 14px;
    box-shadow: var(--skygge);
    max-width: 620px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 22px 24px;
}

.overlay-boks.bred { max-width: 900px; }
.overlay-boks.smal { max-width: 420px; }

.overlay-boks h2 { margin: 0 0 12px 0; font-size: 1.15rem; color: var(--blaa); }

/* ---------------------------------------------------------------------
   RUNDVISNINGEN (samme som i sc1.1)
   --------------------------------------------------------------------- */
.rundvisning { position: fixed; inset: 0; z-index: 200; }
.rundvisning[hidden] { display: none; }

.rundvisning-baggrund {
    position: fixed;
    inset: 0;
    background: transparent;
    cursor: pointer;
}

.rundvisning-spot {
    position: fixed;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(8, 8, 13, 0.74);
    outline: 2px solid var(--gul);
    outline-offset: 3px;
    pointer-events: none;
    transition: top 0.22s ease, left 0.22s ease, width 0.22s ease, height 0.22s ease;
}

.rundvisning-boks {
    position: fixed;
    width: 300px;
    max-width: calc(100vw - 28px);
    background-color: var(--panel);
    border: 1px solid var(--linje);
    border-radius: var(--radius);
    box-shadow: var(--skygge);
    padding: 14px 16px;
    transition: top 0.22s ease, left 0.22s ease;
}

.rundvisning-hoved {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.rundvisning-tal {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--tekst-mat);
}

.rundvisning-luk {
    background: transparent;
    border: none;
    color: var(--tekst-svag);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}

.rundvisning-luk:hover { color: var(--tekst); }

.rundvisning-boks h3 { margin: 0 0 6px 0; font-size: 1rem; color: var(--gul); }
.rundvisning-boks p { margin: 0; font-size: 0.87rem; line-height: 1.5; color: #c8ced6; }

.rundvisning-knapper {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
}

.rundvisning-knapper .knap { flex: 1; justify-content: center; }

/* ---------------------------------------------------------------------
   TILGAENGELIGHED OG SMALLE SKAERME
   --------------------------------------------------------------------- */
button:focus-visible,
select:focus-visible {
    outline: 2px solid var(--gul);
    outline-offset: 2px;
}

@media (max-width: 1320px) {
    :root { --panel-bredde: 370px; }
    /* Arbejdsfeltet paa en smal scene: lidt mindre, saa knappen bliver paa linjen */
    .arb { padding: 8px 12px; }
    .arb-rk { gap: 6px 10px; }
    .arb-spm { flex-basis: 170px; font-size: 1.08rem; }
    .arb.fordeler .arb-felter { display: none; }
    .arb .knap { min-width: 110px; padding: 9px 12px; }
    .arb .felt-svar { padding: 5px 9px; font-size: 1.02rem; }
    .arb .felt input, .oxfelt { width: 3.6em; }
    .gaet-etiket { font-size: 0.88rem; }
    .arb-besked { font-size: 0.95rem; }
}

@media (max-width: 1100px) {
    .top { gap: 10px; padding: 8px 12px; }
    .faneknap { padding: 7px 10px; font-size: 0.82rem; gap: 6px; }
    .faneknap .nr { width: 17px; height: 17px; font-size: 0.65rem; }
}

@media (max-width: 860px) {
    body { overflow: auto; }
    .top { flex-wrap: wrap; gap: 10px; }
    .faneknapper { order: 3; width: 100%; flex: none; }
    main { overflow: visible; }
    .fane { position: static; grid-template-columns: minmax(0, 1fr); }
    .fane.aktiv { display: grid; }
    .scene { height: 66vh; min-height: 440px; }
    .panel { border-left: none; border-top: 1px solid #1f1f27; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


.ikonknap.tekstknap { width: auto; padding: 0 10px; font-family: inherit; font-size: 0.82rem; font-weight: 600; }

/* Teorien */
.overlay-boks p { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.55; color: #dde3ea; }

.eksempel {
    margin: 4px 0 12px;
    padding: 10px 14px;
    border-left: 4px solid var(--lilla);
    border-radius: 0 var(--radius-lil) var(--radius-lil) 0;
    background-color: rgba(255, 255, 255, 0.05);
    font-size: 1rem;
    font-weight: 600;
    color: var(--tekst);
}

.eksempel-hoved {
    display: block;
    margin-bottom: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lilla);
}


/* Valgknapperne i Frit valg */
.vaelgerrad { display: flex; flex-wrap: wrap; gap: 6px; }
.vaelgerrad + .vaelgerrad { margin-top: 8px; }

.vaelger {
    flex: 1 1 auto;
    background-color: var(--panel-2);
    color: var(--tekst-svag);
    border: 1px solid #4a4a58;
    border-radius: var(--radius-lil);
    padding: 7px 10px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.vaelger:hover { background-color: var(--panel-3); color: var(--tekst); }
.vaelger.valgt { background-color: var(--blaa-mork); border-color: var(--blaa); color: #ffffff; }

/* En broek med taeller over naevner */
.broek {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    text-align: center;
    font-size: 0.82em;
    line-height: 1.1;
    margin: 0 1px;
}

.broek > span { padding: 0 3px; }
.broek > span:first-child { border-bottom: 1.5px solid currentColor; }

/* De paene beregninger paa fane 3 */
.regn-linjer .note { margin: 0; }

.regn-linje {
    background-color: rgba(255, 255, 255, 0.045);
    border-radius: var(--radius-lil);
    padding: 7px 10px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--tekst);
    font-variant-numeric: tabular-nums;
}

.regn-linje + .regn-linje { margin-top: 5px; }
.regn-linje b { color: #b8f0cf; }
.regn-linje.svar b { color: #f5dd8a; }


/* ---------------------------------------------------------------------
   SC4.5: opgavekortet, listen og knappen Nye tal
   --------------------------------------------------------------------- */
.opgave-prompt { font-size: 1.35rem; }
.opgavekort .opgave-spm { margin-bottom: 2px; }

.hl-nr {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--panel-3);
    color: var(--tekst-svag);
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hyldelinje.valgt { border-color: var(--blaa); background-color: rgba(61, 158, 224, 0.12); }
.hyldelinje.valgt .hl-nr { background-color: var(--blaa); color: #ffffff; }
.hl-stjerner { min-width: 20px; }

.knap.nye { width: 100%; margin-top: 9px; }

/* Gaettet paa fane 1: knapperne over den faste knap */
.valgrad .knap { background-color: rgba(242, 197, 61, 0.1); border-color: rgba(242, 197, 61, 0.6); }
.valgrad .knap:hover:not(:disabled) { background-color: rgba(242, 197, 61, 0.22); border-color: var(--gul); }

/* ---------------------------------------------------------------------
   LINJEN I OPGAVEKORTET: naeste skridt, fejl, ros, hint og svar
   --------------------------------------------------------------------- */
.opgavekort .besked {
    margin: 8px 0 0;
    padding: 7px 10px;
    border-left: 3px solid #5e5e70;
    border-radius: var(--radius-lil);
    background-color: rgba(255, 255, 255, 0.045);
    font-size: 0.9rem;
}

.opgavekort .besked.god   { border-left-color: var(--groen); }
.opgavekort .besked.skidt { border-left-color: var(--roed); }
.opgavekort .besked.gul   { border-left-color: var(--gul); background-color: rgba(242, 197, 61, 0.1); color: #f7e4ab; }
.opgavekort .besked .broek { font-size: 0.8em; }

/* ---------------------------------------------------------------------
   HJAELPEKNAPPEN: gul, saa den ses, uden at man leder. Giv hint er
   fyldt, Vis svaret kun et omrids. Efter et forkert svar lyser knappen
   stille op (klassen peg), til den er brugt.
   --------------------------------------------------------------------- */
.knap.hjaelp {
    border: 2px solid #c79a12;
    background-color: #ffdf6b;
    color: #33290a;
    font-size: 1rem;
    font-weight: 700;
}

.knaprad .knap.hjaelp { padding: 9px 8px; }
.knap.hjaelp:hover:not(:disabled) { background-color: #ffd23e; border-color: #a67f08; }

.knap.hjaelp.svar {
    border-color: rgba(242, 197, 61, 0.7);
    background-color: rgba(242, 197, 61, 0.12);
    color: #f7e4ab;
}

.knap.hjaelp.svar:hover:not(:disabled) { background-color: rgba(242, 197, 61, 0.24); border-color: var(--gul); color: #fff6d8; }

@keyframes knap-peg {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 197, 61, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(242, 197, 61, 0.32); }
}

.knap.hjaelp.peg { animation: knap-peg 1.9s ease-in-out infinite; }

/* ---------------------------------------------------------------------
   SC5.1: talraekkerne, regnetrinene (som sc7.4), gaettet og Start forfra
   --------------------------------------------------------------------- */
.besked.skidt { color: #f0918a; }
.besked.gul   { color: #f0d77a; }
.besked b { color: inherit; }

.maal-tekst { margin: 2px 0 6px; font-size: 1.12rem; font-weight: 600; line-height: 1.4; }

.talraekke {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.045);
    border-radius: var(--radius-lil);
    padding: 6px 10px;
    font-size: 0.9rem;
    color: #c8ced6;
}

.talraekke + .talraekke { margin-top: 5px; }
.talraekke .tal { font-weight: 700; color: var(--tekst); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tal.gul { color: var(--gul); }
#kar-regn { margin-top: 8px; }

/* Regnetrinene: formlen og saa tallet */
.raekke-hoved { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }

.raekke-etiket {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tekst-mat);
}

.raekke-formel { margin: 0 0 4px; font-size: 0.95rem; font-weight: 600; color: #cfd6de; }

.felter { display: flex; gap: 6px; }

.felt {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-width: 0;
    min-height: 40px;
    background-color: #1a1a22;
    border: 1px solid #4a4a58;
    border-radius: var(--radius-lil);
    overflow: hidden;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.felt input {
    flex: 1;
    min-width: 60px;
    background: transparent;
    border: none;
    color: var(--tekst);
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 600;
    padding: 8px 10px;
    outline: none;
}

.felt input::placeholder { color: #6a707b; font-weight: 400; }

.felt-ok {
    background-color: var(--blaa-mork);
    color: #ffffff;
    border: none;
    padding: 0 12px;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.felt-ok:hover:not(:disabled) { background-color: var(--blaa); }
.felt.aktiv { border-color: var(--blaa); }
.felt.aktiv:focus-within { border-color: var(--gul); box-shadow: 0 0 0 1px var(--gul); }
.felt.laast { opacity: 0.4; }
.felt.laast .felt-ok { background-color: var(--panel-3); cursor: default; }
.felt.ok { border-color: rgba(63, 174, 114, 0.6); background-color: rgba(63, 174, 114, 0.13); }
.felt.svar { border-color: rgba(242, 197, 61, 0.55); background-color: rgba(242, 197, 61, 0.1); }

.felt-pre { align-self: center; padding: 0 2px 0 10px; font-size: 1.02rem; font-weight: 700; color: var(--gul); white-space: nowrap; }
.felt-efter { align-self: center; padding: 0 8px 0 2px; font-size: 0.88rem; color: var(--tekst-mat); white-space: nowrap; }

.felt-svar {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 0.98rem;
    font-weight: 600;
    color: #b8f0cf;
    overflow-wrap: anywhere;
    align-self: center;
}

.felt-svar b { color: #ffffff; }
.felt.svar .felt-svar b { color: #fff3c4; }
.felt-maerke { padding: 0 10px; align-self: center; font-weight: 700; color: #7ee0a8; }
.felt.svar .felt-maerke { color: var(--gul); }
.felt.ryst { animation: ryst 0.35s ease 1; border-color: var(--roed); }

/* Gaettet paa fane 1: tre svar under hinanden */
.valgrad { flex-direction: column; }
.valgrad .knap { justify-content: flex-start; text-align: left; }
.valgrad .knap.valgt { border-color: var(--blaa); background-color: rgba(61, 158, 224, 0.2); opacity: 1; }
.valgrad .knap.rigtig { border-color: var(--groen); background-color: rgba(63, 174, 114, 0.2); opacity: 1; }
.valgrad .knap.forkert { border-color: var(--roed); background-color: rgba(224, 84, 70, 0.16); opacity: 1; }
.valgrad .knap:disabled { cursor: default; }
.valgrad .knap:disabled:not(.valgt):not(.rigtig) { opacity: 0.45; }

@keyframes peg {
    0%   { box-shadow: 0 0 0 0 rgba(242, 197, 61, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(242, 197, 61, 0); }
    100% { box-shadow: 0 0 0 0 rgba(242, 197, 61, 0); }
}

.valgrad.peg .knap:not(:disabled) { border-color: var(--gul); animation: peg 1s ease-out infinite; }

/* Start forfra: nederst til hoejre i scenen, under tavlen */
.forfraknap {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 5;
    background-color: rgba(20, 20, 28, 0.85);
    color: var(--tekst-svag);
    border: 1px solid #4a4a58;
    border-radius: 999px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.forfraknap:hover { color: var(--tekst); border-color: #6e6e80; background-color: var(--panel-3); }
.knap:disabled { opacity: 0.4; cursor: not-allowed; }


/* ---------------------------------------------------------------------
   SC8.2: tavlen paa fane 1 (samme farver som tavlen paa laerredet i
   js/tegning.js), felterne over atomerne, regnestykket og brikkerne
   --------------------------------------------------------------------- */
.tavle {
    --fs: 56px;
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 10px 18px 12px;
    background: linear-gradient(135deg, #22302b, #1b2622);
    border: 10px solid #6d4c2f;
    border-radius: 8px;
    box-shadow: 3px 5px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(0, 0, 0, 0.45);
    color: #e9eee9;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.tavle.faerdig { box-shadow: 3px 5px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(63, 174, 114, 0.7); }

/* Oeverst: opgaven paa én linje med en gul streg foran, og stoffets navn */
.tv-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.tv-maal {
    padding-left: 10px;
    border-left: 4px solid var(--gul);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: #f2f5f2;
}

.tv-navn {
    font-size: 1rem;
    font-weight: 600;
    color: #9fb1a9;
    text-align: right;
}

/* Alt det, der arbejdes med, under hinanden. Pladsen til regnestykket,
   beregningen og brikkerne er sat af fra starten (se .skjult), saa
   arbejdsfeltet staar stille, mens der skrives. */
.tv-stak {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, calc(var(--fs) * 0.2), 14px);
    flex-shrink: 0;
}

.tv-stak .skjult { visibility: hidden; }

.tv-formel {
    display: flex;
    align-items: flex-end;
    gap: calc(var(--fs) * 0.06);
    font-size: var(--fs);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.tv-atom { display: inline-flex; align-items: flex-end; }
.tv-kol { display: inline-flex; flex-direction: column; align-items: center; }
.tv-idx { line-height: 1; }

.tv-lad { line-height: 1; }

/* Hintet til ladningen: pladsen efter formlen lyser, ogsaa naar den er tom */
.tv-lad.tom { align-self: flex-start; width: 0.34em; height: 0.34em; margin-top: calc(var(--fs) * 0.66); margin-left: 0.08em; }

.tv-formel.vis-lad .tv-lad {
    border-radius: 6px;
    outline: 2px dashed var(--gul);
    outline-offset: 2px;
    color: var(--gul);
    animation: ladpuls 1.6s ease-in-out infinite;
}

@keyframes ladpuls {
    0%, 100% { outline-color: rgba(242, 197, 61, 0.45); }
    50%      { outline-color: rgba(242, 197, 61, 1); }
}

/* Tallet over atomet. Raekken er 0 bred, saa et tal ikke skubber atomerne
   fra hinanden; det stikker lige meget ud til begge sider. */
.tv-over {
    width: 0;
    height: calc(var(--fs) * 0.6);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: calc(var(--fs) * 0.1);
    font-size: max(18px, calc(var(--fs) * 0.38));
}

/* Det atom, der spoerges til, er gult */
.tv-kol.aktiv .tv-sym { color: var(--gul); }

.tv-sym { letter-spacing: 0.01em; }

.tv-ox { font-weight: 800; white-space: nowrap; flex-shrink: 0; animation: ind 0.35s ease-out; }
.tv-ox.ok    { color: #8ff0b4; }
.tv-ox.vist  { color: #f5dd8a; }
.tv-ox.graa,
.tv-ox.given { color: #aebfb7; animation: none; }
.tv-ox.tom   { color: #6f817a; animation: none; }

/* Over det atom, der spoerges til: et gult ?, og elevens eget tal, mens der skrives */
.tv-ox.spm  { color: var(--gul); animation: spmpuls 1.6s ease-in-out infinite; }
.tv-ox.vent { color: #f5dd8a; font-style: italic; animation: none; }

@keyframes spmpuls {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

@keyframes ind {
    from { transform: translateY(6px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Det felt, der skal skrives i nu, er gult og banker stille, ogsaa uden fokus */
@keyframes feltpuls {
    0%   { box-shadow: 0 0 0 0 rgba(242, 197, 61, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(242, 197, 61, 0); }
    100% { box-shadow: 0 0 0 0 rgba(242, 197, 61, 0); }
}

/* Trinene oeverst paa tavlen */
.tv-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; }
.tv-chips:empty { display: none; }

.tv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px 3px 4px;
    border-radius: 999px;
    border: 1px solid rgba(233, 238, 233, 0.25);
    font-size: 0.9rem;
    font-weight: 700;
    color: #8fa39a;
}

.tv-chip b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(233, 238, 233, 0.12);
    font-size: 0.78rem;
}

.tv-chip.aktiv { color: #1f2328; background-color: var(--gul); border-color: var(--gul); }
.tv-chip.aktiv b { background-color: rgba(0, 0, 0, 0.18); }
.tv-chip.gjort { color: #8ff0b4; border-color: rgba(143, 240, 180, 0.45); }
.tv-pil { color: #6f817a; font-weight: 700; }

/* Regnestykket: venstresiden = ladningen, med en lille tekst under hver side */
.tv-regn {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 0.3em;
    row-gap: 2px;
    align-items: baseline;
    justify-items: center;
    font-size: max(18px, calc(var(--fs) * 0.44));
    font-weight: 700;
    color: #e9eee9;
    font-variant-numeric: tabular-nums;
}

.tv-led { white-space: nowrap; }
.tv-lig { color: #cfd9d4; }
.tv-q { display: inline-flex; align-items: baseline; }
.tv-q .tv-ox { animation: none; }
.rv.sym  { color: #cfe0d8; }
.rv.ok   { color: #8ff0b4; }
.rv.vist { color: #f5dd8a; }
.rv.graa,
.rv.given { color: #aebfb7; }
.rv.vent { color: #f5dd8a; font-style: italic; }

.tv-cap {
    font-size: 0.85rem;
    font-weight: 600;
    color: #8fa39a;
    white-space: nowrap;
}

/* Den paene beregning, naar opgaven er loest */
.tv-isol {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: max(17px, calc(var(--fs) * 0.34));
    font-weight: 700;
    line-height: 1.3;
    color: #cfe0d8;
    font-variant-numeric: tabular-nums;
}

.tv-isol > div { animation: ind 0.4s ease-out; }

/* Brikkerne: ét atom pr. brik */
.tv-brikker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.brik {
    width: var(--bb, 56px);
    height: calc(var(--bb, 56px) * 1.05);
    border-radius: 8px;
    border: 1.5px solid rgba(233, 238, 233, 0.3);
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.brik b { font-size: max(15px, calc(var(--bb, 56px) * 0.34)); font-weight: 800; }
.brik i { font-style: normal; font-size: max(13px, calc(var(--bb, 56px) * 0.25)); font-weight: 700; color: #9fb1a9; }
.brik.plus  { border-color: rgba(108, 182, 255, 0.8); background-color: rgba(61, 158, 224, 0.16); }
.brik.plus b { color: #a8d4ff; }
.brik.minus { border-color: rgba(240, 130, 118, 0.8); background-color: rgba(224, 84, 70, 0.16); }
.brik.minus b { color: #ffb4aa; }
.brik.nul   { border-color: rgba(233, 238, 233, 0.6); }
.brik.ukendt b { color: #6f817a; }
.brik.graa, .brik.given { opacity: 0.75; }
.brik.vist b { color: #f5dd8a; }

.brik-sum {
    margin-left: 8px;
    font-size: max(17px, calc(var(--fs) * 0.36));
    font-weight: 800;
    color: #e9eee9;
    white-space: nowrap;
}

.brik-sum.ok { color: #8ff0b4; }

/* ---------------------------------------------------------------------
   SC8.2: arbejdsfeltet i scenen. Spoergsmaalet, feltet, Tjek og Giv hint
   staar samlet, og under dem linjen med fejl, hint og ros. Paa fane 1
   staar det under formlen paa tavlen, paa fane 2 nederst paa tavlen.
   Rammens farve siger, hvad der skete: roed (ikke endnu), gul (hint og
   svar) og groen (rigtigt og loest).
   --------------------------------------------------------------------- */
.arb {
    width: min(100%, 800px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    border: 2px solid rgba(242, 197, 61, 0.8);
    border-radius: 12px;
    background-color: rgba(12, 17, 15, 0.72);
    text-align: left;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.arb.paa-scene {
    position: absolute;
    z-index: 3;
    width: auto;
    background-color: rgba(12, 17, 15, 0.9);
}

.arb-rk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

.arb-spm {
    flex: 1 1 220px;
    min-width: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.arb-spm b { color: #8ff0b4; }
.arb-ok { color: #8ff0b4; font-weight: 800; margin-right: 2px; }
.arb.svar .arb-spm b, .arb.svar .arb-ok { color: #f5dd8a; }

.arb-felter { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* Feltet og Tjek i én ramme */
.arb-felt {
    display: inline-flex;
    align-items: stretch;
    border: 2px solid var(--gul);
    border-radius: 9px;
    background-color: rgba(0, 0, 0, 0.45);
    overflow: hidden;
    animation: feltpuls 1.8s ease-out infinite;
}

.arb-felt:focus-within { box-shadow: 0 0 0 3px rgba(242, 197, 61, 0.3); animation: none; }
.arb-felt.fejl { border-color: var(--roed); background-color: rgba(224, 84, 70, 0.2); animation: ryst 0.35s; }
.arb-inp { display: inline-flex; }

.oxfelt {
    width: 4.2em;
    padding: 7px 6px;
    background: transparent;
    color: #ffffff;
    border: none;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
    outline: none;
}

.arb .felt-ok { padding: 0 14px; font-size: 0.98rem; font-weight: 700; }

/* Linjen under: plads til én linje er sat af, saa feltet ikke flytter sig */
.arb-besked {
    margin: 0;
    min-height: 1.45em;
    font-size: 1rem;
    line-height: 1.45;
    color: #cfd9d4;
}

.arb.paa-scene .arb-besked:empty { display: none; }

.b-maerke {
    display: inline-block;
    margin-right: 8px;
    padding: 0 9px;
    border-radius: 999px;
    background-color: rgba(233, 238, 233, 0.16);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.arb.skidt { border-color: var(--roed); background-color: rgba(42, 20, 20, 0.85); }
.arb.skidt .arb-besked { color: #ffb3aa; }
.arb.skidt .b-maerke { background-color: rgba(224, 84, 70, 0.35); color: #ffd7d2; }

.arb.hint .arb-besked,
.arb.svar .arb-besked,
.arb.gul .arb-besked { color: #f7e4ab; }
.arb.hint .b-maerke,
.arb.svar .b-maerke { background-color: rgba(242, 197, 61, 0.3); color: #fff2cc; }

.arb.god { border-color: #5fcf92; }
.arb.god .arb-besked { color: #b8f0cf; }

.arb.loest { border-color: #5fcf92; background-color: rgba(16, 36, 26, 0.9); }
.arb.loest .arb-besked { color: #cdeeda; }
.arb.loest .b-maerke { background-color: rgba(63, 174, 114, 0.4); color: #d6ffe8; }
.arb.svar { border-color: rgba(242, 197, 61, 0.8); }

@keyframes arb-ryst {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
}

.arb.ryster { animation: arb-ryst 0.4s ease-in-out 1; }

/* Knappen i arbejdsfeltet: stor nok til, at oejet finder den af sig selv
   (farverne staar under HJAELPEKNAPPEN laengere oppe) */
.arb .knap {
    flex: 0 0 auto;
    justify-content: center;
    min-width: 128px;
    padding: 10px 18px;
    font-size: 1rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------------
   SC8.2: listen med formlerne i panelet
   --------------------------------------------------------------------- */
.opg-liste { display: flex; flex-direction: column; gap: 10px; }

.opg-hoved {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tekst-mat);
}

.opg-tal { letter-spacing: 0.02em; text-transform: none; }

.opg-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.opg-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    background-color: var(--panel-2);
    color: var(--tekst);
    border: 1px solid #4a4a58;
    border-radius: var(--radius-lil);
    padding: 5px 9px;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.opg-chip:hover { background-color: var(--panel-3); border-color: #5e5e70; }
.opg-chip.loest { border-color: rgba(63, 174, 114, 0.65); }
.opg-chip.valgt { border-color: var(--blaa); background-color: rgba(61, 158, 224, 0.2); }
.oc-m { font-style: normal; font-size: 0.78rem; color: #7ee0a8; }
.oc-m:empty { display: none; }
.opg-chip.stjerne .oc-m { color: var(--gul); }

/* ---------------------------------------------------------------------
   SC8.2: gaettet og regnskabet paa fane 2
   --------------------------------------------------------------------- */
.arb-felter.gaet { flex-wrap: wrap; }
.gaet-etiket { font-size: 0.95rem; font-weight: 600; color: #9fb1a9; }
.gaet-rk { display: flex; align-items: center; gap: 6px; }

.gaet-s {
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
}

.arb .felt { flex: 0 0 auto; min-height: 42px; border-width: 2px; border-radius: 9px; background-color: rgba(0, 0, 0, 0.45); }
.arb .felt input { width: 4.2em; min-width: 0; flex: 0 0 auto; padding: 7px 6px; font-size: 1.25rem; font-weight: 800; text-align: center; }
.arb .felt.aktiv { border-color: var(--gul); animation: feltpuls 1.8s ease-out infinite; }
.arb .felt.aktiv:focus-within { animation: none; box-shadow: 0 0 0 3px rgba(242, 197, 61, 0.3); }
.arb .felt-svar { flex: 0 0 auto; padding: 6px 12px; font-size: 1.1rem; white-space: nowrap; }
.arb .gaet-ok { align-self: stretch; min-height: 42px; border-radius: 9px; }

.felt.gaettet { border-color: #5e5e70; background-color: rgba(255, 255, 255, 0.04); }
.felt.gaettet .felt-svar { color: var(--tekst); }
.felt.forkert { border-color: rgba(224, 84, 70, 0.6); background-color: rgba(224, 84, 70, 0.12); }
.felt.forkert .felt-svar { color: #f7b9b2; }
.felt.forkert .felt-svar b { color: #ffffff; }
.felt.laast .felt-svar { color: var(--tekst-svag); font-size: 0.95rem; }
.arb .felt.laast { opacity: 0.7; }

.rs-tabel {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 3px;
    font-variant-numeric: tabular-nums;
}

.rs-tabel th,
.rs-tabel td { padding: 5px 6px; text-align: center; font-size: 0.92rem; }
.rs-tabel thead th { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: var(--tekst-mat); line-height: 1.25; }
.rs-tabel tbody th { font-size: 1.1rem; font-weight: 800; text-align: left; }
.rs-tabel tbody tr { background-color: rgba(255, 255, 255, 0.045); }
.rs-tabel tbody tr.spurgt { background-color: rgba(242, 197, 61, 0.1); }
.rs-tabel td.ox { white-space: nowrap; }
.rs-tabel td.ox b { color: var(--gul); }
.rs-rom { display: inline-block; min-width: 2.6em; margin-left: 8px; padding: 1px 6px; border-radius: 999px; background-color: rgba(242, 197, 61, 0.14); text-align: center; }
.rs-tabel tbody tr > :first-child { border-radius: var(--radius-lil) 0 0 var(--radius-lil); }
.rs-tabel tbody tr > :last-child { border-radius: 0 var(--radius-lil) var(--radius-lil) 0; }

.rs-sum { margin: 6px 0 0; font-size: 0.9rem; font-weight: 600; color: var(--tekst); }
.rs-vent { margin: 0; }

/* ---------------------------------------------------------------------
   SC8.2: beregningen under linjen paa fane 2, naar regnskabet er gjort
   op. Formlen med ord oeverst, tallene lige under de ord, de hoerer til,
   og lighedstegnene under hinanden (brugerens test 5. okt. 2026: et
   regnestykke inde i teksten var indforstaaet og svaert at laese). Samme
   opstilling bruges i teoriens eksempel.
   --------------------------------------------------------------------- */
.arb-forklar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px 14px 8px;
    border-left: 4px solid rgba(143, 240, 180, 0.6);
    border-radius: 0 9px 9px 0;
    background-color: rgba(255, 255, 255, 0.06);
    overflow-x: auto;
}

.arb-forklar[hidden] { display: none; }
.arb.svar .arb-forklar { border-left-color: rgba(242, 197, 61, 0.7); }

.fk-note { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: #f7e4ab; }

.fk-regn {
    display: grid;
    grid-template-columns: repeat(7, max-content) minmax(0, 1fr);
    column-gap: 9px;
    row-gap: 2px;
    align-items: baseline;
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}

.fk-regn > span { text-align: center; white-space: nowrap; }
.fk-regn > .fk-v { text-align: right; }
.fk-regn > .fk-ord { font-size: 0.94em; font-weight: 600; color: #b9c9c1; }
.fk-regn > .fk-sum { grid-column: 3 / 6; }
.fk-regn > .fk-saa { padding-left: 12px; text-align: left; font-weight: 600; color: #cfe0d8; }
.fk-saa b { color: #8ff0b4; font-weight: 800; }
.arb.svar .fk-saa b { color: #f5dd8a; }

.eksempel .fk-regn { margin-top: 8px; font-size: 1rem; color: var(--tekst); }
.eksempel .fk-regn > .fk-ord { color: var(--tekst-svag); }
.eksempel .fk-regn > .fk-saa { color: var(--tekst); }

/* Paa en smal eller lav scene: taettere, saa molekylet beholder pladsen */
@media (max-width: 1320px), (max-height: 760px) {
    .arb-forklar { gap: 3px; padding: 5px 12px 6px; }
    .arb-forklar .fk-note { font-size: 0.95rem; }
    .arb-forklar .fk-regn { font-size: 1rem; line-height: 1.25; column-gap: 7px; row-gap: 1px; }
}

/* Paa en smal scene er gaettet vaek, naar opgaven er loest: linjen under
   siger, hvordan gaettet gik, og knappen bliver paa linjen (js/sim_elektroner.js) */
.arb.smal.sejr .arb-felter { display: none; }

/* Genvejene i teorien */
kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid #5e5e70;
    border-bottom-width: 2px;
    border-radius: 4px;
    background-color: var(--panel-2);
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--tekst);
}

.overlay-boks p.genveje { font-size: 0.85rem; color: var(--tekst-svag); margin-top: 12px; }

/* Teoriens smaa overskrifter og fremgangsmaaden i trin */
.overlay-boks h3.teori-hoved {
    margin: 16px 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gul);
}

.teori-trin { margin: 0 0 12px; padding-left: 22px; }
.eksempel-hoved .f { text-transform: none; letter-spacing: 0.02em; }
.teori-trin li { margin: 0 0 5px; font-size: 0.95rem; line-height: 1.5; color: #dde3ea; }
.teori-trin li::marker { color: var(--gul); font-weight: 700; }