/* Grib genren: Moderne nordisk biblioteksarkitektur til 3. til 9. klasse */
/* Inspireret af lyst egetræ, birk, nordisk fjordblå, botanisk skovgrøn, brændt terrakotta og varm okker */

:root {
  /* Arkitektoniske grundflader: Lys kalksten, birk og blond nordisk eg */
  --farve_baggrund: #F1EFEA;
  --farve_kort_bg: #FFFFFF;
  --farve_kort_accent_bg: #FAF7F0;
  --farve_kant_varm: #DCCBB1;
  --farve_kant_lys: #EAE1D3;

  /* Nordisk egetræ og birk */
  --bib_eg: #C6985A;
  --bib_eg_mork: #9A6F37;
  --bib_eg_lys: #F6EFE2;
  --bib_eg_kant: #D5BE9B;

  /* 1. Nordisk Fjordblå / Petrol (Læsesal & opslagsværk) */
  --bib_fjord: #25536E;
  --bib_fjord_mork: #193B4F;
  --bib_fjord_lys: #ECF2F6;
  --bib_fjord_kant: #BDD1DF;

  /* 2. Botanisk Skovgrøn / Mos (Læsehuse & labyrint) */
  --bib_skov: #386634;
  --bib_skov_mork: #264823;
  --bib_skov_lys: #ECF3EB;
  --bib_skov_kant: #BDCEBB;

  /* 3. Brændt Terrakotta / Vermilion (Oplevelsesrum & arena) */
  --bib_terrakotta: #BF4329;
  --bib_terrakotta_mork: #98311B;
  --bib_terrakotta_lys: #FCEEEB;
  --bib_terrakotta_kant: #E8C0B7;

  /* 4. Varm Okkergul & Honning (Læseniche & spormaskine) */
  --bib_okker: #C88A19;
  --bib_okker_mork: #9B680D;
  --bib_okker_lys: #FBF3DF;
  --bib_okker_kant: #E5CE9A;

  /* Brand farver: Sennep, gylden okker, urtegrøn (bevaret for moduler) */
  --farve_sennep: #C88A19;
  --farve_sennep_mork: #9B680D;
  --farve_sennep_lys: #FBF3DF;
  --farve_sennep_tekst: #784D06;

  --farve_groen: #386634;
  --farve_groen_lys: #ECF3EB;
  --farve_groen_mork: #264823;

  /* Tekstfarver */
  --farve_tekst_hoved: #1E1914;
  --farve_tekst_daempet: #5C5349;
  --farve_tekst_lys: #8C8072;

  /* Aliaser for bagudkompatibilitet i moduler */
  --farve_gul: #E8B130;
  --farve_mork_sennep: #9B680D;
  --farve_lysegul: #FBF5E6;
  --farve_varmhvid: #FFFDF9;
  --farve_bleggroen: #ECF3EB;
  --farve_lysegroen: #CFE2CC;
  --farve_morkgroen: #264823;
  --farve_sort: #1E1914;
  --farve_graa: #5C5349;
  --farve_lys_graa: #EFEAE0;
  --farve_hvid: #FFFFFF;
  --farve_kant: #DCCBB1;
  --farve_kant_fokus: #C88A19;

  --radius_rund: 20px;
  --radius_kort: 18px;
  --radius_knap: 10px;
  --radius_pill: 9999px;

  --skrifttype_brod: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --skrifttype_overskrift: 'Fraunces', Georgia, serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body {
  font-family: var(--skrifttype_brod);
  background-color: var(--farve_baggrund);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(200, 138, 25, 0.06) 0%, transparent 38%),
    radial-gradient(circle at 88% 14%, rgba(37, 83, 110, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 50% 85%, rgba(56, 102, 52, 0.05) 0%, transparent 45%);
  color: var(--farve_tekst_hoved);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Hovedramme */
.hoved_container {
  width: 100%;
  max-width: min(1240px, 100%);
  margin: 0 auto;
  padding: 18px 16px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-x: hidden;
}

/* TOPBJÆLKE: Moderne nordisk bibliotekshoved */
.topbjaelke {
  background: #FFFFFF;
  border: 2px solid var(--bib_eg_kant);
  border-radius: 22px;
  padding: 0 18px 14px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(30, 25, 20, 0.04);
  overflow: hidden;
}

/* Arkitektonisk bogryg-frise øverst i topbjælken */
.bib_bogryg_frise {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.8fr 2.2fr 1.6fr 1fr 1.8fr 1.4fr;
  gap: 4px;
  margin: 0 -18px 2px;
  padding: 0;
  height: 7px;
  background: #EAE2D3;
}

.frise_led {
  display: block;
  height: 100%;
}

.frise_fjord { background: var(--bib_fjord); }
.frise_eg { background: var(--bib_eg); }
.frise_skov { background: var(--bib_skov); }
.frise_okker { background: var(--bib_okker); }
.frise_terrakotta { background: var(--bib_terrakotta); }

.topbjaelke_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--farve_kant_lys);
}

.logo_gruppe {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

.logo_emblem {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2.5px solid var(--bib_eg);
  background: var(--bib_okker_lys);
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo_billede {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.logo_tekster h1 {
  font-family: var(--skrifttype_overskrift);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.4px;
}

.logo_del_1 {
  color: var(--farve_tekst_hoved);
}

.logo_del_2 {
  color: var(--bib_terrakotta);
}

.logo_tekster p {
  font-size: 11px;
  font-weight: 800;
  color: var(--farve_tekst_daempet);
  letter-spacing: 0.8px;
  margin-top: 2px;
}

/* Grupperet to-delt biblioteksvinge-navigation */
.topbjaelke_grupper {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  flex-wrap: nowrap;
  overflow-x: hidden;
}

@media (max-width: 1120px) {
  .topbjaelke_grupper {
    flex-wrap: wrap;
  }
  .nav_klynge_laering,
  .nav_klynge_aktivitet {
    flex: 1 1 100%;
  }
}

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

.nav_klynge {
  border-radius: 14px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.nav_klynge_laering {
  background: var(--bib_fjord_lys);
  border: 1.5px solid var(--bib_fjord_kant);
  flex: 0 1 auto;
}

.nav_klynge_aktivitet {
  background: #FBF5EA;
  border: 1.5px solid var(--bib_eg_kant);
  flex: 1 1 auto;
}

.nav_klynge_titel {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  color: var(--farve_tekst_daempet);
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav_klynge_laering .nav_klynge_titel {
  color: var(--bib_fjord_mork);
}

.nav_klynge_aktivitet .nav_klynge_titel {
  color: #7D4E24;
}

.nav_klynge_laering .nav_klynge_titel::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bib_fjord);
}

.nav_klynge_aktivitet .nav_klynge_titel::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bib_terrakotta);
}

.nav_klynge_knapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.nav_knapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.nav_knap {
  background: #FFFFFF;
  color: var(--farve_tekst_hoved);
  border: 1.5px solid #D9CBB5;
  border-radius: var(--radius_pill);
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.nav_klynge_laering .nav_knap {
  border-color: #C3D5E2;
}

.nav_klynge_laering .nav_knap:hover {
  background: #FFFFFF;
  border-color: var(--bib_fjord);
  color: var(--bib_fjord_mork);
}

.nav_klynge_laering .nav_knap.aktiv {
  background: var(--bib_fjord);
  color: #FFFFFF;
  border-color: var(--bib_fjord);
}

.nav_klynge_aktivitet .nav_knap:hover {
  background: #FFFDF8;
  border-color: var(--bib_terrakotta);
  color: var(--bib_terrakotta_mork);
}

.nav_klynge_aktivitet .nav_knap.aktiv {
  background: var(--bib_terrakotta);
  color: #FFFFFF;
  border-color: var(--bib_terrakotta);
}

.nav_knap.aktiv {
  background: var(--bib_fjord);
  color: #FFFFFF;
  border-color: var(--bib_fjord);
}

/* Modul visninger */
.modul_visning {
  display: none;
  animation: visning_fade 0.2s ease-out forwards;
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.leksikon_layout > *,
.skaber_layout > *,
.tjekliste_fokus_grid > *,
.kamp_scene > *,
.labyrint_indstillinger_duo > * {
  min-width: 0;
}

.modul_visning.aktiv {
  display: block;
}

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

/* ==========================================================================
   FORSIDE: MODERNE NORDISK BIBLIOTEKSARKITEKTUR
   ========================================================================== */

/* 1. ATRIUM: Den runde læseniche i eg/okker + Egetræs-bogreolen */
.bib_atrium_grid {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 22px;
  margin-bottom: 34px;
  align-items: stretch;
}

/* Venstre atrium-kort: Genreautomaten (figur + knap) */
.bib_laeseniche_kort.bib_automat_showcase {
  background: linear-gradient(135deg, #FCF6E8 0%, #F4E6C9 100%);
  border: 2px solid #D5BA8C;
  border-top: 6px solid var(--bib_okker);
  border-radius: 24px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(30, 25, 20, 0.04);
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.bib_laeseniche_kort.bib_automat_showcase:hover {
  border-color: var(--bib_okker_mork);
  transform: translateY(-2px);
}

.forside_automat_opstilling {
  position: relative;
  width: calc(100% - 44px);
  max-width: 390px;
  margin-right: 26px;
  display: flex;
  justify-content: center;
}

.forside_automat_kabinet {
  background: linear-gradient(180deg, #2A3644 0%, #1E2732 40%, #141B24 100%);
  border: 3.5px solid var(--bib_okker);
  border-radius: 22px;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-shadow: 0 0 0 4px #10161D, 0 10px 24px rgba(16, 22, 29, 0.22);
  position: relative;
  z-index: 2;
}

.forside_krone.automat_krone {
  padding: 9px 14px;
  border-radius: 13px;
}

.forside_krone .krone_titel {
  font-size: 17px;
  letter-spacing: 1.6px;
}

.forside_montre.automat_montre_ramme {
  padding: 12px 14px;
  border-radius: 13px;
}

.forside_montre .tromle_kammer {
  height: 64px;
}

.forside_montre .tromle_cylinder {
  font-size: 15px;
}

.forside_montre .tromle_adskiller {
  height: 46px;
}

/* Mekanisk håndtag på højre side af forside-automaten */
.forside_haandtag_omraade {
  position: absolute;
  left: calc(100% + 2px);
  top: 24px;
  width: 42px;
  height: 155px;
  z-index: 3;
}

.forside_haandtag_omraade .haandtag_led {
  width: 28px;
  height: 44px;
  bottom: 12px;
  left: -4px;
}

.forside_haandtag_omraade .haandtag_skrue {
  width: 18px;
  height: 18px;
  bottom: 25px;
  left: 2px;
}

.forside_haandtag_omraade .haandtag_arm {
  bottom: 34px;
  left: 4px;
  width: 14px;
  height: 108px;
}

.forside_haandtag_omraade .haandtag_stang {
  width: 9px;
  height: 112px;
}

.forside_haandtag_omraade .haandtag_kugle {
  width: 34px;
  height: 34px;
  top: -14px;
}

.bib_laeseniche_kort.bib_automat_showcase:hover .forside_haandtag_omraade .haandtag_arm {
  transform: rotate(18deg);
}

.bib_rum_etiket {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--radius_pill);
  margin-bottom: 10px;
}

.etiket_okker {
  background: #FFFFFF;
  color: var(--bib_okker_mork);
  border: 1.5px solid #E2C68D;
}

.etiket_eg {
  background: #FFFFFF;
  color: #6B4D26;
  border: 1.5px solid #D4BC96;
}

.bib_handling_knap {
  border-radius: var(--radius_pill);
  padding: 12px 26px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}

.knap_terrakotta {
  background: var(--bib_terrakotta);
  color: #FFFFFF;
  border: 2px solid var(--bib_terrakotta);
}

.knap_terrakotta:hover {
  background: var(--bib_terrakotta_mork);
  border-color: var(--bib_terrakotta_mork);
  transform: translateY(-1px);
}

/* Højre atrium-kort: Nordisk bogreol i egetræ med de 7 genrer */
.bib_bogreol_kort {
  background: #F4ECE0;
  border: 2px solid #D2BA95;
  border-top: 6px solid #C49A60;
  border-radius: 24px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 6px 20px rgba(30, 25, 20, 0.04);
}

.bogreol_top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid #DFCEB4;
}

.bogreol_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 21px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  line-height: 1.15;
}

.bogreol_undertitel {
  font-size: 12px;
  font-weight: 600;
  color: var(--farve_tekst_daempet);
}

.bogreol_hylde_gitter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.reol_bog_kort {
  background: #FFFFFF;
  border: 1.5px solid #DCC9AC;
  border-bottom: 3.5px solid #C6AC86;
  border-radius: 12px;
  padding: 7px 10px 7px 0;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  box-shadow: none;
  text-align: left;
  font-family: inherit;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
  overflow: hidden;
}

.reol_bog_kort.bog_bred {
  grid-column: 1 / -1;
}

.reol_bog_kort:hover {
  background: #FFFDF8;
  border-color: var(--bib_fjord);
  transform: translateY(-2px);
}

.bog_ryg_stribe {
  width: 7px;
  align-self: stretch;
  border-radius: 0 4px 4px 0;
  flex-shrink: 0;
}

.bog_gys .bog_ryg_stribe { background: #3B2846; }
.bog_fantasy .bog_ryg_stribe { background: #6D3B8E; }
.bog_krimi .bog_ryg_stribe { background: var(--bib_terrakotta); }
.bog_scifi .bog_ryg_stribe { background: var(--bib_fjord); }
.bog_eventyr .bog_ryg_stribe { background: var(--bib_okker); }
.bog_historie .bog_ryg_stribe { background: #8E5B2D; }
.bog_realisme .bog_ryg_stribe { background: var(--bib_skov); }

.bog_mini_portraet {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  border: 1.5px solid #E5D6BE;
  flex-shrink: 0;
}

.bog_info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bog_navn {
  font-family: var(--skrifttype_overskrift);
  font-size: 14px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  line-height: 1.15;
}

.bog_stikord {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--farve_tekst_daempet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2. AFDELINGS-SEKTIONER (Læsesalen & Oplevelsesrummet) */
.bib_afdeling_sektion {
  margin-bottom: 34px;
}

.bib_afdeling_header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid #DFD5C5;
}

.afdeling_titel_gruppe {
  display: flex;
  align-items: center;
  gap: 12px;
}

.afdeling_farve_brik {
  width: 10px;
  height: 38px;
  border-radius: 6px;
  flex-shrink: 0;
}

.brik_fjord { background: var(--bib_fjord); }
.brik_terrakotta { background: var(--bib_terrakotta); }

.afdeling_overtitel {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--farve_tekst_daempet);
  margin-bottom: 2px;
}

.afdeling_hovedtitel {
  font-family: var(--skrifttype_overskrift);
  font-size: 27px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  letter-spacing: -0.4px;
  line-height: 1.15;
}

.afdeling_beskrivelse {
  font-size: 14px;
  font-weight: 600;
  color: var(--farve_tekst_daempet);
}

/* 3-kolonne arkitektonisk niche-gitter */
.bib_niche_trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Arkitektoniske biblioteksrum-kort (Fjord, Skov, Okker, Terrakotta) */
.bib_rum_kort {
  background: #FFFFFF;
  border: 2px solid #DED1BC;
  border-radius: 22px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease;
  box-shadow: 0 4px 14px rgba(30, 25, 20, 0.03);
}

.bib_rum_kort:hover {
  transform: translateY(-3px);
}

/* Farvezoner i toppen af hvert rum-kort */
.rum_kort_bue_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -20px -22px 16px;
  padding: 16px 22px;
  border-bottom: 1.5px solid #EAE0D0;
}

.rum_kategori_pill {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.85px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius_pill);
  display: inline-block;
}

/* Rund træ- eller farve-niche til karakterportræt */
.rum_rund_niche {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 3px solid var(--bib_eg);
  overflow: hidden;
}

.rum_niche_img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  background: #FFFFFF;
}

/* Variant 1: Nordisk Fjordblå (Foto 4) */
.bib_rum_kort.rum_fjord {
  border-color: #BFD2DF;
  border-top: 6px solid var(--bib_fjord);
}
.bib_rum_kort.rum_fjord .rum_kort_bue_top {
  background: linear-gradient(180deg, #EBF2F7 0%, #F6F9FB 100%);
  border-bottom-color: #D2E1EB;
}
.bib_rum_kort.rum_fjord .rum_kategori_pill {
  background: #FFFFFF;
  color: var(--bib_fjord_mork);
  border: 1px solid #B8CEDE;
}
.bib_rum_kort.rum_fjord .rum_rund_niche {
  border-color: var(--bib_fjord);
}
.bib_rum_kort.rum_fjord:hover {
  border-color: var(--bib_fjord);
}
.bib_rum_kort.rum_fjord .rum_handling_link {
  color: var(--bib_fjord);
}

/* Variant 2: Botanisk Skovgrøn (Foto 2 & 1) */
.bib_rum_kort.rum_skov {
  border-color: #C2D4C0;
  border-top: 6px solid var(--bib_skov);
}
.bib_rum_kort.rum_skov .rum_kort_bue_top {
  background: linear-gradient(180deg, #EBF3EA 0%, #F6FAF5 100%);
  border-bottom-color: #D3E2D1;
}
.bib_rum_kort.rum_skov .rum_kategori_pill {
  background: #FFFFFF;
  color: var(--bib_skov_mork);
  border: 1px solid #B7CEB5;
}
.bib_rum_kort.rum_skov .rum_rund_niche {
  border-color: var(--bib_skov);
}
.bib_rum_kort.rum_skov:hover {
  border-color: var(--bib_skov);
}
.bib_rum_kort.rum_skov .rum_handling_link {
  color: var(--bib_skov);
}

/* Variant 3: Varm Okkergul & Eg (Foto 2) */
.bib_rum_kort.rum_okker {
  border-color: #E2C997;
  border-top: 6px solid var(--bib_okker);
}
.bib_rum_kort.rum_okker .rum_kort_bue_top {
  background: linear-gradient(180deg, #FBF2DD 0%, #FDF9EE 100%);
  border-bottom-color: #EAD8B1;
}
.bib_rum_kort.rum_okker .rum_kategori_pill {
  background: #FFFFFF;
  color: var(--bib_okker_mork);
  border: 1px solid #DFC48B;
}
.bib_rum_kort.rum_okker .rum_rund_niche {
  border-color: var(--bib_okker);
}
.bib_rum_kort.rum_okker:hover {
  border-color: var(--bib_okker);
}
.bib_rum_kort.rum_okker .rum_handling_link {
  color: var(--bib_okker_mork);
}

/* Variant 4: Brændt Terrakotta (Foto 3 & 4) */
.bib_rum_kort.rum_terrakotta {
  border-color: #E6C1B8;
  border-top: 6px solid var(--bib_terrakotta);
}
.bib_rum_kort.rum_terrakotta .rum_kort_bue_top {
  background: linear-gradient(180deg, #FCEEEB 0%, #FDF7F5 100%);
  border-bottom-color: #EED2CB;
}
.bib_rum_kort.rum_terrakotta .rum_kategori_pill {
  background: #FFFFFF;
  color: var(--bib_terrakotta_mork);
  border: 1px solid #E4B9AF;
}
.bib_rum_kort.rum_terrakotta .rum_rund_niche {
  border-color: var(--bib_terrakotta);
}
.bib_rum_kort.rum_terrakotta:hover {
  border-color: var(--bib_terrakotta);
}
.bib_rum_kort.rum_terrakotta .rum_handling_link {
  color: var(--bib_terrakotta);
}

.rum_kort_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 21px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  margin-bottom: 8px;
  line-height: 1.2;
}

.rum_kort_bue_top .rum_kort_titel {
  margin: 0;
}

.rum_kort_tekst {
  font-size: 13.8px;
  color: var(--farve_tekst_daempet);
  line-height: 1.5;
  margin-bottom: 14px;
}

.rum_kort_punkter {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  margin-bottom: 0;
}

.rum_kort_punkter li {
  font-size: 12.8px;
  font-weight: 600;
  color: var(--farve_tekst_hoved);
  position: relative;
  padding-left: 14px;
  line-height: 1.38;
}

.rum_kort_punkter li::before {
  content: "•";
  color: var(--bib_eg_mork);
  font-size: 15px;
  position: absolute;
  left: 0;
  top: -1px;
}

.rum_kort_bund {
  border-top: 1px solid var(--farve_kant_lys);
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.rum_handling_link {
  font-size: 13.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Nederste række i Afdeling 2: De 2 brede Atelier- og Udstillingsrum */
.bib_atelier_duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.bib_atelier_kort {
  background: #FFFFFF;
  border: 2px solid #D8C5A8;
  border-radius: 22px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease;
  box-shadow: 0 4px 14px rgba(30, 25, 20, 0.03);
}

.bib_atelier_kort:hover {
  transform: translateY(-3px);
}

.atelier_fjord_eg {
  background: linear-gradient(135deg, #FFFFFF 0%, #F2F7FA 100%);
  border-left: 7px solid var(--bib_fjord);
}

.atelier_fjord_eg:hover {
  border-color: var(--bib_fjord);
}

.atelier_fjord_eg .rum_kategori_pill {
  background: var(--bib_fjord_lys);
  color: var(--bib_fjord_mork);
  border: 1px solid var(--bib_fjord_kant);
  margin-bottom: 10px;
}

.atelier_fjord_eg .rum_handling_link {
  color: var(--bib_fjord);
}

.atelier_terrakotta_eg {
  background: linear-gradient(135deg, #FFFFFF 0%, #FCF4F1 100%);
  border-left: 7px solid var(--bib_terrakotta);
}

.atelier_terrakotta_eg:hover {
  border-color: var(--bib_terrakotta);
}

.atelier_terrakotta_eg .rum_kategori_pill {
  background: var(--bib_terrakotta_lys);
  color: var(--bib_terrakotta_mork);
  border: 1px solid var(--bib_terrakotta_kant);
  margin-bottom: 10px;
}

.atelier_terrakotta_eg .rum_handling_link {
  color: var(--bib_terrakotta);
}

.atelier_venstre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.atelier_chips_raekke {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0;
}

.atelier_mini_chip {
  font-size: 11.5px;
  font-weight: 700;
  background: #F6F1E7;
  color: var(--farve_tekst_hoved);
  border: 1px solid #DFCEB4;
  border-radius: var(--radius_pill);
  padding: 3px 10px;
}

/* Bue-niche i egetræ til højre i atelierkortene */
.atelier_hoejre_niche {
  display: flex;
  align-items: center;
  justify-content: center;
}

.atelier_bue_ramme {
  width: 104px;
  height: 124px;
  border-radius: 52px 52px 16px 16px;
  background: var(--bib_eg_lys);
  border: 3px solid var(--bib_eg);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.atelier_niche_img {
  width: 100%;
  height: 100%;
  border-radius: 46px 46px 10px 10px;
  object-fit: cover;
}

/* Fælles knap- og overskriftsklasser brugt på tværs af moduler */
.varm_handling_knap {
  background: var(--bib_fjord);
  color: white;
  border: none;
  border-radius: var(--radius_pill);
  padding: 12px 22px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease;
}

.varm_handling_knap:hover {
  background: var(--bib_fjord_mork);
  transform: translateY(-1px);
}

.varm_handling_knap.lille {
  padding: 9px 16px;
  font-size: 13.5px;
}

.sektion_intro_linje {
  margin-bottom: 20px;
}

.sektion_hovedtitel {
  font-family: var(--skrifttype_overskrift);
  font-size: 32px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.sektion_undertitel {
  font-size: 15px;
  color: var(--farve_tekst_daempet);
  font-weight: 500;
}

/* Responsiv tilpasning af bibliotekets forside */
@media (max-width: 1024px) {
  .bib_atrium_grid {
    grid-template-columns: 1fr;
  }
  .bib_niche_trio {
    grid-template-columns: repeat(2, 1fr);
  }
  .bib_atelier_duo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .bib_laeseniche_kort {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .laeseniche_cirkel_portal {
    margin: 0 auto;
  }
  .bogreol_hylde_gitter {
    grid-template-columns: 1fr;
  }
  .bib_niche_trio {
    grid-template-columns: 1fr;
  }
  .bib_atelier_kort {
    grid-template-columns: 1fr;
  }
}


/* GENRE VIDEN / LEKSIKON MODUL: MODERNE NORDISK LÆSESAL */
.leksikon_layout {
  display: grid;
  grid-template-columns: 276px 1fr;
  gap: 22px;
  min-height: 580px;
  align-items: start;
}

/* Venstre kolonne: Egetræs-bogreol menu */
.leksikon_menu {
  background: #F4ECE0;
  border: 2px solid #D2BA95;
  border-top: 6px solid #C49A60;
  border-radius: 22px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(30, 25, 20, 0.04);
}

.leksikon_menu_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 17px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  padding: 2px 4px 10px;
  border-bottom: 2px solid #DFCEB4;
  margin-bottom: 2px;
  line-height: 1.25;
}

.genre_vaelger_knap {
  background: #FFFFFF;
  border: 1.5px solid #DCC9AC;
  border-bottom: 3.5px solid #C6AC86;
  border-radius: 12px;
  padding: 8px 12px 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--farve_tekst_hoved);
  text-align: left;
  box-shadow: none;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
  overflow: hidden;
}

.menu_bog_ryg {
  width: 7px;
  align-self: stretch;
  border-radius: 0 4px 4px 0;
  flex-shrink: 0;
  margin: -8px 0;
}

.menu_bog_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
}

.genre_vaelger_knap:hover {
  background: #FFFDF8;
  border-color: var(--bog_accent, var(--bib_fjord));
  transform: translateX(3px);
  box-shadow: none;
}

.genre_vaelger_knap.aktiv {
  background: var(--bog_lys, #FBF3DF);
  border-color: var(--bog_accent, var(--bib_okker));
  border-bottom-color: var(--bog_accent, var(--bib_okker));
  color: var(--farve_tekst_hoved);
  transform: translateX(4px);
  box-shadow: none;
}

.genre_knap_ikon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid #E5D6BE;
  object-fit: cover;
  background: var(--farve_lys_graa);
  flex-shrink: 0;
}

/* Højre kolonne: Læsesalens hovedkort */
.leksikon_indhold {
  background: #FFFFFF;
  border: 2px solid #DED1BC;
  border-top: 6px solid var(--leksikon_accent, var(--bib_fjord));
  border-radius: 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(30, 25, 20, 0.04);
}

/* Arkitektonisk farvezonet top-alkove i Læsesalen */
.leksikon_bue_header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 26px 30px;
}

.leksikon_bue_tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.leksikon_hovedtitel {
  font-family: var(--skrifttype_overskrift);
  font-size: 34px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  margin: 10px 0 4px;
  letter-spacing: -0.5px;
  line-height: 1.12;
}

.leksikon_undertitel {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.35;
}

.leksikon_intro_tekst {
  font-size: 15px;
  color: #4A4035;
  line-height: 1.55;
  max-width: 720px;
}

/* Rund træ/farve-niche til portræt (Indholdsgenrer) */
.leksikon_rund_niche {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 4px solid var(--bib_fjord);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.leksikon_niche_portraet {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Bue-emblem til Arbejdsformer */
.leksikon_bue_emblem {
  width: 96px;
  height: 108px;
  border-radius: 48px 48px 16px 16px;
  border: 3px solid var(--bib_skov);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  flex-shrink: 0;
  text-align: center;
}

.emblem_tal {
  font-family: var(--skrifttype_overskrift);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
}

.emblem_etiket {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--farve_tekst_daempet);
}

/* Indholdskrop i Læsesalen */
.leksikon_rum_krop {
  padding: 26px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.leksikon_sektion_titel_linje {
  display: flex;
  align-items: center;
  gap: 12px;
}

.leksikon_sektion_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 21px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  line-height: 1.2;
}

.leksikon_sektion_undertitel {
  font-size: 13.5px;
  color: var(--farve_tekst_daempet);
  font-weight: 600;
}

/* 2x2 gitter med de 4 nordiske biblioteksfarver til Indholdsgenrer */
.genre_gitter_sektioner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.genre_faktaboks {
  background: #FFFFFF;
  border: 1.5px solid #DED1BC;
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faktaboks_top_stribe {
  padding-bottom: 8px;
  border-bottom: 1px solid #EAE0D0;
}

.faktaboks_etiket {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.85px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.genre_faktaboks.boks_fjord {
  border-top: 5px solid var(--bib_fjord);
  background: linear-gradient(180deg, #F4F8FB 0%, #FFFFFF 45%);
}
.genre_faktaboks.boks_fjord .faktaboks_etiket { color: var(--bib_fjord); }

.genre_faktaboks.boks_okker {
  border-top: 5px solid var(--bib_okker);
  background: linear-gradient(180deg, #FDF8EC 0%, #FFFFFF 45%);
}
.genre_faktaboks.boks_okker .faktaboks_etiket { color: var(--bib_okker_mork); }

.genre_faktaboks.boks_skov {
  border-top: 5px solid var(--bib_skov);
  background: linear-gradient(180deg, #F4F9F3 0%, #FFFFFF 45%);
}
.genre_faktaboks.boks_skov .faktaboks_etiket { color: var(--bib_skov); }

.genre_faktaboks.boks_terrakotta {
  border-top: 5px solid var(--bib_terrakotta);
  background: linear-gradient(180deg, #FDF5F3 0%, #FFFFFF 45%);
}
.genre_faktaboks.boks_terrakotta .faktaboks_etiket { color: var(--bib_terrakotta); }

.genre_faktaboks h4 {
  font-family: var(--skrifttype_overskrift);
  font-size: 17px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  margin: 0;
}

.genre_faktaboks ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.genre_faktaboks li {
  font-size: 13.8px;
  font-weight: 500;
  color: var(--farve_tekst_hoved);
  position: relative;
  padding-left: 15px;
  line-height: 1.45;
}

.genre_faktaboks li::before {
  content: "•";
  color: var(--bib_eg_mork);
  font-size: 15px;
  position: absolute;
  left: 0;
  top: -1px;
}

/* Ordbank-hylde i egetræ nederst på Indholdsgenrer */
.leksikon_ordhylde_boks {
  background: #F6EFE2;
  border: 2px solid #D4BC94;
  border-radius: 18px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ordhylde_header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ordhylde_header h4 {
  font-family: var(--skrifttype_overskrift);
  font-size: 17px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  margin: 0;
}

.genre_ord_liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.genre_ord_tag {
  background: #FFFFFF;
  border: 1.5px solid #D8C4A3;
  border-bottom: 3px solid #C6AC82;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--farve_tekst_hoved);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* GENRE BATTLE MODUL */
.battle_arena {
  background: var(--farve_kort_bg);
  border: 2px solid var(--farve_kant_varm);
  border-radius: var(--radius_rund);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.arena_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid var(--farve_kant);
  padding-bottom: 14px;
}

.arena_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 22px;
  font-weight: 800;
  color: var(--farve_sort);
}

.battle_tilstand_omraade {
  display: flex;
  align-items: center;
  gap: 8px;
}

.battle_kontrol_label {
  font-size: 13px;
  font-weight: 700;
  color: var(--farve_graa);
}

.battle_tilstand_knapper {
  display: flex;
  background: var(--farve_lys_graa);
  border: 1px solid var(--farve_kant);
  border-radius: var(--radius_pill);
  padding: 3px;
  gap: 4px;
}

.battle_tilstand_knap {
  background: transparent;
  border: none;
  border-radius: var(--radius_pill);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  color: var(--farve_tekst_hoved);
  cursor: pointer;
  box-shadow: none;
  transition: all 0.15s ease;
}

.battle_tilstand_knap.aktiv {
  background: var(--farve_sennep);
  color: #FFFFFF;
}

.battle_tilstand_knap:hover:not(.aktiv) {
  background: rgba(0, 0, 0, 0.05);
}

.battle_vaelger_linje {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.battle_select {
  background: var(--farve_lys_graa);
  border: 1px solid var(--farve_kant);
  border-radius: var(--radius_knap);
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

/* Quest information og fortællingsbanner */
.quest_info_banner {
  background: var(--farve_varmhvid);
  border: 2px solid var(--farve_kant_varm);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quest_top_linje {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.quest_tagge_raekke {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quest_badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: white;
  background: var(--farve_sennep);
  padding: 3px 10px;
  border-radius: var(--radius_pill);
}

.quest_akt_tagg {
  font-size: 11px;
  font-weight: 700;
  color: #78350F;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  padding: 3px 10px;
  border-radius: var(--radius_pill);
}

.quest_hovedtitel {
  font-family: var(--skrifttype_overskrift);
  font-size: 21px;
  font-weight: 800;
  color: var(--farve_sort);
  margin: 0;
}

.quest_fase_boks {
  background: #F8F3EA;
  border-left: 4px solid var(--farve_sennep);
  border-radius: 0 10px 10px 0;
  padding: 10px 14px;
}

.quest_fase_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  margin-bottom: 4px;
}

.quest_fase_beskrivelse {
  font-size: 13.5px;
  color: var(--farve_graa);
  line-height: 1.45;
  margin: 0;
}

.kamp_scene {
  background: linear-gradient(180deg, #FFFDF8 0%, #F5EDE0 100%);
  border: 2px solid var(--farve_kant_varm);
  border-radius: 14px;
  padding: 56px 24px 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: 280px;
  position: relative;
  overflow: visible;
  margin-top: 14px;
}

.kæmper_boks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  position: relative;
}

.kæmper_rolle_label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--farve_mork_sennep);
  background: #F3EBDD;
  padding: 2px 8px;
  border-radius: var(--radius_pill);
}

.kæmper_billede {
  width: 105px;
  height: 105px;
  border-radius: 16px;
  border: 2px solid var(--farve_kant);
  object-fit: cover;
  background: white;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.kæmper_boks.aktiv_tur .kæmper_billede {
  border-color: var(--farve_sennep);
  outline: 3px solid rgba(212, 136, 26, 0.35);
  transform: scale(1.05);
}

.kæmper_boks.aktiv_tur .kæmper_rolle_label {
  background: var(--farve_sennep);
  color: #FFFFFF;
}

.kæmper_boks.ramt .kæmper_billede {
  animation: ryst_figur 0.3s ease;
}

@keyframes ryst_figur {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.kæmper_navn {
  font-family: var(--skrifttype_overskrift);
  font-size: 16px;
  font-weight: 700;
  color: var(--farve_sort);
}

.kæmper_undertitel {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--farve_sennep);
  margin-top: -4px;
}

.helt_status_boks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.status_bar_overskrift {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--farve_graa);
}

.point_linje {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.point_label {
  font-weight: 700;
  color: var(--farve_graa);
}

.point_tal {
  font-family: var(--skrifttype_overskrift);
  font-weight: 800;
  color: var(--farve_tekst_hoved);
}

/* Midtersektion i 1-mod-1 duellen */
.kæmper_midte_vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
}

.duel_vs_cirkel {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--farve_sort);
  color: #FDE047;
  font-family: var(--skrifttype_overskrift);
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--farve_sennep);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  letter-spacing: 1px;
}

.arena_tur_badge {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  background: var(--farve_varmhvid);
  border: 1px solid var(--farve_kant_varm);
  padding: 4px 14px;
  border-radius: var(--radius_pill);
  text-align: center;
  white-space: nowrap;
}

.quest_anbefaling_tagg {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
  padding: 3px 10px;
  border-radius: var(--radius_pill);
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
  vertical-align: middle;
}

.genre_fordel_badge {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #86EFAC;
  padding: 2px 8px;
  border-radius: var(--radius_pill);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  display: inline-block;
  margin-top: 3px;
  margin-bottom: 2px;
}

.kort_kategori_badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: var(--radius_pill);
  display: inline-block;
}

.badge_op {
  background: #E0F2FE;
  color: #0369A1;
  border: 1px solid #BAE6FD;
}

.badge_ned {
  background: #FEF3C7;
  color: #B45309;
  border: 1px solid #FDE68A;
}

.badge_situation {
  background: #F3E8FF;
  color: #6B21A8;
  border: 1px solid #E9D5FF;
}

.kamp_kort_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.energi_ramme {
  width: 120px;
  height: 11px;
  background: #e2e8f0;
  border-radius: var(--radius_pill);
  overflow: hidden;
}

.energi_bar {
  height: 100%;
  background: var(--farve_groen);
  width: 100%;
  transition: width 0.3s ease, background 0.3s ease;
}

/* Talebobler */
.taleboble_arena {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--farve_varmhvid);
  border: 1.5px solid var(--farve_sort);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  width: max-content;
  max-width: 250px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 20;
  pointer-events: none;
}

.taleboble_arena::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: var(--farve_varmhvid) transparent transparent transparent;
  display: block;
  width: 0;
}

.taleboble_arena::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px 7px 0;
  border-style: solid;
  border-color: var(--farve_sort) transparent transparent transparent;
  display: block;
  width: 0;
}

.taleboble_arena.synlig {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.kamp_runde_tæller {
  font-size: 12px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  background: var(--farve_varmhvid);
  border: 1px solid var(--farve_kant_varm);
  border-radius: var(--radius_pill);
  padding: 4px 12px;
}

/* Korthånd */
.battle_kort_omraade {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.battle_kort_tekst {
  font-size: 14px;
  font-weight: 700;
  color: var(--farve_sort);
}

.spiller_kort_haand {
  width: 100%;
  display: block;
}

.battle_tre_kategorier_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
}

@media (max-width: 900px) {
  .battle_tre_kategorier_grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.kort_kolonne {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: white;
  border: 1px solid var(--farve_kant);
  border-radius: 14px;
  padding: 12px;
  box-shadow: none;
}

.kolonne_op {
  border-top: 3px solid #0284c7;
}

.kolonne_ned {
  border-top: 3px solid #d97706;
}

.kolonne_situation {
  border-top: 3px solid #9333ea;
}

.kort_kolonne_header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--farve_kant);
}

.kort_kolonne_undertitel {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--farve_graa);
}

.kort_kolonne_liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kamp_kort {
  background: var(--farve_varmhvid);
  border: 1px solid var(--farve_kant);
  border-radius: 10px;
  padding: 11px 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  box-shadow: none;
  transition: all 0.15s ease;
  user-select: none;
}

.kamp_kort:hover {
  border-color: var(--farve_sennep);
  background: var(--farve_lysegul);
  transform: translateY(-2px);
}

.kamp_kort_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.kamp_kort_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--farve_sort);
  line-height: 1.25;
}

.kamp_kort_styrke {
  background: var(--farve_sennep);
  color: white;
  border-radius: var(--radius_pill);
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.kamp_kort_tekst {
  font-size: 12px;
  color: #334155;
  line-height: 1.35;
  font-style: italic;
}

.kamp_kort_effekt {
  font-size: 11px;
  font-weight: 600;
  color: var(--farve_morkgroen);
  line-height: 1.3;
}

.kamp_log {
  background: var(--farve_bleggroen);
  border: 1px solid var(--farve_lysegroen);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--farve_morkgroen);
  min-height: 42px;
  display: flex;
  align-items: center;
}

/* Sejrsrapport efter fuldført quest */
.battle_sejr_kort {
  background: var(--farve_kort_bg);
  border: 2px solid var(--farve_sennep);
  border-radius: 16px;
  padding: 24px 28px;
  width: 100%;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  box-shadow: none;
}

.sejr_badge {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: white;
  background: var(--farve_sennep);
  padding: 4px 14px;
  border-radius: var(--radius_pill);
}

.sejr_overskrift {
  font-family: var(--skrifttype_overskrift);
  font-size: 21px;
  font-weight: 900;
  color: var(--farve_sort);
  margin: 0;
}

.sejr_point_stilling {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 700;
  flex-wrap: wrap;
  justify-content: center;
}

.point_boks {
  padding: 6px 14px;
  border-radius: var(--radius_pill);
  background: var(--farve_varmhvid);
  border: 1px solid var(--farve_kant_varm);
  color: var(--farve_tekst_hoved);
}

.point_boks.vinder {
  background: #DCFCE7;
  border-color: #86EFAC;
  color: #166534;
  font-weight: 800;
}

.point_deler {
  font-size: 12px;
  color: var(--farve_graa);
}

.sejr_epilog_boks {
  background: #FFFDF9;
  border: 1px solid var(--farve_kant_varm);
  border-radius: 12px;
  padding: 16px 20px;
  text-align: left;
  width: 100%;
  max-width: 650px;
}

.epilog_label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--farve_mork_sennep);
  margin-bottom: 6px;
}

.epilog_tekst {
  font-size: 14px;
  line-height: 1.55;
  color: var(--farve_tekst_hoved);
  margin: 0;
}

.sejr_handlinger {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

.portal_knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  background: var(--farve_sennep);
  color: white;
  border: 1px solid var(--farve_sennep);
  border-radius: var(--radius_pill);
  font-family: var(--skrifttype_brodtekst);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: all 0.15s ease;
  user-select: none;
}

.portal_knap:hover {
  background: var(--farve_mork_sennep);
  border-color: var(--farve_mork_sennep);
  transform: translateY(-1px);
}

.portal_knap.sekundaer {
  background: var(--farve_varmhvid);
  color: var(--farve_tekst_hoved);
  border: 1px solid var(--farve_kant_varm);
}

.portal_knap.sekundaer:hover {
  background: var(--farve_lysegul);
  border-color: var(--farve_sennep);
  color: var(--farve_sort);
}

/* GENRE AUTOMATEN MODUL: RETRO ARKADE OG SPORMASKINE */
.automat_sektion {
  background: var(--farve_kort_bg);
  border: 2px solid var(--farve_kant_varm);
  border-radius: var(--radius_rund);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.automat_overskrift_linje {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px solid var(--farve_kant);
  padding-bottom: 16px;
}

.automat_score {
  display: flex;
  gap: 10px;
  align-items: center;
}

.score_status_chip {
  background: var(--farve_varmhvid);
  border: 1px solid var(--farve_kant_varm);
  border-radius: var(--radius_pill);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.score_status_chip.succes {
  background: var(--farve_bleggroen);
  border-color: #86efac;
}

.score_label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--farve_graa);
}

.score_tal {
  font-family: var(--skrifttype_overskrift);
  font-size: 15px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
}

/* Selve maskinen med kabinet og mekanisk håndtag */
.automat_opstilling {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 1181px) {
  .automat_opstilling {
    transform: translateX(-60px);
  }
}

/* Hovedkabinettet: Mørkeblå arkadekrop med orange og mørkeblå kant rundt om det hele */
.automat_kabinet {
  background: linear-gradient(180deg, #2A3644 0%, #1E2732 35%, #141B24 100%);
  border: 4px solid var(--farve_sennep);
  border-radius: 26px;
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 720px;
  box-shadow: 0 0 0 5px #10161D, 0 18px 42px rgba(16, 22, 29, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 2;
}

/* Topplade med pærer og nitter */
.automat_krone {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #11171F;
  border: 2px solid #3D4E61;
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}

.krone_nitte {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF0D0 0%, #D4881A 60%, #78350F 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.krone_skilt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.krone_lys_raekke {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 2px;
}

.automat_indikator_lys {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.4);
  transition: all 0.25s ease;
}

.lys_groen {
  background: #14532D;
  box-shadow: none;
}
.lys_groen.taendt {
  background: #22C55E;
  box-shadow: 0 0 10px #22C55E, 0 0 18px rgba(34, 197, 94, 0.6);
}

.lys_rav {
  background: #78350F;
  box-shadow: none;
}
.lys_rav.taendt {
  background: #F59E0B;
  box-shadow: 0 0 10px #F59E0B, 0 0 18px rgba(245, 158, 11, 0.6);
}

.lys_rod {
  background: #7F1D1D;
  box-shadow: none;
}
.lys_rod.taendt {
  background: #EF4444;
  box-shadow: 0 0 10px #EF4444, 0 0 18px rgba(239, 68, 68, 0.6);
}

.krone_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #FDE047;
  text-shadow: 0 0 12px rgba(253, 224, 71, 0.5);
  text-align: center;
  line-height: 1.1;
}

.krone_undertitel {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #94A3B8;
}

/* Modus panel integreret på maskinen */
.automat_modus_panel {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  background: rgba(17, 23, 31, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 16px;
}

.modus_label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #CBD5E1;
}

.modus_knapper {
  display: flex;
  gap: 8px;
}

.modus_knap {
  background: #1E293B;
  border: 1px solid #475569;
  border-radius: var(--radius_pill);
  padding: 6px 14px;
  color: #E2E8F0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: none;
  transition: all 0.15s ease;
}

.modus_knap:hover {
  background: #334155;
  color: white;
}

.modus_indikator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748B;
  transition: all 0.2s ease;
}

.modus_knap.valgt {
  background: var(--farve_sennep);
  border-color: #F59E0B;
  color: white;
}

.modus_knap.valgt .modus_indikator {
  background: #FFFFFF;
  box-shadow: 0 0 6px white;
}

/* Glasmontre og de 3 mekaniske tromler */
.automat_montre_ramme {
  width: 100%;
  max-width: 580px;
  background: #0B1118;
  border: 3px solid #475569;
  border-radius: 16px;
  padding: 16px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 8px 24px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(255, 255, 255, 0.08);
}

.montre_glas_effekt {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 80%, transparent 100%);
  pointer-events: none;
  z-index: 5;
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
}

.montre_sigtelinje {
  position: absolute;
  top: 50%;
  left: 12px;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 6;
  pointer-events: none;
}

.sigtelinje_pil {
  font-size: 13px;
  color: #F59E0B;
  text-shadow: 0 0 6px #F59E0B;
  user-select: none;
}

.sigtelinje_streg {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.8) 15%, rgba(245, 158, 11, 0.8) 85%, transparent 100%);
}

.mekaniske_tromler {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.tromle_kammer {
  flex: 1;
  height: 84px;
  background: #141A22;
  border: 2px solid #2C3847;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 10px 16px rgba(0, 0, 0, 0.8), inset 0 -10px 16px rgba(0, 0, 0, 0.8);
}

.tromle_cylinder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--skrifttype_overskrift);
  font-size: clamp(12px, 1.8vw, 17px);
  font-weight: 800;
  color: #1A120B;
  letter-spacing: 0.2px;
  text-align: center;
  padding: 0 6px;
  background: linear-gradient(180deg, #A89D8B 0%, #D8CFBE 15%, #FAF7F0 38%, #FFFFFF 50%, #FAF7F0 62%, #D8CFBE 85%, #A89D8B 100%);
  user-select: none;
  transition: transform 0.05s ease;
  word-break: break-word;
}

.tromle_cylinder.snurrer {
  animation: mekanisk_spin 0.12s linear infinite;
}

@keyframes mekanisk_spin {
  0% { transform: translateY(-8px); filter: blur(0.6px); }
  50% { transform: translateY(8px); filter: blur(0.8px); }
  100% { transform: translateY(-8px); filter: blur(0.6px); }
}

.tromle_adskiller {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 60px;
  width: 8px;
  align-items: center;
}

.adskiller_bolt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64748B;
  box-shadow: inset 0 1px 1px white, 0 1px 2px black;
}

/* Kontrolpult med stor udløserknap */
.automat_kontrol_pult {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.moentslot_boks {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #11171F;
  border: 1px solid #334155;
  border-radius: var(--radius_pill);
  padding: 4px 12px;
}

.moentslot_metal {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #D4881A 0%, #78350F 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.moentslot_sprække {
  width: 2px;
  height: 8px;
  background: #0B0E14;
}

.moentslot_tekst {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #CBD5E1;
}

/* Håndtag og pil på højre side af automaten */
.automat_haandtag_omraade {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: absolute;
  left: calc(100% - 3px);
  top: 50px;
  z-index: 10;
  padding-left: 0;
}

.automat_haandtag_modul {
  width: 52px;
  height: 200px;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.haandtag_konsol {
  position: relative;
  width: 100%;
  height: 100%;
}

.haandtag_led {
  width: 32px;
  height: 52px;
  background: linear-gradient(135deg, #1E2732 0%, #2A3644 45%, #3D4E61 100%);
  border: 2px solid #10161D;
  border-left: 4px solid #10161D;
  border-radius: 0 10px 10px 0;
  position: absolute;
  bottom: 16px;
  left: -4px;
  z-index: 2;
  box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.45);
}

.haandtag_led::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #64748B;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

.haandtag_led::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #64748B;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

.haandtag_skrue {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F8FAFC 0%, #CBD5E1 30%, #475569 70%, #1E293B 100%);
  border: 1.5px solid #0F172A;
  position: absolute;
  bottom: 31px;
  left: 2px;
  z-index: 4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.haandtag_skrue::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #334155;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
}

.haandtag_arm {
  position: absolute;
  bottom: 42px;
  left: 5px;
  width: 16px;
  height: 140px;
  transform-origin: center bottom;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
}

.haandtag_arm.trukket {
  transform: rotate(34deg);
  transition: transform 0.14s ease-in;
}

.haandtag_stang {
  width: 10px;
  height: 148px;
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #475569 0%, #94A3B8 22%, #FFFFFF 50%, #94A3B8 78%, #334155 100%);
  border: 1px solid #1E293B;
  border-radius: 5px 5px 0 0;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35);
}

.haandtag_kugle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FED7AA 0%, #F97316 45%, #C2410C 75%, #7C2D12 100%);
  border: 2px solid #7C2D12;
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease;
}

.haandtag_kugle:hover {
  transform: translateX(-50%) scale(1.08);
}

.kugle_glans {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 6px;
  left: 10px;
}

/* Pilknap der peger skråt ned mod håndtaget og ikke overlapper automaten */
.traek_pil_knap {
  position: relative;
  background: var(--farve_sennep);
  color: white;
  border: none;
  padding: 12px 22px 12px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.8px;
  border-radius: 0 14px 14px 0;
  cursor: pointer;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.18s ease;
  white-space: nowrap;
  transform-origin: 0% 50%;
  transform: rotate(-24deg);
  margin-top: 26px;
}

.traek_pil_knap::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-right: 16px solid var(--farve_sennep);
  transition: border-right-color 0.18s ease;
}

.traek_pil_knap:hover {
  background: #B46E11;
  transform: rotate(-24deg) translateX(-5px);
}

.traek_pil_knap:hover::before {
  border-right-color: #B46E11;
}

.traek_pil_knap:active {
  background: #965B0D;
  transform: rotate(-24deg) translateX(-9px);
}

.traek_pil_knap:active::before {
  border-right-color: #965B0D;
}

.pil_tekst {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Fysisk udkastsprække for sporsedlen */
.automat_udkast_sektion {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.udkast_metal_ramme {
  width: 90%;
  max-width: 540px;
  background: #0D131A;
  border: 2px solid #334155;
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.8);
}

.udkast_sprække_aabning {
  width: 100%;
  height: 8px;
  background: #040608;
  border-radius: 4px;
  box-shadow: inset 0 2px 4px black;
}

.udkast_skilt {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #64748B;
}

/* Dispenser spalte og overgang mellem ruller og sporvisning */
.automat_dispenser_rille {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px;
  background: #0E151E;
  border: 2px solid #2B3847;
  border-radius: 12px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
}

.dispenser_bolt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF0D0 0%, #D4881A 60%, #78350F 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.dispenser_munding {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
}

.dispenser_lys {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 6px #22C55E;
}

.dispenser_etiket {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #94A3B8;
  text-transform: uppercase;
}

.spor_sektion_indbygget,
.spor_sektion_nedenunder,
.spor_udkast_beholder {
  width: 100%;
  display: flex;
  justify-content: center;
}

.spor_venter_kort {
  background: rgba(14, 21, 30, 0.8);
  border: 2px dashed #475569;
  border-radius: 16px;
  padding: 26px;
  width: 100%;
  text-align: center;
}

.venter_tekst {
  font-family: var(--skrifttype_overskrift);
  font-size: 15px;
  font-weight: 700;
  color: #FBBF24;
}

/* Selve den integrerede sporseddel og spilskærm */
.spor_billet {
  background: #FFFDF9;
  border: 2px solid var(--farve_kant_varm);
  border-radius: 18px;
  padding: 20px 22px;
  width: 100%;
  max-width: 100%;
  color: var(--farve_tekst_hoved);
  animation: billet_udprint 0.35s ease-out forwards;
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
}

@keyframes billet_udprint {
  0% {
    transform: translateY(-14px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.spor_billet_hoved {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px dashed var(--farve_kant_varm);
  padding-bottom: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.billet_stempel_maerke {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stempel_tekst {
  font-family: var(--skrifttype_overskrift);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--farve_mork_sennep);
}

.stempel_trin {
  background: var(--farve_lysegul);
  border: 1px solid var(--farve_kant_varm);
  border-radius: var(--radius_pill);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--farve_mork_sennep);
}

.billet_arkiv_kode {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--farve_graa);
}

.spor_citat_ramme {
  position: relative;
  background: #FAF5EB;
  border: 1px solid var(--farve_kant_varm);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 14px;
}

.citat_anfoersel {
  font-family: var(--skrifttype_overskrift);
  font-size: 28px;
  color: var(--farve_sennep);
  line-height: 1;
  position: absolute;
}
.citat_anfoersel.venstre {
  top: 6px;
  left: 8px;
}
.citat_anfoersel.hoejre {
  bottom: -4px;
  right: 8px;
}

.spor_tekst {
  font-family: var(--skrifttype_overskrift);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--farve_tekst_hoved);
  text-align: center;
  padding: 0 10px;
}

.spor_instruks {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--farve_graa);
  margin-bottom: 10px;
  text-align: center;
}

.spor_valg_gitter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.spor_svar_knap {
  background: var(--farve_varmhvid);
  border: 1.5px solid var(--farve_kant_varm);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: none;
  transition: all 0.15s ease;
  color: var(--farve_tekst_hoved);
}

.spor_svar_knap:hover {
  background: var(--farve_lysegul);
  border-color: var(--farve_sennep);
}

.spor_svar_knap.korrekt {
  background: var(--farve_bleggroen);
  border-color: #22C55E;
  color: var(--farve_morkgroen);
  font-weight: 700;
}

.spor_svar_knap.forkert {
  background: #FEE2E2;
  border-color: #F87171;
  color: #991B1B;
  opacity: 0.85;
}

.mini_genre_ikon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--farve_kant_varm);
}

.spor_feedback {
  background: var(--farve_bleggroen);
  border: 1px solid var(--farve_lysegroen);
  border-radius: 10px;
  padding: 14px;
  font-size: 13.5px;
  font-weight: 500;
  display: none;
  margin-top: 10px;
}

.spor_feedback.synlig {
  display: block;
}

.spor_feedback_titel_korrekt {
  font-family: var(--skrifttype_overskrift);
  font-size: 15px;
  font-weight: 800;
  color: var(--farve_morkgroen);
  margin-bottom: 6px;
}

.spor_feedback_titel_forkert {
  font-family: var(--skrifttype_overskrift);
  font-size: 15px;
  font-weight: 800;
  color: #991B1B;
  margin-bottom: 6px;
}

.spor_naeste_knap {
  margin-top: 10px;
  background: var(--farve_sennep);
  color: white;
  border: 1px solid var(--farve_sennep);
  border-radius: var(--radius_knap);
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
}

@media (max-width: 1180px) {
  .automat_opstilling {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .automat_haandtag_omraade {
    position: static;
    margin-top: 0;
    margin-bottom: 8px;
    padding-left: 0;
    justify-content: center;
    order: -1;
  }
  .traek_pil_knap {
    transform: none;
    margin-top: 0;
  }
  .traek_pil_knap:hover {
    transform: translateX(-4px);
  }
  .traek_pil_knap:active {
    transform: translateX(-8px);
  }
}

@media (max-width: 600px) {
  .automat_kabinet {
    padding: 16px 14px 20px;
    border-radius: 20px;
  }
  .spor_valg_gitter {
    grid-template-columns: 1fr;
  }
  .spor_billet {
    padding: 16px 14px;
  }
}

/* FORSIDE SKABEREN / DESIGNER MODUL - SAMMENHÆNGENDE BOGVÆRKSTED I NORDISK BIBLIOTEKSTEMA */
.skaber_workspace {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #FAF8F3;
  border: 2px solid #CFB997;
  border-top: 6px solid var(--bib_fjord);
  border-radius: var(--radius_rund);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(36, 24, 14, 0.04);
}

.skaber_topbjaelke {
  background: linear-gradient(135deg, #FAF8F3 0%, #EFE6D5 100%);
  border: none;
  border-radius: 0;
  padding: 20px 26px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.skaber_titel_omraade {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.skaber_overtitel {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.95px;
  text-transform: uppercase;
  color: var(--bib_fjord_mork);
  background: #ECF2F6;
  border: 1px solid #C4D6E2;
  padding: 4px 11px;
  border-radius: var(--radius_pill);
  margin-bottom: 2px;
}

.skaber_overtitel::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bib_skov);
  display: inline-block;
}

.skaber_hovedtitel {
  font-family: var(--skrifttype_overskrift);
  font-size: 27px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  letter-spacing: -0.3px;
  line-height: 1.15;
  margin: 1px 0 3px 0;
}

.skaber_titel_kursiv {
  font-style: italic;
  font-weight: 800;
  color: var(--bib_skov_mork);
}

.skaber_undertitel {
  font-size: 13.5px;
  color: var(--farve_tekst_daempet);
  line-height: 1.45;
  margin: 0;
  max-width: 640px;
}

.skaber_top_handlinger {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  background: #EAE0CE;
  padding: 6px;
  border-radius: var(--radius_pill);
  border: 1.5px solid #CBB89D;
}

.skaber_top_handlinger .portal_knap {
  font-size: 13px;
  padding: 8px 16px;
  box-shadow: none !important;
  background: var(--bib_skov);
  border-color: var(--bib_skov_mork);
  color: #FFFFFF;
}

.skaber_top_handlinger .portal_knap:hover {
  background: var(--bib_skov_mork);
  border-color: var(--bib_skov_mork);
}

.skaber_top_handlinger .portal_knap.sekundaer {
  background: #FAF8F3;
  color: var(--farve_tekst_hoved);
  border: 1.5px solid #C8B294;
}

.skaber_top_handlinger .portal_knap.sekundaer:hover {
  background: #ECF2F6;
  border-color: var(--bib_fjord);
  color: var(--bib_fjord_mork);
}

/* Integreret genreskabelon-bånd som nordisk egetræsreol */
.skaber_skabelon_bar {
  background: linear-gradient(180deg, #F3EBDD 0%, #EAE0CE 100%);
  border-top: 1.5px solid #D5C5AE;
  border-bottom: 4px solid #B8A386;
  border-left: none;
  border-right: none;
  border-radius: 0;
  padding: 12px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.skaber_skabelon_intro {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.skaber_skabelon_kicker {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bib_fjord);
}

.skaber_skabelon_label {
  font-family: var(--skrifttype_overskrift);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.skaber_skabelon_label::before {
  content: "";
  width: 6px;
  height: 18px;
  border-radius: 3px;
  background: var(--bib_skov);
  display: inline-block;
}

.skaber_skabelon_chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.skabelon_genre_knap {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 11px;
  border: 1.5px solid #D5C4AC;
  border-bottom: 3px solid #BDA88B;
  border-left: 5px solid var(--bib_fjord);
  background: #FAF8F4;
  color: var(--farve_tekst_hoved);
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.14s ease;
}

.skabelon_genre_knap[data_skabelon="fantasy"] { border-left-color: #7C3AED; }
.skabelon_genre_knap[data_skabelon="gys"] { border-left-color: #B45309; }
.skabelon_genre_knap[data_skabelon="krimi"] { border-left-color: #0369A1; }
.skabelon_genre_knap[data_skabelon="scifi"] { border-left-color: #0F766E; }
.skabelon_genre_knap[data_skabelon="eventyr"] { border-left-color: #BE185D; }
.skabelon_genre_knap[data_skabelon="historie"] { border-left-color: #92400E; }
.skabelon_genre_knap[data_skabelon="realisme"] { border-left-color: #15803D; }

.skabelon_genre_knap:hover {
  background: #FFFFFF;
  border-color: var(--bib_fjord);
  transform: translateY(-1px);
}

.skabelon_genre_knap.aktiv {
  background: var(--bib_fjord);
  border-color: var(--bib_fjord_mork);
  border-bottom-color: #162E40;
  color: #FFFFFF;
}

/* Sammenhængende 2-kolonne studie layout */
.skaber_layout {
  display: grid;
  grid-template-columns: 1fr 416px;
  gap: 0;
  align-items: stretch;
  background: #FAF8F3;
}

@media (max-width: 980px) {
  .skaber_layout {
    grid-template-columns: 1fr;
  }
}

.skaber_kontrol_panel {
  background: #FAF8F3;
  border: none;
  border-right: 2px solid #D8C9B2;
  border-radius: 0;
  padding: 20px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 980px) {
  .skaber_kontrol_panel {
    border-right: none;
    border-bottom: 2px solid #D8C9B2;
  }
}

.skaber_faner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: linear-gradient(180deg, #EDE3D2 0%, #E3D6C1 100%);
  padding: 7px;
  min-height: 52px;
  border-radius: 16px;
  border: 1.5px solid #CEBEA6;
  border-bottom: 4px solid #B8A386;
  align-items: stretch;
}

@media (max-width: 720px) {
  .skaber_faner {
    grid-template-columns: repeat(2, 1fr);
  }
}

.skaber_fane_knap {
  background: #FAF8F4;
  border: 1.5px solid #D7C8B2;
  border-left: 5px solid var(--bib_fjord);
  border-radius: 11px;
  padding: 9px 10px;
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.skaber_fane_knap:nth-child(1) { border-left-color: var(--bib_fjord); }
.skaber_fane_knap:nth-child(2) { border-left-color: var(--bib_skov); }
.skaber_fane_knap:nth-child(3) { border-left-color: var(--bib_okker); }
.skaber_fane_knap:nth-child(4) { border-left-color: var(--bib_terrakotta); }

.fane_hoved_label {
  font-family: var(--skrifttype_overskrift);
  font-size: 14px;
  font-weight: 800;
  color: #5C4F42;
  line-height: 1.15;
  white-space: nowrap;
}

.skaber_fane_knap:hover {
  background: #FFFFFF;
  border-color: #B49D7E;
  transform: translateY(-1px);
}

.skaber_fane_knap:hover .fane_hoved_label {
  color: var(--farve_tekst_hoved);
}

.skaber_fane_knap.aktiv {
  background: #FFFFFF;
  border-width: 2px;
  border-left-width: 6px;
}

.skaber_fane_knap:nth-child(1).aktiv {
  background: linear-gradient(135deg, #FFFFFF 0%, #ECF2F6 100%);
  border-color: var(--bib_fjord);
}
.skaber_fane_knap:nth-child(2).aktiv {
  background: linear-gradient(135deg, #FFFFFF 0%, #ECF3EB 100%);
  border-color: var(--bib_skov);
}
.skaber_fane_knap:nth-child(3).aktiv {
  background: linear-gradient(135deg, #FFFFFF 0%, #FDF8EC 100%);
  border-color: var(--bib_okker);
}
.skaber_fane_knap:nth-child(4).aktiv {
  background: linear-gradient(135deg, #FFFFFF 0%, #FCEEEB 100%);
  border-color: var(--bib_terrakotta);
}

.skaber_fane_knap.aktiv .fane_hoved_label {
  color: var(--farve_tekst_hoved);
  font-weight: 900;
}

.skaber_fane_indhold {
  display: none;
}

.skaber_fane_indhold.aktiv {
  display: block;
}

.kontrol_overtitel {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bib_fjord);
  margin-bottom: 3px;
}

.kontrol_hjaelp {
  font-size: 13.5px;
  color: var(--farve_tekst_daempet);
  margin: 0 0 12px 0;
  line-height: 1.45;
}

.kontrol_felt_etiket {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--skrifttype_overskrift);
  font-size: 14px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  margin: 12px 0 7px 0;
}

.trin_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #ECF3EB;
  border: 1.5px solid var(--bib_skov);
  color: var(--bib_skov_mork);
  font-family: var(--skrifttype_brod);
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}

/* Figurer og Rekvisitter Gitter */
.figur_udvalg_gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  max-height: 390px;
  overflow-y: auto;
  padding: 4px 2px;
}

.figur_valg_kort {
  background: #FFFFFF;
  border: 1.5px solid #D8C9B2;
  border-bottom: 3px solid #C2AE90;
  border-radius: 14px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.figur_valg_kort:hover {
  background: #F4F8FA;
  border-color: var(--bib_fjord);
  transform: translateY(-2px);
}

.figur_valg_billede {
  width: 68px;
  height: 68px;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
  transition: transform 0.15s ease;
}

.figur_valg_kort:hover .figur_valg_billede {
  transform: scale(1.07);
}

.figur_valg_svg {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.figur_valg_svg svg {
  width: 100%;
  height: 100%;
  max-height: 60px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

.figur_valg_navn {
  font-size: 12px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  text-align: center;
  line-height: 1.2;
}

.figur_valg_genre_tag {
  font-size: 10px;
  font-weight: 800;
  color: var(--bib_fjord_mork);
  background: #ECF2F6;
  border: 1px solid #C8DAE6;
  padding: 2px 8px;
  border-radius: var(--radius_pill);
}

.rekvisit_udvalg_gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  max-height: 290px;
  overflow-y: auto;
  padding: 4px 2px;
}

.rekvisit_valg_kort {
  background: #FFFFFF;
  border: 1.5px solid #D8C9B2;
  border-bottom: 3px solid #C2AE90;
  border-radius: 14px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.rekvisit_valg_kort:hover {
  background: #F4F9F3;
  border-color: var(--bib_skov);
  transform: translateY(-2px);
}

.rekvisit_ikon_boks {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rekvisit_ikon_boks svg {
  width: 46px;
  height: 46px;
}

.rekvisit_valg_navn {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  text-align: center;
  line-height: 1.2;
}

/* Idégenerator boks i Tekst fanen */
.skaber_ide_boks {
  background: linear-gradient(135deg, #F4F9F3 0%, #E9F2E7 100%);
  border: 1.5px solid #B7CEB4;
  border-left: 5px solid var(--bib_skov);
  border-radius: 14px;
  padding: 12px 15px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.skaber_ide_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.skaber_ide_titel_gruppe {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.skaber_ide_kicker {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--bib_skov_mork);
}

.skaber_ide_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
}

.skaber_ide_forny_knap {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: var(--radius_pill);
  border: 1.5px solid var(--bib_skov);
  background: #FFFFFF;
  color: var(--bib_skov_mork);
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.15s ease;
}

.skaber_ide_forny_knap:hover {
  background: var(--bib_skov);
  color: #FFFFFF;
}

.skaber_ide_chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.skaber_ide_chip {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #B7CEB4;
  background: #FFFFFF;
  color: var(--farve_tekst_hoved);
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.15s ease;
  text-align: left;
}

.skaber_ide_chip:hover {
  background: #ECF3EB;
  border-color: var(--bib_skov);
}

.skaber_tekst_stil_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.knap_vaelger_raekke.skaber_tre_kolonner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.knap_vaelger_raekke.skaber_tre_kolonner .valg_chip {
  width: 100%;
  text-align: center;
  padding: 7px 6px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 680px) {
  .skaber_tekst_stil_grid {
    grid-template-columns: 1fr;
  }
}

.boble_forhaand_omraade {
  padding: 14px 8px 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.traekbar_tekst_boks {
  background: #0f172a;
  border: 2px dashed #94a3b8;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: grab;
  margin: 0 auto;
  min-height: 64px;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.traekbar_tekst_boks:hover {
  border-color: var(--bib_fjord);
}

.traekbar_tekst_boks.stil_moerkt_baand #skaber_tekst_forhaandsvisning {
  background: rgba(15, 23, 42, 0.85);
  padding: 5px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.traekbar_tekst_boks.stil_lyst_baand #skaber_tekst_forhaandsvisning {
  background: rgba(255, 253, 248, 0.92);
  padding: 5px 14px;
  border-radius: 8px;
  border: 1.5px solid #0f172a;
}

.traekbar_tekst_boks.stil_guld_skilt #skaber_tekst_forhaandsvisning {
  background: rgba(28, 25, 23, 0.88);
  padding: 6px 16px;
  border-radius: 8px;
  border: 2px solid #eab308;
}

.traekbar_tekst_boks.stil_pergament_skilt #skaber_tekst_forhaandsvisning {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  padding: 6px 16px;
  border-radius: 8px;
  border: 2px solid #92400E;
}

.traekbar_tekst_boks.stil_neonskilt #skaber_tekst_forhaandsvisning {
  background: rgba(15, 23, 42, 0.9);
  padding: 6px 16px;
  border-radius: 8px;
  border: 2px solid #38BDF8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}

.traekbar_tekst_boks.er_boble {
  position: relative;
  background: #ffffff;
  border: 3px solid #0f172a;
  border-radius: 22px;
  padding: 14px 22px;
  min-height: auto;
  max-width: 270px;
  width: auto;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18);
  margin: 0 auto;
  text-align: center;
}

.traekbar_tekst_boks.er_boble #skaber_tekst_forhaandsvisning {
  position: relative;
  z-index: 4;
  color: #0f172a;
  font-weight: 700;
  display: block;
}

.traekbar_tekst_boks.er_boble .traek_hint {
  position: relative;
  z-index: 4;
  color: #64748b;
  margin-top: 4px;
  display: block;
}

.traekbar_tekst_boks.er_badge {
  background: rgba(15, 23, 42, 0.9);
}

.traek_hint {
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.farve_vaelger_raekke {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.farve_knap {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.22);
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.15s ease;
}

.farve_knap:hover {
  transform: scale(1.14);
}

.farve_knap.valgt {
  outline: 2.5px solid var(--farve_sennep);
  outline-offset: 2px;
}

.farve_knap_lille {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.farve_knap_lille:hover {
  transform: scale(1.15);
}

.kontrol_sektion,
.skaber_kontrol_panel .kontrol_sektion {
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--farve_kant);
  padding-bottom: 14px;
}

.kontrol_sektion:last-child,
.skaber_kontrol_panel .kontrol_sektion:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.kontrol_titel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--skrifttype_overskrift);
  font-size: 18.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}

.kontrol_input {
  width: 100%;
  background: #FFFFFF;
  border: 1.5px solid #D5C5AE;
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  box-shadow: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.kontrol_input:focus {
  outline: none;
  border-color: var(--bib_fjord);
  background: #FFFFFF;
}

/* Baggrund, Ramme og Stemning kort i Fane 4 */
.skaber_baggrund_gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 10px;
  width: 100%;
}

.skaber_baggrund_kort {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 12px;
  border: 1.5px solid #D8C9B2;
  border-bottom: 3px solid #C2AE90;
  background: #FFFFFF;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: none !important;
  transition: all 0.15s ease;
}

.skaber_baggrund_kort:hover {
  border-color: var(--bib_fjord);
  background: #F4F8FA;
}

.skaber_baggrund_kort.valgt {
  border-color: var(--bib_fjord);
  border-width: 2px;
  background: #ECF2F6;
}

.skaber_baggrund_farveproeve {
  width: 34px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.skaber_baggrund_info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.skaber_baggrund_navn {
  font-size: 12px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  line-height: 1.2;
}

.skaber_baggrund_genre {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--bib_fjord);
}

.skaber_effekt_gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 8px;
  width: 100%;
}

.skaber_effekt_kort {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1.5px solid #D8C9B2;
  border-bottom: 3px solid #C2AE90;
  background: #FFFFFF;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: none !important;
  transition: all 0.15s ease;
}

.skaber_effekt_kort:hover {
  border-color: var(--bib_skov);
  background: #F4F9F3;
}

.skaber_effekt_kort.valgt {
  background: var(--bib_skov);
  border-color: var(--bib_skov_mork);
  color: #FFFFFF;
}

.effekt_kort_titel {
  font-size: 12.5px;
  font-weight: 800;
  color: inherit;
}

.effekt_kort_beskrivelse {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
  color: inherit;
}

/* Generiske knapper og chips */
.sekundaer_knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #FFFFFF;
  color: var(--farve_tekst_hoved);
  border: 1.5px solid #D5C5AE;
  border-radius: 10px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.15s ease;
  user-select: none;
}

.sekundaer_knap:hover {
  background: #ECF2F6;
  border-color: var(--bib_fjord);
  color: var(--bib_fjord_mork);
}

.primaer_knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bib_skov);
  color: #FFFFFF;
  border: 1.5px solid var(--bib_skov_mork);
  border-radius: 12px;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.15s ease;
  user-select: none;
}

.primaer_knap:hover {
  background: var(--bib_skov_mork);
  border-color: var(--bib_skov_mork);
}

.knap_vaelger_raekke {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.valg_chip {
  background: #FFFFFF;
  border: 1.5px solid #D5C5AE;
  border-bottom: 3px solid #C2AE90;
  border-radius: var(--radius_pill);
  padding: 6px 13px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.15s ease;
}

.valg_chip:hover {
  background: #ECF3EB;
  border-color: var(--bib_skov);
}

.valg_chip.valgt {
  background: var(--bib_skov);
  border-color: var(--bib_skov_mork);
  border-bottom-color: #1F3E1C;
  color: #FFFFFF;
}

.valg_chip_mini {
  background: #FFFFFF;
  border: 1px solid #D5C5AE;
  border-radius: var(--radius_pill);
  padding: 4px 9px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--farve_tekst_hoved);
  cursor: pointer;
  box-shadow: none !important;
}

.valg_chip_mini:hover,
.valg_chip_mini.valgt {
  background: var(--bib_fjord);
  border-color: var(--bib_fjord_mork);
  color: #FFFFFF;
}

/* Højre kolonne: Bogstudie visning og inspektør */
.skaber_visnings_panel {
  background: #F4EFE6;
  border: none;
  border-radius: 0;
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.skaber_laerred_top {
  width: 100%;
  min-height: 52px;
  background: linear-gradient(135deg, #ECF2F6 0%, #FFFFFF 100%);
  border: 1.5px solid #BFD2DF;
  border-left: 5px solid var(--bib_fjord);
  border-radius: 14px;
  padding: 8px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.skaber_laerred_titel_gruppe {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.laerred_top_kicker {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--bib_fjord_mork);
  line-height: 1;
}

.skaber_genre_status_pill {
  font-family: var(--skrifttype_overskrift);
  font-size: 14.5px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  line-height: 1.2;
}

.skaber_antal_pill {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--bib_skov_mork);
  background: #ECF3EB;
  border: 1.5px solid #B7CEB4;
  padding: 4px 11px;
  border-radius: var(--radius_pill);
}

.bogforside_scene_wrap {
  padding: 10px;
  background: linear-gradient(180deg, #EDE3D2 0%, #E2D4BC 100%);
  border: 2px solid #C8B496;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bogforside_laerred {
  width: 340px;
  height: 490px;
  position: relative;
  border-radius: 6px 14px 14px 6px;
  overflow: hidden;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(0, 0, 0, 0.2);
  user-select: none;
  touch-action: none;
}

/* Bogryg og dekorative lag på bogforsiden */
.bogforside_dekor_lag {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bogforside_ryg_effekt {
  width: 18px;
  right: auto;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(255, 255, 255, 0.18) 38%, rgba(0, 0, 0, 0.22) 78%, transparent 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 1;
}

/* Stemningslys lag */
.bogforside_stemning_lag {
  z-index: 1;
}

.stemning_stjernestoev {
  background-image:
    radial-gradient(circle at 20% 18%, rgba(254, 240, 138, 0.65) 1.5px, transparent 3px),
    radial-gradient(circle at 82% 24%, rgba(255, 255, 255, 0.6) 1.5px, transparent 3px),
    radial-gradient(circle at 15% 62%, rgba(167, 243, 208, 0.5) 2px, transparent 4px),
    radial-gradient(circle at 85% 70%, rgba(254, 240, 138, 0.55) 1.5px, transparent 3px),
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.35) 1px, transparent 2px);
}

.stemning_nattevignet {
  box-shadow: inset 0 0 65px rgba(0, 0, 0, 0.75);
}

.stemning_solstrejf {
  background: radial-gradient(circle at 50% 0%, rgba(254, 240, 138, 0.38) 0%, transparent 65%);
}

.stemning_taagesloer {
  background: linear-gradient(180deg, transparent 50%, rgba(226, 232, 240, 0.32) 85%, rgba(255, 255, 255, 0.45) 100%);
}

/* Dekorative forside rammer */
.bogforside_ramme_lag {
  z-index: 2;
}

.forside_ramme_gylden {
  inset: 10px 10px 10px 16px;
  border: 2px solid rgba(253, 224, 71, 0.78);
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.25), inset 0 0 0 4px rgba(253, 224, 71, 0.4);
}

.forside_ramme_skygge {
  inset: 10px 10px 10px 16px;
  border: 2px solid rgba(148, 163, 184, 0.45);
  border-radius: 4px;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.85);
}

.forside_ramme_detektiv {
  inset: 12px 12px 12px 18px;
  border: 2px dashed rgba(251, 191, 36, 0.75);
  border-radius: 4px;
}

.forside_ramme_fremtid {
  inset: 10px 10px 10px 16px;
  border: 2px solid rgba(56, 189, 248, 0.75);
  border-radius: 10px;
  box-shadow: inset 0 0 14px rgba(56, 189, 248, 0.35);
}

.forside_ramme_pergament {
  inset: 10px 10px 10px 16px;
  border: 3px double rgba(253, 230, 138, 0.75);
  border-radius: 6px;
}

/* Valgt element inspektør i højre kolonne */
.skaber_valgt_sektion {
  width: 100%;
  background: #F4F8FA;
  border: 2px solid var(--bib_fjord);
  border-radius: 14px;
  padding: 12px 14px;
  box-sizing: border-box;
}

.valgt_panel_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.valgt_panel_titel_gruppe {
  display: flex;
  align-items: center;
  gap: 6px;
}

.valgt_panel_label {
  font-size: 11px;
  font-weight: 800;
  color: var(--bib_fjord_mork);
  text-transform: uppercase;
}

.valgt_element_badge {
  background: #FFFFFF;
  color: var(--bib_fjord_mork);
  border: 1px solid #BFD2DF;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

.valgt_afmarker_knap {
  background: #FFFFFF;
  border: 1.5px solid #BFD2DF;
  border-radius: var(--radius_pill);
  padding: 3px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  color: var(--bib_fjord_mork);
  cursor: pointer;
  box-shadow: none !important;
}

.valgt_afmarker_knap:hover {
  background: var(--bib_fjord);
  color: #FFFFFF;
  border-color: var(--bib_fjord_mork);
}

.rediger_handlinger_gitter {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.rediger_knap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: #FFFFFF;
  color: var(--farve_tekst_hoved);
  border: 1.5px solid #D5C5AE;
  border-radius: 8px;
  padding: 5px 4px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.12s ease;
  user-select: none;
}

.rediger_knap:hover {
  background: #ECF2F6;
  border-color: var(--bib_fjord);
  color: var(--bib_fjord_mork);
}

.rediger_knap_ikon {
  font-size: 13px;
  font-weight: 900;
  color: var(--bib_fjord);
  line-height: 1;
}

.rediger_knap_slet {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #DC2626;
}

.rediger_knap_slet .rediger_knap_ikon {
  color: #DC2626;
}

.rediger_knap_slet:hover {
  background: #FEE2E2;
  border-color: #EF4444;
  color: #B91C1C;
}

.valgt_tekst_hurtig_bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

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

/* Lag-oversigt i bunden af højre kolonne */
.skaber_lag_panel {
  width: 100%;
  background: #FAF8F3;
  border: 1.5px solid #D5C5AE;
  border-radius: 14px;
  padding: 11px 14px;
  box-sizing: border-box;
}

.skaber_lag_header {
  margin-bottom: 6px;
}

.skaber_lag_titel {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--bib_fjord_mork);
  letter-spacing: 0.4px;
}

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

.skaber_lag_chip {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius_pill);
  border: 1.5px solid #D5C5AE;
  background: #FFFFFF;
  color: var(--farve_tekst_hoved);
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.12s ease;
}

.skaber_lag_chip:hover {
  border-color: var(--bib_fjord);
  background: #ECF2F6;
}

.skaber_lag_chip.aktiv {
  background: var(--bib_fjord);
  border-color: var(--bib_fjord_mork);
  color: #FFFFFF;
}

.skaber_lag_tom {
  font-size: 11.5px;
  color: var(--farve_tekst_daempet);
}

/* Elementer inde på selve bogforside lærredet */
.canvas_element {
  position: absolute;
  cursor: grab;
  user-select: none;
  touch-action: none;
  display: inline-block;
  will-change: left, top;
}

.canvas_element:active {
  cursor: grabbing;
}

.canvas_element.valgt {
  outline: 2px dashed #fde047;
  outline-offset: 4px;
  border-radius: 8px;
}

.canvas_element_indhold {
  transform-origin: center center;
  transition: transform 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas_figur_billede {
  width: 140px;
  height: 140px;
  border-radius: 0;
  object-fit: contain;
  border: none;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.canvas_figur_svg {
  width: 130px;
  height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.canvas_figur_svg svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

.canvas_rekvisit_svg {
  width: 70px;
  height: 70px;
  pointer-events: none;
}

.canvas_rekvisit_svg svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

.canvas_tekst_ren {
  font-family: var(--skrifttype_overskrift);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: pre-wrap;
  width: 280px;
  max-width: 280px;
}

.canvas_tekst_moerkt_baand {
  background: rgba(15, 23, 42, 0.85);
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.canvas_tekst_lyst_baand {
  background: rgba(255, 253, 248, 0.92);
  padding: 6px 14px;
  border-radius: 8px;
  border: 1.5px solid #0f172a;
}

.canvas_tekst_guld_skilt {
  background: rgba(28, 25, 23, 0.88);
  padding: 7px 16px;
  border-radius: 8px;
  border: 2px solid #eab308;
}

.canvas_tekst_pergament_skilt {
  background: #f5ebd6;
  padding: 7px 16px;
  border-radius: 6px;
  border: 2px dashed #8b5a2b;
  color: #3e2723;
}

.canvas_tekst_neonskilt {
  background: rgba(15, 23, 42, 0.92);
  padding: 7px 16px;
  border-radius: 8px;
  border: 2px solid #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
}

.titel_skygge {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

/* Grundlæggende taleboble på bogforsiden */
.canvas_tekst_boble {
  position: relative;
  background: #ffffff;
  border: 3px solid #0f172a;
  border-radius: 22px;
  padding: 12px 18px;
  color: #0f172a;
  font-weight: 700;
  font-size: 13px;
  max-width: 250px;
  text-align: center;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.25);
  word-break: break-word;
  line-height: 1.35;
  box-sizing: border-box;
}

/* 4 Taleboble vinkler med tydelige talespidser */
.canvas_tekst_boble.boble_ned_venstre::before,
.traekbar_tekst_boks.er_boble.boble_ned_venstre::before {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 24px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 22px 18px 0 0;
  border-color: #0f172a transparent transparent transparent;
  z-index: 2;
}
.canvas_tekst_boble.boble_ned_venstre::after,
.traekbar_tekst_boks.er_boble.boble_ned_venstre::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 26.5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 17px 13px 0 0;
  border-color: #ffffff transparent transparent transparent;
  z-index: 3;
}

.canvas_tekst_boble.boble_ned_hoejre::before,
.traekbar_tekst_boks.er_boble.boble_ned_hoejre::before {
  content: "";
  position: absolute;
  bottom: -22px;
  right: 24px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 22px 0 0 18px;
  border-color: #0f172a transparent transparent transparent;
  z-index: 2;
}
.canvas_tekst_boble.boble_ned_hoejre::after,
.traekbar_tekst_boks.er_boble.boble_ned_hoejre::after {
  content: "";
  position: absolute;
  bottom: -16px;
  right: 26.5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 17px 0 0 13px;
  border-color: #ffffff transparent transparent transparent;
  z-index: 3;
}

.canvas_tekst_boble.boble_op_venstre::before,
.traekbar_tekst_boks.er_boble.boble_op_venstre::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 24px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 18px 22px 0;
  border-color: transparent transparent #0f172a transparent;
  z-index: 2;
}
.canvas_tekst_boble.boble_op_venstre::after,
.traekbar_tekst_boks.er_boble.boble_op_venstre::after {
  content: "";
  position: absolute;
  top: -16px;
  left: 26.5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 13px 17px 0;
  border-color: transparent transparent #ffffff transparent;
  z-index: 3;
}

.canvas_tekst_boble.boble_op_hoejre::before,
.traekbar_tekst_boks.er_boble.boble_op_hoejre::before {
  content: "";
  position: absolute;
  top: -22px;
  right: 24px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 22px 18px;
  border-color: transparent transparent #0f172a transparent;
  z-index: 2;
}
.canvas_tekst_boble.boble_op_hoejre::after,
.traekbar_tekst_boks.er_boble.boble_op_hoejre::after {
  content: "";
  position: absolute;
  top: -16px;
  right: 26.5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 17px 13px;
  border-color: transparent transparent #ffffff transparent;
  z-index: 3;
}

.canvas_tekst_badge {
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(4px);
  color: white;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.canvas_mini_toolbar {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 999px;
  padding: 3px 6px;
  display: flex;
  gap: 3px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.mini_tb_knap {
  background: transparent;
  color: white;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease;
}

.mini_tb_knap:hover {
  background: rgba(255, 255, 255, 0.2);
}

.mini_tb_knap.mini_slet {
  color: #f87171;
}

.mini_tb_knap.mini_slet:hover {
  background: #ef4444;
  color: white;
}

.print_knap_stor {
  background: var(--farve_groen);
  color: white;
  border: 1px solid var(--farve_groen);
  border-radius: var(--radius_knap);
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.print_knap_stor:hover {
  background: var(--farve_morkgroen);
  border-color: var(--farve_morkgroen);
}


/* PRINTCENTER OG PLAKATER MODUL — NORDISK BIBLIOTEKSTEMA */
.print_kontrol_bjælke {
  max-width: 1080px;
  margin: 0 auto 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.print_kontrol_top {
  background: linear-gradient(135deg, #F4ECE0 0%, #EAE0CF 100%);
  border: 2px solid #D5C5AE;
  border-bottom: 4px solid #C2AE93;
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.print_titel_omraade {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.print_titel_linje {
  display: flex;
  align-items: center;
  gap: 12px;
}

.print_hovedtitel {
  font-family: var(--skrifttype_overskrift);
  font-size: 27px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  margin: 0;
  line-height: 1.15;
}

.print_undertitel {
  font-size: 14px;
  color: var(--farve_tekst_daempet);
  margin: 0 0 0 22px;
  font-weight: 500;
}

.print_fane_knapper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1100px) {
  .print_fane_knapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .print_fane_knapper {
    grid-template-columns: 1fr;
  }
}

.print_fane_knap {
  background: #FAF8F4;
  border: 1.5px solid #D5C5AE;
  border-radius: 14px;
  padding: 11px 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 6px 1fr;
  align-items: center;
  gap: 10px;
  box-shadow: none !important;
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}

.print_fane_ryg {
  width: 6px;
  height: 34px;
  border-radius: 4px;
  background: var(--bib_fjord);
}

.print_fane_knap.fane_fjord .print_fane_ryg { background: var(--bib_fjord); }
.print_fane_knap.fane_terrakotta .print_fane_ryg { background: var(--bib_terrakotta); }
.print_fane_knap.fane_okker .print_fane_ryg { background: var(--bib_okker); }
.print_fane_knap.fane_skov .print_fane_ryg { background: var(--bib_skov); }

.print_fane_tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.print_fane_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  line-height: 1.2;
}

.print_fane_undertitel {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--farve_tekst_daempet);
}

.print_fane_knap:hover {
  background: #FFFFFF;
  border-color: #B49D7E;
  transform: translateY(-1px);
  box-shadow: none !important;
}

.print_fane_knap.valgt {
  background: #FFFFFF;
  border-width: 2px;
  box-shadow: none !important;
}

.print_fane_knap.fane_fjord.valgt {
  border-color: var(--bib_fjord);
  background: linear-gradient(180deg, #FFFFFF 0%, #ECF2F6 100%);
}

.print_fane_knap.fane_terrakotta.valgt {
  border-color: var(--bib_terrakotta);
  background: linear-gradient(180deg, #FFFFFF 0%, #FCEEEB 100%);
}

.print_fane_knap.fane_okker.valgt {
  border-color: var(--bib_okker);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF3DF 100%);
}

.print_fane_knap.fane_skov.valgt {
  border-color: var(--bib_skov);
  background: linear-gradient(180deg, #FFFFFF 0%, #ECF3EB 100%);
}

.print_fane_sektion {
  display: none;
  flex-direction: column;
  gap: 18px;
}

.print_fane_sektion.aktiv {
  display: flex;
}

/* Bibliotekshylde med genrevælger og printknap */
.print_handling_linje {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  background: linear-gradient(180deg, #EDE3D2 0%, #E3D6C1 100%);
  border: 2px solid #CEBEA6;
  border-bottom: 5px solid #B8A386;
  border-radius: 18px;
  padding: 14px 18px;
}

.print_handling_linje.print_handling_udvidet {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 14px 18px;
}

.print_fiktion_sektion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid #D5C5AE;
}

.print_fiktion_sektion.print_enkelt_sektion {
  padding-bottom: 0;
  border-bottom: none;
}

.print_sektion_top_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.print_sektion_titel_gruppe {
  display: flex;
  align-items: center;
  gap: 8px;
}

.print_sektion_nummer {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #5C4F42;
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.print_fiktion_syv_gitter {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.print_fiktion_syv_gitter .print_fiktion_kort {
  font-family: inherit;
  font-size: 12.8px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1.5px solid #D7C8B2;
  background: #FAF8F4;
  color: var(--farve_tekst_hoved);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  min-width: 0;
  box-shadow: none !important;
  transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}

.print_fiktion_syv_gitter .print_fiktion_kort:hover {
  background: #FFFFFF;
  border-color: #B09878;
  transform: translateY(-1px);
  box-shadow: none !important;
}

.print_fiktion_syv_gitter .print_fiktion_kort.valgt {
  background: var(--chip_accent, var(--bib_fjord));
  color: #FFFFFF;
  border: 2px solid var(--chip_accent, var(--bib_fjord));
  font-weight: 800;
  box-shadow: none !important;
}

.print_fiktion_syv_gitter .print_fiktion_kort.valgt .chip_bog_ryg {
  background: #FFFFFF !important;
}

.print_fiktion_kort_titel {
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.print_arbejdsform_hylde {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.print_kategori_kort_gitter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.print_kategori_kort {
  background: #FBF9F5;
  border: 1.5px solid #D7C8B2;
  border-top: 4px solid var(--kat_accent, var(--bib_fjord));
  border-radius: 14px;
  padding: 11px 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.print_kategori_kort.aktiv_gruppe {
  background: #FFFFFF;
  border-color: var(--kat_accent, var(--bib_fjord));
}

.print_kategori_kort_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #EAE0D0;
}

.print_kategori_titel_linje {
  display: flex;
  align-items: center;
  gap: 7px;
}

.print_kategori_farveprik {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.print_kategori_kort_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
}

.print_kategori_antal {
  font-size: 11px;
  font-weight: 700;
  color: #6B5C4D;
  background: #EFE7D8;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.print_kategori_chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.print_kategori_chips .print_kompakt_chip {
  font-family: inherit;
  font-size: 12.2px;
  font-weight: 700;
  padding: 6px 9px;
  border-radius: 9px;
  border: 1.5px solid #DCD0BE;
  background: #FFFFFF;
  color: var(--farve_tekst_hoved);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-align: left;
  box-shadow: none !important;
  transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}

.print_kategori_chips .print_kompakt_chip .chip_bog_ryg {
  background: var(--chip_accent, var(--bib_fjord));
  flex-shrink: 0;
}

.print_kompakt_chip_tekst {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.print_kategori_chips .print_kompakt_chip:hover {
  border-color: var(--chip_accent, #B09878);
  background: var(--chip_lys, #FAF8F4);
  transform: translateY(-1px);
  box-shadow: none !important;
}

.print_kategori_chips .print_kompakt_chip.valgt {
  background: var(--chip_accent, var(--bib_fjord));
  color: #FFFFFF;
  border: 1.5px solid var(--chip_accent, var(--bib_fjord));
  font-weight: 800;
  box-shadow: none !important;
}

.print_kategori_chips .print_kompakt_chip.valgt .chip_bog_ryg {
  background: #FFFFFF;
}

@media (max-width: 1100px) {
  .print_fiktion_syv_gitter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .print_kategori_chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .print_fiktion_syv_gitter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .print_kategori_kort_gitter {
    grid-template-columns: 1fr;
  }
  .print_kategori_chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.print_vaelger_gruppe {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}

.print_vaelger_etiket {
  font-size: 12px;
  font-weight: 900;
  color: #5C4F42;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.print_genre_chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.print_genre_chips .print_bib_chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 13px 6px 10px;
  border-radius: 11px;
  border: 1.5px solid #D7C8B2;
  background: #FAF8F4;
  color: var(--farve_tekst_hoved);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: none !important;
  transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}

.print_genre_chips .print_bib_chip:hover {
  background: #FFFFFF;
  border-color: #B09878;
  transform: translateY(-1px);
  box-shadow: none !important;
}

.print_genre_chips .print_bib_chip.valgt {
  background: var(--chip_lys, #ECF2F6);
  color: var(--farve_tekst_hoved);
  border: 2px solid var(--chip_accent, var(--bib_fjord));
  font-weight: 800;
  box-shadow: none !important;
}

.print_chip_ikon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #D5C5AE;
  background: #FFFFFF;
  object-fit: contain;
  flex-shrink: 0;
}

.print_handling_linje .print_knap_stor {
  width: auto;
  background: var(--bib_skov);
  color: #FFFFFF;
  border: 1.5px solid var(--bib_skov_mork);
  border-radius: var(--radius_pill);
  padding: 10px 20px;
  font-family: inherit;
  font-size: 13.8px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color 0.14s ease, transform 0.14s ease;
  white-space: nowrap;
}

.print_handling_linje .print_knap_stor:hover {
  background: var(--bib_skov_mork);
  transform: translateY(-1px);
  box-shadow: none !important;
}

/* UDKLIPSKORT */
.udklip_ark_ramme {
  background: #FAF8F3;
  border: 2.5px solid #C8B294;
  border-top: 6px solid var(--plakat_accent, var(--bib_fjord));
  border-radius: 20px;
  padding: 26px;
}

.udklip_ark_titelbjælke {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.5px solid #DED1BC;
  padding-bottom: 14px;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}

.udklip_ark_titelbjælke h2 {
  font-family: var(--skrifttype_overskrift);
  font-size: 23px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  margin: 0 0 3px 0;
}

.udklip_ark_titelbjælke p {
  font-size: 13.5px;
  color: var(--farve_tekst_daempet);
  margin: 0;
}

.udklip_ark_logo {
  background: #F4ECE0;
  border: 1.5px solid #D5C5AE;
  border-radius: var(--radius_pill);
  padding: 5px 14px;
  font-weight: 800;
  font-size: 13px;
  color: #5C4F42;
}

.udklip_kort_gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.udklip_kort {
  background: #FFFFFF;
  border: 1.5px dashed #B8A386;
  border-top: 4px solid var(--udklip_accent, var(--bib_fjord));
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  page-break-inside: avoid;
}

.udklip_klippelinje {
  position: absolute;
  top: -9px;
  right: 12px;
  background: #FAF8F3;
  border: 1px solid #D5C5AE;
  border-radius: var(--radius_pill);
  padding: 1px 8px;
  font-size: 9.5px;
  color: #6B5C4C;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.udklip_kort_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.udklip_genre_badge {
  border-radius: var(--radius_pill);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.udklip_mini_ikon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid #D5C5AE;
  background: #FAF8F3;
  object-fit: contain;
}

.udklip_svg_ikon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid var(--udklip_accent, #D5C5AE);
  background: #FAF8F3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--udklip_accent, #2C5B75);
  flex-shrink: 0;
}

.udklip_svg_ikon svg {
  width: 18px;
  height: 18px;
}

.plakat_svg_emblem {
  width: 100%;
  height: 100%;
  border-radius: 50px 50px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--plakat_lys, #ECF2F6);
  color: var(--plakat_accent, #2C5B75);
}

.plakat_svg_emblem svg {
  width: 54px;
  height: 54px;
}

.udklip_begreb_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 17px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  border-bottom: 1.5px solid #E5D6BE;
  padding-bottom: 4px;
}

.udklip_forklaring {
  font-size: 13.2px;
  color: #3E3328;
  line-height: 1.45;
  flex: 1;
}

.udklip_spoergsmaal {
  background: linear-gradient(135deg, #FCF7EB 0%, #F4E9D2 100%);
  border: 1px solid #E2CCA0;
  border-left: 4px solid var(--bib_okker);
  padding: 8px 10px;
  font-size: 12.2px;
  color: var(--farve_tekst_hoved);
  border-radius: 8px;
}

.udklip_ark_fodnote {
  margin-top: 20px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--farve_tekst_daempet);
  border-top: 1.5px dashed #D5C5AE;
  padding-top: 12px;
}

/* ENKELT GENRE PLAKAT — NORDISK BIBLIOTEKSUDSTILLING */
.plakat_ramme_enkelt {
  background: #FAF8F3;
  border: 2.5px solid #C8B294;
  border-top: 7px solid var(--plakat_accent, var(--bib_fjord));
  border-radius: 22px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
}

.plakat_enkelt_top {
  background: linear-gradient(135deg, var(--plakat_lys, #ECF2F6) 0%, #FAF5EC 100%);
  border: 1.5px solid var(--plakat_kant, #D5C5AE);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  gap: 22px;
  align-items: center;
}

.plakat_figur_niche {
  width: 122px;
  height: 122px;
  border-radius: 58px 58px 18px 18px;
  background: #FFFFFF;
  border: 2.5px solid #D5C5AE;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.plakat_stor_figur {
  width: 100%;
  height: 100%;
  border-radius: 50px 50px 12px 12px;
  object-fit: contain;
  background: #FFFFFF;
}

.plakat_enkelt_titelblok {
  flex: 1;
}

.plakat_overtitel {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.9px;
  color: var(--plakat_accent, var(--bib_fjord));
  background: #FFFFFF;
  border: 1px solid var(--plakat_kant, #D5C5AE);
  border-radius: var(--radius_pill);
  padding: 3px 10px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.plakat_enkelt_titelblok h1 {
  font-family: var(--skrifttype_overskrift);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--farve_tekst_hoved);
  margin: 0 0 4px 0;
}

.plakat_enkelt_undertitel {
  font-size: 15px;
  font-weight: 700;
  color: var(--plakat_accent, var(--bib_okker_mork));
  margin-bottom: 6px;
}

.plakat_enkelt_pitch {
  font-size: 14px;
  color: #463C32;
  line-height: 1.48;
  margin: 0;
}

.plakat_enkelt_krop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 720px) {
  .plakat_enkelt_krop {
    grid-template-columns: 1fr;
  }
  .plakat_enkelt_top {
    flex-direction: column;
    text-align: center;
  }
}

.plakat_kolonne {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.plakat_sektionsboks {
  background: #FFFFFF;
  border: 1.5px solid #DED1BC;
  border-left: 5px solid var(--plakat_accent, var(--bib_fjord));
  border-radius: 14px;
  padding: 14px 16px;
}

.plakat_sektionsboks.gul {
  background: linear-gradient(135deg, #FCF7EB 0%, #F5EBD4 100%);
  border: 1.5px solid #DFC690;
  border-left: 5px solid var(--bib_okker);
}

.plakat_sektionsboks h3 {
  font-family: var(--skrifttype_overskrift);
  font-size: 15.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  margin: 0 0 8px 0;
}

.plakat_sektionsboks ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
}

.plakat_sektionsboks li {
  font-size: 13.2px;
  color: #3E3328;
  position: relative;
  padding-left: 15px;
  line-height: 1.4;
}

.plakat_sektionsboks li::before {
  content: "•";
  color: var(--plakat_accent, var(--bib_okker));
  font-size: 15px;
  font-weight: 900;
  position: absolute;
  left: 0;
  top: -1px;
}

.plakat_begreber_liste {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.plakat_begreb_item {
  font-size: 12.8px;
  line-height: 1.42;
  color: #3E3328;
}

.plakat_ord_sky {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.plakat_ord_tag {
  background: #FAF6EE;
  border: 1.5px solid #D5C5AE;
  border-radius: var(--radius_pill);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #3E3328;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.plakat_bundlinje {
  display: flex;
  justify-content: flex-end;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--farve_tekst_daempet);
  border-top: 1.5px solid #DED1BC;
  padding-top: 10px;
}

/* DEN STORE FÆLLESPLAKAT */
.faelles_plakat_ramme {
  background: #FAF8F3;
  border: 2.5px solid #C8B294;
  border-top: 7px solid var(--bib_eg);
  border-radius: 22px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.faelles_plakat_hoved {
  text-align: center;
  background: linear-gradient(135deg, #F4ECE0 0%, #EAE0CF 100%);
  border: 1.5px solid #D5C5AE;
  border-radius: 16px;
  padding: 16px 20px;
}

.faelles_top_badge {
  display: inline-block;
  background: #FFFFFF;
  border: 1px solid #D5C5AE;
  border-radius: var(--radius_pill);
  padding: 3px 11px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: #5C4F42;
}

.faelles_plakat_hoved h1 {
  font-family: var(--skrifttype_overskrift);
  font-size: 30px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  margin: 6px 0 4px;
}

.faelles_plakat_hoved p {
  font-size: 14.5px;
  color: var(--farve_tekst_daempet);
  margin: 0;
}

.faelles_plakat_gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.faelles_genre_felt {
  background: #FFFFFF;
  border: 1.5px solid #DED1BC;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.faelles_felt_top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.faelles_genre_billede {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1.5px solid #D5C5AE;
  background: #FAF8F3;
  object-fit: contain;
}

.faelles_felt_top h3 {
  font-family: var(--skrifttype_overskrift);
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--farve_tekst_hoved);
  margin: 0;
}

.faelles_undertitel {
  font-size: 11.5px;
  color: var(--bib_okker_mork);
  font-weight: 700;
}

.faelles_pitch {
  font-size: 12.2px;
  line-height: 1.4;
  color: #463C32;
  margin: 0;
}

.faelles_fakta {
  background: #F4ECE0;
  border: 1px solid #E2D5C1;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 11.5px;
  color: var(--farve_tekst_hoved);
}

.faelles_ord {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.faelles_tag {
  background: #FAF6EE;
  border: 1px solid #D5C5AE;
  border-radius: var(--radius_pill);
  padding: 3px 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #3E3328;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.faelles_billede_felt {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF5EC 100%);
}

.faelles_billede_ramme {
  width: 100%;
  height: 98px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid #D5C5AE;
  background: #F4ECE0;
}

.faelles_laesning_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

.faelles_billede_tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.faelles_billede_tekst h3 {
  font-family: var(--skrifttype_overskrift);
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--farve_tekst_hoved);
  margin: 0;
}

.faelles_billede_tekst .faelles_undertitel {
  font-size: 11.5px;
  color: var(--bib_okker_mork);
  font-weight: 700;
}

.faelles_plakat_bund {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
  border-top: 1.5px solid #DED1BC;
  padding-top: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.faelles_tip {
  font-size: 12.5px;
  color: var(--farve_tekst_daempet);
}

.faelles_copyright {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
}

.print_ark_ekstra {
  display: none;
}

/* GENRE & TEKST TJEKLISTE FORFATTERVÆRKTØJ */
.tjekliste_workspace {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tjekliste_topbjaelke {
  background: linear-gradient(135deg, #F4ECE0 0%, #EAE0CF 100%);
  border: 2px solid #D5C5AE;
  border-radius: 20px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* BÅND 1: Tophoved (Titel + Afdelingsskifter til venstre • Status + Handlinger til højre) */
.tjekliste_top_hoved {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1.5px solid #DED1BE;
}

.tjekliste_top_venstre {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.tjekliste_titel_pill_raekke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tjekliste_hovedtitel {
  font-family: var(--skrifttype_overskrift);
  font-size: 25px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  margin: 0;
  line-height: 1.1;
}

/* Segmenteret omskifter til Fiktionsgenrer / Arbejdsformer */
.tjekliste_afdeling_skifter {
  display: inline-flex;
  align-items: center;
  background: #DFD1BC;
  border: 1.5px solid #CBB89D;
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}

.tjekliste_afdeling_knap {
  background: transparent;
  border: none;
  border-radius: 7px;
  height: 30px;
  padding: 0 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  box-shadow: none !important;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.tjekliste_afdeling_titel {
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: #544638;
  transition: color 0.14s ease;
}

.tjekliste_afdeling_knap:hover:not(.aktiv) {
  background: rgba(255, 255, 255, 0.55);
}

.tjekliste_afdeling_knap.aktiv {
  box-shadow: none !important;
}

.tjekliste_afdeling_knap.afdeling_fjord.aktiv {
  background: var(--bib_fjord);
}

.tjekliste_afdeling_knap.afdeling_skov.aktiv {
  background: var(--bib_skov);
}

.tjekliste_afdeling_knap.aktiv .tjekliste_afdeling_titel {
  color: #FFFFFF;
}

/* Højre værktøjslinje i præcis samme 38px højde og 10px hjørneradius */
.tjekliste_top_meta_og_barometer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tjekliste_kompakt_barometer {
  background: #FAF8F3;
  border: 1.5px solid #D5C5AE;
  border-radius: 10px;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tjekliste_baro_antal {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  white-space: nowrap;
}

.tjekliste_bar_spor {
  width: 74px;
  height: 7px;
  background: #E5D9C5;
  border-radius: var(--radius_pill);
  overflow: hidden;
  flex-shrink: 0;
}

.tjekliste_bar_fyld {
  height: 100%;
  width: 0%;
  background: var(--bib_skov);
  border-radius: var(--radius_pill);
  transition: width 0.35s ease, background 0.3s ease;
}

.tjekliste_baro_procent {
  font-size: 12px;
  font-weight: 900;
  color: var(--bib_skov_mork);
  background: #ECF3EB;
  border: 1px solid #BDCEBB;
  border-radius: 6px;
  padding: 2px 7px;
  line-height: 1.2;
}

.tjekliste_top_handlinger {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.tjekliste_print_knap {
  background: var(--bib_fjord);
  color: #FFFFFF;
  border: 1.5px solid var(--bib_fjord_mork);
  border-radius: 10px;
  height: 38px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: background-color 0.14s ease, transform 0.14s ease;
}

.tjekliste_print_knap:hover {
  background: var(--bib_fjord_mork);
  transform: translateY(-1px);
  box-shadow: none !important;
}

.tjekliste_nulstil_knap {
  background: #FAF8F3;
  color: var(--farve_tekst_hoved);
  border: 1.5px solid #C8B294;
  border-radius: 10px;
  height: 38px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.tjekliste_nulstil_knap:hover {
  background: #FFFFFF;
  border-color: #9C8362;
  box-shadow: none !important;
}

/* BÅND 2: Genre- og arbejdsform-vælger fra venstre til højre kant */
.tjekliste_vaelger_raekke {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tjekliste_mini_kategorier {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mini_kat_knap {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1.5px solid #D5C5AE;
  background: #FAF8F3;
  color: #5C4F42;
  cursor: pointer;
  transition: all 0.14s ease;
  box-shadow: none !important;
}

.mini_kat_knap:hover {
  background: #FFFFFF;
  color: var(--farve_tekst_hoved);
  border-color: #B49D7E;
}

.mini_kat_knap.valgt {
  background: var(--bib_skov);
  color: #FFFFFF;
  border-color: var(--bib_skov_mork);
}

.tjekliste_chips_gruppe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tjekliste_fiktion_raekke .valg_chip {
  flex: 1 1 auto;
  justify-content: center;
}

.tjekliste_chips_gruppe .valg_chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  height: 38px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1.5px solid #D7C8B2;
  background: #FAF8F4;
  color: var(--farve_tekst_hoved);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: none !important;
  transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}

.chip_bog_ryg {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--chip_accent, var(--bib_fjord));
  flex-shrink: 0;
}

.tjekliste_chips_gruppe .valg_chip:hover {
  background: #FFFFFF;
  border-color: #B09878;
  transform: translateY(-1px);
  box-shadow: none !important;
}

.tjekliste_chips_gruppe .valg_chip.valgt {
  background: #FFFFFF;
  color: var(--farve_tekst_hoved);
  border: 2px solid var(--chip_accent, var(--bib_fjord));
  font-weight: 800;
}

/* BÅND 3: De 3 visningsfaner i 3 lige brede kolonner nederst */
.tjekliste_fane_bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 12px;
  border-top: 1.5px solid #DED1BE;
}

.tjekliste_fane_knap {
  background: #FAF8F4;
  border: 1.5px solid #D7C8B2;
  border-radius: 11px;
  height: 42px;
  padding: 0 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  box-shadow: none !important;
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}

.tjekliste_fane_trin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  background: #EAE0CF;
  color: #544638;
  flex-shrink: 0;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.tjekliste_fane_knap.fane_fjord.aktiv .tjekliste_fane_trin {
  background: var(--bib_fjord);
  color: #FFFFFF;
}

.tjekliste_fane_knap.fane_okker.aktiv .tjekliste_fane_trin {
  background: var(--bib_okker);
  color: #FFFFFF;
}

.tjekliste_fane_knap.fane_skov.aktiv .tjekliste_fane_trin {
  background: var(--bib_skov);
  color: #FFFFFF;
}

.tjekliste_fane_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 14px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
}

.tjekliste_fane_knap:hover {
  background: #FFFFFF;
  border-color: #B49D7E;
  transform: translateY(-1px);
  box-shadow: none !important;
}

.tjekliste_fane_knap.aktiv {
  background: #FFFFFF;
  border-width: 2px;
  box-shadow: none !important;
}

.tjekliste_fane_knap.fane_fjord.aktiv {
  border-color: var(--bib_fjord);
  background: linear-gradient(180deg, #FFFFFF 0%, #ECF2F6 100%);
}

.tjekliste_fane_knap.fane_okker.aktiv {
  border-color: var(--bib_okker);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF3DF 100%);
}

.tjekliste_fane_knap.fane_skov.aktiv {
  border-color: var(--bib_skov);
  background: linear-gradient(180deg, #FFFFFF 0%, #ECF3EB 100%);
}

/* Fane 1: Fokusvisning med 2 kolonner */
.tjekliste_fokus_grid {
  display: grid;
  grid-template-columns: 295px 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 860px) {
  .tjekliste_fokus_grid {
    grid-template-columns: 1fr;
  }
}

.tjekliste_trin_kolonne {
  display: flex;
  flex-direction: column;
}

.tjekliste_trin_knapper_liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tjekliste_trin_knap {
  display: grid;
  grid-template-columns: 5px 24px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 13px;
  border: 1.5px solid #D7C8B2;
  background: #FAF8F4;
  text-align: left;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
  box-shadow: none !important;
  width: 100%;
}

.tjekliste_trin_ryg {
  width: 5px;
  height: 22px;
  border-radius: 3px;
  background: var(--trin_accent, var(--bib_fjord));
}

.tjekliste_trin_knap:hover {
  background: #FFFFFF;
  border-color: #B49D7E;
  transform: translateY(-1px);
  box-shadow: none !important;
}

.tjekliste_trin_knap.aktiv {
  background: #FFFFFF;
  border-color: var(--trin_accent, var(--bib_fjord));
  border-width: 2px;
  box-shadow: none !important;
}

.tjekliste_trin_knap.tjekket {
  background: #F4F9F3;
  border-color: #A7C7A4;
}

.tjekliste_trin_indikator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #CBB99F;
  background: #F4ECE0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #5C4F42;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.tjekliste_trin_knap.tjekket .tjekliste_trin_indikator {
  background: var(--bib_skov);
  border-color: var(--bib_skov_mork);
  color: #FFFFFF;
}

.tjekliste_trin_titel {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  line-height: 1.28;
}

/* Højre kolonne: Læsesals-fokuskort */
.tjekliste_fokus_panel {
  display: flex;
  flex-direction: column;
}

.tjekliste_fokus_kort {
  background: #FAF8F3;
  border: 2px solid #D6C8B4;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 360px;
}

.tjekliste_bue_header {
  padding: 22px 28px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tjekliste_fokus_kicker {
  font-size: 12px;
  font-weight: 800;
  color: #6B5C4C;
  letter-spacing: 0.3px;
}

.tjekliste_fokus_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 24px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  margin: 2px 0;
  line-height: 1.2;
}

.tjekliste_fokus_spoergsmaal {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--farve_tekst_hoved);
  margin: 0;
}

.tjekliste_fokus_krop {
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.tjekliste_fokus_tip {
  background: linear-gradient(135deg, #FCF6E8 0%, #F4E6C9 100%);
  border: 1.5px solid #D5BA8C;
  border-left: 6px solid var(--bib_okker);
  padding: 12px 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tjekliste_tip_badge {
  background: var(--bib_okker_mork);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding: 4px 9px;
  border-radius: var(--radius_pill);
  flex-shrink: 0;
}

.tjekliste_tip_tekst {
  font-size: 13.8px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--farve_tekst_hoved);
  margin: 0;
}

.tjekliste_afkryds_raekke {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1.5px solid #E5D9C5;
  margin-top: auto;
}

.tjekliste_fokus_afkryds_knap {
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: var(--radius_pill);
  border: 2px solid var(--bib_skov);
  background: #ECF3EB;
  color: var(--bib_skov_mork);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all 0.15s ease;
  box-shadow: none !important;
}

.afkryds_ikon_cirkel {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bib_skov);
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--bib_skov_mork);
}

.tjekliste_fokus_afkryds_knap:hover {
  background: #DCEAD9;
  border-color: var(--bib_skov_mork);
  box-shadow: none !important;
}

.tjekliste_fokus_afkryds_knap.tjekket {
  background: var(--bib_skov);
  border-color: var(--bib_skov_mork);
  color: #FFFFFF;
}

.tjekliste_fokus_afkryds_knap.tjekket .afkryds_ikon_cirkel {
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: var(--bib_skov_mork);
}

.tjekliste_fokus_note_sektion {
  flex: 1 1 220px;
  display: flex;
}

.tjekliste_fokus_note_input {
  width: 100%;
  font-family: inherit;
  font-size: 13.8px;
  padding: 10px 14px;
  border-radius: 11px;
  border: 1.5px solid #D5C5AE;
  background: #FFFFFF;
  color: var(--farve_tekst_hoved);
  outline: none;
  transition: all 0.15s ease;
}

.tjekliste_fokus_note_input:focus {
  border-color: var(--bib_fjord);
  background: #FFFFFF;
}

.tjekliste_fokus_nav_bund {
  background: #F1E8DA;
  border-top: 1.5px solid #DDD0BA;
  padding: 13px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.tjekliste_nav_midt_info {
  font-size: 12.5px;
  font-weight: 800;
  color: #6B5C4C;
}

.tjekliste_nav_knap {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 18px;
  border-radius: var(--radius_pill);
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.14s ease;
}

.tjekliste_nav_knap.sekundaer {
  background: #FAF8F3;
  color: var(--farve_tekst_hoved);
  border: 1.5px solid #C8B294;
}

.tjekliste_nav_knap.sekundaer:hover:not(:disabled) {
  background: #FFFFFF;
  border-color: #9C8362;
}

.tjekliste_nav_knap.primaer {
  background: var(--bib_fjord);
  color: #FFFFFF;
  border: 1.5px solid var(--bib_fjord_mork);
}

.tjekliste_nav_knap.primaer:hover:not(:disabled) {
  background: var(--bib_fjord_mork);
}

/* Fane 2: Kendetegn og ordbank */
.tjekliste_kendetegn_boks {
  background: #FAF8F3;
  border: 2px solid #D6C8B4;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tjekliste_kendetegn_top {
  padding: 22px 28px;
  display: flex;
  gap: 18px;
  align-items: center;
}

.tjekliste_kendetegn_img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bib_fjord);
  background: #FFFFFF;
  flex-shrink: 0;
}

.tjekliste_kendetegn_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 23px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  margin: 6px 0 4px 0;
}

.tjekliste_kendetegn_intro {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--farve_tekst_hoved);
  margin: 0;
}

.tjekliste_kendetegn_krop {
  padding: 20px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tjekliste_kendetegn_sektion {
  background: #FFFFFF;
  border: 1.5px solid #DED1BE;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tjekliste_kendetegn_undertitel {
  font-family: var(--skrifttype_overskrift);
  font-size: 15px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
}

.tjekliste_ord_tags_raekke {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.tjekliste_ord_tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  background: #FBF3DF;
  border: 1.5px solid #DFC282;
  padding: 7px 14px;
  border-radius: var(--radius_pill);
  color: #6B4505;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.tjekliste_ord_tag:hover {
  background: #F6E6BD;
  border-color: #C49B45;
  transform: translateY(-1px);
  box-shadow: none !important;
}

.genre_ord_tag {
  font-family: inherit;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.genre_ord_tag:hover {
  background: #F6E6BD;
  border-color: #C49B45;
  transform: translateY(-1px);
  box-shadow: none !important;
}

/* Lille, enkelt pop-up vindue til ordforklaringer */
.ord_popup_overlay {
  position: fixed;
  inset: 0;
  background: rgba(35, 29, 24, 0.45);
  backdrop-filter: blur(2px);
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ord_popup_kort {
  width: 100%;
  max-width: 430px;
  background: #FAF8F3;
  border: 2px solid #D5C5AE;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: fadeInd 0.15s ease-out;
}

.ord_popup_top {
  background: #F4ECE0;
  border-bottom: 1.5px solid #E2D5C1;
  padding: 14px 18px 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ord_popup_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 20px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  margin: 0;
  line-height: 1.2;
}

.ord_popup_kryds {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #D5C5AE;
  background: #FFFFFF;
  color: var(--farve_tekst_hoved);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  box-shadow: none !important;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.ord_popup_kryds:hover {
  background: #EAE0CF;
  border-color: #B49D7E;
  box-shadow: none !important;
}

.ord_popup_krop {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ord_popup_tekst {
  font-size: 15px;
  line-height: 1.55;
  color: var(--farve_tekst_hoved);
  font-weight: 500;
  margin: 0;
}

.ord_popup_eksempel {
  background: #FFFFFF;
  border: 1.5px solid #E2D5C1;
  border-left: 4px solid var(--bib_okker);
  border-radius: 11px;
  padding: 10px 13px;
  font-size: 13.8px;
  line-height: 1.45;
  color: var(--farve_tekst_hoved);
}

.ord_popup_eksempel_label {
  font-weight: 800;
  color: #6B4505;
  margin-right: 4px;
}

/* Fane 3: Samlet oversigt */
.tjekliste_alle_punkter_oversigt {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tjekliste_oversigt_kort {
  background: #FAF8F3;
  border: 1.5px solid #D6C8B4;
  border-left: 6px solid var(--bib_fjord);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tjekliste_oversigt_kort.tjekket {
  background: #F4F9F3;
  border-color: #A7C7A4;
  border-left: 6px solid var(--bib_skov);
}

.tjekliste_oversigt_hoved {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.tjekliste_oversigt_check {
  margin-top: 3px;
  cursor: pointer;
  flex-shrink: 0;
}

.tjekliste_oversigt_info {
  flex: 1;
}

.tjekliste_oversigt_kat {
  font-size: 11px;
  font-weight: 900;
  color: var(--bib_fjord);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tjekliste_oversigt_kort.tjekket .tjekliste_oversigt_kat {
  color: var(--bib_skov_mork);
}

.tjekliste_oversigt_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 17px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  margin: 2px 0 4px 0;
}

.tjekliste_oversigt_spoergsmaal {
  font-size: 14px;
  line-height: 1.48;
  color: var(--farve_tekst_hoved);
  margin: 0;
}

.tjekliste_oversigt_note {
  font-size: 13px;
  color: var(--farve_tekst_hoved);
  background: #FFFFFF;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1.5px dashed #D5C5AE;
  margin-top: 8px;
}

/* Print visning under udskrift */
@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  html, body {
    background: white !important;
    color: black !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 210mm !important;
    min-height: 297mm !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body .topbjaelke,
  body .nav_knapper,
  body .skaber_topbjaelke,
  body .skaber_skabelon_bar,
  body .skaber_kontrol_panel,
  body .skaber_laerred_top,
  body .skaber_valgt_sektion,
  body .skaber_lag_panel,
  body .print_knap_stor,
  body .print_kontrol_top,
  body .print_handling_linje,
  body .canvas_mini_toolbar,
  body .forside_hero,
  body .portal_gitter,
  body .genre_stribe,
  body .print_ark_ekstra,
  .print_ark_ekstra {
    display: none !important;
  }

  .hoved_container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 210mm !important;
  }

  body .modul_visning {
    display: none !important;
  }

  /* 1. Bogforside udskrift: Fyld hele A4 arket rent */
  body.print_tilstand_bogforside,
  body.print_tilstand_bogforside html {
    height: 297mm !important;
    overflow: hidden !important;
  }

  body.print_tilstand_bogforside #modul_skaber {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    overflow: hidden !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
  }

  body.print_tilstand_bogforside .skaber_workspace,
  body.print_tilstand_bogforside .skaber_layout {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 210mm !important;
    height: 297mm !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: white !important;
    grid-template-columns: none !important;
  }

  body.print_tilstand_bogforside .skaber_visnings_panel,
  body.print_tilstand_bogforside .bogforside_scene_wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    position: static !important;
    overflow: hidden !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
  }

  body.print_tilstand_bogforside .bogforside_laerred {
    width: 340px !important;
    height: 490px !important;
    transform: scale(2.28) !important;
    transform-origin: center center !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 auto !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 2. Printcenter fælles container-nulstilling */
  body.print_tilstand_udklip #modul_print,
  body.print_tilstand_plakat #modul_print,
  body.print_tilstand_faelles #modul_print,
  body:not(.print_tilstand_bogforside):not(.print_tilstand_tjekliste) #modul_print.aktiv {
    display: block !important;
    width: 210mm !important;
    margin: 0 !important;
    padding: 8mm 10mm !important;
    box-sizing: border-box !important;
  }

  body.print_tilstand_udklip .print_kontrol_bjælke,
  body.print_tilstand_plakat .print_kontrol_bjælke,
  body.print_tilstand_faelles .print_kontrol_bjælke,
  #modul_print .print_kontrol_bjælke {
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 2a. Udklipskort udskrift */
  body.print_tilstand_udklip,
  body.print_tilstand_udklip .hoved_container {
    height: auto !important;
    overflow: visible !important;
  }

  body.print_tilstand_udklip #fane_plakater,
  body.print_tilstand_udklip #fane_faelles {
    display: none !important;
  }

  body.print_tilstand_udklip #fane_udklip,
  body.print_tilstand_udklip #udklip_ark_visning {
    display: block !important;
    width: 100% !important;
  }

  body.print_tilstand_udklip .udklip_ark_ramme {
    page-break-inside: auto !important;
    break-inside: auto !important;
    height: auto !important;
    border: none !important;
    padding: 0 !important;
  }

  body.print_tilstand_udklip .udklip_kort_gitter {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  body.print_tilstand_udklip .udklip_kort {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    padding: 12px !important;
  }

  /* 2b. Enkelt Genre Plakat udskrift ("Print denne genreplakat") */
  body.print_tilstand_plakat #fane_udklip,
  body.print_tilstand_plakat #fane_faelles {
    display: none !important;
  }

  body.print_tilstand_plakat #fane_plakater,
  body.print_tilstand_plakat #plakat_enkelt_visning {
    display: block !important;
    width: 100% !important;
  }

  body.print_tilstand_plakat .plakat_ramme_enkelt {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 18px 20px !important;
    gap: 14px !important;
    border-width: 2.5px !important;
    box-shadow: none !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* 2c. Stor Fællesplakat udskrift */
  body.print_tilstand_faelles #fane_udklip,
  body.print_tilstand_faelles #fane_plakater {
    display: none !important;
  }

  body.print_tilstand_faelles #fane_faelles,
  body.print_tilstand_faelles #plakat_faelles_visning {
    display: block !important;
    width: 100% !important;
  }

  body.print_tilstand_faelles .faelles_plakat_ramme {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 14px 16px !important;
    gap: 10px !important;
    box-shadow: none !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  body.print_tilstand_faelles .faelles_plakat_gitter {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  body.print_tilstand_faelles .faelles_genre_felt {
    padding: 9px 11px !important;
    gap: 4px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  body.print_tilstand_faelles .faelles_billede_ramme {
    height: 68px !important;
  }

  /* 3. Tjekliste udskrift */
  body.print_tilstand_tjekliste,
  body.print_tilstand_tjekliste .hoved_container {
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.print_tilstand_tjekliste #modul_tjekliste {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10mm 12mm !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.print_tilstand_tjekliste .tjekliste_top_handlinger,
  body.print_tilstand_tjekliste .tjekliste_kontrol_linje,
  body.print_tilstand_tjekliste .tjekliste_vaelger_raekke,
  body.print_tilstand_tjekliste .tjekliste_fane_bar,
  body.print_tilstand_tjekliste #tjekliste_fane_indhold_fokus,
  body.print_tilstand_tjekliste #tjekliste_fane_indhold_kendetegn {
    display: none !important;
  }

  body.print_tilstand_tjekliste .tjekliste_top_hoved {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  body.print_tilstand_tjekliste #tjekliste_fane_indhold_oversigt {
    display: block !important;
  }

  body.print_tilstand_tjekliste .tjekliste_oversigt_kort {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
}

/* Responsiv */
@media (max-width: 900px) {
  .portal_gitter_varm {
    grid-template-columns: 1fr;
  }
  .fremhaevet_banner {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: 16px;
  }
  .print_hub_banner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 16px;
  }
  .print_hub_hoejre {
    align-items: center;
  }
  .leksikon_layout {
    grid-template-columns: 1fr;
  }
  .skaber_layout {
    grid-template-columns: 1fr;
  }
  .kamp_scene {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 680px) {
  .topbjaelke_grupper {
    flex-direction: column;
  }
  .nav_klynge_knapper {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   ARBEJDSFORMER OG TRAENINGSBANEN
   ========================================================================== */

/* Leksikon tilstandsvælger: To nordiske biblioteksvinger */
.leksikon_tilstand_vaelger {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.leksikon_tilstand_knap {
  background: #FFFFFF;
  border: 2px solid #D8C8B0;
  border-top: 5px solid #C6AC86;
  border-radius: 18px;
  padding: 16px 20px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: inherit;
  box-shadow: none !important;
  transition: all 0.15s ease;
}

#leksikon_fane_indhold {
  border-top-color: var(--bib_fjord);
}

#leksikon_fane_arbejde {
  border-top-color: var(--bib_skov);
}

.leksikon_tilstand_knap:hover {
  background: #FAF8F3;
  border-color: var(--bib_eg);
  transform: translateY(-1px);
  box-shadow: none !important;
}

#leksikon_fane_indhold.aktiv {
  background: linear-gradient(135deg, #ECF2F6 0%, #FFFFFF 100%);
  border-color: var(--bib_fjord);
  border-top-width: 5px;
  box-shadow: none !important;
}

#leksikon_fane_arbejde.aktiv {
  background: linear-gradient(135deg, #ECF3EB 0%, #FFFFFF 100%);
  border-color: var(--bib_skov);
  border-top-width: 5px;
  box-shadow: none !important;
}

.tilstand_ikon {
  font-size: 13px;
  color: var(--bib_eg_mork);
  margin-bottom: 2px;
}

#leksikon_fane_indhold.aktiv .tilstand_ikon {
  color: var(--bib_fjord);
}

#leksikon_fane_arbejde.aktiv .tilstand_ikon {
  color: var(--bib_skov);
}

.tilstand_hovedtekst {
  font-family: var(--skrifttype_overskrift);
  font-size: 19px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
}

.tilstand_undertitel {
  font-size: 13px;
  font-weight: 600;
  color: var(--farve_tekst_daempet);
}

/* Egetræs-kategoribar for arbejdsformer */
.arbejdsformer_kategori_bar {
  background: #F4ECE0;
  border: 2px solid #D2BA95;
  border-radius: 16px;
  padding: 12px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.kategori_bar_label {
  font-family: var(--skrifttype_overskrift);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
}

.arbejdsformer_kategori_chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bib_kat_chip.valg_chip {
  background: #FFFFFF;
  border: 1.5px solid #D6C3A5;
  border-bottom: 3px solid #C2A882;
  border-radius: var(--radius_pill);
  padding: 7px 15px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--farve_tekst_hoved);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.14s ease;
}

.bib_kat_chip.valg_chip:hover {
  background: #FFFDF8;
  border-color: var(--bib_eg_mork);
  transform: translateY(-1px);
}

.bib_kat_chip.valg_chip.valgt {
  background: var(--kat_farve, var(--bib_skov));
  border-color: var(--kat_farve, var(--bib_skov));
  color: #FFFFFF;
}

.bib_kat_chip.valg_chip.valgt .arbejdsform_ikon_prik {
  background: #FFFFFF !important;
}

.arbejdsform_ikon_prik {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Arbejdsform: 6 faste kendetegn i arkitektonisk 3x2 gitter */
.arbejdsform_kendetegn_gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.arbejdsform_kendetegn_kort {
  background: #FAF8F4;
  border: 1.5px solid #E2D6C3;
  border-radius: 16px;
  padding: 15px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: transform 0.14s ease, border-color 0.14s ease;
}

.arbejdsform_kendetegn_kort:hover {
  background: #FFFFFF;
  transform: translateY(-2px);
}

.arbejdsform_kendetegn_nr {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--skrifttype_overskrift);
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

.arbejdsform_kendetegn_tekst {
  font-size: 13.8px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--farve_tekst_hoved);
}

/* 2-kolonne struktur- og greb-kort under kendetegn */
.leksikon_fakta_duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.leksikon_niche_boks {
  background: #FAF8F4;
  border: 1.5px solid #DED1BC;
  border-radius: 18px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.niche_boks_overtitel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.niche_boks_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 18px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  margin: 0 0 4px;
}

.niche_boks_tekst {
  font-size: 14px;
  line-height: 1.55;
  color: #463C32;
  margin: 0;
}

.niche_boks_top_raekke {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.niche_klik_hint {
  font-size: 10.5px;
  font-weight: 700;
  color: #8C6D32;
  background: #FBF3DF;
  border: 1px solid #E5CE9A;
  border-radius: var(--radius_pill);
  padding: 2px 9px;
}

.leksikon_greb_stak {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.arbejdsform_greb_tag {
  border: 1.5px solid #DFC282;
  border-radius: var(--radius_pill);
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 700;
  background: #FBF3DF;
  color: #784D06;
  font-family: var(--skrifttype_broed);
  text-align: center;
}

.klikbar_greb_knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
  box-shadow: none;
}

.klikbar_greb_knap:hover {
  background: #F5E4BC;
  border-color: #C88A19;
  color: #543502;
  transform: translateY(-1px);
}

.greb_knap_ikon {
  display: none !important;
}

/* Pop op boks til Særlige faglige greb */
.greb_popup_overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 22, 18, 0.58);
  backdrop-filter: blur(4px);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.greb_popup_kort {
  width: 100%;
  max-width: 640px;
  background: #FAF8F3;
  border: 2.5px solid #CFB997;
  border-top: 6px solid var(--bib_okker);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: fadeInd 0.18s ease-out;
}

.greb_popup_top {
  background: linear-gradient(180deg, #FDF8EC 0%, #F7EFE0 100%);
  border-bottom: 1.5px solid #E5D6BE;
  padding: 18px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.greb_popup_kicker {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.9px;
  color: var(--bib_okker_mork);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.greb_popup_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 24px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  margin: 0;
  line-height: 1.15;
}

.greb_popup_luk {
  background: #FFFFFF;
  border: 1.5px solid #D5C5AE;
  border-radius: var(--radius_pill);
  padding: 6px 14px;
  font-family: var(--skrifttype_broed);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  cursor: pointer;
  box-shadow: none;
  flex-shrink: 0;
}

.greb_popup_luk:hover {
  background: #EFE6D5;
  border-color: #B8A386;
}

.greb_popup_krop {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.greb_popup_visuel_boks {
  background: #FFFFFF;
  border: 1.5px solid #DFD2BE;
  border-radius: 16px;
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.greb_visuel_etiket,
.greb_sektion_label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.85px;
  color: var(--bib_fjord);
  text-transform: uppercase;
}

.greb_visuel_svg {
  width: 100%;
  height: auto;
  max-height: 145px;
  border-radius: 10px;
  display: block;
}

.greb_popup_forklaring_boks {
  background: #FFFFFF;
  border: 1.5px solid #E2D6C3;
  border-left: 5px solid var(--bib_fjord);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.greb_popup_beskrivelse {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--farve_tekst_hoved);
  font-weight: 600;
  margin: 0;
}

.greb_popup_eksempel_duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.greb_eksempel_kort {
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.greb_eksempel_kort.foer {
  background: #F5F1EA;
  border: 1.5px solid #DCD2C2;
}

.greb_eksempel_kort.efter {
  background: #ECF3EB;
  border: 1.5px solid #B7CEB4;
}

.greb_eksempel_badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 8px;
  border-radius: var(--radius_pill);
}

.greb_eksempel_kort.foer .greb_eksempel_badge {
  background: #E5DDD0;
  color: #5A5046;
}

.greb_eksempel_kort.efter .greb_eksempel_badge {
  background: #386634;
  color: #FFFFFF;
}

.greb_eksempel_tekst {
  font-size: 13.2px;
  line-height: 1.48;
  color: var(--farve_tekst_hoved);
  font-style: italic;
  font-weight: 600;
  margin: 0;
}

.greb_popup_raad_linje {
  background: linear-gradient(135deg, #FCF6E8 0%, #F4E6C9 100%);
  border: 1.5px solid #D5BA8C;
  border-radius: 14px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.greb_raad_ikon {
  background: var(--bib_skov);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding: 5px 9px;
  border-radius: var(--radius_pill);
  flex-shrink: 0;
}

.greb_raad_tekst {
  font-size: 13.2px;
  font-weight: 700;
  color: var(--farve_tekst_hoved);
  margin: 0;
  line-height: 1.42;
}

.greb_popup_bund {
  background: #F1E9DA;
  border-top: 1.5px solid #DDD0BA;
  padding: 12px 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.greb_bund_label {
  font-size: 11px;
  font-weight: 800;
  color: #63584E;
}

.greb_bund_knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.greb_popup_skift_knap {
  background: #FFFFFF;
  border: 1.5px solid #D5C5AE;
  border-radius: var(--radius_pill);
  padding: 5px 12px;
  font-family: var(--skrifttype_broed);
  font-size: 12px;
  font-weight: 700;
  color: var(--farve_tekst_hoved);
  cursor: pointer;
  box-shadow: none;
}

.greb_popup_skift_knap.aktiv {
  background: var(--bib_okker);
  border-color: var(--bib_okker_mork);
  color: #FFFFFF;
}

/* Forfatterens læseniche-råd i bunden */
.leksikon_raad_niche {
  background: linear-gradient(135deg, #FCF6E8 0%, #F4E6C9 100%);
  border: 2px solid #D5BA8C;
  border-radius: 18px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
}

.raad_niche_cirkel {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.7px;
  border: 3px solid #FFFFFF;
  flex-shrink: 0;
}

.raad_niche_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 3px;
}

.raad_niche_tekst {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.48;
  color: var(--farve_tekst_hoved);
  margin: 0;
}

@media (max-width: 980px) {
  .arbejdsform_kendetegn_gitter {
    grid-template-columns: repeat(2, 1fr);
  }
  .leksikon_fakta_duo,
  .genre_gitter_sektioner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .leksikon_tilstand_vaelger,
  .arbejdsform_kendetegn_gitter {
    grid-template-columns: 1fr;
  }
  .leksikon_bue_header {
    grid-template-columns: 1fr;
  }
}

/* Traeningsbanen: Nordisk Bibliotek */
.traening_hero {
  background: linear-gradient(135deg, #F4ECE0 0%, #EAE0CF 100%);
  border: 2px solid #D5C5AE;
  border-radius: 20px;
  padding: 18px 26px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.traening_hovedtitel {
  font-family: var(--skrifttype_overskrift);
  font-size: 28px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  margin: 0;
  line-height: 1.15;
}

.traening_faner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #EDE3D2 0%, #E3D6C1 100%);
  border: 2px solid #CEBEA6;
  border-bottom: 5px solid #B8A386;
  border-radius: 20px;
  margin-bottom: 20px;
}

.traening_fane_knap {
  background: #FAF8F4;
  border: 1.5px solid #D7C8B2;
  border-radius: 14px;
  padding: 12px 15px;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 7px 1fr;
  align-items: center;
  gap: 11px;
  font-family: inherit;
  box-shadow: none !important;
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}

.traening_fane_ryg {
  width: 7px;
  height: 36px;
  border-radius: 4px;
  background: var(--bib_okker);
}

.traening_fane_knap.fane_okker .traening_fane_ryg { background: var(--bib_okker); }
.traening_fane_knap.fane_skov .traening_fane_ryg { background: var(--bib_skov); }
.traening_fane_knap.fane_fjord .traening_fane_ryg { background: var(--bib_fjord); }
.traening_fane_knap.fane_terrakotta .traening_fane_ryg { background: var(--bib_terrakotta); }

.traening_fane_tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.traening_fane_knap:hover {
  background: #FFFFFF;
  border-color: #B49D7E;
  transform: translateY(-1px);
  box-shadow: none !important;
}

.traening_fane_knap.aktiv {
  background: #FFFFFF;
  border-width: 2px;
  box-shadow: none !important;
}

.traening_fane_knap.fane_okker.aktiv {
  border-color: var(--bib_okker);
  background: linear-gradient(135deg, #FFFFFF 0%, #FDF8EC 100%);
}
.traening_fane_knap.fane_skov.aktiv {
  border-color: var(--bib_skov);
  background: linear-gradient(135deg, #FFFFFF 0%, #ECF3EB 100%);
}
.traening_fane_knap.fane_fjord.aktiv {
  border-color: var(--bib_fjord);
  background: linear-gradient(135deg, #FFFFFF 0%, #ECF2F6 100%);
}
.traening_fane_knap.fane_terrakotta.aktiv {
  border-color: var(--bib_terrakotta);
  background: linear-gradient(135deg, #FFFFFF 0%, #FCEEEB 100%);
}

.fane_titel_linje {
  font-family: var(--skrifttype_overskrift);
  font-size: 16.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  line-height: 1.2;
}

.fane_undertitel {
  font-size: 12px;
  font-weight: 600;
  color: var(--farve_tekst_daempet);
}

.traening_fane_container {
  width: 100%;
}

.traening_kort {
  background: #FFFFFF;
  border: 2px solid #D5C7B2;
  border-radius: 24px;
  padding: 0;
  margin-bottom: 24px;
  overflow: hidden;
}

.traening_bue_header {
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.traening_rum_krop {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.traening_score_badge {
  background: #FFFFFF;
  border: 2px solid #D5BA8C;
  border-radius: var(--radius_pill);
  padding: 6px 16px;
  font-size: 13.5px;
  font-weight: 900;
  color: var(--bib_okker_mork);
  flex-shrink: 0;
}

.traening_spoergsmaal {
  font-family: var(--skrifttype_overskrift);
  font-size: 23px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  margin: 8px 0 0;
  line-height: 1.22;
}

.traening_header_beskrivelse {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--farve_tekst_daempet);
  margin: 6px 0 0;
  max-width: 780px;
}

.traening_citat_boks {
  background: linear-gradient(135deg, #FCF8F0 0%, #F5ECDC 100%);
  border: 1.5px solid #DED0BA;
  border-left: 6px solid var(--bib_fjord);
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.citat_etiket {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.9px;
  color: var(--bib_fjord);
  text-transform: uppercase;
}

.citat_tekst {
  font-family: var(--skrifttype_overskrift);
  font-size: 18px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.5;
  color: var(--farve_tekst_hoved);
}

.traening_svarmuligheder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.traening_svar_knap {
  position: relative;
  background: #FAF8F4;
  border: 1.5px solid #DED1BC;
  border-radius: 18px;
  padding: 20px 18px 18px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: inherit;
  box-shadow: none !important;
  overflow: hidden;
  transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}

.svar_farve_top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--bib_fjord);
}

.traening_svar_knap.svar_fjord .svar_farve_top { background: var(--bib_fjord); }
.traening_svar_knap.svar_skov .svar_farve_top { background: var(--bib_skov); }
.traening_svar_knap.svar_okker .svar_farve_top { background: var(--bib_okker); }

.svar_etiket_pill {
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius_pill);
  margin-bottom: 2px;
}

.traening_svar_knap.svar_fjord .svar_etiket_pill {
  background: #ECF2F6;
  color: var(--bib_fjord_mork);
}
.traening_svar_knap.svar_skov .svar_etiket_pill {
  background: #ECF3EB;
  color: var(--bib_skov_mork);
}
.traening_svar_knap.svar_okker .svar_etiket_pill {
  background: #FBF3DF;
  color: var(--bib_okker_mork);
}

.traening_svar_knap strong {
  font-family: var(--skrifttype_overskrift);
  font-size: 19px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
}

.traening_svar_knap span {
  font-size: 13px;
  color: var(--farve_tekst_daempet);
  font-weight: 600;
  line-height: 1.4;
}

.traening_svar_knap:hover:not(:disabled) {
  border-color: #B49D7E;
  background: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: none !important;
}

.traening_svar_knap.rigtigt_svar {
  background: #ECF3EB !important;
  border-color: var(--bib_skov) !important;
  color: var(--bib_skov_mork) !important;
}

.traening_svar_knap.forkert_svar {
  background: #FCEEEB !important;
  border-color: var(--bib_terrakotta) !important;
  color: var(--bib_terrakotta_mork) !important;
}

.traening_feedback_boks {
  border-radius: 16px;
  padding: 18px 22px;
}

.traening_feedback_boks.god {
  background: #ECF3EB;
  border: 2px solid #9EC09A;
  color: var(--bib_skov_mork);
}

.traening_feedback_boks.obs {
  background: #FBF3DF;
  border: 2px solid #DFC282;
  color: #69411D;
}

.traening_naeste_knap {
  background: var(--bib_skov);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius_pill);
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: none !important;
}

.traening_naeste_knap:hover {
  background: var(--bib_skov_mork);
  box-shadow: none !important;
}

.bib_automat_knap {
  background: var(--bib_fjord);
  color: #FFFFFF;
  border: 2px solid var(--bib_fjord_mork);
  border-radius: var(--radius_pill);
  padding: 11px 26px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: none !important;
  transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.bib_automat_knap:hover {
  background: var(--bib_fjord_mork);
  transform: translateY(-1px);
  box-shadow: none !important;
}

.bib_automat_knap .pil_ikon {
  font-size: 16px;
  line-height: 1;
}

.nt_proev_selv_knap {
  padding: 11px 22px 11px 26px;
}

.nt_tjek_knap {
  background: var(--bib_skov);
  border-color: var(--bib_skov_mork);
  padding: 10px 26px 10px 18px;
}

.nt_tjek_knap:hover {
  background: var(--bib_skov_mork);
}

.nt_knap_cirkel {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.traening_slut_kort {
  text-align: center;
  padding: 40px 28px;
}

.traening_flad_paastand {
  background: linear-gradient(135deg, #FCF6E8 0%, #F4E6C9 100%);
  border: 1.5px solid #D5BA8C;
  border-left: 6px solid var(--bib_okker);
  border-radius: 16px;
  padding: 16px 20px;
}

.flad_paastand_etiket {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--bib_okker_mork);
  letter-spacing: 0.75px;
  text-transform: uppercase;
}

.flad_paastand_tekst {
  font-family: var(--skrifttype_overskrift);
  font-size: 19px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  margin-top: 4px;
}

.traening_muligheder_stak {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.traening_svar_kort {
  background: #FAF8F4;
  border: 1.5px solid #DED1BC;
  border-radius: 16px;
  padding: 15px 18px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: inherit;
  box-shadow: none !important;
  transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}

.traening_svar_kort:hover:not(:disabled) {
  border-color: var(--bib_skov);
  background: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: none !important;
}

.traening_svar_kort.rigtigt_svar {
  background: #ECF3EB !important;
  border-color: var(--bib_skov) !important;
}

.traening_svar_kort.forkert_svar {
  background: #FCEEEB !important;
  border-color: var(--bib_terrakotta) !important;
}

.traening_svar_bogstav {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ECF2F6;
  border: 1.5px solid #BDD1DF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
  color: var(--bib_fjord_mork);
}

.traening_svar_bogstav.bogstav_fjord {
  background: #ECF2F6;
  border-color: #BDD1DF;
  color: var(--bib_fjord_mork);
}
.traening_svar_bogstav.bogstav_skov {
  background: #ECF3EB;
  border-color: #BDCEBB;
  color: var(--bib_skov_mork);
}
.traening_svar_bogstav.bogstav_okker {
  background: #FBF3DF;
  border-color: #E5CE9A;
  color: var(--bib_okker_mork);
}

.traening_svar_tekst {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.48;
  color: var(--farve_tekst_hoved);
}

/* Nyhedstrekanten: Omvendt trekant i nordisk bibliotekspalet */
.nyhedstrekant_ramme {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 12px auto 10px auto;
  max-width: 880px;
  width: 100%;
}

.nt_trapez_boks {
  position: relative;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.nt_trapez_boks:hover {
  transform: translateY(-2px);
}

.nt_trapez_boks.trin_1 {
  width: 100%;
  max-width: 880px;
  min-height: 64px;
}

.nt_trapez_boks.trin_2 {
  width: 84%;
  max-width: 740px;
  min-height: 70px;
}

.nt_trapez_boks.trin_3 {
  width: 67%;
  max-width: 588px;
  min-height: 78px;
}

.nt_trapez_boks.trin_4 {
  width: 48%;
  max-width: 420px;
  min-height: 220px;
}

.nt_trapez_svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.nt_trapez_indhold {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.nt_trapez_boks.trin_1 .nt_trapez_indhold {
  padding: 12px 64px;
}

.nt_trapez_boks.trin_2 .nt_trapez_indhold {
  padding: 12px 54px;
}

.nt_trapez_boks.trin_3 .nt_trapez_indhold {
  padding: 10px 44px;
}

.nt_trapez_boks.trin_4 .nt_trapez_indhold {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  padding: 0 20px;
}

.nt_trapez_boks.trin_4 .nt_tekst {
  max-width: 280px;
  margin: 0 auto;
}

.nt_poly {
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.poly_1 {
  fill: #ECF2F6;
  stroke: #25536E;
}

.poly_2 {
  fill: #ECF3EB;
  stroke: #386634;
}

.poly_3 {
  fill: #FBF3DF;
  stroke: #C88A19;
}

.poly_4 {
  fill: #F8F1EA;
  stroke: #8E5B2D;
}

.nt_spids_boks {
  display: none;
}

.nt_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 15.5px;
  font-weight: 800;
  margin-bottom: 4px;
}

.nt_tekst {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--farve_tekst_hoved);
  font-weight: 600;
}

/* Interaktiv Nyhedstrekant: Prøv selv */
.nt_vaelger_boks {
  background: #F4ECE0;
  border: 1.5px solid #D5C5AE;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nt_sektion_undertitel {
  font-family: var(--skrifttype_overskrift);
  font-size: 15px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
}

.nt_overskrifter_gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 860px) {
  .nt_overskrifter_gitter {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .nt_overskrifter_gitter {
    grid-template-columns: 1fr;
  }
}

.nt_overskrift_knap {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #FAF8F4;
  border: 1.5px solid #D5C5AE;
  border-radius: 11px;
  padding: 8px 11px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.nt_overskrift_knap:hover {
  background: #FFFFFF;
  border-color: #B09878;
  transform: translateY(-1px);
  box-shadow: none !important;
}

.nt_overskrift_knap.aktiv {
  background: #FFFFFF;
  border: 2px solid var(--bib_fjord);
  box-shadow: none !important;
}

.nt_overskrift_knap.loest {
  background: #F4F9F3;
  border-color: #A7C7A4;
}

.nt_overskrift_knap.loest.aktiv {
  border: 2px solid var(--bib_skov);
}

.nt_overskrift_nr {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #EAE0CF;
  border: 1.5px solid #CBB99F;
  color: #5C4F42;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nt_overskrift_knap.aktiv .nt_overskrift_nr {
  background: var(--bib_fjord);
  border-color: var(--bib_fjord_mork);
  color: #FFFFFF;
}

.nt_overskrift_knap.loest .nt_overskrift_nr {
  background: var(--bib_skov);
  border-color: var(--bib_skov_mork);
  color: #FFFFFF;
}

.nt_overskrift_tekst {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--farve_tekst_hoved);
  line-height: 1.25;
}

.nt_arbejds_boks {
  background: #FFFFFF;
  border: 1.5px solid #D6C8B4;
  border-radius: 16px;
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nt_valgt_artikel_header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1.5px solid #EAE0CF;
}

.nt_valgt_etiket {
  font-size: 12px;
  font-weight: 800;
  color: #6B5C4C;
}

.nt_valgt_overskrift {
  font-family: var(--skrifttype_overskrift);
  font-size: 19px;
  font-weight: 900;
  color: var(--bib_fjord_mork);
  margin: 0;
}

.nt_saetnings_liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

@media (max-width: 760px) {
  .nt_saetnings_liste {
    grid-template-columns: 1fr;
  }
}

.nt_saetning_kort {
  background: #FAF8F3;
  border: 1.5px solid #CFB997;
  border-left: 5px solid var(--bib_fjord);
  border-radius: 12px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: grab;
  user-select: none;
  transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}

.nt_saetning_kort:hover {
  background: #FFFFFF;
  border-color: var(--bib_fjord);
  transform: translateY(-1px);
}

.nt_saetning_kort.valgt {
  background: #ECF2F6;
  border: 2px solid var(--bib_fjord);
  border-left: 5px solid var(--bib_fjord_mork);
}

.nt_saetning_greb {
  font-size: 15px;
  font-weight: 900;
  color: #8C7E6E;
  letter-spacing: -1px;
  flex-shrink: 0;
}

.nt_saetning_tekst {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.42;
  color: var(--farve_tekst_hoved);
}

.nt_pulje_tom_besked {
  grid-column: 1 / -1;
  background: #ECF3EB;
  border: 1.5px dashed #8BB087;
  border-radius: 11px;
  padding: 11px 15px;
  font-size: 13.5px;
  color: #264823;
  text-align: center;
}

.nt_interaktiv_ramme .nt_drop_slot {
  cursor: pointer;
}

.nt_interaktiv_ramme .nt_trapez_boks.trin_1 {
  min-height: 76px;
}

.nt_interaktiv_ramme .nt_trapez_boks.trin_2 {
  min-height: 82px;
}

.nt_interaktiv_ramme .nt_trapez_boks.trin_3 {
  min-height: 92px;
}

.nt_interaktiv_ramme .nt_trapez_boks.trin_4 {
  min-height: 235px;
}

.nt_drop_pladsholder {
  display: inline-block;
  margin-top: 3px;
  padding: 4px 14px;
  border: 1.5px dashed rgba(60, 50, 40, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 12.5px;
  font-weight: 700;
  color: #5C4F42;
}

.nt_drop_slot.nt_drag_over .nt_poly {
  stroke-width: 4;
  filter: brightness(0.96);
}

.nt_placeret_saetning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: grab;
  position: relative;
}

.nt_fjern_saetning_knap {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #C8B294;
  background: #FFFFFF;
  color: #5C4F42;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  box-shadow: none !important;
}

.nt_fjern_saetning_knap:hover {
  background: #FCEEEB;
  border-color: var(--bib_terrakotta);
  color: var(--bib_terrakotta_mork);
}

.nt_slot_rigtig .nt_poly {
  fill: #E3F2E1 !important;
  stroke: #2E6F28 !important;
  stroke-width: 3.2 !important;
}

.nt_slot_forkert .nt_poly {
  fill: #FCE8E4 !important;
  stroke: #BF4329 !important;
  stroke-width: 3.2 !important;
}

.nt_knap_raekke {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Genre mixeren i nordisk biblioteksstil */
.mixer_tromler_ramme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.mixer_tromle {
  flex: 1;
  min-width: 240px;
  max-width: 400px;
  background: #FAF8F4;
  border: 2px solid #D8C9B4;
  border-radius: 18px;
  padding: 18px 20px;
  text-align: center;
}

.mixer_tromle.tromle_fjord {
  border-top: 5px solid var(--bib_fjord);
}

.mixer_tromle.tromle_skov {
  border-top: 5px solid var(--bib_skov);
}

.mixer_tromle_etiket {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--farve_tekst_daempet);
  letter-spacing: 0.75px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.mixer_tromle_boks {
  background: #FFFFFF;
  border: 1.5px solid #DED1BC;
  border-radius: 12px;
  padding: 14px;
  font-family: var(--skrifttype_overskrift);
  font-size: 21px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
}

.mixer_plus_tegn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FBF3DF;
  border: 2px solid #DFC282;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  color: var(--bib_okker_mork);
  flex-shrink: 0;
}

.mixer_resultat_kort {
  background: linear-gradient(135deg, #FCF6E8 0%, #F4E6C9 100%);
  border: 2px solid #D5BA8C;
  border-left: 7px solid var(--bib_skov);
  border-radius: 18px;
  padding: 22px 26px;
  margin-top: 6px;
}

.mixer_resultat_overskrift {
  font-size: 11px;
  font-weight: 800;
  color: var(--bib_skov_mork);
  letter-spacing: 0.85px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mixer_opgave_tekst {
  font-family: var(--skrifttype_overskrift);
  font-size: 21px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  margin-bottom: 12px;
  line-height: 1.35;
}

.mixer_krav_linje {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--farve_tekst_hoved);
  background: #FFFFFF;
  border: 1.5px solid #DED1BC;
  border-radius: 12px;
  padding: 12px 16px;
}

@media (max-width: 768px) {
  .traening_faner {
    grid-template-columns: 1fr 1fr;
  }
  .traening_svarmuligheder {
    grid-template-columns: 1fr;
  }
  .nt_trapez_boks.trin_1 { width: 100%; min-height: 56px; }
  .nt_trapez_boks.trin_2 { width: 88%; min-height: 60px; }
  .nt_trapez_boks.trin_3 { width: 76%; min-height: 68px; }
  .nt_trapez_boks.trin_4 { width: 60%; min-height: 190px; }
  .nt_trapez_boks.trin_1 .nt_trapez_indhold { padding: 8px 30px; }
  .nt_trapez_boks.trin_2 .nt_trapez_indhold { padding: 8px 28px; }
  .nt_trapez_boks.trin_3 .nt_trapez_indhold { padding: 6px 22px; }
  .nt_trapez_boks.trin_4 .nt_trapez_indhold { position: absolute; top: 10px; left: 0; right: 0; padding: 0 16px; }
  .nt_titel { font-size: 13px; margin-bottom: 2px; }
  .nt_tekst { font-size: 11px; line-height: 1.35; }
  .leksikon_tilstand_vaelger {
    flex-direction: column;
  }
}

/* ==========================================================================
   GENRE LABYRINTEN: NORDISK BIBLIOTEKS-LAYOUT RUNDT OM LABYRINTEN
   ========================================================================== */

/* 1. Biblioteks-topbanner */
.labyrint_hero {
  background: linear-gradient(135deg, #FAF8F3 0%, #EFE6D5 100%);
  border: 2px solid #D5C5AE;
  border-top: 6px solid var(--bib_fjord);
  border-radius: 22px;
  padding: 22px 28px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.labyrint_hero_tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 780px;
}

.labyrint_kicker_raekke {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 2px;
}

.labyrint_kicker_pill {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--radius_pill);
  background: #ECF2F6;
  color: var(--bib_fjord_mork);
  border: 1px solid #C4D6E2;
}

.labyrint_hovedtitel {
  font-family: var(--skrifttype_overskrift);
  font-size: 28px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  margin: 2px 0 4px 0;
  line-height: 1.15;
}

.labyrint_undertitel {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--farve_tekst_daempet);
  margin: 0;
}

.labyrint_hero_handling {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.labyrint_ny_knap {
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 11px 22px;
  border-radius: var(--radius_pill);
  background: var(--bib_skov);
  color: #FFFFFF;
  border: 2px solid var(--bib_skov_mork);
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color 0.15s ease, transform 0.14s ease;
}

.labyrint_ny_knap:hover {
  background: var(--bib_skov_mork);
  transform: translateY(-1px);
  box-shadow: none !important;
}

/* 2. Egetræs-biblioteksreol: Visuelle genrekort + 2-kolonne indstillinger */
.labyrint_kontrol_panel {
  background: linear-gradient(180deg, #F3EBDD 0%, #EAE0CE 100%);
  border: 2px solid #CEBEA6;
  border-bottom: 5px solid #B8A386;
  border-radius: 22px;
  padding: 18px 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.labyrint_sektion_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.labyrint_trin_kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.85px;
  color: #5C4F42;
  text-transform: uppercase;
}

.trin_prik {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.trin_prik.skov { background: var(--bib_skov); }
.trin_prik.okker { background: var(--bib_okker); }
.trin_prik.terrakotta { background: var(--bib_terrakotta); }

/* Øverste hylde: 4 visuelle genrekort pr. linje (2 rækker af 4) */
.labyrint_genre_hylde {
  background: #FAF8F3;
  border: 1.5px solid #D8C9B2;
  border-radius: 16px;
  padding: 12px 14px 14px;
}

.labyrint_genre_kort_gitter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_genre_kort {
  background: #FFFFFF;
  border: 1.5px solid #D8C9B2;
  border-top: 4px solid var(--genre_farve, var(--bib_fjord));
  border-bottom: 3px solid #C2AE90;
  border-radius: 13px;
  padding: 9px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: none !important;
  transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
  text-align: center;
}

.labyrint_genre_portraet {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--genre_lys, #FAF8F3);
  border: 1.5px solid #E2D5C1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.labyrint_genre_kort_img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  object-fit: contain;
  display: block;
}

.tilfaeldig_portraet {
  background: #FBF3DF;
  border-color: #DFC282;
  font-family: var(--skrifttype_overskrift);
  font-size: 22px;
  font-weight: 900;
  color: var(--bib_okker_mork);
}

.labyrint_genre_kort_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--farve_tekst_hoved);
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_genre_kort:hover {
  transform: translateY(-2px);
  border-color: var(--genre_farve, var(--bib_fjord));
  background: #FFFDF9;
  box-shadow: none !important;
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_genre_kort.valgt {
  background: var(--genre_farve, var(--bib_fjord));
  border-color: var(--genre_farve, var(--bib_fjord_mork));
  color: #FFFFFF;
  box-shadow: none !important;
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_genre_kort.valgt .labyrint_genre_kort_titel {
  color: #FFFFFF;
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_genre_kort.valgt .labyrint_genre_portraet {
  background: #FFFFFF;
  border-color: #FFFFFF;
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_tilfaeldig_kort {
  border-top-color: var(--bib_okker);
  background: #FFFDF8;
}

/* Nederste 2-kolonne gitter: Sværhedsgrad til venstre, Ydre ramme til højre */
.labyrint_indstillinger_duo {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  align-items: stretch;
}

.labyrint_indstilling_kort {
  background: #FAF8F3;
  border: 1.5px solid #D8C9B2;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.labyrint_svaerhed_gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_svaerhed_chip {
  background: #FFFFFF;
  border: 1.5px solid #D5C4AC;
  border-bottom: 3px solid #BDA88B;
  border-radius: 11px;
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: none !important;
}

.svaerhed_titel {
  font-family: var(--skrifttype_overskrift);
  font-size: 13px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  line-height: 1.15;
}

.svaerhed_maal {
  font-size: 10.5px;
  font-weight: 700;
  color: #6B5C4C;
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_svaerhed_chip:hover {
  border-color: var(--bib_okker);
  background: #FFFDF8;
  transform: translateY(-1px);
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_svaerhed_chip.valgt {
  background: var(--bib_okker);
  border-color: var(--bib_okker_mork);
  border-bottom-color: #784808;
  color: #FFFFFF;
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_svaerhed_chip.valgt .svaerhed_titel,
#modul_labyrint .labyrint_kontrol_panel .labyrint_svaerhed_chip.valgt .svaerhed_maal {
  color: #FFFFFF;
}

/* Ydre ramme gitter med små mur-farveprøver */
.labyrint_ramme_gitter {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_ramme_chip {
  background: #FFFFFF;
  border: 1.5px solid #D5C4AC;
  border-bottom: 3px solid #BDA88B;
  border-radius: 11px;
  padding: 7px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: none !important;
}

.ramme_farve_brik {
  width: 28px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  display: inline-block;
  flex-shrink: 0;
}

.swatch_auto {
  background: linear-gradient(90deg, #991B1B 0%, #15803D 50%, #0369A1 100%);
}
.swatch_ridderborg {
  background: repeating-linear-gradient(90deg, #78716C 0, #78716C 8px, #292524 8px, #292524 10px);
}
.swatch_haek {
  background: linear-gradient(135deg, #22C55E 0%, #15803D 60%, #14532D 100%);
}
.swatch_slotskaelder {
  background: repeating-linear-gradient(90deg, #292524 0, #292524 8px, #0C0A09 8px, #0C0A09 10px);
}
.swatch_rumbase {
  background: linear-gradient(135deg, #0F172A 0%, #06B6D4 100%);
}
.swatch_mursten {
  background: repeating-linear-gradient(90deg, #991B1B 0, #991B1B 8px, #E2E8F0 8px, #E2E8F0 10px);
}

.ramme_chip_tekst {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  line-height: 1.15;
  text-align: center;
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_ramme_chip:hover {
  border-color: var(--bib_skov);
  background: #F4F9F3;
  transform: translateY(-1px);
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_ramme_chip.valgt {
  background: var(--bib_skov);
  border-color: var(--bib_skov_mork);
  border-bottom-color: #1F3E1C;
  color: #FFFFFF;
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_ramme_chip.valgt .ramme_chip_tekst {
  color: #FFFFFF;
}

#modul_labyrint .labyrint_kontrol_panel .labyrint_ramme_chip.valgt .ramme_farve_brik {
  border-color: #FFFFFF;
}

@media (max-width: 1020px) {
  .labyrint_genre_kort_gitter {
    grid-template-columns: repeat(4, 1fr);
  }
  .labyrint_indstillinger_duo {
    grid-template-columns: 1fr;
  }
  .labyrint_ramme_gitter {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .labyrint_genre_kort_gitter {
    grid-template-columns: repeat(2, 1fr);
  }
  .labyrint_ramme_gitter {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3. Læsesalens ramme rundt om labyrinten */
.labyrint_spil_layout {
  background: #FAF8F3;
  border: 2px solid #D6C8B4;
  border-top: 6px solid var(--bib_skov);
  border-radius: 24px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.labyrint_status_bjaelke {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  background: linear-gradient(180deg, #F4ECE0 0%, #EAE0CE 100%);
  border: 1.5px solid #D2C0A5;
  border-bottom: 4px solid #BBA483;
  border-radius: 18px;
  padding: 12px 20px;
}

.labyrint_genre_banner {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid #D5C5AE;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 7px 16px 7px 10px;
}

.labyrint_banner_portraet_ramme {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FAF8F3;
  border: 1.5px solid #D8C8B0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.banner_figur_img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.banner_lille_label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.85px;
  color: #6B5C4C;
  text-transform: uppercase;
}

.banner_genre_navn {
  font-family: var(--skrifttype_overskrift);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.1;
}

.labyrint_liv_beholder {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1.5px solid #D5C5AE;
  border-radius: 14px;
  padding: 7px 15px;
}

.labyrint_liv_label {
  font-size: 13px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
}

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

.labyrint_liv_token {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #FAF8F3;
  border: 1.5px solid #D8C8B0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.labyrint_liv_token .liv_svg {
  width: 18px;
  height: 18px;
  transition: all 0.2s ease;
}

.labyrint_liv_token.aktiv {
  background: #FFF5F5;
  border-color: #FECACA;
}

.labyrint_liv_token.aktiv .liv_svg {
  fill: #DC2626;
}

.labyrint_liv_token.tabt {
  background: #F3EFEA;
  border-color: #D6CFC7;
}

.labyrint_liv_token.tabt .liv_svg {
  fill: #9CA3AF;
  opacity: 0.35;
}

.labyrint_skridt_boks {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1.5px solid #D5C5AE;
  border-radius: 14px;
  padding: 8px 16px;
}

.skridt_label {
  font-size: 13px;
  font-weight: 800;
  color: #5C4F42;
}

.skridt_tal {
  font-family: var(--skrifttype_overskrift);
  font-size: 19px;
  font-weight: 900;
  color: var(--bib_okker_mork);
  background: #FBF3DF;
  border: 1px solid #DFC282;
  border-radius: var(--radius_pill);
  padding: 2px 11px;
  line-height: 1.2;
}

.labyrint_feedback {
  border-radius: 14px;
  padding: 13px 18px;
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 700;
  transition: all 0.2s ease;
}

.labyrint_feedback.neutral {
  background: linear-gradient(135deg, #FCF6E8 0%, #F5E9CE 100%);
  border: 1.5px solid #D5BA8C;
  border-left: 6px solid var(--bib_okker);
  color: var(--farve_tekst_hoved);
}

.labyrint_feedback.god {
  background: #ECF3EB;
  border: 1.5px solid #A7C7A4;
  border-left: 6px solid var(--bib_skov);
  color: #1E3F1C;
}

.labyrint_feedback.advarsel {
  background: #FCEEEB;
  border: 1.5px solid #E5B4A8;
  border-left: 6px solid var(--bib_terrakotta);
  color: #7F2315;
}

.labyrint_feedback.obs {
  background: #FEF3C7;
  border: 1.5px solid #FCD34D;
  border-left: 6px solid #D97706;
  color: #78350F;
}

.labyrint_braet_ramme {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  border-radius: 18px;
  padding: 22px 20px;
  transition: all 0.25s ease;
}

/* 1. Ridderborg murværk */
.labyrint_braet_ramme.ramme_ridderborg {
  background: #57534e;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)),
    repeating-linear-gradient(0deg, transparent, transparent 18px, rgba(41, 37, 36, 0.9) 18px, rgba(41, 37, 36, 0.9) 21px),
    repeating-linear-gradient(90deg, #78716c, #78716c 38px, rgba(41, 37, 36, 0.9) 38px, rgba(41, 37, 36, 0.9) 41px);
  border: 4px solid #292524;
  box-shadow: 
    0 14px 32px rgba(0, 0, 0, 0.4),
    inset 0 0 28px rgba(0, 0, 0, 0.7),
    inset 0 2px 2px rgba(255, 255, 255, 0.25);
}

.labyrint_braet_ramme.ramme_ridderborg .ramme_top_tinder {
  display: block;
  width: 100%;
  height: 18px;
  margin-bottom: 12px;
  background: repeating-linear-gradient(
    90deg,
    #78716c 0,
    #78716c 32px,
    transparent 32px,
    transparent 46px
  );
  border-bottom: 3px solid #292524;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.35);
  border-radius: 3px 3px 0 0;
}

.labyrint_braet_ramme.ramme_ridderborg .ramme_bund_sokkel {
  display: block;
  width: 100%;
  height: 10px;
  margin-top: 12px;
  background: #292524;
  border-radius: 4px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6);
}

/* 2. Grøn høj hæk */
.labyrint_braet_ramme.ramme_haek {
  background: #14532d;
  background-image: 
    radial-gradient(circle at 20% 30%, #22c55e 1.5px, transparent 2px),
    radial-gradient(circle at 70% 60%, #16a34a 2px, transparent 2.5px),
    radial-gradient(circle at 40% 80%, #15803d 2px, transparent 3px),
    linear-gradient(135deg, #166534 0%, #14532d 50%, #052e16 100%);
  background-size: 14px 14px, 18px 18px, 16px 16px, 100% 100%;
  border: 5px solid #14532d;
  box-shadow: 
    0 14px 32px rgba(5, 46, 22, 0.4),
    inset 0 0 28px rgba(5, 46, 22, 0.75),
    inset 0 2px 4px rgba(134, 239, 172, 0.35);
}

.labyrint_braet_ramme.ramme_haek .ramme_top_tinder {
  display: block;
  width: 100%;
  height: 16px;
  margin-bottom: 12px;
  background: radial-gradient(circle at 50% 100%, #22c55e 0, #15803d 70%, transparent 72%);
  background-size: 26px 16px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 2px 3px rgba(5, 46, 22, 0.4));
}

.labyrint_braet_ramme.ramme_haek .ramme_bund_sokkel {
  display: block;
  width: 100%;
  height: 10px;
  margin-top: 12px;
  background: radial-gradient(circle at 50% 0%, #15803d 0, #052e16 70%, transparent 72%);
  background-size: 26px 10px;
  background-repeat: repeat-x;
}

/* 3. Mørk slotskælder */
.labyrint_braet_ramme.ramme_slotskaelder {
  background: #1c1917;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.65)),
    repeating-linear-gradient(0deg, transparent, transparent 18px, #0c0a09 18px, #0c0a09 21px),
    repeating-linear-gradient(90deg, #292524, #292524 38px, #0c0a09 38px, #0c0a09 41px);
  border: 4px solid #0c0a09;
  box-shadow: 
    0 14px 34px rgba(0, 0, 0, 0.65),
    inset 0 0 32px rgba(0, 0, 0, 0.9);
}

.labyrint_braet_ramme.ramme_slotskaelder .ramme_top_tinder {
  display: block;
  width: 100%;
  height: 16px;
  margin-bottom: 12px;
  background: repeating-linear-gradient(
    90deg,
    #292524 0,
    #292524 26px,
    transparent 26px,
    transparent 40px
  );
  border-bottom: 3px solid #0c0a09;
}

.labyrint_braet_ramme.ramme_slotskaelder .ramme_bund_sokkel {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 12px;
  background: #0c0a09;
  border-radius: 4px;
}

/* 4. Rumbase metal */
.labyrint_braet_ramme.ramme_rumbase {
  background: #0f172a;
  background-image: 
    linear-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  background-size: 24px 24px, 24px 24px, 100% 100%;
  border: 4px solid #06b6d4;
  box-shadow: 
    0 0 24px rgba(6, 182, 212, 0.35),
    inset 0 0 26px rgba(15, 23, 42, 0.85);
}

.labyrint_braet_ramme.ramme_rumbase .ramme_top_tinder {
  display: block;
  width: 100%;
  height: 14px;
  margin-bottom: 12px;
  background: repeating-linear-gradient(
    90deg,
    #06b6d4 0,
    #06b6d4 14px,
    transparent 14px,
    transparent 28px
  );
  border-bottom: 2px solid #06b6d4;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}

.labyrint_braet_ramme.ramme_rumbase .ramme_bund_sokkel {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 12px;
  background: #06b6d4;
  border-radius: 3px;
  box-shadow: 0 0 10px #06b6d4;
}

/* 5. Murstensgyde */
.labyrint_braet_ramme.ramme_mursten {
  background: #7f1d1d;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.28)),
    repeating-linear-gradient(0deg, transparent, transparent 15px, #e2e8f0 15px, #e2e8f0 17px),
    repeating-linear-gradient(90deg, #991b1b, #991b1b 32px, #e2e8f0 32px, #e2e8f0 34px);
  border: 4px solid #450a0a;
  box-shadow: 
    0 14px 30px rgba(0, 0, 0, 0.4),
    inset 0 0 22px rgba(0, 0, 0, 0.7);
}

.labyrint_braet_ramme.ramme_mursten .ramme_top_tinder {
  display: block;
  width: 100%;
  height: 15px;
  margin-bottom: 12px;
  background: repeating-linear-gradient(
    90deg,
    #991b1b 0,
    #991b1b 28px,
    transparent 28px,
    transparent 40px
  );
  border-bottom: 3px solid #450a0a;
}

.labyrint_braet_ramme.ramme_mursten .ramme_bund_sokkel {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 12px;
  background: #450a0a;
  border-radius: 4px;
}

/* Labyrint gitter */
.labyrint_gitter {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.labyrint_gitter.gitter_8x9,
.labyrint_gitter.gitter_9x8 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.labyrint_gitter.gitter_7x7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.labyrint_gitter.gitter_6x6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.labyrint_gitter.gitter_5x5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.labyrint_felt {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  min-height: 72px;
  min-width: 0;
  overflow: hidden;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
  user-select: none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.labyrint_felt:hover {
  border-color: var(--farve_sennep);
  background: #fffbeb;
  transform: translateY(-1px);
}

.felt_ord_tekst {
  font-family: var(--skrifttype_overskrift);
  font-size: 12px;
  font-weight: 700;
  color: var(--farve_sort);
  line-height: 1.2;
  word-break: normal !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  hyphens: none !important;
  text-align: center;
  max-width: 100%;
  padding: 0 1px;
  margin: 0;
}

.felt_ord_tekst.enkelt_ord {
  white-space: nowrap !important;
}

.felt_ord_tekst.ord_langt {
  font-size: 11px;
  letter-spacing: -0.2px;
}

.felt_ord_tekst.ord_ekstra_langt {
  font-size: 10px;
  letter-spacing: -0.4px;
}

.labyrint_felt.felt_besoegt {
  background: var(--farve_sennep_lys);
  border-color: var(--farve_sennep);
}

.labyrint_felt.felt_start {
  background: #f0fdf4;
  border-color: #22c55e;
}

.labyrint_felt.felt_maal {
  background: #fefce8;
  border-color: #eab308;
}

.labyrint_felt.felt_spiller {
  background: #fff9ed;
  border-color: var(--farve_sennep);
  border-width: 3px;
  transform: scale(1.03);
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.labyrint_felt.felt_nabo {
  border-color: #ca8a04;
  border-style: dashed;
}

.labyrint_felt.felt_fejl_blink {
  background: #fee2e2 !important;
  border-color: #dc2626 !important;
  animation: feltRyst 0.4s ease;
}

@keyframes feltRyst {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

.felt_status_badge {
  position: absolute;
  top: 3px;
  left: 3px;
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: var(--radius_pill);
}

.felt_status_badge.start {
  background: #22c55e;
  color: #ffffff;
}

.felt_status_badge.maal {
  background: #eab308;
  color: #713f12;
}

.labyrint_spiller_figur_badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--farve_hvid);
  border: 2px solid;
  padding: 1px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spillerHop 1.2s infinite ease-in-out;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

@keyframes spillerHop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.spiller_ikon_img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Controller og D-pad i biblioteks-egetræ */
.labyrint_controller_sektion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  background: linear-gradient(180deg, #F4ECE0 0%, #EAE0CE 100%);
  border: 1.5px solid #D5C5AE;
  border-radius: 18px;
  padding: 16px 22px;
}

.controller_tekst {
  font-size: 13.5px;
  color: var(--farve_tekst_daempet);
  text-align: center;
  max-width: 600px;
  line-height: 1.48;
}

.controller_tekst strong {
  color: var(--farve_tekst_hoved);
}

.dpad_ramme {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

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

.dpad_knap {
  background: #FAF8F3;
  border: 1.5px solid #C8B294;
  border-bottom: 3px solid #AE9470;
  border-radius: 12px;
  width: 68px;
  height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none !important;
  transition: all 0.12s ease;
  font-family: inherit;
}

.dpad_knap:hover {
  border-color: var(--bib_okker);
  background: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: none !important;
}

.dpad_knap:active {
  transform: scale(0.96);
  box-shadow: none !important;
}

.dpad_pil {
  font-size: 18px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  line-height: 1;
}

.dpad_tekst {
  font-size: 10px;
  font-weight: 800;
  color: #6B5C4C;
  text-transform: uppercase;
}

/* Modal overlay i nordisk biblioteks-design */
.labyrint_modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(28, 22, 18, 0.58);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}

.labyrint_modal_kort {
  background: #FAF8F3;
  border: 2.5px solid #CFB997;
  border-top: 6px solid var(--bib_skov);
  border-radius: 24px;
  max-width: 560px;
  width: 100%;
  padding: 32px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.labyrint_sejr_emblem {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  border: 3px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: #FFFFFF;
}

.modal_figur_billede {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.modal_hovedtitel {
  font-family: var(--skrifttype_overskrift);
  font-size: 26px;
  font-weight: 900;
  color: var(--farve_tekst_hoved);
  margin: 0;
}

.modal_hovedtekst {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--farve_tekst_daempet);
  max-width: 460px;
}

.labyrint_stats_gitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin: 8px 0;
}

.labyrint_stat_kort {
  background: #FFFFFF;
  border: 1.5px solid #D8C8B0;
  border-radius: 14px;
  padding: 12px 10px;
}

.stat_tal {
  font-family: var(--skrifttype_overskrift);
  font-size: 20px;
  font-weight: 900;
}

.stat_etiket {
  font-size: 11.5px;
  color: #6B5C4C;
  font-weight: 700;
}

.sejr_ord_sektion {
  width: 100%;
  text-align: left;
  background: #FFFFFF;
  border: 1.5px solid #D8C8B0;
  border-radius: 14px;
  padding: 14px 16px;
}

.sejr_ord_overskrift {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--farve_tekst_hoved);
  margin-bottom: 8px;
}

.sejr_ord_stak {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sejr_ord_tag {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius_pill);
  border: 1.5px solid;
}

.modal_knap_gruppe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 14px;
}

.modal_knap_gruppe button {
  box-shadow: none !important;
}

@media (max-width: 850px) {
  .labyrint_braet_ramme {
    overflow-x: hidden;
    padding: 14px 10px;
  }
  .labyrint_gitter {
    gap: 6px;
  }
  .felt_ord_tekst,
  .felt_ord_tekst.enkelt_ord {
    font-size: 10.5px;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}

@media (max-width: 640px) {
  .hoved_container {
    padding: 12px 10px 28px;
  }
  .topbjaelke {
    padding: 0 12px 12px;
    border-radius: 18px;
  }
  .logo_tekster h1 {
    font-size: 22px;
  }
  .nav_knap {
    font-size: 12px;
    padding: 6px 10px;
  }
  .genre_ord_liste,
  .tjekliste_ord_tags_raekke,
  .plakat_ord_sky,
  .faelles_ord {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tjekliste_fane_bar {
    grid-template-columns: 1fr;
  }
  .skaber_kontrol_panel {
    padding: 14px 12px 18px;
  }
  .skaber_visnings_panel {
    padding: 14px 6px 18px;
  }
  .bogforside_scene_wrap {
    padding: 6px;
    max-width: 100%;
  }
  .rediger_handlinger_gitter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .labyrint_spil_layout {
    padding: 14px 10px;
  }
  .labyrint_braet_ramme {
    padding: 10px 6px;
  }
  .labyrint_gitter {
    gap: 4px;
  }
  .labyrint_felt {
    min-height: 54px;
    padding: 3px 2px;
    border-radius: 7px;
  }
  .felt_ord_tekst,
  .felt_ord_tekst.enkelt_ord {
    font-size: 9.5px;
    line-height: 1.12;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .labyrint_spiller_figur_badge {
    width: 22px;
    height: 22px;
  }
  .dpad_knap {
    width: 54px;
    height: 46px;
  }
}