/* Zerostress — fælles stylesheet
   Layoutprincip: alt indhold flyder i én centreret spalte (maks. 72rem) med
   fast sidemargin. Intet er placeret med faste pixelkoordinater, så tekst og
   billeder kan ikke skubbes ud over kanten ved zoom eller på smalle skærme.
   Skriftstørrelser skalerer med clamp(). Sitet har bevidst ét lyst pergament-
   udtryk, så alle farver er sat eksplicit. */

:root {
  --pergament: #fbe6cb;      /* papirfarve i kort og paneler */
  --pergament-lys: #fdf3e4;
  --kant: #d6b082;
  --guld: #a87842;           /* ornamenter, rammer */
  --blaek: #33241a;          /* brødtekst */
  --blaek-blod: #5f4634;
  --sepia: #7a5232;          /* links */
  --hero-moerk: #3b281b;
  --hvid: #fffaf3;

  --display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --brod: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;

  --spalte: 72rem;
  --tekst: 40rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #f4dfc4 url("img/skyer.webp") center top / cover fixed;
  color: var(--blaek);
  font-family: var(--brod);
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.22rem);
  line-height: 1.6;
}
/* iOS understøtter ikke fixed baggrund pænt */
@supports (-webkit-touch-callout: none) { body { background-attachment: scroll; } }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--sepia); text-underline-offset: 0.18em; }
:focus-visible { outline: 2px solid var(--guld); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--spalte);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.skjult-for-oeje {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Topmenu ---------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--hvid);
  border-bottom: 3px solid var(--blaek);
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 21;
  background: var(--hvid);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  padding-block: 0.55rem;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.55rem;
  color: var(--blaek);
  text-decoration: none;
  white-space: nowrap;
}
.logo img { width: 2.3rem; height: auto; }
@media (min-width: 60.01rem) { .logo { display: none; } }
.menu-knap {
  display: none;
  align-items: center;
  gap: 0.45rem;
  font: 600 1.1rem var(--display);
  background: none;
  border: 1px solid var(--blaek-blod);
  color: var(--blaek);
  border-radius: 4px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
.menu-knap span[aria-hidden] { font-size: 1.2rem; line-height: 1; }
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1rem clamp(1.2rem, 2.5vw, 2.8rem);
}
.nav a {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.15rem, 0.75rem + 0.75vw, 1.55rem);
  font-weight: 500;
  color: var(--blaek);
  text-decoration: none;
  padding-block: 0.2rem;
  border-bottom: 1.5px solid transparent;
}
.nav a:hover { border-bottom-color: var(--guld); }
.nav a[aria-current="page"] { border-bottom-color: var(--blaek); }

@media (max-width: 60rem) {
  .menu-knap { display: inline-flex; }
  .site-header .wrap { flex-wrap: wrap; justify-content: space-between; }
  .nav { flex-basis: 100%; }
  .nav[data-aaben="nej"] { display: none; }
  .nav ul { flex-direction: column; gap: 0; padding-block: 0.3rem 0.5rem; }
  .nav li + li { border-top: 1px solid rgba(51,36,26,0.12); }
  .nav a { display: block; padding-block: 0.55rem; border-bottom: none; }
  .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.25em; }
}

/* ---------- Hero (alle sider) ---------- */
.hero {
  position: relative;
  background-color: var(--hero-moerk);
  background-image: var(--hero-billede, url("img/hero.webp"));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--hero-fokus, left center);
  border-bottom: 4px solid var(--blaek);
  color: var(--hvid);
  isolation: isolate;
}
/* Mørk toning fra venstre, så teksten altid kan læses uanset skærmbredde */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(40,26,17,0.82) 0%, rgba(40,26,17,0.6) 38%, rgba(40,26,17,0) 62%);
}
.hero .wrap {
  /* Samme højde på alle sider: højden er sat, så den rummer forsidens tekst */
  min-height: clamp(14rem, 9.5rem + 15vw, 23rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
/* Teksten holdes i venstre halvdel over den mørke del af billedet, så den aldrig løber ind over ansigtet */
.hero-tekst {
  width: min(100%, 50%);
  max-width: 30rem;
  text-align: center;
}
@media (max-width: 44rem) { .hero-tekst { width: 100%; } }
.hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 1.9vw, 3.2rem);
  line-height: 1.08;
  margin: 0 0 0.7rem;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(25,15,8,0.55);
}
.hero p {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 26rem;
  text-shadow: 0 1px 10px rgba(25,15,8,0.6);
}
@media (max-width: 44rem) {
  .hero::before { background: linear-gradient(180deg, rgba(40,26,17,0.55), rgba(40,26,17,0.72)); }
}

/* ---------- Pergamentpanel med hjørneornamenter ---------- */
.pergament {
  position: relative;
  background: var(--pergament);
  border: 1px solid var(--kant);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(70,44,22,0.25);
  padding: clamp(1.6rem, 1rem + 2.6vw, 3.4rem);
}
.pergament::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1.5px solid var(--guld);
  border-radius: 3px;
  opacity: 0.7;
  pointer-events: none;
}
.pergament::after {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  --h: clamp(34px, 5vw, 58px);
  background:
    url("img/hjorne.png") left top / var(--h) no-repeat;
  opacity: 0.9;
}
.hjorner { position: absolute; inset: 14px; pointer-events: none; }
.hjorner i {
  position: absolute;
  width: clamp(34px, 5vw, 58px);
  aspect-ratio: 1;
  background: url("img/hjorne.png") center / contain no-repeat;
  opacity: 0.9;
}
.hjorner i:nth-child(1) { top: 0; right: 0; transform: scaleX(-1); }
.hjorner i:nth-child(2) { bottom: 0; left: 0; transform: scaleY(-1); }
.hjorner i:nth-child(3) { bottom: 0; right: 0; transform: scale(-1, -1); }
.pergament > :not(.hjorner) { position: relative; }

/* ---------- Sektioner og typografi ---------- */
.sektion { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); }
.sektion + .sektion { padding-top: 0; }
.stak { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

.overskrift {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.4rem + 1.9vw, 3rem);
  line-height: 1.1;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}
.skillelinje {
  width: min(100%, 44rem);
  margin: 0.6rem auto 0;
  height: clamp(14px, 2vw, 22px);
  background: url("img/skillelinje.webp") center / contain no-repeat;
}
.ingress {
  max-width: var(--tekst);
  margin: 1rem auto 0;
  text-align: center;
  font-size: 1.1em;
}
.prosa p { margin: 0 0 1em; max-width: var(--tekst); }
.prosa p:last-child { margin-bottom: 0; }
.prosa h2, .prosa h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}
.prosa h2 { font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.4rem); }
.prosa h3 { font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.8rem); }
.prosa ul { margin: 0 0 1em; padding-left: 1.2em; max-width: var(--tekst); }
.prosa li { margin-bottom: 0.35em; }
.prosa li::marker { color: var(--guld); }
.videre {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--display);
  font-weight: 600;
  font-style: italic;
  font-size: 1.2em;
}

/* ---------- Forside: kort stablet lodret i den originale pergamentramme ---------- */
.kortstak {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  max-width: 44rem;
}
.forsidekort {
  /* Rammen er et billede med en vandret linje i 80,4 % af højden.
     Illustrationen står på linjen, og titlen står i båndet under den. */
  position: relative;
  display: block;
  container-type: inline-size;
  aspect-ratio: 1400 / 934;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: url("img/kortramme.webp") center / 100% 100% no-repeat;
  border: 1px solid var(--blaek);
  border-radius: 6px;
  /* kraftigere skygge som på originalen: bred, mørk og blød */
  box-shadow: 0 2px 5px rgba(30, 18, 8, 0.45), 0 8px 26px 7px rgba(40, 25, 12, 0.55);
  text-decoration: none;
  color: var(--blaek);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.forsidekort:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(30, 18, 8, 0.45), 0 14px 34px 8px rgba(40, 25, 12, 0.58); }
.forsidekort img {
  /* Placering pr. illustration (--l, --t, --w, --h) er målt på originalsidens kort,
     så hver tegning står præcis som dér i forhold til skillelinjen */
  position: absolute;
  left: var(--l, 9%);
  top: var(--t, 9.5%);
  width: var(--w, 82%);
  height: var(--h, 72%);
  object-fit: fill;
}
.forsidekort h2 {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 80.6%;
  bottom: 4.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 5cqw, 2.6rem);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* Forside: om zerostress – lyst bånd i fuld bredde med tynd grå kant og skråt foto, som på originalen */
.om-sektion {
  background: var(--baand);
  border-block: 2px solid var(--baand-kant);
  padding-block: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  margin-block: clamp(1rem, 3vw, 2.5rem);
}
.sektion + .sektion.om-sektion { padding-top: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); }
.om {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
  justify-items: center;
}
.om-tekst { text-align: center; max-width: 25rem; color: #1c1611; }
.om-tekst h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.3rem, 1.6rem + 2.2vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 1.1rem;
}
.om blockquote {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.02rem, 0.96rem + 0.2vw, 1.12rem);
  line-height: 1.65;
}
.om blockquote p { margin: 0 0 1.1em; }
.signatur {
  margin: 0.4rem 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.85;
}
/* Fotoet: originalbilledet fra Wix med indbygget ramme og hældning */
.foto {
  margin: 0;
  width: min(100%, 19rem);
}
.foto img {
  width: 100%;
  height: auto;
  filter: drop-shadow(3px 5px 9px rgba(0,0,0,0.32));
}
@media (max-width: 46rem) {
  .om { grid-template-columns: 1fr; }
  .foto { order: -1; width: min(72%, 16rem); margin-block: 0.25rem 0.75rem; }
}

/* ---------- Indlejrede interaktive moduler (Netlify) ---------- */
.modul {
  display: grid;
  gap: 0.6rem;
}
.modul-ramme {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--kant);
  border-radius: 6px;
  overflow: hidden;
  background: var(--pergament-lys);
  box-shadow: 0 12px 32px rgba(70,44,22,0.22);
}
/* Billedringen: højden følger bredden, så der ikke står tom plads under den */
.modul-ramme.hoej { aspect-ratio: auto; height: calc(min(100vw - 32px, 70rem) * 0.256 + 12.5rem); }
/* Billedringen må gå bredere end tekstspalten, så illustrationerne bliver større */
.modul-ramme.hoej.fri {
  --b: min(100vw - 32px, 92rem);
  width: var(--b);
  max-width: none;
  margin-left: calc((100% - var(--b)) / 2);
  height: calc(min(100vw - 32px, 92rem) * 0.256 + 12.5rem);
}
.modul-ramme iframe { width: 100%; height: 100%; border: 0; display: block; }
.modul-ramme { position: relative; }
/* Moduler med egen pergamentramme vises uden ekstra boks omkring */
/* Kort der fylder hele rammen (Hvad er stress?): samme kant, afrunding og skygge som forsidens kort */
.modul-ramme.bar {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--blaek);
  border-radius: 6px;
  background: #f0dcc4;
  box-shadow: 0 2px 5px rgba(30, 18, 8, 0.45), 0 8px 26px 7px rgba(40, 25, 12, 0.55);
}
/* Gennemsigtig baggrund: illustrationen står direkte på siden */
.modul-ramme.fri { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.modul-fuld {
  justify-self: end;
  font: 600 1.05rem var(--display);
  color: var(--blaek);
  background: var(--pergament-lys);
  border: 1px solid var(--kant);
  border-radius: 4px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
.modul-fuld:hover { border-color: var(--sepia); }
.modul-luk { display: none; }

/* Fuld skærm inde på siden: modulet lægger sig over hele vinduet */
html.modul-aaben, html.modul-aaben body { overflow: hidden; }
.modul--fuld .modul-ramme {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #2a1d14;
  padding: calc(3.2rem + env(safe-area-inset-top, 0px)) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.modul--fuld .modul-luk {
  display: block;
  position: absolute;
  top: calc(0.55rem + env(safe-area-inset-top, 0px));
  right: max(0.8rem, env(safe-area-inset-right, 0px));
  font: 600 1.05rem var(--display);
  color: var(--hvid);
  background: transparent;
  border: 1px solid rgba(255,250,243,0.6);
  border-radius: 4px;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
}
.modul--fuld .modul-luk:hover { background: rgba(255,250,243,0.12); }
/* Moduler med egen fuldskærmsknap har deres egen luk-knap */
.modul--fuld .modul-ramme.bar .modul-luk { display: none; }
.modul--fuld .modul-ramme.bar { padding-top: env(safe-area-inset-top, 0px); }
.intro .ingress { margin-top: 1.2rem; }

/* ---------- Hvad virker: to sider af stress ---------- */
.to-sider {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  align-items: start;
}
.side-kort .medaljon {
  width: min(100%, 17rem);
  margin: 0 auto 1rem;
  mix-blend-mode: multiply; /* billedets papirkant smelter sammen med kortets papir */
}
.side-kort h3 {
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2.1rem);
  margin: 0 0 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--kant);
}
.laes-mere summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-style: italic;
  font-size: 1.2em;
  color: var(--sepia);
  margin-top: 0.4rem;
  list-style: none;
}
.laes-mere summary::-webkit-details-marker { display: none; }
.laes-mere summary::after { content: " ↓"; }
.laes-mere[open] summary::after { content: " ↑"; }
.laes-mere[open] summary { margin-bottom: 0.8rem; }

/* ---------- Tilbage til hverdagen ---------- */
.raekke {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: center;
}
.raekke > figure { margin: 0; }
.raekke > figure img { width: 100%; }
.raekke > figure a { display: block; border-radius: 6px; }
.raekke > figure figcaption { text-align: center; font-style: italic; margin-top: 0.4rem; font-size: 0.95em; }
@media (max-width: 52rem) {
  .raekke { grid-template-columns: 1fr; }
}
.hent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}
.hent a {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  background: var(--pergament-lys);
  border: 1px solid var(--kant);
  border-radius: 6px;
  text-decoration: none;
  color: var(--blaek);
  line-height: 1.3;
}
.hent a:hover { border-color: var(--sepia); }
.hent img { width: 100%; border: 1px solid var(--kant); }
.hent strong { display: block; font-family: var(--display); font-size: 1.2em; }
.hent span { font-size: 0.85em; color: var(--blaek-blod); }

/* ---------- Feedback ---------- */
.formular { display: grid; gap: 1.2rem; max-width: 38rem; margin-inline: auto; }
.felt { display: grid; gap: 0.35rem; }
.felt > label, .felt legend { font-family: var(--display); font-weight: 600; font-size: 1.25em; }
.felt textarea {
  font: inherit;
  color: var(--blaek);
  background: var(--hvid);
  border: 1px solid var(--kant);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  width: 100%;
  min-height: 8rem;
  resize: vertical;
}
fieldset.felt { border: 0; padding: 0; margin: 0; }
.stjerner { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.2rem; }
.stjerner input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stjerner label {
  font-size: 2.1rem;
  line-height: 1;
  color: #d9c2a3;
  cursor: pointer;
  padding: 0.1rem;
}
.stjerner input:checked ~ label,
.stjerner label:hover, .stjerner label:hover ~ label { color: var(--guld); }
.stjerner input:focus-visible + label { outline: 2px solid var(--guld); outline-offset: 2px; border-radius: 3px; }
.knap {
  justify-self: start;
  font: 600 1.2rem var(--display);
  background: var(--blaek);
  color: var(--hvid);
  border: none;
  border-radius: 4px;
  padding: 0.65rem 1.7rem;
  cursor: pointer;
}
.knap:hover { background: var(--sepia); }
.besked {
  margin: 0;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--guld);
  background: var(--pergament-lys);
  font-style: italic;
}

/* ---------- Sidefod: logoet i samme lyse bånd med tynd grå kant som "Om zerostress" ---------- */
:root { --baand: rgba(255, 249, 240, 0.62); --baand-kant: rgba(110, 104, 98, 0.75); }
.sidefod {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  font-size: 0.95rem;
}
.sidefod-baand {
  background: var(--baand);
  border-block: 2px solid var(--blaek);
}
.sidefod .wrap {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
.sidefod-logo { display: block; width: min(100%, 22rem); }
.sidefod-logo img { width: 100%; mix-blend-mode: multiply; }
.sidefod .wrap.sidefod-links { padding-block: 1.1rem 1.5rem; }
.sidefod nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.3rem; }
.sidefod nav a { color: var(--blaek-blod); font-family: var(--display); font-size: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Bogen (tiltag.html) ---------- */
/* Bogen står direkte på skybaggrunden og må gå bredere end tekstspalten */
.bog-ramme {
  --b: min(100vw - 32px, 92rem);
  width: var(--b);
  margin-left: calc((100% - var(--b)) / 2);
  aspect-ratio: 952 / 595;
}
.bog-ramme iframe { width: calc(100% + 96px); height: calc(100% + 96px); margin: -48px; border: 0; display: block; background: transparent; }
.bog-ramme { position: relative; }

/* ---------- Introkort (Hvad er stress?): samme kort som de to moduler ----------
   Målene følger modulernes 1280 × 720-kort (1cqw = 12,8 px dér), og kortet sidder
   samme sted i en 16:10-ramme, så alle tre bokse er lige store og flugter. */
.intro-ramme { position: relative; }
.intro-kort {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  overflow: hidden;
  background: radial-gradient(130% 100% at 50% 0%, #f8ecdd 0%, #f0dcc4 100%);
  color: #3a2a17;
  display: grid;
  place-items: center;
}
.intro-kort::before {            /* papirstruktur som i modulerne */
  content: "";
  position: absolute;
  inset: 0;
  background: url("img/papir.webp") center / cover;
  opacity: 0.28;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.intro-kort::after {             /* dobbelt guldramme */
  content: "";
  position: absolute;
  inset: 1.33cqw;
  border: 1px solid #a9813f;
  box-shadow: inset 0 0 0 0.47cqw transparent;
  outline: 1px solid #ccaa6e;
  outline-offset: -0.47cqw;
  pointer-events: none;
}
.intro-kort .ih { position: absolute; width: 4.375cqw; height: auto; z-index: 2; pointer-events: none; }
.intro-kort .ih.tl { left: 1.5625cqw; top: 1.5625cqw; }
.intro-kort .ih.tr { right: 1.5625cqw; top: 1.5625cqw; }
.intro-kort .ih.bl { left: 1.5625cqw; bottom: 1.5625cqw; }
.intro-kort .ih.br { right: 1.5625cqw; bottom: 1.5625cqw; }
.intro-indhold {
  position: relative;
  z-index: 1;
  width: min(62%, 46rem);
  text-align: center;
}
.intro-kicker {
  margin: 0 0 0.9cqw;
  font: 500 clamp(0.62rem, 1.4cqw, 1.1rem) "EB Garamond", Georgia, serif;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #a9813f;
}
.intro-kort h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 5.2cqw, 4.4rem);
  line-height: 1.05;
  color: #3a2a17;
}
.intro-streg {
  width: 26%;
  height: 1.2cqw;
  margin: 1.4cqw auto 1.8cqw;
  background: url("img/skillelinje.webp") center / contain no-repeat;
}
.intro-indhold p:not(.intro-kicker) {
  margin: 0 0 1em;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(0.9rem, 1.85cqw, 1.45rem);
  line-height: 1.55;
  color: #4a3826;
}
.intro-indhold p:last-child { margin-bottom: 0; }
/* På smalle skærme er 16:9 for lavt til teksten: kortet vokser med indholdet */
@media (max-width: 46rem) {
  .intro-ramme { aspect-ratio: auto !important; height: auto !important; }
  .intro-kort { position: relative; inset: auto; padding: 2.6rem 1.2rem; }
  .intro-kort .ih { width: 2.6rem; }
  .intro-kort .ih.tl, .intro-kort .ih.tr { top: 0.55rem; } .intro-kort .ih.bl, .intro-kort .ih.br { bottom: 0.55rem; }
  .intro-kort .ih.tl, .intro-kort .ih.bl { left: 0.55rem; } .intro-kort .ih.tr, .intro-kort .ih.br { right: 0.55rem; }
  .intro-kort::after { inset: 0.5rem; outline-offset: -0.2rem; }
  .intro-indhold { width: 100%; }
  .intro-kicker { margin-bottom: 0.4rem; }
  .intro-streg { height: 0.8rem; margin: 0.6rem auto 0.9rem; }
}

/* Fuld skærm som overlay: rammens kant, afrunding og skygge slås fra */
.modul--fuld .modul-ramme.bar { aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; background: #2a1d14; }

/* ---------- Link nederst i introkortet ---------- */
.intro-indhold p.intro-link { margin: 1.6cqw 0 0; font-size: clamp(0.8rem, 1.5cqw, 1.15rem); }
.intro-link a {
  font-family: "EB Garamond", Georgia, serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a9813f;
  text-decoration: none;
  border-bottom: 1px solid rgba(169,129,63,.45);
  padding-bottom: 0.15em;
}
.intro-link a:hover { color: #7a5a2a; border-bottom-color: currentColor; }

/* ---------- Stressreaktionen – samlet overblik ---------- */
.overblik { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.6rem); max-width: 50rem; }
.ob-kort {
  position: relative;
  padding: clamp(1.6rem, 1rem + 3vw, 3rem) clamp(1.2rem, 0.6rem + 3.4vw, 3.4rem);
  background: radial-gradient(130% 100% at 50% 0%, #f8ecdd 0%, #f0dcc4 100%);
  border: 1px solid #1c120a;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(30,18,8,.35), 0 8px 26px 4px rgba(40,25,12,.35);
  color: #3a2a17;
}
.ob-kort::after {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid #a9813f; outline: 1px solid #ccaa6e; outline-offset: -5px;
  border-radius: 2px; pointer-events: none;
}
.ob-kort > * { position: relative; }
.ob-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.78em; letter-spacing: 0.36em; text-transform: uppercase; color: #a9813f;
}
.ob-kort h2 {
  margin: 0 0 0.9rem;
  font-family: var(--display); font-weight: 600; line-height: 1.08;
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); text-wrap: balance;
}
.ob-kort h3 {
  margin: 1.4rem 0 0.4rem;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); line-height: 1.15;
}
.ob-bane h3 { margin-top: 0; }
.ob-kort p { margin: 0 0 0.9em; color: #4a3826; }
.ob-kort p:last-child { margin-bottom: 0; }
.ob-kort ul { margin: 0 0 0.9em; padding-left: 1.2em; }
.ob-kort li { margin-bottom: 0.4em; }
.ob-kort li::marker { color: var(--guld); }
.ob-resume { text-align: left; }
.ob-fem { margin: 0.4rem 0 0; padding-left: 1.6em; }
.ob-fem li { margin-bottom: 0.7em; padding-left: 0.3em; }
.ob-fem li::marker { font-family: var(--display); font-weight: 600; color: #9c4a2e; }
.ob-tre {
  list-style: none; padding: 0 !important; margin: 0.4rem 0 1.4rem !important;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem;
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.45em;
}
.ob-tre li::before { content: "◆"; color: #a9813f; font-size: 0.5em; margin-right: 0.6rem; vertical-align: 0.35em; font-style: normal; }
.ob-skala { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0 0 1.2rem; }
.ob-skala > div { padding: 0.8rem 0.9rem; border-radius: 4px; font-size: 0.92em; line-height: 1.4; }
.ob-skala > div:nth-child(1) { background: rgba(70,101,107,.12); }
.ob-skala > div:nth-child(2) { background: rgba(169,129,63,.16); }
.ob-skala > div:nth-child(3) { background: rgba(156,74,46,.14); }
.ob-skala b { display: block; font-family: var(--display); font-size: 1.15em; margin-bottom: 0.2rem; }
.ob-skala span { color: #5f4a2a; }
.ob-to { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0.4rem 0 1rem; }
.ob-bane {
  padding: 1rem 1.2rem; border-radius: 0 8px 8px 0;
  border-left: 3px solid #a9813f; background: rgba(169,129,63,.10);
}
.ob-bane.rust { border-left-color: #9c4a2e; background: rgba(156,74,46,.09); }
.ob-bane.skifer { border-left-color: #46656b; background: rgba(70,101,107,.10); }
.ob-badge {
  margin: 0 0 0.35rem !important; font-size: 0.72em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #a9813f !important;
}
.ob-bane.rust .ob-badge { color: #9c4a2e !important; }
.ob-bane.skifer .ob-badge { color: #46656b !important; }
.ob-trin { margin: 0; padding-left: 1.3em; font-size: 0.95em; }
.ob-trin li { margin-bottom: 0.45em; }
.ob-citat {
  margin: 1.2rem 0 0; padding: 0; text-align: center;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); line-height: 1.3; color: #3a2a17; text-wrap: balance;
}
.organ-tabel { display: grid; border-top: 1px solid rgba(169,129,63,.5); }
.organ-raekke {
  display: grid; grid-template-columns: 9.5rem 1fr 1fr; gap: 1rem;
  padding: 0.8rem 0.4rem; border-bottom: 1px solid rgba(169,129,63,.3); font-size: 0.93em; line-height: 1.45;
}
.organ-hoved { font-size: 0.72em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #a9813f; padding-block: 0.6rem; }
.organ-navn { font-family: var(--display); font-weight: 600; font-size: 1.15em; color: #9c4a2e; line-height: 1.2; }
.celle-etiket { display: none; }
.ob-videre { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

/* Markering af tilføjet indhold (fjernes ved at slette disse regler og .tilfoejet-note) */
.tilfoejet-maerke {
  display: inline-block; vertical-align: 0.15em;
  padding: 0.1em 0.55em; border-radius: 1em;
  font: 600 0.62rem/1.5 var(--brod); letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff8ee; background: #46656b;
}
.ob-kort > .tilfoejet-maerke, .ob-boks > .tilfoejet-maerke { margin-bottom: 0.5rem; }
.er-tilfoejet.ob-boks { padding: 0.9rem 1.1rem; border: 1px dashed #46656b; border-radius: 6px; background: rgba(70,101,107,.07); }
.organ-raekke.er-tilfoejet { background: rgba(70,101,107,.07); outline: 1px dashed rgba(70,101,107,.6); outline-offset: -1px; }
.ob-kort.er-tilfoejet::after { border-style: dashed; border-color: #46656b; }
.tilfoejet-note {
  margin: 0; padding: 0.7rem 1rem; border-radius: 6px; font-size: 0.9em;
  background: rgba(253,243,228,.85); border: 1px dashed #46656b; color: #3a2a17;
}

@media (max-width: 40rem) {
  .ob-to, .ob-skala { grid-template-columns: 1fr; }
  .organ-hoved { display: none; }
  .organ-raekke { grid-template-columns: 1fr; gap: 0.35rem; }
  .celle-etiket { display: block; font-size: 0.72em; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #a9813f; }
}

/* Overblik – version 2 */
.ob-kicker, .organ-hoved, .ob-badge { color: #86642c !important; }          /* mørkere guld: bedre kontrast på småt */
.ob-bane.guld { border-left-color: #a9813f; background: rgba(169,129,63,.11); }
.ob-tre-kol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 0.4rem 0 1rem; }
.ob-tre-kol .ob-bane { font-size: 0.93em; }
.ob-lille { margin: -0.2rem 0 0.5rem !important; font-style: italic; color: #86642c !important; }
.ob-indhold { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(169,129,63,.4); }
.ob-indhold a {
  font-size: 0.85em; text-decoration: none; padding: 0.2em 0.8em; border-radius: 1em;
  border: 1px solid rgba(169,129,63,.55); color: #5f4634;
}
.ob-indhold a:hover { background: rgba(169,129,63,.14); }
.ob-kort[aria-labelledby] { scroll-margin-top: 1.5rem; }
.ob-figur { margin: 0.6rem 0 1.2rem; }
.ob-figur svg { width: 100%; height: auto; display: block; }
.k-akse { font: 600 11px var(--brod); letter-spacing: .14em; fill: #86642c; }
.k-etiket { font: italic 600 16px var(--display); }
.k-etiket.rust { fill: #9c4a2e; } .k-etiket.skifer { fill: #46656b; }
.ob-boks h3 { margin-top: 0.2rem; }
.ob-afslut { margin-top: 1rem !important; }
.tilfoejet-maerke.justeret { background: #86642c; }
@media (max-width: 52rem) { .ob-tre-kol { grid-template-columns: 1fr; } }
.ob-tre-kol .ob-badge { letter-spacing: 0.08em; white-space: nowrap; }
.ob-kort[aria-labelledby] { scroll-margin-top: 6rem; }
.ob-u { max-width: 38rem; margin: 0.8rem auto 1.4rem; }
.u-akse { font: 500 24px var(--brod); letter-spacing: .14em; fill: #6a5232; }
.u-etiket { font: 600 34px var(--display); }
.u-etiket.skifer { fill: #46656b; } .u-etiket.rust { fill: #9c4a2e; }
.ob-systemer { display: grid; gap: 1.1rem; margin: 0.6rem 0 0.4rem; }
.ob-system { padding: 1.1rem 1.3rem 1.2rem; border-radius: 0 8px 8px 0; border-left: 3px solid #a9813f; background: rgba(169,129,63,.10); }
.ob-system.rust { border-left-color: #9c4a2e; background: rgba(156,74,46,.08); }
.ob-system.skifer { border-left-color: #46656b; background: rgba(70,101,107,.09); }
.ob-system.rust .ob-badge { color: #9c4a2e !important; }
.ob-system.skifer .ob-badge { color: #46656b !important; }
.ob-system h3 { margin: 0 0 0.6rem; }
.ob-system h3 .ob-lille { font-family: var(--display); font-size: 0.8em; font-weight: 500; margin-left: 0.3em; }
.ob-illu { width: 100%; height: auto; margin: 0 0 0.9rem; mix-blend-mode: multiply; border-radius: 3px; }
.to-spalter { columns: 2; column-gap: 2.2rem; }
.to-spalter li { break-inside: avoid; }
@media (max-width: 40rem) { .to-spalter { columns: 1; } }
.ob-illu-wrap { position: relative; container-type: inline-size; margin: 0 0 0.9rem; }
.ob-illu-wrap .ob-illu { margin: 0; }
.illu-lab { position: absolute; transform: translateX(-50%); text-align: center; white-space: nowrap; font: 400 1.47cqw/1.16 var(--brod); color: #5f4a2a; }

/* Overblik – version 3: samme kortudtryk som forsiden og introkortet */
.ob-kort {
  background:
    url("img/hjorne-tl.png") left 14px top 14px / 42px auto no-repeat,
    url("img/hjorne-tr.png") right 14px top 14px / 41px auto no-repeat,
    url("img/hjorne-bl.png") left 14px bottom 14px / 44px auto no-repeat,
    url("img/hjorne-br.png") right 14px bottom 14px / 43px auto no-repeat,
    radial-gradient(130% 100% at 50% 0%, #f8ecdd 0%, #f0dcc4 100%);
  border: 1px solid #000;
  box-shadow: 0 2px 5px rgba(30,18,8,.45), 0 8px 26px 7px rgba(40,25,12,.55);
  padding: clamp(2.4rem, 1.6rem + 3vw, 3.6rem) clamp(1.4rem, 0.6rem + 4vw, 4rem);
}
.ob-kort::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: url("img/papir.webp") center / cover; opacity: .28; mix-blend-mode: multiply; pointer-events: none;
}
.ob-kort::after { inset: 12px; }
.ob-kicker { text-align: center; letter-spacing: 0.42em; }
.ob-kort h2 { text-align: center; margin-bottom: 0; }
.ob-kort h2::after {
  content: ""; display: block; width: min(12rem, 45%); height: 14px; margin: 0.7rem auto 1.3rem;
  background: url("img/skillelinje.webp") center / contain no-repeat;
}
.ob-kort > .tilfoejet-maerke { display: table; margin: 0 auto 0.6rem; }
.ob-indhold { justify-content: center; }

/* systemerne: ingen tonede paneler – farven bæres af overskriften, figuren står frit */
.ob-systemer { gap: 0; margin-top: 1rem; }
.ob-system, .ob-system.rust, .ob-system.skifer, .ob-system.guld {
  background: none; border: 0; border-radius: 0; padding: 1.8rem 0 0.4rem;
}
.ob-system + .ob-system { border-top: 1px solid rgba(169,129,63,.4); margin-top: 1.6rem; }
.ob-system h3 { font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.9rem); }
.ob-system.rust h3 { color: #7e3a22; } .ob-system.skifer h3 { color: #36535a; } .ob-system.guld h3 { color: #6b4f22; }
.ob-system .ob-illu, .ob-system .ob-illu-wrap { margin: 1.2rem 0 0; }
.ob-system .ob-illu-wrap .ob-illu { margin: 0; }
.ob-system p:last-of-type { margin-bottom: 0; }
@media (max-width: 40rem) {
  .ob-kort { background-size: 30px auto, 29px auto, 31px auto, 30px auto, auto; padding-top: 3rem; padding-inline: 1.3rem; }
  .ob-kicker { letter-spacing: 0.24em; }
}
/* Diskret link i introkortet */
.intro-indhold p.intro-link { margin: 1.2cqw 0 0; font-size: clamp(0.85rem, 1.6cqw, 1.25rem); }
.intro-link a {
  font-family: var(--display); font-style: italic; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: #8a6a32; border-bottom: 0;
  text-decoration: underline; text-decoration-color: rgba(169,129,63,.4);
  text-decoration-thickness: 1px; text-underline-offset: 0.25em;
}
.intro-link a:hover { color: #6b4f22; text-decoration-color: currentColor; }

/* Trinene som vandret forløb: fire lige brede felter, nummer i cirkel, forbundet af en tynd linje */
.ob-trin.to-spalter {
  columns: auto; counter-reset: trin; list-style: none; padding: 0; margin: 0.4rem 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1.2rem;
}
.ob-trin.to-spalter li {
  counter-increment: trin; position: relative; margin: 0; padding-top: 2.6rem;
  text-align: center; font-size: 0.92em; line-height: 1.45; color: #4a3826;
}
.ob-trin.to-spalter li::before {
  content: counter(trin); position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid #a9813f; background: #f6e7d2;
  font: 600 1rem/1.8rem var(--display); color: #86642c; z-index: 1;
}
.ob-trin.to-spalter li + li::after {
  content: ""; position: absolute; top: 0.95rem; right: calc(50% + 0.95rem); width: calc(100% + 1.2rem - 1.9rem);
  border-top: 1px solid rgba(169,129,63,.55);
}
.ob-system.rust .ob-trin.to-spalter li::before { border-color: #9c4a2e; color: #9c4a2e; }
@media (max-width: 40rem) {
  .ob-trin.to-spalter { grid-template-columns: 1fr; gap: 0.7rem; }
  .ob-trin.to-spalter li { padding: 0.2rem 0 0 2.7rem; text-align: left; min-height: 1.9rem; }
  .ob-trin.to-spalter li::before { left: 0; transform: none; }
  .ob-trin.to-spalter li + li::after { display: none; }
}
.ob-trin.to-spalter li::before { text-align: center; }
.ob-system > .ob-badge, .ob-system > h3 { text-align: center; }
.ob-system > p { text-align: center; max-width: 36rem; margin-inline: auto; }
@media (max-width: 40rem) { .ob-system > p { text-align: left; } }
.ob-kort p.ob-link { margin-top: 0.9rem; text-align: center; }
.ob-link a {
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.1em; color: #8a6a32;
  text-decoration-color: rgba(169,129,63,.4); text-decoration-thickness: 1px; text-underline-offset: 0.25em;
}
.ob-link a:hover { color: #6b4f22; text-decoration-color: currentColor; }
.ob-videre { justify-content: center; }
.ob-videre .videre {
  font-weight: 500; font-size: 1.15em; color: #8a6a32;
  text-decoration-color: rgba(169,129,63,.45); text-decoration-thickness: 1px; text-underline-offset: 0.25em;
}
.ob-videre .videre:hover { color: #6b4f22; text-decoration-color: currentColor; }
/* system øverst, tempo under – begge centreret om kortets midte */
.ob-system > h3 { margin: 0 0 0.25rem; text-align: center; }
.ob-system > .ob-badge { display: block; text-align: center; margin: 0 0 1.1rem !important; padding-left: 0.14em; }
.ob-system h3 .ob-lille { display: inline; margin: 0 0 0 0.25em !important; }
.ob-system > .ob-badge { margin: 0 auto 1.1rem !important; max-width: none; }
.illu-lab { font-size: 1.194cqw; }

/* ---------- Hvad virker: kortene får forsidens ramme og papir ---------- */
.side-kort.pergament {
  background: #f9e2c3;
  border: 1px solid var(--blaek);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(30, 18, 8, 0.45), 0 8px 26px 7px rgba(40, 25, 12, 0.55);
  padding: clamp(2.6rem, 1.6rem + 3vw, 4rem) clamp(1.8rem, 1rem + 3vw, 3.6rem);
}
.side-kort.pergament::before {
  /* forsidens kortramme (uden vandret linje) som 9-delt billede: hjørner bevares, midten strækkes */
  inset: 0; opacity: 1; border-radius: 0;
  border: 80px solid transparent;
  border-image: url("img/kortramme-tom.webp") 160 fill / 80px stretch;
}
.side-kort.pergament::after, .side-kort .hjorner { display: none; }
.side-kort .medaljon { background: none; box-shadow: none; border: 0; border-radius: 0; }
@media (max-width: 40rem) {
  .side-kort.pergament::before { border-width: 56px; border-image-width: 56px; }
}
.side-kort.pergament::before {
  border-width: 80px 80px 115px;
  border-image: url("img/kortramme-tom.webp") 160 160 230 160 fill / 80px 80px 115px round;
}
@media (max-width: 40rem) {
  .side-kort.pergament::before { border-width: 56px 56px 80px; border-image-width: 56px 56px 80px; }
}
.to-sider { align-items: stretch; }
.side-kort.pergament { padding-bottom: clamp(4.2rem, 3rem + 3vw, 6.2rem); }

/* Hvad virker: introteksten i samme lyse bånd med sorte kantlinjer som forsiden/sidefoden */
.baand-sektion {
  background: var(--baand);
  border-block: 2px solid var(--blaek);
  margin-block: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding-block: clamp(1.8rem, 1.2rem + 2vw, 3rem);
}
.baand-sektion + .sektion { padding-top: 0; }
.sektion.baand-sektion, .sektion + .sektion.baand-sektion { padding-block: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.baand-sektion .laes-mere summary { text-align: left; }
.sektion.ring-baand { padding-block: clamp(0.6rem, 0.3rem + 1vw, 1.2rem); }
/* Læs mere: centreret, kursiv og diskret som de øvrige links – uden pil */
.laes-mere summary, .baand-sektion .laes-mere summary {
  display: block; text-align: center;
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.15em;
  color: #8a6a32;
}
.laes-mere summary span { text-decoration: underline; text-decoration-color: rgba(169,129,63,.45); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.laes-mere summary:hover { color: #6b4f22; }
.laes-mere summary::after, .laes-mere[open] summary::after { content: none; }
/* Billedringen: højden følger indholdet tættere, og den tomme top i modulet trækkes op under båndets kant */
.modul-ramme.hoej.fri {
  height: max(calc(min(100vw - 32px, 92rem) * 0.33 + 96px), 285px);
  margin-top: -34px;
}
.sektion.ring-baand { padding-block: 0 0.4rem; }
.modul-ramme.hoej.fri { height: max(calc(min(100vw - 32px, 92rem) * 0.33 + 76px), 262px); margin-top: -48px; }
.modul-ramme.hoej.fri { margin-top: clamp(-66px, -5.2vw, -48px); }
.modul-ramme.hoej.fri { height: max(calc(min(100vw - 32px, 92rem) * 0.33 + 104px), 290px); }
/* Diskrete links (samme stil som i introkortet og på Stressreaktionen) */
.diskret-link { text-align: center; margin-top: 1.4rem !important; max-width: none !important; }
.diskret-link a {
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.12em; color: #8a6a32;
  text-decoration: underline; text-decoration-color: rgba(169,129,63,.45); text-decoration-thickness: 1px; text-underline-offset: 0.25em;
  text-wrap: balance;
}
.diskret-link a:hover { color: #6b4f22; text-decoration-color: currentColor; }
.side-kort { display: flex; flex-direction: column; }
.side-kort .diskret-link { margin-top: auto !important; padding-top: 1.2rem; }
/* Hvad virker: samme papir som introkortet; rammen lægges ovenpå som gennemsigtigt billede */
.side-kort.pergament { background: radial-gradient(130% 100% at 50% 0%, #f8ecdd 0%, #f0dcc4 100%); }
.side-kort.pergament::before {
  background: url("img/papir.webp") center / cover; background-clip: padding-box;
  border-image: url("img/kortramme-ramme.png") 160 160 230 160 / 80px 80px 115px round;
}
.side-kort.pergament::before { background: none; }
.side-kort.pergament::after {
  display: block; content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("img/papir.webp") center / cover; opacity: .28; mix-blend-mode: multiply;
}
.side-kort.pergament::before { z-index: 1; }
.side-kort.pergament > * { position: relative; z-index: 2; }

/* Samme papirbaggrund som introkortet (Hvad er stress?) på forsidekort og Hvad virker-kortene */
.forsidekort {
  background:
    url("img/kortramme-alfa.webp") center / 100% 100% no-repeat,
    radial-gradient(130% 100% at 50% 0%, #f8ecdd 0%, #f0dcc4 100%);
  overflow: hidden;
}
.forsidekort::before, .side-kort.pergament::after {
  content: ""; position: absolute; inset: 0; display: block;
  background: url("img/papir.webp") center / cover;
  opacity: 0.28; mix-blend-mode: multiply; pointer-events: none; z-index: 0;
}
.forsidekort > * { z-index: 1; }
.side-kort.pergament { background: radial-gradient(130% 100% at 50% 0%, #f8ecdd 0%, #f0dcc4 100%); }
.side-kort.pergament::before { border-image-source: url("img/kortramme-tom-alfa.webp"); z-index: 1; }
.side-kort.pergament > * { z-index: 2; }
.intro-indhold p.intro-link { margin-top: 0.35cqw; }
.intro-indhold p.intro-link-foerste { margin-top: 1.4cqw; }
.modul[id] { scroll-margin-top: 6rem; }
html { scroll-behavior: auto; }
.intro-indhold p.intro-link { font-family: var(--display); font-style: italic; font-weight: 500; color: #6a5232; }
/* Hvad virker: lavere bånd */
.sektion.baand-sektion#tiltag { padding-block: clamp(1.1rem, 0.8rem + 1vw, 1.7rem); }
#tiltag .skillelinje + div { margin-top: 0.9rem !important; }
#tiltag .laes-mere summary { margin-top: 0; }
.modul-ramme.hoej.fri { height: max(calc(min(100vw - 32px, 92rem) * 0.33 + 80px), 268px); margin-top: clamp(-86px, -6.6vw, -62px); }
.sektion.ring-baand { padding-block: 0; }
.modul-ramme.hoej.fri { height: max(calc(min(100vw - 32px, 92rem) * 0.33 + 90px), 280px); }
.laes-mere .aaben, .laes-mere[open] .lukket { display: none; }
.laes-mere[open] .aaben { display: inline; }

/* Blødere tekstgengivelse på hele sitet: kantudglatning, kerning og ligaturer */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}
.overskrift { font-weight: 500; letter-spacing: 0.005em; }
.ingress { text-wrap: balance; color: #3e2e20; line-height: 1.65; }

/* Tilbage til hverdagen: samme kort som Stressreaktionen, billedet nederst i kortet */
.tth .ob-kort h2 { margin-bottom: 0; }
.tth-fig { margin: 1.6rem auto 0; max-width: 34rem; text-align: center; }
.tth-fig img { width: 100%; height: auto; display: block; }
.tth-fig figcaption { margin-top: 0.5rem; font-family: var(--display); font-style: italic; color: #6a5232; font-size: 1.05em; }
.tth .diskret-link { margin-top: 1.2rem !important; }
.tth .diskret-link.tth-link2 { margin-top: 0.3rem !important; }
/* Tilbage til hverdagen: brede vandrette kort, tekst til venstre og illustration til højre */
.overblik.tth { max-width: 72rem; }
.tth .ob-kort { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: center; }
.tth .ob-kort h2 { text-align: left; }
.tth .ob-kort h2::after { margin-left: 0; }
.tth-billede { display: grid; justify-items: center; align-content: center; }
.tth-fig { margin: 0; max-width: none; width: 100%; }
.tth .diskret-link { text-align: center; }
@media (max-width: 52rem) {
  .tth .ob-kort { grid-template-columns: 1fr; }
  .tth .ob-kort h2 { text-align: center; }
  .tth .ob-kort h2::after { margin-left: auto; }
  .tth-fig { max-width: 30rem; margin-inline: auto; }
}

/* Tilbage til hverdagen: fuldbredde faner med papirbaggrund og sort kant top og bund */
.tth-faner { display: grid; gap: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); margin-block: clamp(1.6rem, 1rem + 2vw, 2.8rem); }
.tth-fane {
  position: relative;
  background: radial-gradient(130% 100% at 50% 0%, #f8ecdd 0%, #f0dcc4 100%);
  border-block: 2px solid var(--blaek);
  box-shadow: 0 4px 18px rgba(40, 25, 12, 0.28);
  padding-block: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  color: #3a2a17;
}
.tth-fane::before {
  content: ""; position: absolute; inset: 0;
  background: url("img/papir.webp") center / cover; opacity: .28; mix-blend-mode: multiply; pointer-events: none;
}
.tth-indhold {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center;
}
.tth-fane h2 {
  margin: 0 0 0.9rem; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.1;
}
.tth-fane p { margin: 0 0 0.8em; color: #4a3826; }
.tth-fane p:last-child { margin-bottom: 0; }
.tth-fane ul { margin: 0 0 0.8em; padding-left: 1.2em; } .tth-fane li { margin-bottom: 0.3em; } .tth-fane li::marker { color: var(--guld); }
.tth-fane .tth-billede { display: grid; justify-items: center; align-content: center; }
.tth-fane .tth-fig { margin: 0; width: 100%; max-width: 26rem; }
.tth-fane .diskret-link { text-align: center; margin-top: 0.8rem !important; }
.tth-fane .diskret-link.tth-link2 { margin-top: 0.2rem !important; }
@media (max-width: 52rem) {
  .tth-indhold { grid-template-columns: 1fr; }
  .tth-fane h2 { text-align: center; }
  .tth-fane .tth-fig { max-width: 24rem; }
}
.tth-indhold { z-index: 1; }

/* Tilbage til hverdagen v3: ét bånd med intro og tre trin, adskilt af guld-skillelinjer */
.tth-baand {
  position: relative;
  background: radial-gradient(130% 100% at 50% 0%, #f8ecdd 0%, #f0dcc4 100%);
  border-block: 2px solid var(--blaek);
  box-shadow: 0 4px 18px rgba(40, 25, 12, 0.28);
  margin-block: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding-block: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  color: #3a2a17;
}
.tth-baand::before {
  content: ""; position: absolute; inset: 0;
  background: url("img/papir.webp") center / cover; opacity: .28; mix-blend-mode: multiply; pointer-events: none;
}
.tth-baand > * { position: relative; }
.tth-intro { margin: 0 auto; }
.tth-skille { margin: clamp(1.6rem, 1rem + 2vw, 2.6rem) auto; width: min(70%, 30rem); }
.tth-trin h2 {
  margin: 0 0 0.9rem; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.1;
}
.tth-nr {
  display: block; margin-bottom: 0.35rem;
  font: 500 0.42em/1 var(--brod); letter-spacing: 0.38em; text-transform: uppercase; color: #86642c;
}
.tth-trin p { margin: 0 0 0.8em; color: #4a3826; }
.tth-trin p:last-child { margin-bottom: 0; }
.tth-trin ul { margin: 0 0 0.8em; padding-left: 1.2em; } .tth-trin li { margin-bottom: 0.3em; } .tth-trin li::marker { color: var(--guld); }
.tth-trin .tth-billede { display: grid; justify-items: center; align-content: center; }
.tth-trin .tth-fig { margin: 0; width: 100%; max-width: 26rem; }
.tth-trin .diskret-link { text-align: center; margin-top: 0.8rem !important; }
.tth-trin .diskret-link.tth-link2 { margin-top: 0.2rem !important; }
.tth-trin.spejl .tth-indhold { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.tth-trin.spejl .tth-tekst { order: 2; }
.tth-trin.spejl .tth-billede { order: 1; }
@media (max-width: 52rem) {
  .tth-trin.spejl .tth-indhold { grid-template-columns: 1fr; }
  .tth-trin.spejl .tth-tekst { order: 1; } .tth-trin.spejl .tth-billede { order: 2; }
  .tth-trin h2 { text-align: center; }
  .tth-trin .tth-fig { max-width: 24rem; }
}

/* Tilbage til hverdagen v4: én fane med bladring mellem tre trin */
.tth-karrusel { margin-block: clamp(1.6rem, 1rem + 2vw, 2.8rem); }
.tth-ramme { position: relative; z-index: 1; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: clamp(0.5rem, 1vw, 1.2rem); max-width: 80rem; }
.tth-slides { display: grid; }
.tth-slide { grid-area: 1 / 1; }
.tth-karrusel.aktiv .tth-slide[hidden] { display: block; visibility: hidden; }   /* alle trin optager plads: fanen hopper ikke i højden */
.tth-karrusel.aktiv .tth-slide.vist { animation: tth-ind .45s ease; }
@keyframes tth-ind { from { opacity: 0; } to { opacity: 1; } }
.tth-karrusel:not(.aktiv) .tth-slide[hidden] { display: block; }                  /* uden script: alle trin vises */
.tth-karrusel:not(.aktiv) .tth-pil, .tth-karrusel:not(.aktiv) .tth-taeller { display: none; }
.tth-slide .tth-indhold { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.tth-slide h2 { margin: 0 0 0.9rem; font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.1; }
.tth-slide p { margin: 0 0 0.8em; color: #4a3826; } .tth-slide p:last-child { margin-bottom: 0; }
.tth-slide ul { margin: 0 0 0.8em; padding-left: 1.2em; } .tth-slide li { margin-bottom: 0.3em; } .tth-slide li::marker { color: var(--guld); }
.tth-slide .tth-billede { display: grid; justify-items: center; align-content: center; }
.tth-slide .tth-fig { margin: 0; width: 100%; max-width: 26rem; }
.tth-slide .diskret-link { text-align: center; margin-top: 0.8rem !important; }
.tth-slide .diskret-link.tth-link2 { margin-top: 0.2rem !important; }
.tth-pil { width: 2.5rem; height: 4rem; padding: 0; border: 0; background: none; cursor: pointer; color: rgba(90, 64, 34, .6); transition: color .2s; }
.tth-pil:hover { color: #5a4022; }
.tth-pil svg { width: 1rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tth-taeller { position: relative; z-index: 1; margin: 1rem 0 0; text-align: center; font-size: 0.85em; letter-spacing: 0.12em; color: #6a5232; }
@media (max-width: 52rem) {
  .tth-ramme { grid-template-columns: 1.8rem minmax(0, 1fr) 1.8rem; gap: 0.3rem; }
  .tth-pil { width: 1.8rem; align-self: start; margin-top: 0.6rem; }
  .tth-slide .tth-indhold { grid-template-columns: 1fr; }
  .tth-slide h2 { text-align: center; }
  .tth-slide .tth-fig { max-width: 24rem; }
}
/* Bedre balance: lige store kolonner, kortere tekstlinjer, større figur */
.tth-slide .tth-indhold { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.tth-slide .tth-tekst { max-width: 34rem; justify-self: end; }
.tth-slide .tth-billede { justify-self: start; width: 100%; }
.tth-slide .tth-fig { max-width: 30rem; }
@media (max-width: 52rem) {
  .tth-slide .tth-indhold { grid-template-columns: 1fr; }
  .tth-slide .tth-tekst, .tth-slide .tth-billede { justify-self: stretch; max-width: none; }
  .tth-slide .tth-fig { max-width: 24rem; }
}
/* v5: pile helt ud mod kanten, bredere tekst, figuren lige så høj som teksten */
.tth-ramme { max-width: none; padding-inline: clamp(0.4rem, 1.2vw, 1.4rem); grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; }
.tth-slides { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: clamp(0.5rem, 2vw, 2rem); }
@media (min-width: 52.01rem) {
  .tth-slide .tth-indhold { grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); align-items: stretch; gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
  .tth-slide .tth-tekst { max-width: 40rem; justify-self: stretch; align-self: center; }
  .tth-slide .tth-billede { position: relative; min-height: 16rem; justify-self: stretch; display: block; }
  .tth-slide .tth-billede > * { position: absolute; }
  .tth-slide .tth-billede .tth-fig { inset: 0; max-width: none; display: flex; flex-direction: column; }
  .tth-slide .tth-fig > img, .tth-slide .tth-fig > a { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; }
  .tth-slide .tth-fig img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
  .tth-slide .tth-billede.med-links .tth-fig { bottom: 4.6rem; }
  .tth-slide .tth-billede.med-links .diskret-link { position: absolute; left: 0; right: 0; bottom: 1.8rem; margin: 0 !important; }
  .tth-slide .tth-billede.med-links .diskret-link.tth-link2 { bottom: 0; }
}
@media (min-width: 52.01rem) {
  .tth-slides { max-width: 86rem; }
  .tth-slide .tth-indhold { grid-template-columns: minmax(0, 1fr) auto; }
  .tth-slide .tth-tekst { max-width: 44rem; justify-self: end; }
  .tth-slide .tth-billede { width: 30rem; }
}
@media (min-width: 52.01rem) {
  .tth-slide .tth-indhold { align-items: start; }
  .tth-slide .tth-tekst, .tth-slide .tth-billede { align-self: start; }
  .tth-slide .tth-billede { min-height: 0; }
}
/* Tilbage til hverdagen: tættere linjer og elegante listemarkører */
.tth-slide .tth-tekst { line-height: 1.5; }
.tth-slide .tth-tekst p { margin-bottom: 0.65em; }
.tth-slide .tth-tekst ul { list-style: none; padding-left: 0; margin: 0.2em 0 0; }
.tth-slide .tth-tekst li { position: relative; padding-left: 1.6em; margin-bottom: 0.25em; }
.tth-slide .tth-tekst li::before {
  content: ""; position: absolute; left: 0.15em; top: 0.72em;
  width: 0.85em; height: 1px; background: linear-gradient(90deg, #a9813f, rgba(169,129,63,.25));
}
.tth-slide .tth-tekst li::after {
  content: ""; position: absolute; left: 0.85em; top: calc(0.72em - 2px);
  width: 5px; height: 5px; transform: rotate(45deg); border: 1px solid #a9813f; background: #f6e7d2;
}
.tth-slide .tth-tekst p, .tth-slide .tth-tekst li { line-height: 1.42; }
/* Listemarkør: firtakket stjerne i guldstreg */
.tth-slide .tth-tekst li::before { display: none; }
.tth-slide .tth-tekst li::after {
  left: 0.1em; top: 0.32em; width: 0.8em; height: 0.8em; transform: none; border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5C12.9 8.3 15.7 11.1 22.5 12C15.7 12.9 12.9 15.7 12 22.5C11.1 15.7 8.3 12.9 1.5 12C8.3 11.1 11.1 8.3 12 1.5Z' fill='%23f8ecdd' stroke='%23a9813f' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tth-slide .tth-tekst li { padding-left: 1.45em; }
@media (min-width: 52.01rem) {
  .tth-slide .tth-tekst { justify-self: start; }
  .tth-slides { padding-inline: clamp(0.25rem, 1vw, 1rem); }
}
/* PDF-links i tekstspalten under trin 2 */
.tth-pdf { display: grid; gap: 0.25rem; margin-top: 0.9rem; }
.tth-pdf a {
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.1em; color: #8a6a32; justify-self: start;
  text-decoration: underline; text-decoration-color: rgba(169,129,63,.45); text-decoration-thickness: 1px; text-underline-offset: 0.25em;
}
.tth-pdf a:hover { color: #6b4f22; text-decoration-color: currentColor; }
.tth-fig figcaption { flex: 0 0 auto; }
@media (max-width: 52rem) { .tth-pdf { justify-items: center; text-align: center; } .tth-pdf a { justify-self: center; } }

/* Pop-up med skabelonen til genopstartsplan */
.skabelon-dlg {
  width: min(94vw, 46rem); max-height: 92vh; padding: 0; border: 1px solid var(--blaek); border-radius: 6px;
  background: radial-gradient(130% 100% at 50% 0%, #f8ecdd 0%, #f0dcc4 100%); color: #3a2a17;
  box-shadow: 0 2px 5px rgba(30,18,8,.45), 0 8px 26px 7px rgba(40,25,12,.55); overflow: hidden;
}
.skabelon-dlg[open] { display: flex; flex-direction: column; }
.skabelon-dlg::backdrop { background: rgba(40, 26, 14, .55); backdrop-filter: blur(2px); }
.skabelon-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.2rem; border-bottom: 1px solid rgba(169,129,63,.4); }
.skabelon-top h2 { margin: 0; font: 500 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.15 var(--display); }
.skabelon-luk, .skabelon-print, .skabelon-knapper a {
  font: italic 500 1.1rem var(--display); color: #8a6a32; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(169,129,63,.45); text-decoration-thickness: 1px; text-underline-offset: .25em;
}
.skabelon-luk:hover, .skabelon-print:hover, .skabelon-knapper a:hover { color: #6b4f22; text-decoration-color: currentColor; }
.skabelon-ark { overflow: auto; padding: 1rem 1.2rem; flex: 1 1 auto; min-height: 0; }
.skabelon-ark img { width: 100%; height: auto; display: block; background: #fff; box-shadow: 0 1px 6px rgba(40,25,12,.3); }
.skabelon-knapper { display: flex; justify-content: center; gap: 2rem; padding: 0.8rem 1.2rem 1rem; border-top: 1px solid rgba(169,129,63,.4); }
/* Pop-up: sort tynd kant, sidens skygge og diskret guld-scrollbar */
dialog.skabelon-dlg {
  border: 1px solid #000; border-radius: 6px;
  box-shadow: 0 2px 5px rgba(30,18,8,.45), 0 8px 26px 7px rgba(40,25,12,.55);
}
.skabelon-ark { scrollbar-width: thin; scrollbar-color: rgba(169,129,63,.6) transparent; }
.skabelon-ark::-webkit-scrollbar { width: 10px; }
.skabelon-ark::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.skabelon-ark::-webkit-scrollbar-thumb { background: rgba(169,129,63,.5); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
.skabelon-ark::-webkit-scrollbar-thumb:hover { background-color: rgba(138,106,50,.75); }
.skabelon-ark::-webkit-scrollbar-button { display: none; height: 0; }
/* Pop-up: lidt kraftigere sort kant, og en spinkel kant om arket (kun på skærmen) */
dialog.skabelon-dlg { border-width: 2px; }
.skabelon-ark img { border: 1px solid rgba(40, 30, 20, .45); }
@media (min-width: 52.01rem) { .tth-slide .tth-billede { justify-self: stretch; } }
/* Ekstra kontur på trin-fanen: dobbelt guldlinje inden for de sorte kanter, som rammerne i infografikkerne */
.tth-karrusel::after {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; bottom: 7px; pointer-events: none;
  border-block: 1px solid #a9813f;
  box-shadow: inset 0 5px 0 -4px #ccaa6e, inset 0 -5px 0 -4px #ccaa6e;
}
.tth-karrusel { padding-block: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); }
/* Trin: indholdet holdes i en fast bredde, så tekst og figur kan flugte; under 72rem står de under hinanden */
.tth-slides { max-width: 72rem; }
@media (max-width: 77.99rem) {
  .tth-slide .tth-indhold { grid-template-columns: 1fr !important; }
  .tth-slide .tth-tekst { max-width: 44rem; justify-self: center; }
  .tth-slide .tth-billede { position: static; width: auto !important; height: auto !important; margin-top: 0 !important; justify-self: center; }
  .tth-slide .tth-billede > * { position: static; }
  .tth-slide .tth-fig { max-width: 28rem; }
  .tth-slide h2 { text-align: left; }
}
@media (max-width: 77.99rem) { .tth-slide .tth-billede { max-width: 28rem; width: 100% !important; } .tth-slide .tth-fig img { height: auto; } }
/* Trin: bredere indholdsflade, så teksten starter længere mod venstre */
.tth-slides { max-width: 82rem; }
@media (min-width: 78rem) { .tth-slide .tth-billede { justify-self: end; } }
/* Forstørrelse af eksemplet */
.tth-zoom { cursor: zoom-in; }
a.tth-zoom img { transition: transform .25s ease, box-shadow .25s ease; }
a.tth-zoom:hover img { transform: scale(1.015); }
dialog.skabelon-dlg.bred { width: min(94vw, 70rem); }
dialog.skabelon-dlg.bred .skabelon-ark { padding: 1.2rem 1.4rem 1.4rem; }
dialog.skabelon-dlg.bred .skabelon-ark img { background: none; box-shadow: none; border: 0; }
.skabelon-knapper[hidden] { display: none; }
dialog.skabelon-dlg.bred { width: auto; max-width: 94vw; }
dialog.skabelon-dlg.bred .skabelon-ark { overflow: hidden; display: grid; place-items: center; }
dialog.skabelon-dlg.bred .skabelon-ark img { width: auto; max-width: 100%; max-height: calc(92vh - 6.5rem); }
/* Lidt mere luft mellem tekst og illustration i alle trin */
@media (min-width: 78rem) { .tth-slide .tth-indhold { column-gap: clamp(3rem, 1.5rem + 3vw, 5.5rem); } }
@media (min-width: 78rem) { .tth-slide .tth-indhold { column-gap: clamp(4rem, 2rem + 3.6vw, 7rem); } }
.tth-slide .tth-tekst ul + p { margin-top: 0.75em; }
.tth-slides { max-width: 96rem; }

/* Feedback: samme papirkort som forsiden og Hvad virker – og lidt mindre */
.pergament.feedback-kort {
  max-width: 40rem; margin-inline: auto;
  background: radial-gradient(130% 100% at 50% 0%, #f8ecdd 0%, #f0dcc4 100%);
  border: 1px solid var(--blaek); border-radius: 6px; overflow: hidden;
  box-shadow: 0 2px 5px rgba(30,18,8,.45), 0 8px 26px 7px rgba(40,25,12,.55);
  padding: clamp(2.6rem, 1.8rem + 2.4vw, 3.6rem) clamp(1.8rem, 1rem + 3vw, 3.4rem) clamp(3.4rem, 2.6rem + 2.4vw, 4.6rem);
}
.pergament.feedback-kort::before {
  inset: 0; opacity: 1; border-radius: 0; z-index: 1; pointer-events: none;
  border: 80px solid transparent; border-width: 80px 80px 115px;
  border-image: url("img/kortramme-tom-alfa.webp") 160 160 230 160 fill / 80px 80px 115px round;
}
.pergament.feedback-kort::after {
  content: ""; position: absolute; inset: 0; display: block;
  background: url("img/papir.webp") center / cover; opacity: .28; mix-blend-mode: multiply; pointer-events: none; z-index: 0;
}
.pergament.feedback-kort > * { position: relative; z-index: 2; }
.feedback-kort .formular { max-width: 30rem; }
@media (max-width: 40rem) {
  .pergament.feedback-kort::before { border-width: 56px 56px 80px; border-image-width: 56px 56px 80px; }
}
/* Hvad er stress?: de tre bokse ca. 10 % større */
.kortstak.kortstak-stor { max-width: 58rem; }
/* Feedback-felter i papirtone i stedet for hvidt */
.feedback-kort .felt textarea {
  background: rgba(248, 236, 221, 0.55);
  border: 1px solid rgba(169, 129, 63, 0.55);
  box-shadow: inset 0 1px 3px rgba(58, 42, 23, 0.12);
  color: #3a2a17;
}
.feedback-kort .felt textarea:focus { background: rgba(250, 241, 228, 0.8); border-color: #a9813f; outline: none; box-shadow: inset 0 1px 3px rgba(58,42,23,.12), 0 0 0 2px rgba(169,129,63,.25); }
/* Tiltag: tekst og billedring i ét bånd, adskilt af skillelinjen */
#tiltag .skillelinje.tiltag-skille { margin: clamp(1.4rem, 1rem + 1.2vw, 2rem) auto 0; }
#tiltag .ring-i-baand .modul-ramme.hoej.fri { margin-top: clamp(-66px, -4vw, -40px); }
#tiltag .skillelinje + div, #tiltag h2 + div { margin-top: 1rem !important; }
#tiltag .ring-i-baand .modul-ramme.hoej.fri { margin-top: clamp(-30px, -2vw, -16px); }
#tiltag .skillelinje.tiltag-skille { margin-bottom: 0.4rem; }
#tiltag .prosa p { margin-bottom: 0.8em; }
#tiltag .prosa p:last-of-type { margin-bottom: 0; }
/* Tiltag-teksten: bredere spalte, så blokken bliver lavere */
#tiltag .prosa > div[style] { max-width: min(72rem, 100%) !important; }
#tiltag .prosa > div[style] p { max-width: none; }
/* Forstørrelsen: vinduet slutter tæt om billedet, og titlen står centreret */
dialog.skabelon-dlg.bred { width: fit-content; max-width: 94vw; }
dialog.skabelon-dlg.bred .skabelon-ark { padding: 1rem 1.2rem 1.2rem; }
dialog.skabelon-dlg.bred .skabelon-ark img { max-height: calc(90vh - 6rem); max-width: min(100%, 64rem); }
.skabelon-top { position: relative; justify-content: center; text-align: center; padding-inline: 4.5rem; }
.skabelon-top .skabelon-luk { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); }
/* Divider i tiltag-båndet: samme bredde som teksten, ornamentet uforvrænget */
#tiltag .skillelinje.tiltag-skille { width: min(72rem, 100%); background-image: url("img/skillelinje-bred.webp"); background-size: 100% 100%; }
@media (max-width: 60rem) { #tiltag .skillelinje.tiltag-skille { width: min(100%, 44rem); background-image: url("img/skillelinje.webp"); background-size: contain; } }
/* "Stress har to sider": brødtekst i samme størrelse som tiltag-båndet */
#to-sider ~ .ingress { font-size: 1em; line-height: 1.6; max-width: min(70rem, 100%); }
#to-sider { font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.4rem); }
/* Opdelt: "Hvorfor netop disse tiltag?" (tekst) og "Stressreducerende tiltag" (ring) */
#udvalg .udvalg-tekst { max-width: min(72rem, 100%); margin: 1.2rem auto 0; }
#udvalg .udvalg-tekst p { max-width: none; margin-bottom: 0.8em; }
#udvalg .udvalg-tekst p:last-child { margin-bottom: 0; }
#udvalg h2, #tiltag h2 { text-align: center; }
#tiltag .prosa .skillelinje { margin-bottom: 0; }
.understreg { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: currentColor; }
.sektion:has(> .wrap > .bog-ramme) { overflow-x: clip; }
/* Om zerostress: samme ekstra guldkontur inden for de grå kanter som trin-fanen */
.om-sektion { position: relative; }
.om-sektion::after {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; bottom: 7px; pointer-events: none;
  border-block: 1px solid #a9813f;
  box-shadow: inset 0 5px 0 -4px #ccaa6e, inset 0 -5px 0 -4px #ccaa6e;
}
/* Sidefodens logobånd: tæt beskåret logo og mindre luft over og under */
.sidefod-baand .wrap { padding-block: clamp(0.9rem, 1.6vw, 1.4rem); }
.sidefod-logo { width: min(100%, 13.2rem); }
/* Hvad er stress?: introduktionen som lyst bånd i fuld bredde, som "Om zerostress" på forsiden */
.intro-baand-tekst { max-width: 44rem; margin-inline: auto; text-align: center; color: #1c1611; }
.intro-baand-tekst h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.3rem, 1.6rem + 2.2vw, 3.4rem); line-height: 1.1; margin: 0 0 1.1rem;
}
.intro-baand-tekst p {
  margin: 0 auto 1.1em; max-width: 40rem;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.02rem, 0.96rem + 0.2vw, 1.12rem); line-height: 1.65;
}
.intro-baand-tekst p.intro-baand-link { margin: 0 auto 0.35em; font-style: normal; font-size: clamp(0.98rem, 0.92rem + 0.2vw, 1.08rem); line-height: 1.5; }
.intro-baand-tekst p.intro-baand-foerste { margin-top: 1.6em; }
.intro-baand-link a { color: #8a6a32; text-decoration: none; border-bottom: 1px solid rgba(138,106,50,.4); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.intro-baand-link a:hover { color: #6b4f22; border-bottom-color: currentColor; }
.intro-baand-tekst p:last-child { margin-bottom: 0; }
.sektion.intro-baand { margin-top: clamp(1.4rem, 1rem + 2vw, 2.6rem); }
.sektion.intro-baand + .sektion { padding-top: clamp(1.2rem, 1rem + 1.4vw, 2.2rem); }
/* Sidefodens logobånd: samme ekstra guldkontur inden for kanterne */
.sidefod-baand { position: relative; }
.sidefod-baand::after {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; bottom: 7px; pointer-events: none;
  border-block: 1px solid #a9813f;
  box-shadow: inset 0 5px 0 -4px #ccaa6e, inset 0 -5px 0 -4px #ccaa6e;
}
/* Hvad virker: samme ekstra guldkontur i alle lyse bånd */
.baand-sektion { position: relative; }
.baand-sektion::after {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; bottom: 7px; pointer-events: none;
  border-block: 1px solid #a9813f;
  box-shadow: inset 0 5px 0 -4px #ccaa6e, inset 0 -5px 0 -4px #ccaa6e;
}
/* Yin og yang: tegningen toner over i båndets lyse papir, og teksten står i de to felter (Hvad virker) */
.yy-sektion .yy-stage { position: relative; width: min(100%, 24rem); margin: 0 auto 1.5rem; }
.yy-sektion .yy-svg { display: block; width: 100%; height: auto; overflow: visible; }
.yy-sektion .yy-flade { fill: rgba(255, 249, 240, 0.72); opacity: 0; }
.yy-sektion .yy-kant { fill: none; stroke: #8a6a3e; stroke-width: 2.2; stroke-linejoin: round; opacity: 0; }
.yy-sektion .yy-ring { fill: none; stroke: #8a6a3e; stroke-width: 2.2; opacity: 0; }
.yy-sektion .yy-tekst { max-width: 40rem; margin: 0 auto 2rem; }
.yy-sektion .yy-tekst h3 { text-align: center; font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2.1rem); margin: 0 0 .7rem; padding-bottom: .45rem; border-bottom: 1px solid rgba(140,104,50,.45); }
.yy-sektion .yy-tekst p { margin: 0 0 .8em; }
.yy-sektion .yy-tekst .diskret-link { text-align: center; margin-top: 1em; }
@media (min-width: 60rem) {
  .yy-sektion .yy-stage { width: min(100%, 52rem, calc(100vh - 7rem) * 0.984); container-type: inline-size; margin-bottom: 0; }
  .yy-spor.yy-paa .yy-kant, .yy-spor.yy-paa .yy-ring { opacity: .9; }
  .yy-spor.yy-paa .yy-tekst { position: absolute; margin: 0; width: 34%; font-size: clamp(0.82rem, 1.78cqw, 1.06rem); line-height: 1.5; text-align: left; }
  .yy-spor.yy-paa .yy-tekst h3 { font-size: clamp(1.15rem, 3.1cqw, 1.9rem); }
  .yy-spor.yy-paa .yy-tekst-lys { left: 15%; top: 13%; }
  .yy-spor.yy-paa .yy-tekst-mork { left: 51%; top: 54%; }
}
/* Hvad virker: teksterne står direkte på skybaggrunden – ingen kort */
.to-sider#yy-kort .side-kort { background: none !important; box-shadow: none !important; border: 0 !important; padding: clamp(1rem, 2.5vw, 2.5rem) clamp(0.25rem, 1.5vw, 1.5rem); }
.to-sider#yy-kort .side-kort::before, .to-sider#yy-kort .side-kort::after { display: none !important; }
.to-sider#yy-kort .side-kort .hjorner, .to-sider#yy-kort .side-kort .medaljon { display: none !important; }
.to-sider#yy-kort .side-kort h3 { border-bottom-color: rgba(140, 104, 50, 0.45); }
.to-sider#yy-kort .side-kort p { text-shadow: 0 0 14px rgba(252, 244, 232, .95), 0 0 3px rgba(252, 244, 232, .9); }
/* "Tolv veje til ro": divideren går helt ud til båndets kanter */
#tiltag .prosa .skillelinje {
  width: auto; margin-inline: calc(50% - 50vw);
  background:
    url("img/skillelinje-midte.webp") center / auto 100% no-repeat,
    linear-gradient(#7a5a34, #7a5a34) left center / calc(50% - clamp(14px, 2vw, 22px) * 1.95) 1px no-repeat,
    linear-gradient(#7a5a34, #7a5a34) right center / calc(50% - clamp(14px, 2vw, 22px) * 1.95) 1px no-repeat;
}
/* Ringen: plads til titel over og oversigtslinje under */
#tiltag .ring-i-baand .modul-ramme.hoej.fri { height: max(calc(min(100vw - 32px, 92rem) * 0.33 + 210px), 440px); margin-top: 0; }
/* Ringen: rammen må bruge hele skærmbredden (pile og oversigtslinje); selve hjulet holder sin størrelse */
#tiltag .ring-i-baand .modul-ramme.hoej.fri { --b: calc(100vw - 32px); }
/* Yin og yang mellem de to tekster (Hvad virker) */
.to-sider#yy-kort .yy-midt { margin: 0 auto; width: min(70vw, 17rem); align-self: center; }
.to-sider#yy-kort .yy-midt img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 14px rgba(60, 38, 18, .18)); }
@media (min-width: 60rem) {
  .to-sider#yy-kort { grid-template-columns: minmax(0, 1fr) clamp(13rem, 22vw, 21rem) minmax(0, 1fr); align-items: stretch; gap: clamp(1rem, 2vw, 2.5rem); }
  .to-sider#yy-kort .yy-midt { width: 100%; }
}
@media (min-width: 60rem) {
  .to-sider#yy-kort {
    width: min(100vw - 48px, 112rem); max-width: none; margin-left: 50%; transform: translateX(-50%);
    grid-template-columns: minmax(0, 1fr) clamp(17rem, 30vw, 32rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 4rem);
  }
  .to-sider#yy-kort .side-kort { width: 100%; max-width: 38rem; }
  .to-sider#yy-kort .side-kort:first-child { justify-self: start; }
  .to-sider#yy-kort .side-kort:last-child { justify-self: end; }
  .to-sider#yy-kort .side-kort p { max-width: none; }
}
/* Hvad virker: yin og yang over de to kort (genindsat) */
#yy-scene { position: relative; }
#yy-scene .yy { display: none; }
#yy-scene.yy-aktiv { position: sticky; }
#yy-scene.yy-aktiv .yy { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; }
#yy-scene.yy-aktiv .yy-svg { overflow: visible; display: block; }
#yy-scene.yy-aktiv .side-kort { opacity: 0; will-change: opacity, transform; }
/* Hvad virker: yin og yang med tekst i lommerne (version 2) */
.yy3 { display: grid; grid-template-columns: 1fr; gap: 0 clamp(2rem, 4vw, 4rem); max-width: 76rem; margin-inline: auto; --w: min(100%, 34rem); }
.yy3-svg { display: block; width: var(--w); height: auto; margin: 0 auto 1.5rem; overflow: visible; }
.yy3 h3 { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 1.35rem + 0.9vw, 2.1rem); margin: 0 0 .55rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(140,104,50,.45); }
.yy3 p { margin: 0 0 .85em; max-width: none; }
.yy3-lomme p { font-style: italic; font-family: var(--display); font-size: 1.12em; line-height: 1.5; }
.yy3-rest { margin-bottom: 2rem; }
.yy3-rest .diskret-link { margin-top: 1rem; }
@media (max-width: 60rem) {
  .yy3-svg { order: 0; }
  .yy3-p { order: 1; } .yy3-rp { order: 2; } .yy3-r { order: 3; } .yy3-rr { order: 4; }
}
@media (min-width: 60.01rem) {
  .yy3 { --w: min(40rem, 50vw); grid-template-columns: 1fr 1fr; position: relative; }
  .yy3-svg { grid-column: 1 / -1; margin-bottom: 2.5rem; }
  .yy3-rp { grid-column: 1; grid-row: 2; } .yy3-rr { grid-column: 2; grid-row: 2; }
  .yy3-lomme { position: absolute; }
  .yy3-p { right: 0; top: 2%; left: calc((100% - var(--w)) / 2 + var(--w) * 0.53); max-width: 30rem; }
  .yy3-r { left: 0; top: calc(var(--w) * 1.1364 * 0.69); right: calc((100% - var(--w)) / 2 + var(--w) * 0.53); }
  .yy3.yy3-aktiv { position: sticky; }
}
/* Yin og yang som hel, spejlvendt figur over de to tekstspalter */
.yy3 .yy3-hel { width: min(100%, 26rem); transform: scaleX(-1); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 60.01rem) {
  .yy3 .yy3-lomme { position: static; }
  .yy3 .yy3-p { grid-column: 1; grid-row: 2; } .yy3 .yy3-r { grid-column: 2; grid-row: 2; }
  .yy3 .yy3-rp { grid-column: 1; grid-row: 3; } .yy3 .yy3-rr { grid-column: 2; grid-row: 3; }
}
/* Yin og yang i midten med påvirkning til venstre (mørk side) og respons til højre (lys side) */
@media (min-width: 60.01rem) {
  .yy3 {
    grid-template-columns: minmax(0, 1fr) clamp(15rem, 25vw, 23rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.75rem, 3vw, 3.25rem);
    max-width: 82rem; align-items: start;
  }
  .yy3 .yy3-hel { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0.4rem 0 0; position: sticky; top: 6.5rem; }
  .yy3 .yy3-p  { grid-column: 1; grid-row: 1; text-align: right; }
  .yy3 .yy3-rp { grid-column: 1; grid-row: 2; text-align: right; }
  .yy3 .yy3-r  { grid-column: 3; grid-row: 1; }
  .yy3 .yy3-rr { grid-column: 3; grid-row: 2; }
  .yy3 h3 { font-size: clamp(1.7rem, 1.2rem + 1vw, 2.2rem); }
  .yy3 .yy3-lomme p { font-size: clamp(1.05rem, 0.95rem + 0.25vw, 1.2rem); }
  .yy3 .yy3-rest { font-size: clamp(0.95rem, 0.88rem + 0.2vw, 1.05rem); line-height: 1.6; margin-bottom: 0; }
  .yy3 .yy3-rest .diskret-link { text-align: inherit; }
}
@media (min-width: 60.01rem) {
  .yy3 { grid-template-columns: minmax(0, 1fr) clamp(16rem, 27vw, 26rem) minmax(0, 1fr); grid-template-rows: auto; align-items: center; }
  .yy3 .yy3-side-p { grid-column: 1; grid-row: 1; text-align: right; }
  .yy3 .yy3-side-r { grid-column: 3; grid-row: 1; }
  .yy3 .yy3-hel { grid-column: 2; grid-row: 1; position: static; margin: 0; }
  .yy3 .yy3-side .yy3-lomme, .yy3 .yy3-side .yy3-rest { grid-column: auto; grid-row: auto; }
  .yy3 .yy3-lomme { margin-bottom: 1.1rem; }
}
@media (max-width: 60rem) { .yy3 .yy3-side { margin-bottom: 1.5rem; } }
@media (min-width: 60.01rem) { .yy3 .yy3-side { align-self: start; } .yy3 .yy3-hel { align-self: center; } }
@media (max-width: 60rem) { .yy3 .yy3-hel { width: min(78%, 18rem); } }
/* Yin/yang: venstrestillet brødtekst, links på linje, svag lys tone bag teksten, større figur og lidt mindre tekst */
@media (min-width: 60.01rem) {
  .yy3 { grid-template-columns: minmax(0, 1fr) clamp(18rem, 31vw, 30rem) minmax(0, 1fr); }
  .yy3 .yy3-side { align-self: stretch; display: flex; flex-direction: column; }
  .yy3 .yy3-side-p .yy3-rest { text-align: left; }
  .yy3 .yy3-rest { font-size: clamp(0.9rem, 0.84rem + 0.18vw, 0.98rem); display: flex; flex-direction: column; flex: 1; }
  .yy3 .yy3-rest .diskret-link { margin-top: auto; padding-top: 1rem; }
  .yy3 .yy3-side-p .yy3-rest .diskret-link { text-align: right; }
  .yy3 .yy3-lomme p { font-size: clamp(1rem, 0.92rem + 0.22vw, 1.12rem); }
  .yy3 h3 { font-size: clamp(1.6rem, 1.15rem + 0.95vw, 2.05rem); }
}
.yy3 .yy3-side {
  background: radial-gradient(120% 100% at 50% 40%, rgba(255, 250, 242, 0.62), rgba(255, 250, 242, 0.38) 70%, rgba(255, 250, 242, 0) 100%);
  border-radius: 18px; padding: clamp(1rem, 1.6vw, 1.6rem) clamp(1rem, 1.8vw, 1.8rem);
}
@media (min-width: 60.01rem) {
  .yy3 { max-width: 88rem; }
  .yy3 .yy3-rest p.diskret-link { margin-top: auto !important; margin-bottom: 0; padding-top: 1.2rem; }
}
/* Yin/yang – optimeret: ingen kasser, bredere kolonner tæt på figuren, centrerede overskrifter, farvetone pr. side */
.yy3 .yy3-side { background: none; border-radius: 0; position: relative; isolation: isolate; }
.yy3 .yy3-side::before {
  content: ""; position: absolute; inset: -12% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--tone) 0%, var(--tone2) 55%, transparent 100%);
}
.yy3 .yy3-side-p { --tone: rgba(196, 160, 118, 0.30); --tone2: rgba(214, 184, 146, 0.16); }
.yy3 .yy3-side-r { --tone: rgba(255, 251, 244, 0.78); --tone2: rgba(255, 249, 238, 0.42); }
.yy3 .yy3-lomme { text-align: center !important; margin-bottom: 0.85em; }
.yy3 .yy3-lomme h3 { text-align: center; }
.yy3 .yy3-lomme p { margin: 0; font-size: clamp(1.05rem, 0.95rem + 0.25vw, 1.18rem) !important; }
.yy3 .yy3-rest { text-align: left !important; }
.yy3 .yy3-rest p { margin: 0 0 0.85em; }
.yy3 .yy3-rest p.diskret-link { text-align: center !important; }
@media (min-width: 60.01rem) {
  .yy3 {
    --bred: min(84rem, calc(100vw - 8rem));
    width: var(--bred); max-width: none; margin-inline: calc((100% - var(--bred)) / 2);
    grid-template-columns: minmax(0, 1fr) clamp(18rem, 30vw, 30rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 2.6vw, 3rem);
  }
  .yy3 .yy3-side { padding: 0.5rem clamp(0.5rem, 1.2vw, 1.25rem); }
  .yy3 .yy3-rest { font-size: clamp(0.95rem, 0.88rem + 0.2vw, 1.04rem); }
}
.sektion:has(.yy3) { overflow-x: clip; }
/* Yin/yang: samme bredde som båndets tekst ovenover (70rem) */
@media (min-width: 60.01rem) {
  .yy3 { --bred: min(70rem, calc(100vw - 4rem)); grid-template-columns: minmax(0, 1fr) clamp(15rem, 23vw, 23rem) minmax(0, 1fr); column-gap: clamp(1.25rem, 2.2vw, 2.5rem); }
  .yy3 .yy3-side { padding-inline: 0; }
  .yy3 .yy3-side::before { inset: -10% -8%; }
}
/* Skillelinjen som vektor: skarp i alle størrelser, ingen hak ved ornamentet */
.skillelinje, #tiltag .skillelinje.tiltag-skille {
  background:
    url("img/skillelinje-ornament.svg") center / auto 100% no-repeat,
    linear-gradient(to right, transparent, #735028 5%, #735028 95%, transparent) center / 100% 1.1px no-repeat;
}
/* Ringen: centreret efter skærmen uanset forælderens bredde (rettede forskydning på meget brede skærme) */
#tiltag .ring-i-baand .modul-ramme.hoej.fri { width: calc(100vw - 32px); max-width: none; margin-left: calc(50% - 50vw + 16px); margin-right: 0; }
#tiltag .ring-i-baand .modul { overflow: visible; }
#tiltag.sektion { overflow-x: clip; }
#tiltag .ring-i-baand .modul { width: auto; max-width: none; margin-inline: 0; }
#tiltag .ring-i-baand { grid-template-columns: minmax(0, 1fr); } #tiltag .ring-i-baand .modul { min-width: 0; }
#tiltag .ring-i-baand .modul { display: block; }
/* Yin/yang: figur med to halvdele oven på hinanden (til rulle-animationen) */
.yy3 .yy3-fig { position: relative; width: min(78%, 18rem); margin: 0 auto 1.5rem; aspect-ratio: 976 / 992; }
.yy3 .yy3-fig img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.yy3 .yy3-fig .yy3-hel { transform: scaleX(-1); }
.yy3 .yy3-halv { opacity: 0; }
.yy3.yy3-anim .yy3-halv { opacity: 1; will-change: transform; }
.yy3.yy3-anim .yy3-hel { transform: scaleX(-1); transition: none; }
.yy3.yy3-anim .yy3-side { will-change: transform; }
@media (min-width: 60.01rem) {
  .yy3 .yy3-fig { grid-column: 2; grid-row: 1; width: 100%; margin: 0; align-self: center; }
  .yy3.yy3-anim { position: sticky; }
}
.yy3 .yy3-fig .yy3-hel { width: 100%; margin: 0; position: absolute; }
.yy3.yy3-anim .yy3-fig { z-index: 2; } .yy3.yy3-anim .yy3-side { position: relative; z-index: 1; }
@media (min-width: 60.01rem) { .yy3.yy3-anim { position: relative; top: auto !important; } }
/* Yin/yang-sektion uden intro-bånd: overskrift øverst, konklusion nederst */
.yy3-sektion { padding-top: clamp(2.6rem, 1.8rem + 3vw, 4.5rem); }
.yy3-hoved { text-align: center; max-width: 44rem; margin: 0 auto clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
.yy3-hoved .overskrift { margin-bottom: 0.45rem; }
.yy3-hoved .ingress { margin: 0 auto; font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); color: #5a4430; }
.yy3 h3 { border-bottom: 0 !important; padding-bottom: 0 !important; }
.yy3-konklusion { text-align: center; max-width: 40rem; margin: clamp(2.4rem, 1.6rem + 3vw, 4rem) auto 0; }
.yy3-konklusion p { margin: 1rem auto 0; font-family: var(--display); font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.65rem); line-height: 1.4; color: #2a2017; text-wrap: balance; }
@media (min-width: 60.01rem) { .yy3 .yy3-fig { align-self: start; margin-top: 0.3rem; } }
/* Bogen på mobil: én side i højformat (modulet skifter selv opstilling under 600 px) */
@media (max-width: 39.5rem) { .bog-ramme { aspect-ratio: 392 / 618; } }