/* ─────────────────────────────────────────────────────────────────────────
   Feltbog for fagalbummet (v3.32.0, besluttet af Philip 8.10.2026)
   Samme sprog som GEO Niño efter 14.9: Manrope til titler, Source Sans 3 til
   tekst, sandpapir og hårlinjer. Runde 3 (8.10.2026, "B en tand ned"): hjørner
   på skalaen 2–6–8–10–12 px og lave skygger i blæk, aldrig grå. Indlæses SIDST på
   appens arbejdsflader (elev, lærer, klasseoversigt, klassens forside), så det
   overstyrer main.css uden at røre den. Forsiden og login (tærsklerne) er urørte.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    --blaek: #1f1a15;
    --broed: #2b241c;
    --daemp: #6b5d4f;
    --streg: #e4dccf;
    --streg-kraftig: #d9cfbf;
    --papir: #fbf8f2;
    --grund: #f1ebe0;
    --handling: #1f1a15;
    --handling-moerk: #000000;
    --varm: #9a4a1f;
    --accent: #9a4a1f;
    /* Hjørner: 2 billede · 6 knap og felt · 8 kort · 10 Fang det · 12 lysboks */
    --r-billede: 2px;
    --r-kontrol: 6px;
    --r-kort: 8px;
    --r-fang: 10px;
    --r-lysboks: 12px;
    /* Kortene: lys varm kant og lav skygge i blæk — varmen kommer fra kanten */
    --kort-flade: #fffdf9;
    --kort-kant: #e9e2da;
    --kort-kant-hover: #e0d6ca;
    --skygge-kort: 0 1px 2px rgba(31, 26, 21, 0.06), 0 3px 8px rgba(31, 26, 21, 0.05);
    --skygge-loeft: 0 6px 16px rgba(31, 26, 21, 0.11);
    --skygge-flyd: 0 10px 30px rgba(31, 26, 21, 0.16);
    --snor: #c3af9c;
    --sans: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
    --titel: 'Manrope', 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
}

body {
    font-family: var(--sans);
    background: var(--grund);
    color: var(--broed);
}

.tf-main {
    background: var(--grund);
}

/* Titler i Manrope */
h1, h2, h3,
.tf-title,
.tf-col-navn,
.lesson-label .label-text,
.flip-titel,
.flip-spoergsmaal,
.ops-titel,
.tf-crumb-btn .tf-crumb-navn,
.name-gate-card h2 {
    font-family: var(--titel) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

/* Ingen "DM Sans" hårdkodet nogen steder */
.tf-crumb-tag,
.tf-topbar .tf-btn.tf-crumb-btn.tf-sys,
.tf-lockchip,
.tf-namechip {
    font-family: var(--sans) !important;
}

/* ── Sidepanelet: sort-hvidt og roligt ── */
.tf-sidebar {
    background: #1f1a15 !important;
    background-image: none !important;
}

.tf-sidebar .tf-logo img {
    filter: grayscale(1) brightness(1.9);
}

.tf-sidebar .tf-btn {
    color: #d9cfbf;
}

.tf-sidebar .tf-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.tf-sidebar .tf-laas,
.tf-sidebar button.tf-laas {
    color: #d9cfbf !important;
    background: transparent !important;
}

.tf-sidebar .tf-laas.er-laast,
body.board-locked .tf-sidebar .tf-laas {
    color: #e9b48f !important;
}

/* ── Topfeltet ── */
.tf-namechip {
    border: 1px solid var(--streg-kraftig) !important;
    border-radius: var(--r-kontrol) !important;
    background: #fff !important;
    box-shadow: none !important;
}

.tf-lockchip,
.tf-lockchip.is-open,
.tf-lockchip.is-locked {
    border-radius: var(--r-kontrol) !important;
    background: transparent !important;
    border: 1px solid var(--streg-kraftig) !important;
    color: var(--daemp) !important;
}

.tf-lockchip.is-locked {
    color: var(--varm) !important;
}

.tf-topbar {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--streg-kraftig) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ── Knapper: mørk primær, lys sekundær, 6 px hjørner ── */
.btn,
.btn-primary,
.btn-secondary,
.btn-fare {
    border-radius: var(--r-kontrol) !important;
    box-shadow: none !important;
    font-family: var(--sans) !important;
    font-weight: 600 !important;
}

.btn-primary,
.flip-vis-svar {
    background: var(--blaek) !important;
    border-color: var(--blaek) !important;
    color: #fbf6ee !important;
    border-radius: var(--r-kontrol) !important;
}

.btn-primary:hover:not(:disabled),
.flip-vis-svar:hover {
    background: #000 !important;
}

.btn-secondary {
    background: #fff !important;
    color: var(--blaek) !important;
    border: 1px solid var(--streg-kraftig) !important;
}

.tf-fang {
    background: var(--blaek) !important;
    border-radius: var(--r-fang) !important;
    box-shadow: 0 2px 8px rgba(31, 26, 21, 0.18) !important;
    font-family: var(--sans) !important;
    font-weight: 600 !important;
}

/* ── Fotovæggen (v3.32.1) ──
   Hver figur er et aftryk med en tynd ramme. Overskriften bærer sin søjle:
   navnet står over en mørk streg, og en tynd snor hænger ned fra stregen
   gennem søjlens figurer. Snoren ses kun i mellemrummene. En søjle kan
   stables, så kun den første figur ligger øverst med kanterne af de andre
   bag ved. Ingen datoer og ingen navne på væggen. */
.grid-container,
.grid-container.tf-grid {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px 0 0 !important;
    border-radius: 0 !important;
}

/* Overskriften bor i søjlen; den gamle overskriftsrække skjules */
.grid-container.fa-layout #lessonLabels {
    display: none !important;
}

.upload-grid[data-soejler] {
    gap: 40px 30px !important;
    padding-top: 6px;
}

.upload-grid[data-soejler="1"] { grid-template-columns: minmax(0, 1fr) !important; }
.upload-grid[data-soejler="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.upload-grid[data-soejler="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.upload-grid[data-soejler="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.upload-grid[data-soejler="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }

@media (max-width: 1100px) {
    .upload-grid[data-soejler="4"],
    .upload-grid[data-soejler="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 700px) {
    .upload-grid[data-soejler] { grid-template-columns: minmax(0, 1fr) !important; gap: 34px !important; }
}

.tf-col {
    gap: 20px !important;
}

/* Snoren: én hårlinje midt i søjlen bag figurerne */
.fa-layout .tf-col,
.fa-k-soejle {
    position: relative;
}
.fa-layout .tf-col::before,
.fa-k-soejle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--snor);
    z-index: 0;
    pointer-events: none;
}
.fa-layout .tf-col > *,
.fa-k-soejle > * {
    position: relative;
    z-index: 1;
}

/* Overskriften: navnet over en mørk streg — den bærer søjlen */
.tf-col-hoved {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 0 0 8px;
    border-bottom: 2px solid var(--blaek);
    background: var(--grund);
}

.tf-col-navn {
    flex: 1;
    min-width: 0;
    font-size: 18.5px;
    line-height: 1.25;
    color: var(--blaek);
    cursor: text;
    overflow-wrap: anywhere;
}

.tf-col-fold {
    flex: none;
    display: none;
    width: 28px;
    height: 28px;
    margin: 0 -4px -3px 0;
    padding: 0;
    border: none;
    border-radius: var(--r-kontrol);
    background: transparent;
    color: var(--daemp);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.tf-col.kan-folde .tf-col-fold,
.fa-k-soejle.kan-folde .tf-col-fold {
    display: inline-flex;
}
@media (hover: hover) {
    .tf-col-fold:hover {
        color: var(--blaek);
        background: var(--streg);
    }
}
.tf-col-fold svg {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}
.foldet .tf-col-fold svg {
    transform: none;
}

/* Hver figur: et aftryk med lys varm kant og en lav skygge i blæk, som et foto
   på et bord. Ved mouseover løftes det 1 px. */
.grid-cell,
.grid-cell:hover {
    box-shadow: none !important;
    transform: none !important;
}

.grid-cell.has-image,
.fa-k-fig {
    border: 1px solid var(--kort-kant) !important;
    background: var(--kort-flade) !important;
    border-radius: var(--r-kort) !important;
    padding: 7px 7px 0 !important;
    box-shadow: var(--skygge-kort) !important;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease !important;
}

.grid-cell.has-image:hover,
.fa-k-fig:hover {
    border-color: var(--kort-kant-hover) !important;
    box-shadow: var(--skygge-loeft) !important;
    transform: translateY(-1px) !important;
}

.grid-cell.has-image > img,
.fa-k-fig img {
    border-radius: var(--r-billede) !important;
    background: #fff !important;
    max-height: 440px;
}

.grid-cell.has-image .cell-tekst {
    background: transparent !important;
    border-top: none !important;
    padding: 7px 2px 9px !important;
}

/* Pointen: diskret, mindre tekst */
.cell-titel {
    font-family: var(--sans) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: var(--broed) !important;
    -webkit-line-clamp: 3 !important;
}

/* Navnet står ikke på væggen */
.cell-af {
    display: none !important;
}

/* Ingen mangelliste på væggen: manglende pointe vises ikke */
.cell-titel.mangler {
    display: none !important;
}
.grid-cell.has-image .cell-tekst:has(.cell-titel.mangler:only-child) {
    padding-bottom: 0 !important;
    min-height: 7px;
}

/* Tilføj: snoren slutter her, og den næste figur kan hænges på */
.tf-col .grid-cell.tf-add {
    min-height: 34px !important;
    border: none !important;
    background: var(--grund) !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 6px 0 4px !important;
}

.tf-col .grid-cell.tf-add::after {
    content: "+ Tilføj" !important;
    font-size: 14px !important;
    font-family: var(--sans);
    color: var(--daemp) !important;
}

.tf-col .grid-cell.tf-add::before {
    content: none !important;
}

.tf-col .grid-cell.tf-add:hover::after,
.tf-col .grid-cell.tf-add.drag-over::after {
    color: var(--varm) !important;
}

.tf-col .grid-cell.tf-add.drag-over {
    outline: 1px dashed var(--varm);
}

/* ── Stablet søjle: kun den første figur, kanterne af de andre bag ved ── */
.tf-stak-tekst {
    display: none;
}
.foldet::before {
    display: none;
}
.tf-col.foldet .grid-cell:not(.stak-top) {
    display: none !important;
}
.tf-col.foldet .stak-top,
.fa-k-soejle.foldet .fa-k-fig:first-of-type {
    cursor: pointer;
}
.fa-k-soejle.foldet .fa-k-fig:not(:first-of-type) {
    display: none;
}
.foldet[data-lag="1"] .stak-top,
.fa-k-soejle.foldet[data-lag="1"] .fa-k-fig:first-of-type {
    box-shadow: 5px 5px 0 -1px var(--kort-flade), 5px 5px 0 0 var(--kort-kant-hover), 5px 8px 10px -4px rgba(31, 26, 21, 0.12) !important;
    margin: 0 5px 5px 0;
}
.foldet[data-lag="2"] .stak-top,
.fa-k-soejle.foldet[data-lag="2"] .fa-k-fig:first-of-type {
    box-shadow:
        5px 5px 0 -1px var(--kort-flade), 5px 5px 0 0 var(--kort-kant-hover),
        10px 10px 0 -1px var(--kort-flade), 10px 10px 0 0 var(--kort-kant-hover),
        10px 13px 10px -4px rgba(31, 26, 21, 0.12) !important;
    margin: 0 10px 10px 0;
}
.foldet .tf-stak-tekst {
    display: block;
    align-self: center;
    margin-top: -6px;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--daemp);
    cursor: pointer;
}
.foldet .tf-stak-tekst:hover {
    color: var(--blaek);
}

/* "Stabl alle" / "Fold alle ud" over væggen */
.tf-stabl-alle {
    display: block;
    margin: 0 0 12px auto;
    padding: 3px 0;
    border: none;
    background: none;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--daemp);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: pointer;
}
.tf-stabl-alle:hover {
    color: var(--blaek);
}
.tf-stabl-alle[hidden] {
    display: none;
}

/* Eleverne har ingen række- og søjleknapper; Fang det udvider selv */
body.har-fang .grid-row-controls,
body.har-fang .grid-addrow-bar {
    display: none !important;
}

/* Lærerens række/søjle-knapper som diskrete tekstlinks */
.row-control-btn {
    background: transparent !important;
    border: none !important;
    color: var(--daemp) !important;
    border-radius: var(--r-kontrol) !important;
    font-family: var(--sans) !important;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.row-control-btn:hover {
    color: var(--blaek) !important;
}

.grid-addrow-bar {
    background: transparent !important;
    border: 1px solid var(--streg-kraftig) !important;
    border-radius: var(--r-kontrol) !important;
    color: var(--daemp) !important;
}

/* Én søjle (single-group-mode) bruger stadig overskriftsrækken */
.lesson-label,
.lesson-labels.single-group-mode .lesson-label {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--streg-kraftig) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ── Lysboks, FLIP og ark ── */
.tf-lb-body,
.tf-fang-kort,
.name-gate-card {
    border-radius: var(--r-lysboks) !important;
    background: var(--papir) !important;
    box-shadow: 0 20px 50px -12px rgba(31, 26, 21, 0.35) !important;
}

/* Lysboksen: sløret i blæk gør arbejdet, så kortet har ingen skygge */
.tf-lightbox {
    background: rgba(31, 26, 21, 0.75) !important;
}
.tf-lb-body {
    box-shadow: none !important;
}
.tf-lb-close {
    background: var(--grund) !important;
    color: var(--blaek) !important;
}

.tf-lb-imgwrap img {
    border-radius: 4px !important;
}

.flip-titel {
    color: var(--blaek) !important;
}

.tf-fang-chip {
    border-radius: var(--r-kontrol) !important;
    border: 1px solid var(--streg-kraftig) !important;
    font-family: var(--sans) !important;
}

.tf-fang-chip.valgt {
    background: var(--blaek) !important;
    border-color: var(--blaek) !important;
    color: #fbf6ee !important;
    box-shadow: none !important;
}

.tf-fang-pointe {
    border-radius: var(--r-kontrol) !important;
    border: 1px solid var(--streg-kraftig) !important;
    font-family: var(--sans) !important;
}

.tf-fang-pointe:focus {
    border-color: var(--blaek) !important;
}

.tf-fang-gem.uden-pointe {
    background: var(--daemp) !important;
    border-color: var(--daemp) !important;
}

/* Noteeditoren (inline-stile i grid.js) */
#titleInput,
#pointersInput {
    border: 1px solid var(--streg-kraftig) !important;
    border-radius: var(--r-kontrol) !important;
    font-family: var(--sans) !important;
}

#saveNoteBtn {
    background: var(--blaek) !important;
    border-radius: var(--r-kontrol) !important;
}

#cancelNoteBtn {
    background: #fff !important;
    border: 1px solid var(--streg-kraftig) !important;
    border-radius: var(--r-kontrol) !important;
}

#clearNoteBtn {
    background: transparent !important;
    color: #a93226 !important;
    border: 1px solid #e0b4ab !important;
    border-radius: var(--r-kontrol) !important;
}

/* Toasts */
.gf-toast {
    border-radius: 0 var(--r-kontrol) var(--r-kontrol) 0 !important;
    background: var(--blaek) !important;
    border-left: 3px solid var(--varm) !important;
    font-family: var(--sans) !important;
}

.gf-toast.toast-success {
    border-left-color: #8fbf9a !important;
}

/* Popovers og menuer */
.tf-pop {
    border-radius: var(--r-kort) !important;
    box-shadow: var(--skygge-flyd) !important;
    border: 1px solid var(--streg-kraftig) !important;
}

.tf-liste .dropdown-item.aktiv,
.tf-liste .dropdown-item.aktiv:hover {
    background: var(--blaek) !important;
    border-radius: var(--r-kontrol) !important;
}

/* Lysboksen: billedet må højst fylde 62 % af højden, så pointe, note og
   knapper altid kan ses uden at rulle (#display { max-height:100% } slog før). */
.tf-lightbox:not(.flip-visning) #display {
    max-height: 62vh;
}

/* ── Klasseoversigten (class.html) som samme væg ── */
.gridwrap { justify-items: stretch !important; }
.group {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
.group > div:first-child { font-family: var(--titel); font-weight: 600; }
.fa-vaeg-klasse {
    display: grid;
    gap: 40px 30px;
    margin-top: 16px;
    align-items: start;
}
.fa-vaeg-klasse[data-soejler="1"] { grid-template-columns: minmax(0, 1fr); }
.fa-vaeg-klasse[data-soejler="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fa-vaeg-klasse[data-soejler="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fa-vaeg-klasse[data-soejler="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fa-vaeg-klasse[data-soejler="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .fa-vaeg-klasse[data-soejler="4"], .fa-vaeg-klasse[data-soejler="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .fa-vaeg-klasse[data-soejler] { grid-template-columns: minmax(0, 1fr); }
}
.fa-k-soejle { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fa-k-fig { margin: 0; cursor: pointer; }
.fa-k-fig img { width: 100%; height: auto; max-height: 440px; object-fit: contain; display: block; }
.fa-k-fig figcaption { padding: 7px 2px 9px; display: flex; flex-direction: column; gap: 4px; min-height: 7px; }
.fa-k-fig figcaption b { font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--broed); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Noten står ikke på væggen — den ses, når figuren åbnes */
.fa-k-note { display: none; }
/* FLIP i klasseoversigten: billedet først, teksten efter et klik */
body.flipmode .fa-k-fig figcaption { visibility: hidden; }
body.flipmode .fa-k-fig.vist figcaption { visibility: visible; }
body.flipmode .fa-k-fig::after { content: "Klik for at se pointen"; position: absolute; left: 9px; bottom: 9px; font-size: 12.5px; color: var(--daemp); }
body.flipmode .fa-k-fig.vist::after { content: none; }

/* Klassens forside: logoet i sort-hvid som i sidepanelet */
.kh-top img { filter: grayscale(1) brightness(0.35); }
.tf-lightbox #display { margin-left: auto; margin-right: auto; }

/* ── Opsamling i Feltbog: ingen farvede toplinjer eller farvede tekstfelter;
   kun den lille prik ved gruppenavnet skelner grupperne ── */
.ops-plakat,
.ops-figur {
    background: var(--kort-flade) !important;
    border: 1px solid var(--kort-kant) !important;
    border-top: 1px solid var(--kort-kant) !important;
    border-radius: var(--r-kort) !important;
    box-shadow: var(--skygge-kort) !important;
}
.ops-plakat:hover { box-shadow: var(--skygge-loeft) !important; border-color: var(--kort-kant-hover) !important; transform: none !important; }
.ops-minis figure,
.ops-minis figcaption,
.ops-tekst,
.ops-billede {
    background: transparent !important;
    border-radius: var(--r-billede) !important;
}
.ops-minis img { border-radius: var(--r-billede) !important; background: #fff !important; }
.ops-titel { border-left: none !important; padding-left: 0 !important; }
.ops-plakat h3, .ops-titel { font-family: var(--titel) !important; font-weight: 600 !important; color: var(--blaek) !important; }
.ops-tekst h4.ops-utitel { display: none !important; }
.ops-eksport, .ops-tilbage, .ops-pil, .ops-flip { border-radius: var(--r-kontrol) !important; }

/* FLIP-spørgsmålet i blæk, ikke i søjlefarve */
.flip-spoergsmaal { color: var(--blaek) !important; }

/* ── Markeringer: bogmærke (elev) og "+ Perle" (lærer) ──
   Vises ved mouseover. Et gemt bogmærke ses altid, men kun på elevens egen
   skærm. Lærerens perle giver intet mærke på væggen. */
.tf-gem-knap,
.tf-perle-knap {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    display: none;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 9px;
    border: 1px solid var(--streg-kraftig);
    border-radius: var(--r-kontrol);
    background: #fff;
    color: var(--blaek);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.grid-cell.has-image:hover .tf-gem-knap,
.grid-cell.has-image:hover .tf-perle-knap,
.tf-gem-knap.til {
    display: inline-flex;
}
.tf-perleprik {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--varm);
    box-sizing: border-box;
}
.tf-perle-knap.til .tf-perleprik { background: var(--varm); }
.tf-perle-knap.til { color: var(--varm); }
/* I lysboksen står knappen altid fremme */
.tf-lb-mark { margin-top: 12px; }
.tf-lb-mark .tf-gem-knap,
.tf-lb-mark .tf-perle-knap {
    position: static;
    display: inline-flex;
}
.tf-lb-mark .tf-gem-knap::after { content: "Gem"; }
.tf-lb-mark .tf-gem-knap.til::after { content: "Gemt"; }

/* Genveje fra albummet til klassens forside */
.tf-albumfaner { display: inline-flex; gap: 16px; align-items: baseline; margin-left: 12px; font-size: 14.5px; }
.tf-albumfaner[hidden] { display: none; }
.tf-albumfaner b { font-weight: 600; color: var(--blaek); border-bottom: 2px solid var(--varm); padding-bottom: 2px; }
.tf-albumfaner a { color: var(--daemp); text-decoration: none; }
.tf-albumfaner a:hover { color: var(--blaek); }
@media (max-width: 700px) { .tf-albumfaner { margin-left: 0; width: 100%; } }

/* Prøveområdet: papir og hårlinje som resten, ikke lilla */
.tf-demobar {
    background: var(--papir) !important;
    border: 1px solid var(--streg-kraftig) !important;
    border-left: 3px solid var(--blaek) !important;
    color: var(--broed) !important;
    /* venstrestregen må ikke bøje rundt om hjørnet */
    border-radius: 0 var(--r-kontrol) var(--r-kontrol) 0 !important;
}
.tf-demobar b { color: var(--blaek) !important; }
.tf-demobar a { color: var(--blaek) !important; }
.tf-demobar .lb-icon { filter: grayscale(1); opacity: 0.75; }

/* FLIP-bagsiden på væggen følger rammen */
.grid-cell .cell-flipback { border-radius: var(--r-kort) !important; }

/* Slet: en uigennemsigtig blæk-cirkel inde på billedet, ikke en rød firkant
   (den lignede en fejlbesked). Afspil-mærket i blæk, ikke YouTube-rød. */
.grid-cell .delete-btn {
    top: 13px !important;
    right: 13px !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--blaek) !important;
    color: #fff !important;
    line-height: 22px !important;
}
.cell-linkbadge,
.cell-linkbadge.er-video {
    background: rgba(31, 26, 21, 0.8) !important;
}
.cell-linkbadge:hover {
    background: var(--blaek) !important;
}

/* Rammen følger billedet: høje billeder får en smal ramme, brede en bred,
   og alle hænger midt på snoren. Teksten må ikke gøre rammen bredere. */
.fa-layout .tf-col .grid-cell.has-image,
.fa-k-fig {
    align-self: center;
    width: fit-content;
    min-width: min(100%, 220px);
    max-width: 100%;
    box-sizing: border-box;
}
.fa-layout .tf-col .grid-cell.has-image > img,
.fa-k-soejle .fa-k-fig img {
    width: auto !important;
    max-width: 100%;
    align-self: center;
    margin: 0 auto;
}
.fa-layout .tf-col .grid-cell.has-image .cell-tekst,
.fa-k-fig figcaption {
    contain: inline-size;
}

/* Klassens "Nu ved vi …"-linjer under pointen (det store billede, FLIP, Kom igen, opsamlingen) */
.tf-nuvedvi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 2px;
    text-align: left;
}
.tf-nuvedvi-linje {
    border-left: 3px solid var(--varm);
    padding: 2px 0 2px 10px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--broed);
}
.tf-nuvedvi-linje small {
    display: block;
    font-size: 12px;
    color: var(--daemp);
}
.flip-svar .tf-nuvedvi {
    max-width: 640px;
    margin: 12px auto 0;
}
.ops-tekst .tf-nuvedvi-linje {
    font-size: 13px;
}