/* Bach & Co. – digitalt katalog: app-skærme (fase 1, trin 8 v2 – 25-10-2026)
 * Reference: «Godkendte visualiseringer til Claude», primær billede 1–3.
 * Mørk filmisk ramme (velkomst, personlig forside, bogside) og lys ramme
 * (Tilpas, Udforsk, Mine bøger, Til mig). Mobil først, 390 × 844.
 * Sitets globale regel a { color: inherit !important } → farve sættes på
 * forælder eller på span/svg inde i linket. */

@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
}

.kat-app {
	--kat-lys: #f8f6f0;
	--kat-sort: #1b2021;
	--kat-accent: #b4a8dc;
	--kat-accent-tekst: #1b2021;
	--kat-bg: var(--kat-lys);
	--kat-fg: var(--kat-sort);
	--kat-blid: color-mix(in srgb, var(--kat-fg) 62%, var(--kat-bg));
	--kat-streg: color-mix(in srgb, var(--kat-fg) 12%, transparent);
	--kat-flade-bund: color-mix(in srgb, var(--kat-fg) 6%, var(--kat-bg));
	--kat-radius: 28px;
	display: block;
	min-height: 100svh;
	padding-bottom: 112px;
	background-color: var(--kat-bg);
	color: var(--kat-fg);
	font-family: var(--bach-font-broedtekst);
	-webkit-font-smoothing: antialiased;
}
.kat-app--moerk { --kat-bg: #121617; --kat-fg: var(--kat-lys); --kat-flade-bund: #1d2324; }
body.kat-moerk-skaerm { background-color: #121617; }

.kat-app [hidden] { display: none !important; }
.kat-app a { text-decoration: none; }
.kat-app h1, .kat-app h2, .kat-app h3, .kat-app p, .kat-app dl, .kat-app dd { margin: 0; }
.kat-app button { font: inherit; margin: 0; padding: 0; border: 0; background: none; color: var(--kat-fg); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kat-app :focus-visible { outline: 2px solid var(--kat-accent); outline-offset: 3px; }
.kat-app .kat-ikon { flex: none; display: block; }
.kat-app [aria-pressed="true"] .kat-ikon-fyld, .kat-app .kat-ikon-fyld--altid { fill: currentColor; }
.kat-skjult { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Typografi */
.kat-display { font-family: var(--bach-font-overskrift); font-weight: 400; font-size: clamp(3rem, 15vw, 5.5rem); line-height: 0.92; letter-spacing: -0.02em; color: var(--kat-fg); }
.kat-display--lys { color: var(--kat-lys); }
.kat-accent { color: var(--kat-accent); }
.kat-ingress { font-size: 1.0625rem; line-height: 1.45; color: var(--kat-blid); max-width: 34ch; }
.kat-ingress--lys { color: color-mix(in srgb, var(--kat-lys) 82%, transparent); }

/* Knapper */
.kat-rundknap { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.kat-rundknap--stor { width: 60px; height: 60px; }
.kat-rundknap--accent { background-color: var(--kat-accent); }
.kat-rundknap--accent > * { color: var(--kat-accent-tekst); }
.kat-rundknap--glas { background-color: color-mix(in srgb, var(--kat-lys) 18%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--kat-lys) 40%, transparent); }
.kat-rundknap--glas > * { color: var(--kat-lys); }
.kat-rundhandling { display: inline-flex; align-items: center; gap: 14px; min-height: 60px; -webkit-tap-highlight-color: transparent; }
.kat-rundhandling-tekst { font-size: 1.0625rem; color: var(--kat-fg); }
.kat-rundhandling:active .kat-rundknap { transform: scale(0.94); }
.kat-pille { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-size: 1rem; line-height: 1.2; transition: transform 0.15s ease, background-color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.kat-pille:active { transform: scale(0.97); }
.kat-pille--bred { width: 100%; justify-content: space-between; }
.kat-pille--primaer { background-color: var(--kat-fg); }
.kat-pille--primaer > *, .kat-app button.kat-pille--primaer { color: var(--kat-bg); }
.kat-pille--accent { background-color: var(--kat-accent); }
.kat-pille--accent > * { color: var(--kat-accent-tekst); }
.kat-pille--sekundaer { min-height: 48px; padding: 0 18px; border: 1px solid var(--kat-streg); background-color: color-mix(in srgb, #ffffff 55%, var(--kat-bg)); }
.kat-pille--sekundaer > * { color: var(--kat-fg); }
.kat-tekstlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 1rem; color: var(--kat-fg); }
.kat-tekstlink > * { color: var(--kat-fg); }
.kat-tekstlink > span { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.kat-tekstlink--lys > * { color: var(--kat-lys); }
.kat-rund { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-color: color-mix(in srgb, var(--kat-lys) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.kat-app .kat-rund > * { color: var(--kat-sort); }
.kat-rund--flad { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.kat-app .kat-rund--flad > * { color: var(--kat-fg); }
.kat-rund--moerk { background-color: color-mix(in srgb, #000000 38%, transparent); }
.kat-app .kat-rund--moerk > * { color: var(--kat-lys); }

/* Billedfladen */
.kat-flade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; overflow: hidden; background-color: var(--kat-flade-bund); }
.kat-flade-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.kat-flade--omslag { display: flex; align-items: center; justify-content: center; padding: 96px 16% 120px; background-color: var(--kat-flade-farve); }
.kat-bogblok { position: relative; display: inline-flex; height: 100%; max-height: 100%; line-height: 0; border-radius: 2px 6px 6px 2px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 18px 40px rgba(0, 0, 0, 0.3), 0 40px 80px rgba(0, 0, 0, 0.18); animation: kat-ind 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.kat-bogblok::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, rgba(255, 255, 255, 0.18) 1.4%, rgba(0, 0, 0, 0.06) 3%, rgba(0, 0, 0, 0) 6%); pointer-events: none; }
.kat-flade-omslagimg { display: block; width: auto; height: 100%; max-width: none; }
.kat-hero { position: relative; }
.kat-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 140px; z-index: 1; background: linear-gradient(to bottom, rgba(10, 12, 13, 0.5), rgba(10, 12, 13, 0)); pointer-events: none; }
.kat-titelflade::before, .kat-tildig::before { display: none; }
@keyframes kat-ind { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kat-bogblok { animation: none; } .kat-pille { transition: none; } }

/* ===== Velkomst (neutral forside): billedet bærer teksten ===== */
.kat-velkomst { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100svh; margin-bottom: -112px; isolation: isolate; }
.kat-velkomst .kat-flade { z-index: -2; }
.kat-velkomst::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 12, 13, 0.92) 0%, rgba(10, 12, 13, 0.62) 38%, rgba(10, 12, 13, 0) 68%); pointer-events: none; }
.kat-velkomst-tekst { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 24px 128px; }
.kat-velkomst-tekst .kat-rundhandling { margin-top: 10px; }
.kat-velkomst .kat-rundhandling-tekst { color: var(--kat-lys); }

/* Profil kendt (sat i head) → personlig forside */
.kat-tildig { display: none; }
html.kat-har-profil .kat-velkomst { display: none; }
html.kat-har-profil .kat-tildig { display: block; }

/* ===== Personlig forside ===== */
.kat-tildig-top { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 96px 20px 22px; }
.kat-profilchip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px; border-radius: 999px; background-color: color-mix(in srgb, var(--kat-lys) 12%, transparent); border: 1px solid color-mix(in srgb, var(--kat-lys) 18%, transparent); font-size: 0.8125rem; }
.kat-profilchip > * { color: var(--kat-lys); }
.kat-profilchip .kat-ikon { width: 16px; height: 16px; }
.kat-tildig-titel { font-family: var(--bach-font-overskrift); font-weight: 400; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.02; letter-spacing: -0.01em; color: var(--kat-lys); max-width: 14ch; }
.kat-scener { display: grid; gap: 16px; padding: 0 12px; }
.kat-tildig-mere { margin: 22px 20px 0; }

.kat-scene-panel { position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: var(--kat-radius); height: 66svh; min-height: 440px; max-height: 640px; background-color: var(--kat-flade-bund); }
.kat-scene-panel .kat-flade { z-index: -2; }
.kat-scene-panel .kat-flade--omslag { padding: 10% 26% 46%; }
.kat-scene-panel::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 12, 13, 0.9) 0%, rgba(10, 12, 13, 0.55) 40%, rgba(10, 12, 13, 0) 66%); pointer-events: none; }
.kat-scene-panel-tekst { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 22px 22px; }
.kat-scene-panel-kicker { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--kat-lys) 85%, transparent); }
.kat-scene-panel-titel { font-family: var(--bach-font-overskrift); font-weight: 400; font-size: clamp(2.25rem, 10vw, 3.25rem); line-height: 0.96; letter-spacing: -0.01em; }
.kat-scene-link { position: static; }
.kat-app .kat-scene-panel-titel, .kat-app .kat-tildig-titel, .kat-app .kat-display--lys { color: var(--kat-lys); }
.kat-app .kat-bv-titel, .kat-app .kat-bv-h2, .kat-app .kat-tilpas-titel, .kat-app .kat-display { color: var(--kat-fg); }
.kat-app .kat-display.kat-display--lys { color: var(--kat-lys); }
.kat-scene-link, .kat-scene-link * { color: var(--kat-lys); }
.kat-scene-link::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.kat-scene-panel-teaser { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 1rem; line-height: 1.4; color: color-mix(in srgb, var(--kat-lys) 85%, transparent); max-width: 34ch; }
.kat-scene-panel-teaser:empty { display: none; }
.kat-scene-handlinger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-top: 10px; }
.kat-scene-laes, .kat-scene-trailer { display: inline-flex; align-items: center; gap: 10px; }
.kat-scene-trailer { position: relative; z-index: 2; }
.kat-scene-handling-tekst { font-size: 0.9375rem; color: var(--kat-lys); }

/* ===== Tilpas kataloget (lys) ===== */
.kat-tilpas { display: flex; flex-direction: column; padding-top: 84px; }
.kat-tilpas-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px 0 8px; }
.kat-tilpas-prikker { display: flex; gap: 6px; flex: 1; justify-content: center; }
.kat-prik { width: 22px; height: 4px; border-radius: 2px; background-color: var(--kat-streg); }
.kat-prik.is-aktiv { background-color: var(--kat-fg); }
.kat-tilpas-spring { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 0.9375rem; }
.kat-tilpas-spring > * { color: var(--kat-blid); }
.kat-tilpas-top > [data-kat-tilbage-trin][hidden] ~ .kat-tilpas-prikker { padding-left: 44px; }
.kat-tilpas-trin { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 0; }
.kat-tilpas-titel { padding: 0 4px; font-family: var(--bach-font-overskrift); font-weight: 400; font-size: clamp(2.25rem, 10vw, 3rem); line-height: 1; letter-spacing: -0.01em; color: var(--kat-fg); outline: none; }
.kat-tilpas-trin > .kat-ingress { padding: 0 4px; }
.kat-valgliste { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.kat-app .kat-valg { position: relative; display: flex; align-items: stretch; width: 100%; min-height: 96px; padding: 0; overflow: hidden; border-radius: 22px; background-color: color-mix(in srgb, var(--kat-valg-farve, #d9bc78) 55%, var(--kat-lys)); text-align: left; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.kat-app .kat-valg:active { transform: scale(0.985); }
.kat-app .kat-valg[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--kat-sort); }
.kat-valg-billede { position: relative; width: 38%; flex: none; overflow: hidden; background-color: var(--kat-valg-farve, #d9bc78); }
.kat-valg-billede img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.kat-valg-billede::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40%; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--kat-valg-farve, #d9bc78) 55%, var(--kat-lys))); }
.kat-valg-tekst { display: flex; flex-direction: column; justify-content: center; gap: 3px; flex: 1; min-width: 0; padding: 14px 8px 14px 14px; }
.kat-valg-navn { font-family: var(--bach-font-overskrift); font-size: 1.5rem; line-height: 1.02; color: var(--kat-sort); }
.kat-valg-besk { font-size: 0.8125rem; line-height: 1.35; color: color-mix(in srgb, var(--kat-sort) 72%, transparent); }
.kat-valg-tjek { align-self: center; margin-right: 14px; width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--kat-sort) 55%, transparent); color: var(--kat-sort); }
.kat-valg-tjek .kat-ikon { width: 18px; height: 18px; }
.kat-valg--multi .kat-valg-tjek .kat-ikon { opacity: 0; }
.kat-valg--multi[aria-pressed="true"] .kat-valg-tjek { background-color: var(--kat-sort); border-color: var(--kat-sort); color: var(--kat-lys); }
.kat-valg--multi[aria-pressed="true"] .kat-valg-tjek .kat-ikon { opacity: 1; }
.kat-valg--lille { min-height: 64px; }
.kat-valg--lille .kat-valg-navn { font-size: 1.25rem; }
.kat-tilpas-bund { position: sticky; bottom: 92px; z-index: 3; margin-top: 16px; padding: 14px 16px 0; background: linear-gradient(to bottom, rgba(248, 246, 240, 0), var(--kat-bg) 30%); }

/* ===== Bogsiden (mørk) – bogens univers ===== */
.kat-bv-flade { height: 66svh; min-height: 420px; }
.kat-bv-flade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to bottom, rgba(18, 22, 23, 0), var(--kat-bg)); pointer-events: none; }
.kat-bv-knapper { position: absolute; z-index: 3; top: 64px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.kat-bv-knapper > * { pointer-events: auto; }
.kat-bv-ark { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 26px; margin-top: -150px; padding: 0 20px; }
.kat-bv-intro { display: flex; flex-direction: column; gap: 8px; }
.kat-bv-kicker { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--kat-fg) 80%, transparent); }
.kat-bv-titel { font-family: var(--bach-font-overskrift); font-weight: 400; font-size: clamp(2.5rem, 12vw, 4.25rem); line-height: 0.94; letter-spacing: -0.015em; color: var(--kat-fg); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.kat-bv-kredit { font-size: 0.9375rem; line-height: 1.4; color: var(--kat-blid); }
.kat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.kat-chips > span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--kat-streg); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kat-fg); }
.kat-bv-handling { display: flex; flex-direction: column; gap: 20px; }
.kat-ikonraekke { display: flex; justify-content: space-between; gap: 6px; padding: 14px 4px; border-top: 1px solid var(--kat-streg); border-bottom: 1px solid var(--kat-streg); }
.kat-app .kat-ikonhandling { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; min-height: 52px; font-size: 0.8125rem; text-align: center; }
.kat-ikonhandling > * { color: var(--kat-fg); }
.kat-ikonhandling .kat-ikon { width: 24px; height: 24px; }
.kat-faner { position: sticky; top: 72px; z-index: 4; display: flex; gap: 6px; margin: 0 -20px; padding: 8px 20px; overflow-x: auto; scrollbar-width: none; background-color: color-mix(in srgb, var(--kat-bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.kat-faner::-webkit-scrollbar { display: none; }
.kat-faner a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background-color: color-mix(in srgb, var(--kat-fg) 8%, transparent); font-size: 0.875rem; color: var(--kat-fg); }
.kat-faner a.is-aktiv { background-color: var(--kat-fg); color: var(--kat-bg); }
.kat-bv-sektion { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 136px; }
.kat-bv-h2 { font-family: var(--bach-font-overskrift); font-weight: 400; font-size: 1.75rem; line-height: 1.08; color: var(--kat-fg); }
.kat-bv-h3 { margin: 16px 0 6px; font-size: 1rem; font-weight: 600; color: var(--kat-fg); }
.kat-bv-teaser { font-family: var(--bach-font-overskrift); font-size: 1.375rem; line-height: 1.28; color: var(--kat-fg); max-width: 32ch; }
.kat-bv-tekst { font-size: 1rem; line-height: 1.62; color: color-mix(in srgb, var(--kat-fg) 86%, transparent); max-width: 62ch; }
.kat-bv-tekst p { margin: 0 0 1em; }
.kat-bv-sektion .kat-pille--accent { margin-top: 6px; }
.kat-smugkig { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 22px; background-color: var(--kat-flade-bund); }
.kat-smugkig-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.kat-smugkig::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to top, rgba(10, 12, 13, 0.7), rgba(10, 12, 13, 0) 50%); }
.kat-smugkig-knap { position: absolute; z-index: 1; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; }
.kat-bv-dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; padding: 18px; border-radius: 20px; background-color: var(--kat-flade-bund); font-size: 0.9375rem; }
.kat-bv-dl dt { color: var(--kat-blid); }
.kat-bv-dl dd { color: var(--kat-fg); }
.kat-opdag { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 12px; margin: 0 -20px; padding: 2px 20px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; scrollbar-width: none; }
.kat-opdag::-webkit-scrollbar { display: none; }
.kat-opdag-kort { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 3 / 4.3; border-radius: 20px; scroll-snap-align: start; background-color: var(--kat-flade-bund); }
.kat-opdag-kort .kat-flade { z-index: -2; }
.kat-opdag-kort .kat-flade--omslag { padding: 12% 16% 36%; }
.kat-opdag-kort::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 12, 13, 0.82) 0%, rgba(10, 12, 13, 0.2) 40%, rgba(10, 12, 13, 0) 60%); pointer-events: none; }
.kat-opdag-tekst { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 3px; padding: 14px; }
.kat-opdag-tekst > * { color: var(--kat-lys); }
.kat-opdag-titel { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-family: var(--bach-font-overskrift); font-size: 1.125rem; line-height: 1.08; }
.kat-opdag-meta { font-size: 0.75rem; opacity: 0.85; }

/* ===== Titelflade (Udforsk, Mine bøger, Til mig) ===== */
.kat-titelflade { display: flex; flex-direction: column; gap: 10px; padding: 112px 20px 36px; border-radius: 0 0 28px 28px; background-color: #121617; }
.kat-titelflade .kat-display { font-size: clamp(2.75rem, 13vw, 4.5rem); }
.kat-titelflade-tekst { font-size: 1rem; line-height: 1.45; color: color-mix(in srgb, var(--kat-lys) 78%, transparent); max-width: 36ch; }
.kat-titelflade-tekst:empty { display: none; }
.kat-status { padding: 0 20px; font-size: 0.875rem; color: var(--kat-blid); }
.kat-status:empty { display: none; }

/* Udforsk – rolig opslagsvisning */
.kat-udforsk-ramme { padding: 0 16px; }
.kat-app .kat-udforsk-panel { position: relative; top: auto; margin-top: -22px; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; border-radius: 22px; border: 1px solid var(--kat-streg); background-color: var(--kat-bg); box-shadow: 0 10px 30px rgba(27, 32, 33, 0.08); }
.kat-app .kat-udforsk-panel > * { min-width: 0; }
.kat-app .kat-soeg, .kat-app .kat-vaelg { display: flex; flex: none; width: 100%; }
.kat-app .kat-soeg-felt, .kat-app .kat-serie-felt { width: 100%; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--kat-streg); background-color: color-mix(in srgb, #ffffff 60%, var(--kat-bg)); color: var(--kat-fg); font-family: inherit; font-size: 1rem; }
.kat-app .kat-udforsk-panel .kat-filtre { display: flex; flex: none; gap: 8px; width: calc(100% + 28px) !important; max-width: calc(100% + 28px) !important; margin: 0 -14px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; }
.kat-app .kat-filter { flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--kat-streg); background-color: transparent; color: var(--kat-fg); font-size: 0.875rem; }
.kat-app .kat-filter.is-active { background-color: var(--kat-fg); border-color: var(--kat-fg); color: var(--kat-bg); }
.kat-app .kat-udforsk-antal { margin: 20px 4px 4px; font-size: 0.8125rem; color: var(--kat-blid); }
.kat-app .kat-udforsk-tom { margin: 24px 4px; color: var(--kat-fg); }

/* Listerækker */
.kat-app .kat-liste, .kat-mine-liste { display: flex; flex-direction: column; gap: 0; }
.kat-app .kat-listebog { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 0; border-bottom: 1px solid var(--kat-streg); }
.kat-listebog-link { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; padding: 12px 4px; }
.kat-listebog-omslag { width: 56px; flex: none; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; padding: 6px; border-radius: 12px; background-color: color-mix(in srgb, var(--kat-flade-farve) 40%, var(--kat-bg)); }
.kat-listebog-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 1px 3px 3px 1px; box-shadow: 0 2px 6px rgba(27, 32, 33, 0.2); }
.kat-listebog-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kat-listebog-titel { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 1rem; line-height: 1.3; color: var(--kat-fg); }
.kat-listebog-meta { font-size: 0.8125rem; line-height: 1.35; color: var(--kat-blid); }

/* Mine bøger */
.kat-mine-vaerktoj { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 10px; }
.kat-segment { display: inline-flex; padding: 3px; border-radius: 999px; background-color: var(--kat-flade-bund); }
.kat-app .kat-segment button { min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: 0.875rem; }
.kat-app .kat-segment button[aria-pressed="true"] { background-color: var(--kat-bg); box-shadow: 0 1px 3px rgba(27, 32, 33, 0.14); }
.kat-mine-visuel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 16px 0; }
.kat-mine-visuel .kat-opdag-kort { aspect-ratio: 3 / 4.2; }
.kat-mine-liste { padding: 0 16px; }
.kat-mine[data-vis="visuel"] .kat-mine-liste { display: none; }
.kat-mine[data-vis="liste"] .kat-mine-visuel { display: none; }
.kat-delt { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 16px; padding: 16px; border-radius: 18px; background-color: var(--kat-flade-bund); }
.kat-tom { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 36px 20px; }
.kat-tom-titel { font-family: var(--bach-font-overskrift); font-size: 1.75rem; line-height: 1.1; color: var(--kat-fg); }

/* Til mig */
.kat-tilmig-indhold { display: flex; flex-direction: column; gap: 12px; padding: 24px 16px 0; }
.kat-profilkort { display: grid; grid-template-columns: max-content 1fr; gap: 12px 20px; margin-bottom: 8px; padding: 18px; border-radius: 20px; background-color: var(--kat-flade-bund); font-size: 1rem; }
.kat-profilkort dt { color: var(--kat-blid); }
.kat-profilkort dd { color: var(--kat-fg); }
.kat-profilkort .kat-ingress { grid-column: 1 / -1; }

/* ===== Katalog-headeren: logo til venstre, mørk glas på mørke skærme ===== */
@media (max-width: 1023px) { .bco-katalog .kat-top { justify-content: flex-start !important; } }
.bco-katalog .kat-logo { flex: none !important; }
.bco-katalog .kat-logo .kat-logo-billede { width: 39px !important; height: 34px !important; max-width: none !important; object-fit: contain; }
@media (max-width: 767px) { .bco-katalog .kat-logo .kat-logo-billede { width: 32px !important; height: 28px !important; } }
@media (max-width: 1023px) { .bco-katalog .kat-top { padding-left: 20px !important; padding-right: 20px !important; } }
body.kat-moerk-skaerm .kat-logo-negativ { opacity: 1 !important; }
body.kat-moerk-skaerm .kat-logo-sort { opacity: 0 !important; }
body.kat-moerk-skaerm.kat-rullet .kat-top { background-color: color-mix(in srgb, #121617 78%, transparent) !important; border-color: transparent !important; }
.kat-nav-tal { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background-color: #1b2021; color: #f8f6f0; font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; }
.kat-nav-tal[hidden] { display: none; }

/* ===== Tablet og desktop ===== */
@media (min-width: 768px) {
	.kat-scener { grid-template-columns: 1fr 1fr; gap: 18px; padding: 0 28px; }
	.kat-tildig-top { padding: 112px 32px 28px; }
	.kat-tildig-mere { margin: 24px 32px 0; }
	.kat-titelflade { padding: 128px 32px 44px; }
	.kat-udforsk-ramme, .kat-mine-liste { padding: 0 32px; }
	.kat-mine-visuel { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding: 4px 32px 0; }
	.kat-mine-vaerktoj { padding: 22px 32px 12px; }
	.kat-tilmig-indhold { max-width: 560px; padding: 32px 32px 0; }
	.kat-opdag { grid-auto-columns: 30%; }
	.kat-app .kat-udforsk-panel { flex-direction: row; flex-wrap: wrap; align-items: center; }
	.kat-app .kat-soeg { flex: 1 1 320px; width: auto; }
	.kat-app .kat-vaelg { flex: 0 0 auto; width: auto; }
	.kat-app .kat-udforsk-panel .kat-filtre { flex: 1 1 100%; order: 3; }
	.kat-tilpas-trin, .kat-tilpas-bund, .kat-tilpas-top { width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 1024px) {
	.kat-app { padding-bottom: 64px; }
	.kat-velkomst { margin-bottom: -64px; }
	.kat-velkomst-tekst { max-width: 760px; padding: 0 72px 96px; }
	.kat-display { font-size: clamp(4rem, 7vw, 7rem); }
	.kat-tildig-top { padding: 128px 64px 32px; }
	.kat-tildig-titel { font-size: clamp(2.75rem, 4vw, 3.75rem); }
	.kat-scener { grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 0 64px; }
	.kat-scene-panel { height: 72svh; max-height: 720px; }
	.kat-scene-panel:first-child { grid-column: 1 / -1; }
	.kat-scene-panel-tekst { padding: 32px 36px; }
	.kat-tildig-mere { margin: 28px 64px 0; }
	.kat-tilpas { padding-top: 112px; }
	.kat-bv { display: grid; grid-template-columns: 56% 44%; align-items: start; padding-bottom: 0; }
	.kat-bv-flade { position: sticky; top: 0; height: 100svh; }
	.kat-bv-flade::after { height: 30%; }
	.kat-bv-flade .kat-flade--omslag { padding: 120px 16% 80px; }
	.kat-bv-knapper { top: auto; bottom: 28px; left: 28px; right: 28px; }
	.kat-bv-ark { margin-top: 0; padding: 120px 56px 72px; max-width: 640px; }
	.kat-faner { top: 84px; margin: 0 -56px; padding: 8px 56px; }
	.kat-opdag { grid-auto-columns: 42%; margin: 0 -56px; padding: 2px 56px 8px; scroll-padding-left: 56px; }
	.kat-titelflade { padding: 140px 64px 52px; }
	.kat-udforsk-ramme, .kat-mine-liste { padding: 0 64px; }
	.kat-mine-visuel { padding: 4px 64px 0; }
	.kat-mine-vaerktoj { padding: 24px 64px 12px; }
	.kat-tilmig-indhold { padding: 36px 64px 0; }
	.kat-app .kat-liste { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
}
/* Headerens glas i et pseudo-element: backdrop-filter på .kat-top gør den til ramme for
 * bundbjælkens position:fixed, så bjælken hopper op i headeren (fundet 25-10). */
body.bco-katalog .kat-top { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transform: none !important; filter: none !important; }
body.bco-katalog .kat-top::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; opacity: 0; transition: opacity 0.25s ease; -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); pointer-events: none; }
body.bco-katalog.kat-rullet .kat-top::before { opacity: 1; }

/* ====================================================================
 * Trin 9 (25-10-2026): app frem for hjemmeside.
 * Ingen footer, tryk-feedback, sideskift med View Transitions,
 * bogsiden som skærm med ark (mobil), velkomsten som én skærm,
 * «Kataloget som app» og «Om kataloget» i Til mig.
 * ==================================================================== */

/* Hjemmeside-tegn væk: footerens links bor nu i Til mig */
body.bco-katalog .kat-fod { display: none !important; }
body.bco-katalog { -webkit-tap-highlight-color: transparent; }
body.bco-katalog :is(.kat-nav, .kat-app) :is(a, button) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kat-app :is(.kat-rundhandling, .kat-pille, .kat-rund, .kat-ikonhandling, .kat-valg, .kat-scene-panel, .kat-opdag-kort, .kat-listebog, .kat-faner a, .kat-mere, .kat-indst-raekke, .kat-smugkig) { transition: transform 0.14s ease, opacity 0.14s ease; }
.kat-app :is(.kat-rundhandling, .kat-pille, .kat-rund, .kat-ikonhandling, .kat-valg, .kat-opdag-kort, .kat-listebog, .kat-faner a, .kat-mere, .kat-indst-raekke):active { transform: scale(0.96); }
.kat-app :is(.kat-scene-panel, .kat-smugkig):active { transform: scale(0.985); }
body.bco-katalog .kat-nav a:active { opacity: 0.6; }
html.kat-henter, html.kat-henter * { cursor: progress; }

/* Sideskift: ny skærm glider ind fra højre, tilbage glider ud; faner tones blødt */
@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.34s; animation-timing-function: cubic-bezier(0.22, 0.8, 0.2, 1); }
	html[data-kat-retning="frem"]::view-transition-old(root) { animation-name: kat-ud-venstre; }
	html[data-kat-retning="frem"]::view-transition-new(root) { animation-name: kat-ind-hoejre; }
	html[data-kat-retning="tilbage"]::view-transition-old(root) { animation-name: kat-ud-hoejre; z-index: 2; }
	html[data-kat-retning="tilbage"]::view-transition-new(root) { animation-name: kat-ind-venstre; }
	html[data-kat-retning="fane"]::view-transition-old(root), html[data-kat-retning="fane"]::view-transition-new(root) { animation-duration: 0.2s; }
	body.bco-katalog .kat-nav { view-transition-name: kat-nav; }
	::view-transition-group(kat-nav) { animation: none; }
}
@keyframes kat-ind-hoejre { from { transform: translateX(100%); } }
@keyframes kat-ud-venstre { to { transform: translateX(-24%); opacity: 0.5; } }
@keyframes kat-ud-hoejre { to { transform: translateX(100%); } }
@keyframes kat-ind-venstre { from { transform: translateX(-24%); opacity: 0.5; } }

/* Velkomst: én skærm, knap i stedet for tekstlink, mindre tekst */
.kat-velkomst .kat-tekstlink { min-height: 48px; padding: 0 22px; border-radius: 999px; background-color: rgba(248, 246, 240, 0.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.kat-velkomst .kat-tekstlink > span { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 1023px) {
	.kat-velkomst { height: 100svh; min-height: 0; margin-bottom: 0; }
	.kat-velkomst .kat-ingress { display: none; }
	.kat-velkomst-tekst { gap: 14px; padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
	.kat-velkomst-tekst .kat-rundhandling { margin-top: 14px; }
}

/* Bogside på mobil: billedet står fast, arket trækkes op over det */
@media (max-width: 1023px) {
	html:has(.kat-bv) { scroll-snap-type: y proximity; }
	.kat-bv { min-height: 100svh; scroll-snap-align: start; }
	.kat-bv .kat-bv-flade { position: fixed; top: 0; left: 0; right: 0; height: 100lvh; min-height: 0; z-index: 0; }
	.kat-bv .kat-bv-flade::after { height: 45%; background: linear-gradient(to bottom, rgba(18, 22, 23, 0), rgba(18, 22, 23, 0.55)); }
	.kat-bv .kat-bv-flade::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; background-color: #0b0e0f; opacity: calc(var(--kat-ark-p, 0) * 0.65); pointer-events: none; }
	.kat-bv > .kat-bv-knapper { position: fixed; z-index: 62; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 14px; right: 14px; }
	.kat-bv-topbar { position: fixed; z-index: 61; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; height: calc(env(safe-area-inset-top, 0px) + 68px); padding: env(safe-area-inset-top, 0px) 72px 0; background-color: color-mix(in srgb, #121617 86%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; }
	.kat-bv-topbar span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1rem; font-weight: 600; color: var(--kat-lys); }
	body.kat-bv-oppe .kat-bv-topbar { opacity: 1; transform: none; }
	body.bco-katalog:has(.kat-bv) .kat-top { pointer-events: none; }
	body.bco-katalog:has(.kat-bv) .kat-top .kat-nav { pointer-events: auto; }
	body.bco-katalog:has(.kat-bv) .kat-top .kat-logo { visibility: hidden; }
	.kat-bv .kat-bv-ark { position: relative; z-index: 3; margin-top: 54svh; min-height: 100svh; gap: 22px; padding: 12px 20px calc(120px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; background-color: var(--kat-bg); box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.4); scroll-snap-align: start; scroll-margin-top: 0; }
	.kat-bv .kat-bv-ark::before { content: ""; align-self: center; flex: none; width: 40px; height: 5px; margin-bottom: 2px; border-radius: 3px; background-color: color-mix(in srgb, var(--kat-fg) 26%, transparent); }
	.kat-bv .kat-bv-titel { font-size: clamp(2.125rem, 10vw, 3rem); text-shadow: none; }
	.kat-bv .kat-faner { top: calc(env(safe-area-inset-top, 0px) + 68px); }
	.kat-bv .kat-bv-sektion { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 124px); }
}

/* «Læs mere» */
.kat-bv-tekst.kat-foldet { max-height: 9.7em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.kat-app .kat-mere { align-self: flex-start; display: inline-flex; align-items: center; min-height: 40px; margin-top: -6px; padding: 0 16px; border: 0; border-radius: 999px; background-color: color-mix(in srgb, var(--kat-fg) 10%, transparent); font: inherit; font-size: 0.9375rem; cursor: pointer; }
.kat-app .kat-mere > span { color: var(--kat-fg); }

/* Til mig: «Kataloget som app» og «Om kataloget» */
.kat-indstillinger { display: flex; flex-direction: column; gap: 10px; margin: 28px 20px 0; }
.kat-indstillinger[hidden] { display: none; }
.kat-app .kat-indst-titel { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kat-blid); }
.kat-indst-boks { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 20px; background-color: var(--kat-flade-bund); }
.kat-indst-tekst { font-size: 0.9375rem; line-height: 1.45; color: var(--kat-fg); }
.kat-indst-liste { gap: 0; padding: 0 18px; align-items: stretch; color: var(--kat-fg); }
.kat-indst-raekke { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; border-top: 1px solid color-mix(in srgb, var(--kat-fg) 10%, transparent); font-size: 1rem; }
.kat-indst-raekke:first-child { border-top: 0; }
.kat-indst-raekke svg { width: 18px; height: 18px; opacity: 0.5; }

/* Trin 9, rettelser: sitets a { color: inherit !important } slår aktive farver ihjel – farven sættes på børnene / som text-fill */
body.bco-katalog .kat-nav-punkt.is-active * { color: var(--bach-kalk-base, #f8f6f0); }
.kat-faner a.is-aktiv { -webkit-text-fill-color: var(--kat-bg); }
@media (max-width: 1023px) {
	.kat-bv-topbar { background-color: color-mix(in srgb, #121617 97%, transparent); border-bottom: 1px solid rgba(248, 246, 240, 0.06); }
	html:not(.kat-har-profil) body.bco-katalog:has(.kat-forside-app) { padding-bottom: 0 !important; }
	html:not(.kat-har-profil) .kat-forside-app { padding-bottom: 0 !important; }
}
@media (max-width: 1023px) {
	/* Hele billedet skal kunne ses over arket – ikke kun den øverste halvdel */
	.kat-bv .kat-bv-flade { height: 62svh; background-color: var(--kat-bg); }
}

/* ====================================================================
 * Trin 10 (25-10-2026): bladring mellem bøgerne i den række, man kom fra.
 * Tæller («Til dig · 3 af 7») og pile på billedet; swipe på billedet.
 * ==================================================================== */
.kat-bv-flade { touch-action: pan-y; }
.kat-bv-flade .kat-flade { will-change: transform; }
.kat-blad { position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.kat-blad > * { pointer-events: auto; }
.kat-blad-taeller { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; max-width: calc(100% - 140px); min-height: 32px; margin: 0; padding: 0 14px; border-radius: 999px; background-color: color-mix(in srgb, #000000 38%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); white-space: nowrap; }
.kat-blad-taeller span { overflow: hidden; text-overflow: ellipsis; font-size: 0.8125rem; letter-spacing: 0.02em; color: #f8f6f0; }
.kat-blad-pil { position: absolute; transform: translateY(-50%); }
.kat-blad-pil--forrige svg { transform: rotate(180deg); }
.kat-blad-pil[disabled] { opacity: 0; pointer-events: none; }
.kat-app .kat-blad-pil:active { transform: translateY(-50%) scale(0.92); }

@media (max-width: 1023px) {
	.kat-bv > .kat-blad { position: fixed; z-index: 60; bottom: auto; height: 54svh; transition: opacity 0.2s ease; }
	.kat-blad-taeller { top: calc(env(safe-area-inset-top, 0px) + 18px); }
	.kat-blad-pil { top: 50%; }
	.kat-blad-pil--forrige { left: 10px; }
	.kat-blad-pil--naeste { right: 10px; }
	body.kat-bv-oppe .kat-bv > .kat-blad { opacity: 0; pointer-events: none; }
	body.kat-bv-oppe .kat-bv > .kat-blad > * { pointer-events: none; }
}
@media (min-width: 1024px) {
	.kat-blad-taeller { top: 108px; }
	.kat-blad-pil { top: 50%; }
	.kat-blad-pil--forrige { left: 24px; }
	.kat-blad-pil--naeste { right: 24px; }
}

/* Bladring: næste bog glider ind fra højre, forrige fra venstre – uden at skubbe bundbjælken */
@media (prefers-reduced-motion: no-preference) {
	html[data-kat-retning="naeste"]::view-transition-old(root) { animation-name: kat-blad-ud-venstre; }
	html[data-kat-retning="naeste"]::view-transition-new(root) { animation-name: kat-ind-hoejre; }
	html[data-kat-retning="forrige"]::view-transition-old(root) { animation-name: kat-ud-hoejre; }
	html[data-kat-retning="forrige"]::view-transition-new(root) { animation-name: kat-blad-ind-venstre; }
}
@keyframes kat-blad-ud-venstre { to { transform: translateX(-100%); } }
@keyframes kat-blad-ind-venstre { from { transform: translateX(-100%); } }

/* ====================================================================
 * Trin 11 (25-10-2026): bogsiden i Apple TV-retning.
 * Fuld hero med titellag, meta, hvid knap + rund gem-knap og prikker for
 * bladring. Dybde ved scroll og blød strækning ved nedadtræk (katalog-app.js).
 * Afløser arket fra trin 9 (.kat-bv--tv har forrang).
 * ==================================================================== */
.kat-skjult { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html:has(.kat-bv--tv) { scroll-snap-type: none !important; overscroll-behavior-y: none; }
body.bco-katalog:has(.kat-bv--tv) { background-color: #121617; }
body.bco-katalog:has(.kat-bv--tv) .kat-top { pointer-events: none; }
body.bco-katalog:has(.kat-bv--tv) .kat-top .kat-nav { pointer-events: auto; }
body.bco-katalog:has(.kat-bv--tv) .kat-top .kat-logo { visibility: hidden; }

.kat-bv.kat-bv--tv { display: block; min-height: 0; padding: 0; scroll-snap-align: none; }
.kat-bv--tv .kat-bv-flade { position: relative !important; top: auto; left: auto; right: auto; z-index: 1; height: 84svh !important; min-height: 520px; max-height: 980px; overflow: hidden; background-color: #121617; touch-action: pan-y; }
.kat-bv--tv .kat-bv-flade::before { content: none !important; }
.kat-bv--tv .kat-bv-flade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 62%; z-index: 2; background: linear-gradient(to bottom, rgba(18, 22, 23, 0) 0%, rgba(18, 22, 23, 0.55) 38%, rgba(18, 22, 23, 0.94) 82%, #121617 100%); pointer-events: none; }
.kat-bv-billede { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; transform-origin: 50% 0; will-change: transform; }
.kat-bv-billede .kat-flade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.kat-bv-billede .kat-flade-img { width: 100%; height: 100%; object-fit: cover; }

.kat-bv-scene { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 22px 26px; text-align: center; will-change: transform, opacity; }
.kat-bv-maerke { margin: 0 0 4px; display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border: 1.5px solid rgba(248, 246, 240, 0.32); border-radius: 999px; background-color: rgba(18, 22, 23, 0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kat-bv-maerke span { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; color: #f8f6f0; }
.kat-bv-titellag { display: flex; justify-content: center; width: 100%; will-change: transform; transform-origin: 50% 100%; }
.kat-app .kat-bv--tv .kat-bv-titel, .kat-bv--tv .kat-bv-titellag .kat-bv-titel { margin: 0; max-width: 16ch; font-size: clamp(2.375rem, 11vw, 4.5rem); line-height: 0.95; letter-spacing: -0.015em; text-align: center; color: #f8f6f0; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45); }
.kat-bv-titelgrafik { display: block; width: auto; height: auto; max-width: min(86%, 560px); max-height: 24svh; object-fit: contain; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45)); }
.kat-bv--tv .kat-bv-meta { margin: 2px 0 0; font-size: 1rem; line-height: 1.35; color: rgba(248, 246, 240, 0.92); }
.kat-bv--tv .kat-bv-kredit { margin: 0; font-size: 0.9375rem; line-height: 1.35; color: rgba(248, 246, 240, 0.7); }
.kat-bv-cta { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 440px; margin-top: 10px; }
.kat-tv-knap { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 24px; border-radius: 999px; background-color: #f8f6f0; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28); transition: transform 0.14s ease; }
.kat-tv-knap > * { color: #1b2021; }
.kat-tv-knap span { font-size: 1.0625rem; font-weight: 600; }
.kat-tv-knap svg { width: 20px; height: 20px; }
.kat-tv-knap:active { transform: scale(0.97); }
.kat-tv-rund { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background-color: rgba(248, 246, 240, 0.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer; transition: transform 0.14s ease, background-color 0.2s ease; }
.kat-app .kat-tv-rund > * { color: #f8f6f0; }
.kat-tv-rund svg { width: 24px; height: 24px; }
.kat-tv-rund .kat-ikon--til { display: none; }
.kat-tv-rund[aria-pressed="true"] .kat-ikon--fra { display: none; }
.kat-tv-rund[aria-pressed="true"] .kat-ikon--til { display: block; }
.kat-tv-rund:active { transform: scale(0.94); }

/* Prikker */
.kat-prikker-bog { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 28px; margin-top: 14px; }
.kat-prikker-bog[hidden] { display: none; }
.kat-prik-bog { flex: none; width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background-color: rgba(248, 246, 240, 0.38); cursor: pointer; transition: width 0.3s ease, background-color 0.3s ease, transform 0.3s ease; }
.kat-prik-bog.is-aktiv { width: 30px; background-color: #f8f6f0; }
.kat-prik-bog.is-mindre { transform: scale(0.78); }
.kat-prik-bog.is-lille { transform: scale(0.55); }
.kat-prik-bog::after { content: ""; display: block; margin: -10px -4px; height: 29px; }

/* Knapper oven på heroen */
.kat-bv > .kat-bv-knapper { position: fixed; z-index: 62; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 14px; right: 14px; display: flex; justify-content: space-between; pointer-events: none; }
.kat-bv > .kat-bv-knapper > * { pointer-events: auto; }

/* Indholdet under heroen */
.kat-bv--tv .kat-bv-ark { position: relative; z-index: 2; margin: 0 !important; min-height: 0 !important; padding: 8px 20px calc(120px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 0 !important; box-shadow: none !important; background-color: #121617; gap: 24px; }
.kat-bv--tv .kat-bv-ark::before { content: none !important; }
.kat-bv--tv .kat-ikonraekke { justify-content: center; }
.kat-bv--tv .kat-faner { top: calc(env(safe-area-inset-top, 0px) + 68px); }

@media (min-width: 1024px) {
	.kat-bv--tv .kat-bv-flade { height: 88vh !important; max-height: 1000px; }
	.kat-bv--tv .kat-bv-scene { align-items: flex-start; text-align: left; left: 72px; right: auto; max-width: 620px; padding: 0 0 56px; }
	.kat-bv--tv .kat-bv-titellag { justify-content: flex-start; }
	.kat-app .kat-bv--tv .kat-bv-titel { text-align: left; font-size: clamp(3.5rem, 5.6vw, 5.5rem); }
	.kat-bv-titelgrafik { max-width: 520px; max-height: 240px; }
	.kat-bv-cta { justify-content: flex-start; }
	.kat-tv-knap { flex: 0 0 auto; min-width: 240px; }
	.kat-prikker-bog { justify-content: flex-start; }
	.kat-bv > .kat-bv-knapper { top: 96px; left: 32px; right: 32px; }
	.kat-bv--tv .kat-bv-ark { max-width: 820px; margin: 0 auto !important; padding: 24px 32px 96px !important; }
	.kat-bv--tv .kat-faner { top: 84px; margin: 0 -32px; padding: 8px 32px; }
	.kat-bv--tv .kat-blad { z-index: 4; }
	.kat-bv--tv .kat-blad-pil { top: 46%; }
	.kat-bv-topbar { display: none; }
}
/* Trin 11, rettelse: .kat-app button nulstiller baggrunden – prikker og den runde knap skal have højere specificitet */
.kat-app .kat-prik-bog { width: 9px; height: 9px; border-radius: 999px; background-color: rgba(248, 246, 240, 0.4); }
.kat-app .kat-prik-bog.is-aktiv { width: 30px; background-color: #f8f6f0; }
.kat-app .kat-tv-rund { width: 56px; height: 56px; border-radius: 50%; background-color: rgba(248, 246, 240, 0.2); }
.kat-app .kat-tv-rund[aria-pressed="true"] { background-color: rgba(248, 246, 240, 0.32); }

/* Trin 12 (25-10-2026): teaseren står i heroen, så den ses på første skærm */
.kat-bv--tv .kat-bv-scene-teaser { margin: 2px 0 0; max-width: 34ch; font-family: var(--bach-font-overskrift); font-size: 1.1875rem; line-height: 1.3; color: #f8f6f0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); }
.kat-bv--tv .kat-bv-scene { gap: 10px; }
.kat-bv--tv .kat-bv-scene .kat-bv-kredit { font-size: 0.875rem; }
@media (min-width: 1024px) {
	.kat-bv--tv .kat-bv-scene-teaser { max-width: 40ch; font-size: 1.375rem; }
}
@media (max-height: 700px) and (max-width: 1023px) {
	.kat-bv--tv .kat-bv-scene-teaser { -webkit-line-clamp: 2; }
}

/* ====================================================================
 * Trin 13 (25-10-2026): «Læs uddrag» åbner LIGGENDE på telefonen (uddragene
 * er dobbeltsider). Står telefonen på højkant, drejes vieweren 90°, så man
 * vender telefonen og læser. Vender man den, slår browserens egen drejning
 * ind, og vores drejning slås fra – så opslaget står stille i hånden.
 * Gælder kun kataloget (filen indlæses kun på katalogsider).
 * ==================================================================== */
@media (max-width: 1023px) and (orientation: portrait) {
	body.bco-katalog .bco-kort-overlay:has(.bco-kort-overlay__ramme--laes) { padding: 0; background: #1b2021; }
	body.bco-katalog .bco-kort-overlay__ramme--laes { position: fixed; top: 50%; left: calc(50% - 1.6rem); width: 100vh; width: 100dvh; height: calc(100vw - 3.2rem); margin: 0; transform: translate(-50%, -50%) rotate(90deg); transform-origin: 50% 50%; }
	body.bco-katalog .bco-kort-overlay:has(.bco-kort-overlay__ramme--laes) .bco-kort-overlay__luk { top: auto; bottom: 0.6rem; right: 0.4rem; transform: rotate(90deg); }
}
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 600px) {
	body.bco-katalog .bco-kort-overlay:has(.bco-kort-overlay__ramme--laes) { padding: 0; align-items: stretch; background: #1b2021; }
	body.bco-katalog .bco-kort-overlay__ramme--laes { width: calc(100vw - 3.4rem); height: 100vh; height: 100dvh; margin: 0 3.4rem 0 0; }
	body.bco-katalog .bco-kort-overlay:has(.bco-kort-overlay__ramme--laes) .bco-kort-overlay__luk { top: 0.5rem; right: 0.4rem; }
}

/* ====================================================================
 * Trin 14 (25-10-2026): stående video (9:16) i kataloget på telefon.
 * katalog-app.js sætter body.kat-overlay-staaende, når et tryk åbner en
 * 9:16-share. Rammen fylder så meget af skærmen som muligt i 9:16.
 * ==================================================================== */
@media (max-width: 1023px) {
	body.bco-katalog.kat-overlay-staaende .bco-kort-overlay:has(.bco-kort-overlay__ramme--video) { padding: 0; align-items: center; justify-content: center; background: #000; }
	body.bco-katalog.kat-overlay-staaende .bco-kort-overlay__ramme--video { width: min(100vw, calc(100dvh * 9 / 16)); height: auto; max-height: 100dvh; margin: 0; aspect-ratio: 9 / 16; }
	body.bco-katalog.kat-overlay-staaende .bco-kort-overlay__luk { top: calc(env(safe-area-inset-top, 0px) + 0.6rem); right: 0.6rem; background: rgba(0, 0, 0, 0.45); }
}

/* ====================================================================
 * Trin 15 (25-10-2026): heroen renses. Serietitelgrafik over titlen,
 * mindre titelgrafik, meta/teaser/kredit flyttet under heroen.
 * ==================================================================== */
.kat-bv-serielag { display: flex; justify-content: center; width: 100%; }
.kat-bv-serietitelgrafik { display: block; width: auto; height: auto; max-width: min(56%, 320px); max-height: 7svh; object-fit: contain; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.45)); }
.kat-bv-titelgrafik { max-height: 16svh; }
.kat-bv--tv .kat-bv-scene { gap: 12px; padding-bottom: 14px; }
.kat-bv--tv .kat-prikker-bog { margin-top: 6px; }
.kat-bv-intro { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 4px 0; text-align: center; }
.kat-bv-intro .kat-bv-meta { margin: 0; font-size: 0.875rem; letter-spacing: 0.02em; color: rgba(248, 246, 240, 0.7); }
.kat-bv-intro-teaser { margin: 0; max-width: 30ch; font-family: var(--bach-font-overskrift); font-size: 1.3125rem; line-height: 1.3; color: #f8f6f0; }
.kat-bv-intro .kat-bv-kredit { margin: 0; font-size: 0.875rem; line-height: 1.4; color: rgba(248, 246, 240, 0.6); }
@media (min-width: 1024px) {
	.kat-bv-serielag { justify-content: flex-start; }
	.kat-bv-serietitelgrafik { max-width: 280px; max-height: 72px; }
	.kat-bv-titelgrafik { max-height: 200px; }
	.kat-bv-intro { align-items: flex-start; padding-top: 16px; text-align: left; }
	.kat-bv-intro-teaser { max-width: 40ch; font-size: 1.5rem; }
}

/* ====================================================================
 * Trin 16 (25-10-2026): ÉN herografik til alle skærme (Christian 20:29).
 * Masteren er 16:9 (2880 × 1620). Computer/iPad liggende: hele billedet
 * som hos Apple TV, tekst nederst til venstre. Telefon/iPad stående:
 * midterudsnit i 4:5 øverst, der toner ud i baggrunden; serie, titel og
 * knap står i udtoningen. Telefonfeltet er nu en valgfri erstatning.
 * ==================================================================== */
@media (max-width: 1023px) {
	.kat-bv--tv .kat-bv-flade { height: min(84svh, calc(125vw + 170px)) !important; min-height: 0; }
	.kat-bv--tv .kat-bv-flade::after { content: none; }
	.kat-bv--tv .kat-bv-billede { bottom: auto; height: auto; aspect-ratio: 4 / 5; overflow: hidden; }
	.kat-bv--tv .kat-bv-billede::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; height: 34%; background: linear-gradient(to bottom, rgba(18, 22, 23, 0) 0%, rgba(18, 22, 23, 0.6) 45%, #121617 100%); pointer-events: none; }
	.kat-bv--tv .kat-bv-billede .kat-flade-img { object-position: 50% 50%; }
	.kat-bv--tv .kat-flade--hero-tel .kat-flade-img { object-position: 50% 18%; }
}
@media (min-width: 1024px) {
	.kat-bv--tv .kat-bv-flade { height: min(56.25vw, 88vh) !important; min-height: 520px; max-height: none; }
	.kat-bv--tv .kat-bv-flade::after { top: 0; height: auto; background: linear-gradient(to right, rgba(18, 22, 23, 0.72) 0%, rgba(18, 22, 23, 0.35) 26%, rgba(18, 22, 23, 0) 46%), linear-gradient(to bottom, rgba(18, 22, 23, 0) 62%, rgba(18, 22, 23, 0.55) 86%, #121617 100%); }
	.kat-bv--tv .kat-bv-billede .kat-flade-img { object-position: 50% 45%; }
	.kat-bv--tv .kat-bv-scene { left: 5%; width: 25%; min-width: 340px; max-width: none; padding-bottom: 48px; }
	.kat-bv-titelgrafik { max-width: 100%; max-height: 180px; }
	.kat-bv-serietitelgrafik { max-width: 70%; }
	.kat-bv--tv .kat-prikker-bog { position: absolute; left: 45vw; bottom: 22px; margin: 0; transform: translateX(-50%); }
}
/* Trin 16b: tilbage/del-knapperne sidder øverst (beholderen strakte sig i fuld højde på computer) */
.kat-bv > .kat-bv-knapper { bottom: auto; height: auto; align-items: flex-start; }

/* Trin 17 (25-10-2026): to herografikker som hos Apple TV (Christian 20:40).
 * Telefon 4:5 (1290 × 1612) står øverst og toner ud; computer 16:9 (2880 × 1620).
 * Et ældre, højere telefonbillede beskæres oppefra. */
@media (max-width: 1023px) {
	.kat-bv--tv .kat-flade--hero-tel .kat-flade-img { object-position: 50% 0%; }
}

/* Trin 18 (25-10-2026): telefon – rækkefølge serie, titel, bogtype/alder, teaser, kredit, knap.
 * Teksten starter ved 60 % af billedet og flyder videre under det; heroen er så høj som indholdet. */
.kat-bv-scene-intro { display: contents; }
@media (max-width: 1023px) {
	.kat-bv--tv .kat-bv-flade { height: auto !important; min-height: 0; }
	.kat-bv--tv .kat-bv-scene { position: relative; left: auto; right: auto; bottom: auto; margin-top: calc(100vw * 1.25 * 0.6); padding-bottom: 18px; }
	.kat-bv--tv .kat-bv-billede::after { height: 42%; }
	.kat-bv--tv .kat-bv-scene .kat-bv-meta { margin: 0; font-size: 0.9375rem; color: rgba(248, 246, 240, 0.85); }
	.kat-bv--tv .kat-bv-scene .kat-bv-kredit { margin: 0; font-size: 0.875rem; color: rgba(248, 246, 240, 0.65); }
	.kat-bv--tv .kat-bv-scene .kat-bv-cta { margin-top: 6px; }
	.kat-bv--tv .kat-bv-ark > .kat-bv-intro { display: none; }
}
@media (min-width: 1024px) {
	.kat-bv-scene-intro { display: none; }
}
/* ====================================================================
 * Trin 19 (25-10-2026): lyst design – kalk dominerer igen (Christian 21:01).
 * Mørkt findes kun som skygge på billeder, hvor lys titelgrafik står.
 * Bogsiden: billedet med serie, titel og prikker; under det (på kalk)
 * bogtype/alder, teaser, kredit og én ikonrække: 3D, uddrag, trailer, favorit.
 * Computer: centreret som på telefon.
 * ==================================================================== */
body.bco-katalog:has(.kat-bv--tv), body.kat-moerk-skaerm { background-color: #f8f6f0; }

/* Forside og titelflader */
.kat-app .kat-tildig-titel { color: var(--kat-fg); }
.kat-profilchip { background-color: color-mix(in srgb, var(--kat-fg) 6%, transparent); border-color: var(--kat-streg); }
.kat-profilchip > * { color: var(--kat-fg); }
.kat-tildig .kat-tekstlink--lys > * { color: var(--kat-fg); }
.kat-titelflade { background-color: color-mix(in srgb, #1b2021 5%, #f8f6f0); }
.kat-app .kat-titelflade .kat-display, .kat-app .kat-titelflade .kat-display.kat-display--lys { color: var(--kat-fg); }
.kat-titelflade-tekst { color: var(--kat-blid); }

/* Bogsiden */
.kat-bv--tv .kat-bv-flade { background-color: #e9e6de; border-radius: 0 0 28px 28px; }
.kat-bv--tv .kat-bv-flade::after { content: none !important; }
.kat-bv--tv .kat-bv-billede::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: 0; height: auto; background: linear-gradient(to bottom, rgba(18, 22, 23, 0) 42%, rgba(18, 22, 23, 0.5) 72%, rgba(18, 22, 23, 0.78) 100%); pointer-events: none; }
.kat-bv--tv .kat-bv-scene { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0 22px 16px; gap: 12px; align-items: center; text-align: center; }
.kat-bv--tv .kat-prikker-bog { position: static; margin: 4px 0 0; transform: none; }
.kat-bv--tv .kat-bv-ark { background-color: var(--kat-bg) !important; }
.kat-bv--tv .kat-bv-ark > .kat-bv-intro { display: flex; align-items: center; text-align: center; padding-top: 12px; }
.kat-bv-intro .kat-bv-meta { color: var(--kat-blid); }
.kat-bv-intro-teaser { color: var(--kat-fg); }
.kat-bv-intro .kat-bv-kredit { color: var(--kat-blid); }
.kat-bv--tv .kat-ikonraekke { justify-content: center; gap: 8px; }
.kat-bv--tv .kat-ikonraekke .kat-ikonhandling { flex: 0 1 88px; }
.kat-ikonhandling--gem[aria-pressed="true"] .kat-ikon-fyld { fill: currentColor; }
.kat-bv-topbar { background-color: color-mix(in srgb, #f8f6f0 95%, transparent) !important; border-bottom: 1px solid var(--kat-streg) !important; }
.kat-bv-topbar span { color: var(--kat-fg) !important; }
@media (max-width: 1023px) {
	.kat-bv--tv .kat-bv-flade { height: calc(100vw * 1.25) !important; }
	.kat-bv--tv .kat-bv-billede { bottom: 0; }
}
@media (min-width: 1024px) {
	.kat-bv--tv .kat-bv-flade { height: min(56.25vw, 82vh) !important; }
	.kat-bv--tv .kat-bv-scene { left: 0; right: 0; width: auto; min-width: 0; max-width: none; padding: 0 32px 24px; align-items: center; text-align: center; }
	.kat-bv--tv .kat-bv-titellag { justify-content: center; }
	.kat-app .kat-bv--tv .kat-bv-titel { text-align: center; }
	.kat-bv-serielag { justify-content: center; }
	.kat-bv-titelgrafik { max-width: min(560px, 60%); max-height: 180px; }
	.kat-bv--tv .kat-bv-ark > .kat-bv-intro { align-items: center; text-align: center; }
	.kat-bv-intro-teaser { max-width: 36ch; }
}

/* Trin 19b: velkomsten i lyst design – billedet foroven med runde hjørner, teksten på kalk */
.kat-velkomst { justify-content: flex-start; margin-bottom: 0; }
.kat-velkomst::after { content: none; }
.kat-velkomst .kat-flade { position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 0; height: 56svh; min-height: 320px; border-radius: 0 0 28px 28px; }
.kat-velkomst-tekst { padding: 28px 24px 128px; }
.kat-app .kat-velkomst .kat-display.kat-display--lys { color: var(--kat-fg); }
.kat-velkomst .kat-accent { color: color-mix(in srgb, #b4a8dc 62%, #1b2021); }
.kat-velkomst .kat-ingress--lys { color: var(--kat-blid); }
.kat-velkomst .kat-rundhandling-tekst { color: var(--kat-fg); }
.kat-velkomst .kat-tekstlink--lys { background-color: color-mix(in srgb, var(--kat-fg) 7%, transparent); }
.kat-velkomst .kat-tekstlink--lys > * { color: var(--kat-fg); }
@media (min-width: 1024px) { .kat-velkomst .kat-flade { height: 62vh; } }
/* ====================================================================
 * Trin 20 (25-10-2026): heroen rummer serie, titel, bogtype/alder, teaser,
 * kredit og prikker. Billedet toner ud i kalk i stedet for en skarp kant.
 * Grid: billede og serie/titel deler første række; heroinfo er anden række.
 * ==================================================================== */
.kat-bv--tv .kat-bv-flade { display: grid; grid-template-columns: 100%; height: auto !important; min-height: 0 !important; max-height: none !important; border-radius: 0 !important; background-color: var(--kat-bg) !important; }
.kat-bv--tv .kat-bv-billede { position: relative; grid-area: 1 / 1; top: auto; right: auto; bottom: auto; left: auto; width: 100%; height: auto; aspect-ratio: 4 / 5; z-index: 0; }
.kat-bv--tv .kat-bv-billede::after { content: ""; position: absolute; z-index: 2; top: 0; right: 0; bottom: -1px; left: 0; height: auto; background: linear-gradient(to bottom, rgba(248, 246, 240, 0) 78%, rgba(248, 246, 240, 0.85) 94%, #f8f6f0 100%), linear-gradient(to bottom, rgba(18, 22, 23, 0) 38%, rgba(18, 22, 23, 0.5) 64%, rgba(18, 22, 23, 0.42) 82%, rgba(18, 22, 23, 0) 98%); pointer-events: none; }
.kat-bv--tv .kat-bv-scene { position: relative; grid-area: 1 / 1; align-self: end; top: auto; right: auto; bottom: auto; left: auto; width: auto; min-width: 0; max-width: none; z-index: 3; margin: 0; padding: 0 22px 21%; }
.kat-bv-heroinfo { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: -2px; padding: 0 22px 20px; text-align: center; }
.kat-bv-heroinfo .kat-bv-intro { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; text-align: center; }
.kat-bv-heroinfo .kat-prikker-bog { margin: 2px 0 0; }
.kat-app .kat-bv-heroinfo .kat-prik-bog { background-color: color-mix(in srgb, var(--kat-fg) 22%, transparent); }
.kat-app .kat-bv-heroinfo .kat-prik-bog.is-aktiv { background-color: var(--kat-fg); }
.kat-bv--tv .kat-bv-ark { padding-top: 0 !important; }
@media (min-width: 1024px) {
	.kat-bv--tv .kat-bv-billede { aspect-ratio: 16 / 9; max-height: 82vh; }
	.kat-bv--tv .kat-bv-scene { padding: 0 32px 9%; }
	.kat-bv-heroinfo { max-width: 820px; margin: -2px auto 0; padding: 0 32px 24px; }
}/* Trin 20b: titlen slutter, før billedet toner ud i kalk (ca. 78 % nede) */
.kat-bv--tv .kat-bv-billede::after { background: linear-gradient(to bottom, rgba(248, 246, 240, 0) 80%, rgba(248, 246, 240, 0.85) 95%, #f8f6f0 100%), linear-gradient(to bottom, rgba(18, 22, 23, 0) 34%, rgba(18, 22, 23, 0.5) 58%, rgba(18, 22, 23, 0.45) 76%, rgba(18, 22, 23, 0) 92%); }
.kat-bv--tv .kat-bv-scene { padding-bottom: 28%; }
@media (min-width: 1024px) { .kat-bv--tv .kat-bv-scene { padding-bottom: 12.5%; } }/* Trin 20c: kortere afstand fra titel til bogtype/alder – titlen ned til ca. 88 %, kortere udtoning, heroinfo trukket op */
.kat-bv--tv .kat-bv-billede::after { background: linear-gradient(to bottom, rgba(248, 246, 240, 0) 86%, rgba(248, 246, 240, 0.85) 96%, #f8f6f0 100%), linear-gradient(to bottom, rgba(18, 22, 23, 0) 40%, rgba(18, 22, 23, 0.5) 64%, rgba(18, 22, 23, 0.5) 84%, rgba(18, 22, 23, 0) 97%); }
.kat-bv--tv .kat-bv-scene { padding-bottom: 15%; }
.kat-bv-heroinfo { margin-top: -26px; }
@media (min-width: 1024px) {
	.kat-bv--tv .kat-bv-scene { padding-bottom: 6.2%; }
	.kat-bv-heroinfo { margin-top: -30px; }
}/* Trin 20d: mindre serietitelgrafik (Christian 21:18) */
.kat-bv-serietitelgrafik { max-width: min(42%, 240px); max-height: 5svh; }
@media (min-width: 1024px) { .kat-bv-serietitelgrafik { max-width: 220px; max-height: 54px; } }
/* ====================================================================
 * Trin 21 (25-10-2026): al heroens tekst står hvidt på billedet (Christian 21:19).
 * Telefon 9:16 (1290 × 2293), computer 16:9. Billedet spænder over alle tre
 * rækker i griddet; serie/titel og heroinfo ligger nederst på det.
 * Mørk skygge bag teksten; udtoning til kalk først under prikkerne.
 * ==================================================================== */
.kat-bv--tv .kat-bv-flade { grid-template-rows: 1fr auto auto; }
.kat-bv--tv .kat-bv-billede { grid-row: 1 / 4; grid-column: 1; }
.kat-bv--tv .kat-bv-scene { grid-row: 2; grid-column: 1; align-self: end; padding: 0 22px; }
.kat-bv-heroinfo { grid-row: 3; grid-column: 1; margin: 0; padding: 12px 22px 52px; gap: 12px; }
.kat-bv-heroinfo .kat-bv-intro { gap: 8px; }
.kat-bv-heroinfo .kat-bv-intro .kat-bv-meta { color: rgba(248, 246, 240, 0.86); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.kat-bv-heroinfo .kat-bv-intro .kat-bv-intro-teaser { color: #f8f6f0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); }
.kat-bv-heroinfo .kat-bv-intro .kat-bv-kredit { color: rgba(248, 246, 240, 0.72); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.kat-app .kat-bv-heroinfo .kat-prik-bog { background-color: rgba(248, 246, 240, 0.4); }
.kat-app .kat-bv-heroinfo .kat-prik-bog.is-aktiv { background-color: #f8f6f0; }
.kat-bv--tv .kat-bv-billede::after { background: linear-gradient(to bottom, rgba(248, 246, 240, 0) 93%, #f8f6f0 100%), linear-gradient(to bottom, rgba(18, 22, 23, 0) 34%, rgba(18, 22, 23, 0.55) 56%, rgba(18, 22, 23, 0.62) 90%, rgba(18, 22, 23, 0.3) 97%); }
@media (max-width: 1023px) {
	.kat-bv--tv .kat-bv-billede { aspect-ratio: 9 / 16; }
	.kat-bv--tv .kat-flade--hero-tel .kat-flade-img { object-position: 50% 0%; }
}
@media (min-width: 1024px) {
	.kat-bv--tv .kat-bv-billede { aspect-ratio: 16 / 9; max-height: 82vh; }
	.kat-bv--tv .kat-bv-scene { padding: 0 32px; }
	.kat-bv-heroinfo { justify-self: center; width: 100%; max-width: 820px; margin: 0; padding: 10px 32px 44px; }
	.kat-bv--tv .kat-bv-billede::after { background: linear-gradient(to bottom, rgba(248, 246, 240, 0) 92%, #f8f6f0 100%), linear-gradient(to bottom, rgba(18, 22, 23, 0) 30%, rgba(18, 22, 23, 0.55) 54%, rgba(18, 22, 23, 0.62) 88%, rgba(18, 22, 23, 0.3) 96%); }
}/* Trin 21b: telefon – teksten flyttet op i heroen (starter ca. 40 % nede); billedet ses igen under prikkerne (Christian 21:22) */
@media (max-width: 1023px) {
	.kat-bv-heroinfo { padding-bottom: 50vw; }
	.kat-bv--tv .kat-bv-billede::after { background: linear-gradient(to bottom, rgba(248, 246, 240, 0) 92%, #f8f6f0 100%), linear-gradient(to bottom, rgba(18, 22, 23, 0) 22%, rgba(18, 22, 23, 0.55) 38%, rgba(18, 22, 23, 0.6) 70%, rgba(18, 22, 23, 0.2) 86%, rgba(18, 22, 23, 0) 96%); }
}/* Trin 22 (25-10-2026): telefon – heroen slutter lige under prikkerne (intet tomt felt).
 * Første gridrække er motivpladsen (mindst 68vw); billedet strækkes over hele heroen og beskæres forneden. */
@media (max-width: 1023px) {
	.kat-bv--tv .kat-bv-flade { grid-template-rows: minmax(68vw, 1fr) auto auto; }
	.kat-bv--tv .kat-bv-billede { aspect-ratio: auto; height: auto; align-self: stretch; }
	.kat-bv-heroinfo { padding-bottom: 48px; }
	.kat-bv--tv .kat-bv-billede::after { background: linear-gradient(to bottom, rgba(248, 246, 240, 0) 88%, #f8f6f0 100%), linear-gradient(to bottom, rgba(18, 22, 23, 0) 26%, rgba(18, 22, 23, 0.55) 46%, rgba(18, 22, 23, 0.6) 82%, rgba(18, 22, 23, 0.3) 95%); }
}
/* Trin 23 (25-10-2026): renere overgang fra hero til kalk (Christian 22:33).
 * 1) Den mørke skygge slutter, før udtoningen begynder (ingen sort+kalk = grå).
 * 2) Længere, blød udtoning med kurve (flere stop) under prikkerne.
 * 3) Udtoningen interpoleres i OKLab, hvor browseren kan. */
@media (max-width: 1023px) {
	.kat-bv-heroinfo { padding-bottom: 96px; }
	.kat-bv--tv .kat-bv-billede::after {
		background: linear-gradient(to bottom, rgba(248, 246, 240, 0) 80%, rgba(248, 246, 240, 0.12) 84%, rgba(248, 246, 240, 0.32) 88%, rgba(248, 246, 240, 0.58) 92%, rgba(248, 246, 240, 0.82) 96%, #f8f6f0 100%), linear-gradient(to bottom, rgba(18, 22, 23, 0) 24%, rgba(18, 22, 23, 0.5) 42%, rgba(18, 22, 23, 0.56) 66%, rgba(18, 22, 23, 0.3) 76%, rgba(18, 22, 23, 0) 82%);
		background: linear-gradient(in oklab to bottom, rgba(248, 246, 240, 0) 80%, rgba(248, 246, 240, 0.12) 84%, rgba(248, 246, 240, 0.32) 88%, rgba(248, 246, 240, 0.58) 92%, rgba(248, 246, 240, 0.82) 96%, #f8f6f0 100%), linear-gradient(in oklab to bottom, rgba(18, 22, 23, 0) 24%, rgba(18, 22, 23, 0.5) 42%, rgba(18, 22, 23, 0.56) 66%, rgba(18, 22, 23, 0.3) 76%, rgba(18, 22, 23, 0) 82%);
	}
}
@media (min-width: 1024px) {
	.kat-bv-heroinfo { padding-bottom: 96px; }
	.kat-bv--tv .kat-bv-billede::after {
		background: linear-gradient(to bottom, rgba(248, 246, 240, 0) 82%, rgba(248, 246, 240, 0.12) 86%, rgba(248, 246, 240, 0.32) 89.5%, rgba(248, 246, 240, 0.58) 93%, rgba(248, 246, 240, 0.82) 96.5%, #f8f6f0 100%), linear-gradient(to bottom, rgba(18, 22, 23, 0) 30%, rgba(18, 22, 23, 0.5) 50%, rgba(18, 22, 23, 0.56) 70%, rgba(18, 22, 23, 0.3) 78%, rgba(18, 22, 23, 0) 84%);
		background: linear-gradient(in oklab to bottom, rgba(248, 246, 240, 0) 82%, rgba(248, 246, 240, 0.12) 86%, rgba(248, 246, 240, 0.32) 89.5%, rgba(248, 246, 240, 0.58) 93%, rgba(248, 246, 240, 0.82) 96.5%, #f8f6f0 100%), linear-gradient(in oklab to bottom, rgba(18, 22, 23, 0) 30%, rgba(18, 22, 23, 0.5) 50%, rgba(18, 22, 23, 0.56) 70%, rgba(18, 22, 23, 0.3) 78%, rgba(18, 22, 23, 0) 84%);
	}
}/* Trin 23b: telefon – skyggen bærer kreditlinjen helt; udtoningen starter ved prikkerne */
@media (max-width: 1023px) {
	.kat-bv--tv .kat-bv-billede::after {
		background: linear-gradient(to bottom, rgba(248, 246, 240, 0) 85%, rgba(248, 246, 240, 0.12) 88%, rgba(248, 246, 240, 0.32) 91%, rgba(248, 246, 240, 0.58) 94%, rgba(248, 246, 240, 0.82) 97%, #f8f6f0 100%), linear-gradient(to bottom, rgba(18, 22, 23, 0) 24%, rgba(18, 22, 23, 0.5) 42%, rgba(18, 22, 23, 0.56) 74%, rgba(18, 22, 23, 0.3) 80%, rgba(18, 22, 23, 0) 85%);
		background: linear-gradient(in oklab to bottom, rgba(248, 246, 240, 0) 85%, rgba(248, 246, 240, 0.12) 88%, rgba(248, 246, 240, 0.32) 91%, rgba(248, 246, 240, 0.58) 94%, rgba(248, 246, 240, 0.82) 97%, #f8f6f0 100%), linear-gradient(in oklab to bottom, rgba(18, 22, 23, 0) 24%, rgba(18, 22, 23, 0.5) 42%, rgba(18, 22, 23, 0.56) 74%, rgba(18, 22, 23, 0.3) 80%, rgba(18, 22, 23, 0) 85%);
	}
}/* Trin 23c: computer – skyggen bærer kreditlinjen; udtoningen starter under prikkerne */
@media (min-width: 1024px) {
	.kat-bv--tv .kat-bv-billede::after {
		background: linear-gradient(to bottom, rgba(248, 246, 240, 0) 88%, rgba(248, 246, 240, 0.14) 90.5%, rgba(248, 246, 240, 0.36) 93%, rgba(248, 246, 240, 0.62) 95.5%, rgba(248, 246, 240, 0.85) 98%, #f8f6f0 100%), linear-gradient(to bottom, rgba(18, 22, 23, 0) 28%, rgba(18, 22, 23, 0.5) 46%, rgba(18, 22, 23, 0.56) 80%, rgba(18, 22, 23, 0.3) 85%, rgba(18, 22, 23, 0) 88%);
		background: linear-gradient(in oklab to bottom, rgba(248, 246, 240, 0) 88%, rgba(248, 246, 240, 0.14) 90.5%, rgba(248, 246, 240, 0.36) 93%, rgba(248, 246, 240, 0.62) 95.5%, rgba(248, 246, 240, 0.85) 98%, #f8f6f0 100%), linear-gradient(in oklab to bottom, rgba(18, 22, 23, 0) 28%, rgba(18, 22, 23, 0.5) 46%, rgba(18, 22, 23, 0.56) 80%, rgba(18, 22, 23, 0.3) 85%, rgba(18, 22, 23, 0) 88%);
	}
}
/* ====================================================================
 * Trin 24 (25-10-2026): Skifer (#464655) er den overordnede baggrund;
 * Kalk (#f8f6f0) bruges i bokse (Christian 22:44). Heroen toner ud i
 * skifer – mørkt mod mørkt, som hos Apple TV.
 * ==================================================================== */
.kat-app { --kat-bg: #464655; --kat-fg: #f8f6f0; --kat-flade-bund: #52525f; --kat-accent: #b4a8dc; }
body.bco-katalog, body.bco-katalog:has(.kat-bv--tv), body.kat-moerk-skaerm { background-color: #464655 !important; }
body.bco-katalog .kat-logo-negativ { opacity: 1 !important; }
body.bco-katalog .kat-logo-sort { opacity: 0 !important; }
body.bco-katalog.kat-rullet .kat-top { background-color: color-mix(in srgb, #464655 84%, transparent) !important; border-color: transparent !important; }

/* Kalk-bokse: lys flade med mørk tekst */
.kat-kalkboks, .kat-bv--tv .kat-bv-ark > .kat-bv-sektion:not(:has(.kat-opdag)), .kat-app .kat-udforsk-panel, .kat-indst-boks, .kat-profilkort, .kat-delt, .kat-tilmig .kat-tilmig-profil {
	--kat-bg: #f8f6f0; --kat-fg: #1b2021;
	--kat-blid: color-mix(in srgb, #1b2021 62%, #f8f6f0);
	--kat-streg: color-mix(in srgb, #1b2021 12%, transparent);
	--kat-flade-bund: color-mix(in srgb, #1b2021 6%, #f8f6f0);
	background-color: #f8f6f0; color: #1b2021;
}
.kat-bv--tv .kat-bv-ark > .kat-bv-sektion:not(:has(.kat-opdag)) { padding: 22px 20px; border-radius: 24px; }
.kat-bv--tv .kat-bv-ark > .kat-bv-sektion:not(:has(.kat-opdag)) .kat-bv-dl { background-color: color-mix(in srgb, #1b2021 5%, #f8f6f0); }
.kat-app .kat-udforsk-panel { border-color: transparent; }

/* Titelflader og forside på skifer */
.kat-titelflade { background-color: transparent; }
.kat-app .kat-titelflade .kat-display, .kat-app .kat-titelflade .kat-display.kat-display--lys { color: #f8f6f0; }
.kat-titelflade-tekst { color: color-mix(in srgb, #f8f6f0 75%, transparent); }
.kat-velkomst .kat-flade { border-radius: 0; }
.kat-velkomst .kat-flade::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 38%; z-index: 1; background: linear-gradient(to bottom, rgba(70, 70, 85, 0) 0%, rgba(70, 70, 85, 0.6) 55%, #464655 100%); pointer-events: none; }
.kat-velkomst .kat-accent { color: #b4a8dc; }
.kat-tilpas-bund { background: linear-gradient(to bottom, rgba(70, 70, 85, 0), var(--kat-bg) 30%); }

/* Bogsiden: heroen toner ud i skifer */
.kat-bv--tv .kat-bv-flade { background-color: #464655 !important; }
.kat-bv--tv .kat-bv-billede::after { background: linear-gradient(to bottom, rgba(70, 70, 85, 0) 80%, rgba(70, 70, 85, 0.5) 90%, #464655 100%), linear-gradient(to bottom, rgba(18, 22, 23, 0) 24%, rgba(18, 22, 23, 0.5) 42%, rgba(18, 22, 23, 0.55) 80%, rgba(18, 22, 23, 0.2) 96%) !important; }
.kat-bv-heroinfo { padding-bottom: 40px !important; }
.kat-bv-topbar { background-color: color-mix(in srgb, #464655 95%, transparent) !important; border-bottom: 1px solid rgba(248, 246, 240, 0.08) !important; }
.kat-bv-topbar span { color: #f8f6f0 !important; }
.kat-bv--tv .kat-ikonraekke { border-color: rgba(248, 246, 240, 0.14); }
/* Trin 24b: ingen hårstreg under velkomstbilledet */
.kat-velkomst .kat-flade { background-color: #464655; margin-bottom: -1px; }
.kat-velkomst .kat-flade::after { bottom: 0; }

/* ====================================================================
 * Trin 25 (25-10-2026): rollestyret bogside (Christian 23:20).
 * Rollens indhold rykkes op efter ikonrækken; ingen fælles overskrift.
 * ==================================================================== */
.kat-bv [hidden] { display: none !important; }
.kat-bv-dl > div { display: contents; }
.kat-bv[data-kat-rolle="foraelder"] .kat-bv-dl > [data-kat-felt="serie"],
.kat-bv[data-kat-rolle="foraelder"] .kat-bv-dl > [data-kat-felt="alder"],
.kat-bv[data-kat-rolle="foraelder"] .kat-bv-dl > [data-kat-felt="isbn"] { display: none; }
.kat-bv[data-kat-rolle="boghandler"] .kat-bv-find { display: none !important; }
.kat-citat { margin: 0; }
.kat-citat p { margin: 0 0 10px; font-size: 1.15rem; line-height: 1.5; font-style: italic; }
.kat-citat footer { font-size: 0.85rem; color: var(--kat-blid); }
.kat-salg-lead { font-size: 1.1rem; font-weight: 600; line-height: 1.45; }
.kat-salg-grunde { margin: 0 0 1em 1.1em; padding: 0; }
.kat-salg-grunde li { margin: 0 0 6px; }
.kat-mat-blok { margin-top: 14px; }
.kat-mat-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.kat-mat > a, .kat-mat-a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background-color: var(--kat-flade-bund); text-decoration: none; }
.kat-mat > a .kat-ikon { flex: none; }
.kat-mat-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.kat-mat-titel { font-weight: 600; }
.kat-mat-info, .kat-mat-besk { font-size: 0.85rem; color: var(--kat-blid); }
.kat-mat-besk { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kat-mat--kommer { opacity: 0.7; }