/* Intro til "Ord og farver" (ord-farver-intro.js). Samme udtryk som laesersidens .bb-vintro. */

.dfb-ofi-wrap .dfb-wh-tooltip { display: none !important; }

.dfb-ofi {
	--dfb-ofi-pil: 14px;
	--o-oxblod: var(--ny-oxblod, #8b1a1a);
	--o-oxblod-m: var(--ny-oxblod-moerk, #6e1414);
	--o-blaek: var(--ny-blaek, #2a201a);
	--o-tekst: var(--ny-blaek-blod, #3b2b22);
	--o-graa: var(--ny-graa, #6b6058);
	--o-sand: var(--ny-sand, #d9c6a5);
	--o-kant: var(--ny-kant, #ddd3c4);
	--o-valgt: var(--ny-valgt, #f4ece0);
	--o-sans: var(--ny-sans, 'Source Sans 3', system-ui, sans-serif);
	--o-display: var(--ny-display, 'Playfair Display', Georgia, serif);
	position: absolute;
	z-index: 100002;
	width: 380px;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	padding: 22px 24px 18px;
	background: #fff;
	color: var(--o-blaek);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
	font-family: var(--o-sans);
	text-align: left;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease;
}
.dfb-ofi--vist { opacity: 1; transform: none; }
.dfb-ofi:focus { outline: none; }
.dfb-ofi::before {
	content: '';
	position: absolute;
	top: -8px;
	right: var(--dfb-ofi-pil);
	width: 16px;
	height: 16px;
	background: #fff;
	transform: rotate(45deg);
	border-radius: 3px 0 0 0;
}
.dfb-ofi--ark { position: fixed; top: auto; right: 16px; bottom: 16px; left: auto; }
.dfb-ofi--ark::before { display: none; }
@media (max-width: 699px) {
	.dfb-ofi--ark { left: 16px; width: auto; max-width: none; max-height: 80vh; overflow-y: auto; }
}

.dfb-ofi__luk {
	position: absolute; top: 8px; right: 10px;
	width: 32px; height: 32px; padding: 0;
	border: none; border-radius: 50%; background: none;
	color: var(--o-graa); font-size: 24px; line-height: 1; cursor: pointer;
}
.dfb-ofi__luk:hover { color: var(--o-oxblod); background: var(--o-valgt); }
.dfb-ofi__over {
	margin: 0 0 4px; font-size: 12px; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase; color: var(--o-oxblod);
}
.dfb-ofi__titel {
	margin: 0 32px 8px 0; padding: 0; border: 0;
	font-family: var(--o-display); font-size: 24px; font-weight: 700; line-height: 1.2;
	color: var(--o-blaek); text-transform: none; letter-spacing: 0;
}
.dfb-ofi__tekst { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: var(--o-tekst); }
.dfb-ofi__liste { list-style: none; margin: 0 0 10px; padding: 0; }
.dfb-ofi__liste li {
	margin: 0 0 5px; padding: 3px 0 3px 12px;
	border-left: 3px solid var(--o-sand);
	font-size: 14px; line-height: 1.4;
}
.dfb-ofi__liste li::before { content: none; }
.dfb-ofi__liste strong { color: var(--o-blaek); font-weight: 600; }
.dfb-ofi__liste span { color: var(--o-graa); }
.dfb-ofi__moenster {
	margin: 0 0 12px; padding: 8px 10px;
	background: var(--o-valgt); border-radius: 8px;
	font-size: 13px; line-height: 1.55; color: var(--o-graa);
}
.dfb-ofi__moenster strong { color: var(--o-blaek); font-weight: 600; white-space: nowrap; }
.dfb-ofi__note { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--o-graa); }
.dfb-ofi__knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.dfb-ofi__primaer,
.dfb-ofi__sekundaer {
	display: inline-flex; align-items: center; box-sizing: border-box;
	min-height: 40px; padding: 0 18px; border-radius: 999px;
	font: 600 15px/1 var(--o-sans); text-decoration: none; cursor: pointer;
}
.dfb-ofi__primaer { border: none; background: var(--o-oxblod); color: #fff !important; }
.dfb-ofi__primaer:hover { background: var(--o-oxblod-m); }
.dfb-ofi__sekundaer { border: 1.5px solid var(--o-kant); background: #fff; color: var(--o-blaek); }
.dfb-ofi__sekundaer:hover { border-color: var(--o-oxblod); color: var(--o-oxblod); }
.dfb-ofi__link {
	margin-left: auto; padding: 6px 2px; border: none; background: none;
	color: var(--o-graa); font: 14px/1.2 var(--o-sans);
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.dfb-ofi__link:hover { color: var(--o-oxblod); }
.dfb-ofi button:focus-visible,
.dfb-ofi a:focus-visible { outline: 2px solid var(--o-oxblod); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dfb-ofi { transition: none; transform: none; } }