/* Forsiden. Bygger oven på sider.css (sektion, øjebryn, overskrifter, knapper). */

main.indhold {
	section[id] { scroll-margin-top: 80px; }
	.sektion--hoej { padding-block: 128px; }
	.sektion--moerk { background: var(--blaek); }
	.overskrift-1 { color: var(--blaek); font-size: 48px; font-weight: 800; line-height: 1; }
	.overskrift-1 span, .overskrift-2 span { color: var(--accent); }
	.sektion--moerk .overskrift-1 { color: #fff; }

	/* ---------- Helt ---------- */
	.forhelt {
		position: relative; display: flex; align-items: center; justify-content: center;
		height: 100svh; min-height: 600px; padding-top: var(--hoved-hoejde);
		background: var(--blaek) var(--helt-billede) center top / cover no-repeat fixed;
		color: #fff; text-align: center; overflow: hidden;
	}
	.forhelt::before {
		content: ""; position: absolute; inset: 0;
		background: linear-gradient(to bottom, rgb(0 0 0 / .6), rgb(0 0 0 / .5), rgb(0 0 0 / .7));
	}
	.forhelt__gloeder { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; }
	.forhelt > .beholder { position: relative; z-index: 2; }
	.forhelt__logo { display: block; width: auto; height: 160px; margin: 0 auto 32px; }
	.forhelt__titel { max-width: 880px; margin: 0 auto 16px; color: #fff; font-size: 24px; font-weight: 600; line-height: 32px; }
	.forhelt__tekst { max-width: 768px; margin: 0 auto 32px; color: rgb(255 255 255 / .75); font-size: 18px; line-height: 28px; }
	.forhelt__maerker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px; }
	.forhelt__maerker li {
		display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px;
		border: 1px solid rgb(255 255 255 / .2); border-radius: 9999px; background: rgb(255 255 255 / .1);
		color: rgb(255 255 255 / .8); font-size: 12px; font-weight: 500; line-height: 16px; text-shadow: 0 1px 4px rgb(0 0 0 / .3);
	}
	.forhelt__maerker i { color: var(--accent-lys); font-weight: 400; }
	.forhelt .knapper { gap: 16px; margin-top: 0; }
	.rullemarkoer {
		position: absolute; bottom: 32px; left: 50%; z-index: 2; transform: translateX(-50%);
		display: flex; justify-content: center; width: 24px; height: 40px; padding-top: 6px;
		border: 2px solid rgb(255 255 255 / .4); border-radius: 9999px;
	}
	.rullemarkoer::before { content: ""; width: 4px; height: 10px; border-radius: 9999px; background: rgb(255 255 255 / .6); animation: rul 1.8s ease-in-out infinite; }

	/* ---------- Ekspertise ---------- */
	.ekspertise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; }
	.ekspertise__tekst { display: flex; flex-direction: column; gap: 16px; color: var(--tekst); font-size: 14px; line-height: 22.75px; }
	.ekspertise__hoejre { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
	.punktliste { display: flex; flex-direction: column; gap: 8px; }
	.punktliste a {
		display: flex; align-items: center; gap: 12px; padding: 10px 0;
		color: var(--blaek-2); font-size: 14px; line-height: 20px; text-decoration: none; transition: color .15s ease;
	}
	.punktliste a::before { content: ""; flex: 0 0 6px; height: 6px; border-radius: 9999px; background: var(--accent); }
	.punktliste a:hover, .punktliste a:focus-visible { color: var(--accent); }

	/* ---------- Proces ---------- */
	.proces__hoved { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
	.proces__hoved .oejebryn { margin-bottom: 16px; }
	.proces__tekst { max-width: 768px; margin-bottom: 56px; color: rgb(255 255 255 / .6); font-size: 16px; line-height: 24px; }
	.knap--kant {
		padding: 12px 24px; border: 1px solid rgb(255 255 255 / .2); border-radius: 9999px; background: none;
		color: rgb(255 255 255 / .8); font-weight: 500;
	}
	.knap--kant:hover, .knap--kant:focus-visible { border-color: rgb(255 255 255 / .5); background: none; color: #fff; }
	.trin { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
	.trin__kort { position: relative; padding: 24px; border: 1px solid var(--kant); border-radius: var(--radius-lg); background: var(--flade); }
	.trin__nr { position: absolute; top: 16px; right: 20px; color: #D6D3D1; font-size: 48px; font-weight: 700; line-height: 1; }
	.trin__ikon {
		position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 20px;
		border-radius: var(--radius-md); background: var(--accent); color: #fff; font-size: 18px;
	}
	.trin__titel { margin-bottom: 8px; color: var(--blaek); font-size: 14px; font-weight: 700; line-height: 19.25px; }
	.trin__tekst { margin-bottom: 12px; color: var(--daempet); font-size: 12px; line-height: 19.5px; }
	.trin__punkter { display: flex; flex-direction: column; gap: 6px; color: var(--daempet); font-size: 12px; line-height: 19.5px; }
	.trin__punkter li { display: flex; align-items: flex-start; gap: 6px; }
	.trin__punkter li::before { content: ""; flex: 0 0 4px; height: 4px; margin-top: 8px; border-radius: 9999px; background: var(--accent); }
	.trin__pil {
		position: absolute; top: 50%; right: -12px; z-index: 3; transform: translateY(-50%);
		display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
		border-radius: 9999px; background: var(--accent); color: #fff; font-size: 14px;
	}

	/* ---------- Referencer og kundeudtalelser ---------- */
	.sektionshoved--taet { margin-bottom: 40px; }
	.sektionsfod {
		display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
		margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--kant);
		color: var(--daempet); font-size: 14px; line-height: 20px;
	}

	/* ---------- Rød opfordring ---------- */
	.roedt-baand { position: relative; padding-block: 112px; background: var(--accent); text-align: center; overflow: hidden; }
	.roedt-baand__billede { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .25; mix-blend-mode: multiply; }
	.roedt-baand > .beholder { position: relative; z-index: 1; max-width: calc(896px + 2 * var(--kantluft)); }
	.roedt-baand .overskrift-1 { margin-bottom: 24px; color: #fff; }
	.roedt-baand__tekst { margin-bottom: 16px; color: #fff; font-size: 18px; line-height: 29.25px; }
	.roedt-baand__lille { max-width: 576px; margin: 0 auto 40px; color: #fff; font-size: 14px; line-height: 20px; }
	.roedt-baand .knapper { gap: 16px; margin-top: 0; }
	.roedt-baand .knap { font-size: 16px; line-height: 24px; }
	.knap--hvid { background: #fff; color: var(--accent); }
	.knap--hvid:hover, .knap--hvid:focus-visible { background: var(--accent-bloed); color: var(--accent-hover); }
	.knap--moerkroed { border: 1px solid var(--accent-lys); background: var(--accent-hover); }
	.knap--moerkroed:hover, .knap--moerkroed:focus-visible { background: #991B1B; }

	/* ---------- Medlemskaber (DI og FRI) ---------- */
	.medlemsbaand { padding-block: 48px; background: var(--bg); border-bottom: 1px solid var(--kant); }
	.medlemsbaand__inder { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
	.medlemsbaand .oejebryn { margin-bottom: 8px; }
	.medlemsbaand__saetning { margin: 0 0 8px; max-width: 560px; color: var(--blaek); font-size: 18px; font-weight: 600; line-height: 28px; }
	.medlemsbaand__logoer { display: flex; align-items: center; gap: 48px; flex: 0 0 auto; margin: 0; padding: 0; list-style: none; }
	.medlemsbaand__logoer li { display: flex; align-items: center; }
	.medlemsbaand__logoer a { display: block; }
	.medlemsbaand__logoer img { display: block; width: auto; height: 56px; max-width: 220px; object-fit: contain; }
	@media (max-width: 767px) {
		.medlemsbaand { padding-block: 40px; }
		.medlemsbaand__inder { flex-direction: column; align-items: flex-start; gap: 24px; }
		.medlemsbaand__logoer { gap: 32px; }
		.medlemsbaand__logoer img { height: 44px; max-width: 180px; }
	}

	/* ---------- Kontakt ---------- */
	.kontakt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; }
	.kontakt .overskrift-1 { margin-bottom: 24px; }
	.kontakt__tekst { margin-bottom: 40px; color: var(--tekst); font-size: 16px; line-height: 26px; }
	.kontakt__liste { display: flex; flex-direction: column; gap: 24px; }
	.kontakt__liste li { display: flex; align-items: flex-start; gap: 16px; }
	.ikonbrik--bloed { background: var(--accent-bloed); color: var(--accent); font-size: 16px; }
	.kontakt__navn { display: block; color: var(--daempet); font-size: 12px; font-weight: 500; line-height: 16px; }
	.kontakt__vaerdi { display: block; color: var(--blaek-2); font-size: 16px; line-height: 24px; text-decoration: none; }
	a.kontakt__vaerdi:hover { color: var(--accent); }
	.kontakt__formular { padding: 40px; border-radius: var(--radius-lg); background: var(--bg); }

	@media (max-width: 1024px) {
		.sektion--hoej { padding-block: 96px; }
		.forhelt { background-attachment: scroll; }
		.ekspertise, .kontakt { grid-template-columns: 1fr; gap: 48px; }
		.trin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.trin__pil { display: none; }
	}
	@media (max-width: 767px) {
		.sektion--hoej, .roedt-baand { padding-block: 72px; }
		.overskrift-1 { font-size: 36px; line-height: 37.5px; }
		.forhelt__logo { height: 112px; }
		.forhelt__titel { font-size: 20px; line-height: 27.5px; }
		.forhelt__tekst { font-size: 16px; line-height: 26px; }
		.rullemarkoer { display: none; }
		.proces__hoved { flex-direction: column; align-items: flex-start; }
		.trin { grid-template-columns: 1fr; }
		.kontakt__formular { padding: 24px; }
	}
}

@keyframes rul {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50% { transform: translateY(12px); opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
	main.indhold .rullemarkoer::before { animation: none; }
}