/* ==========================================================================
   Aarhus Blótlaug – "Is og ild"
   ========================================================================== */

:root {
	--night: #070A0B;
	--night-2: #05080A;
	--deep: #0C1213;
	--frost: #BFE3F0;
	--frost-d: #86AEBC;
	--ember: #F08A3C;
	--ember-h: #FFC46B;
	--bone: #EEE6D6;
	--text-2: #DCD5C4;
	--mist: #BDBDB4;
	--gold: #C9A46A;
	--line: rgba(191, 227, 240, 0.18);
	--line-g: rgba(201, 164, 106, 0.4);
	--font-display: 'Cinzel', Georgia, serif;
	--font-deco: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
	--font-body: 'EB Garamond', Georgia, serif;
	--font-runes: 'Noto Sans Runes', serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--night);
	color: var(--bone);
	font-family: var(--font-body);
	font-size: 20px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--frost); }
a:hover { color: #FFFFFF; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.12; letter-spacing: 0.02em; }
p { margin: 0; }
section[id] { scroll-margin-top: 16px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto;
	z-index: 1000; padding: 12px 16px; background: var(--ember); color: var(--night);
}

/* Fælles byggeklodser ------------------------------------------------------ */

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.lbl { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.3em; color: var(--frost); }
.lbl-dim { color: var(--mist); }
.rn { font-family: var(--font-runes); }
.h2 { font-size: 52px; }
.sect { position: relative; padding: 110px 0; }
.knot { display: flex; align-items: center; justify-content: center; gap: 12px; }
.knot .ln { width: 70px; height: 1px; background: linear-gradient(90deg, transparent, var(--frost)); }
.knot .ln.r { background: linear-gradient(90deg, var(--frost), transparent); }
.knot .rn { color: var(--ember); font-size: 20px; text-shadow: 0 0 12px rgba(240, 138, 60, 0.7); }

.btn {
	display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 30px;
	font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.16em;
	text-decoration: none; transition: box-shadow 0.3s, background 0.3s, border-color 0.3s;
}
.btn.fire { background: linear-gradient(180deg, #F6A55A, #E0762E); color: #1A0D05; border: 1px solid #F6A55A; }
.btn.fire:hover { color: #1A0D05; box-shadow: 0 0 30px rgba(240, 138, 60, 0.55); }
.btn.ice { color: var(--bone); border: 1px solid rgba(191, 227, 240, 0.55); background: rgba(7, 10, 11, 0.4); }
.btn.ice:hover { border-color: var(--frost); box-shadow: 0 0 24px rgba(191, 227, 240, 0.35); }

/* Tåge der driver */
.fog { position: absolute; left: -30%; width: 160%; pointer-events: none; }
.fog.a { top: 10%; height: 70%; background: radial-gradient(ellipse 35% 45% at 25% 55%, rgba(220, 230, 228, 0.13), transparent 70%), radial-gradient(ellipse 30% 40% at 70% 45%, rgba(220, 230, 228, 0.1), transparent 70%); animation: drift 50s linear infinite alternate; }
.fog.b { bottom: 0; height: 60%; background: radial-gradient(ellipse 40% 45% at 55% 60%, rgba(220, 230, 228, 0.12), transparent 70%), radial-gradient(ellipse 28% 40% at 12% 40%, rgba(220, 230, 228, 0.09), transparent 70%); animation: drift 70s linear infinite alternate-reverse; }
@keyframes drift { 0% { transform: translateX(-7%); } 100% { transform: translateX(9%); } }

/* Afsnit toner frem, når man scroller (Chrome/Edge; andre browsere viser dem med det samme) */
@supports (animation-timeline: view()) {
	.rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
	@keyframes rv { 0% { opacity: 0; transform: translateY(40px); filter: blur(4px); } 100% { opacity: 1; transform: none; filter: none; } }
}

/* Sidehoved ------------------------------------------------------------- */

.site-header { position: relative; z-index: 30; background: var(--night-2); border-bottom: 1px solid var(--line); }
.home .site-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; }
.header-inner {
	max-width: 1320px; margin: 0 auto; padding: 18px 32px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--bone); }
.brand:hover { color: var(--bone); }
.brand img { width: 58px; height: 58px; }
.brand-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: 0.2em; }
.main-nav {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px;
	font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.16em;
}
.main-nav a { position: relative; color: var(--bone); text-decoration: none; padding: 12px 0; }
.main-nav a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
	background: linear-gradient(90deg, var(--frost), var(--ember));
	transform: scaleX(0); transform-origin: left; transition: transform 0.35s;
}
.main-nav a:hover::after { transform: scaleX(1); }
.main-nav a.nav-cta { border: 1px solid var(--line-g); padding: 10px 16px; }
.main-nav a.nav-cta::after { display: none; }
.main-nav a.nav-cta:hover { border-color: var(--ember); box-shadow: 0 0 18px rgba(240, 138, 60, 0.35); }
.nav-toggle { display: none; }

/* Mobilmenu: menuknap i stedet for links, når de seks links ikke kan stå på én linje. Uden JavaScript vises linkene som før. */
@media (max-width: 1240px) {
	.js .header-inner { flex-wrap: nowrap; gap: 12px; }
	.js .nav-toggle {
		display: inline-flex; align-items: center; gap: 10px; flex: none;
		min-height: 44px; padding: 0 14px; cursor: pointer;
		background: rgba(7, 10, 11, 0.5); color: var(--frost); border: 1px solid var(--line);
		font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.18em;
	}
	.js .nav-toggle:hover, .js .nav-toggle[aria-expanded="true"] { border-color: var(--frost); }
	.js .nav-toggle:focus-visible { outline: 2px solid var(--frost); outline-offset: 2px; }
	.nav-toggle-bars { position: relative; width: 20px; height: 14px; display: block; }
	.nav-toggle-bars span {
		position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
		transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
	}
	.nav-toggle-bars span:nth-child(1) { top: 0; }
	.nav-toggle-bars span:nth-child(2) { top: 6px; }
	.nav-toggle-bars span:nth-child(3) { top: 12px; }
	.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
	.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
	.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

	.js .main-nav {
		position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 0;
		padding: 8px 24px 26px; background: rgba(7, 10, 11, 0.97);
		border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5);
		font-size: 15px; letter-spacing: 0.18em;
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	}
	.js .site-header.is-open .main-nav {
		opacity: 1; visibility: visible; transform: none;
		transition: opacity 0.25s ease, transform 0.25s ease;
	}
	.js .main-nav a { display: flex; align-items: center; min-height: 54px; padding: 0 4px; border-bottom: 1px solid var(--line); }
	.js .main-nav a::after { display: none; }
	.js .main-nav a.nav-cta { justify-content: center; margin-top: 18px; padding: 0; border: 1px solid var(--line-g); }
}

/* Top: solhjul-video og gnister --------------------------------------- */

.hero {
	position: relative; min-height: 1080px; overflow: hidden;
	display: flex; justify-content: center; text-align: center; padding: 150px 24px 0;
	background: var(--night) url(../img/solhjul-plakat.jpg) center 60% / cover no-repeat;
}
.hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; pointer-events: none; }
.hero-shade {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(7, 10, 11, 0.92) 0%, rgba(7, 10, 11, 0.72) 30%, rgba(7, 10, 11, 0.35) 52%, rgba(7, 10, 11, 0.05) 70%, rgba(7, 10, 11, 0.2) 88%, var(--night) 100%),
		radial-gradient(ellipse 80% 60% at 50% 62%, transparent 40%, rgba(7, 10, 11, 0.6) 100%);
}
.hero-glow {
	position: absolute; left: 50%; top: 58%; width: 1100px; height: 520px; transform: translate(-50%, -50%);
	pointer-events: none; mix-blend-mode: screen;
	background: radial-gradient(closest-side, rgba(255, 140, 60, 0.22), transparent 70%);
	animation: flick 2.8s ease-in-out infinite alternate;
}
@keyframes flick { 0% { opacity: 0.55; } 30% { opacity: 0.95; } 45% { opacity: 0.7; } 70% { opacity: 1; } 100% { opacity: 0.65; } }

.embers { position: absolute; left: 0; right: 0; top: 0; bottom: 29%; pointer-events: none; z-index: 2; }
.em {
	position: absolute; bottom: 0; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
	background: #FFC46B; box-shadow: 0 0 6px 2px rgba(255, 150, 60, 0.8), 0 0 16px 5px rgba(240, 100, 30, 0.35);
	opacity: 0; animation: rise var(--d) linear var(--w) infinite;
}
@keyframes rise {
	0% { transform: translate(0, 0) scale(1); opacity: 0; }
	7% { opacity: 1; }
	35% { transform: translate(var(--dx), -300px) scale(0.9); }
	65% { transform: translate(calc(var(--dx) * -0.7), -560px) scale(0.7); opacity: 0.85; }
	100% { transform: translate(calc(var(--dx) * 0.4), -880px) scale(0.3); opacity: 0; }
}

.hero-in { position: relative; z-index: 3; max-width: 940px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.seal { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }
.seal img { width: 150px; height: 150px; animation: lglow 4s ease-in-out infinite alternate; }
@keyframes lglow { 0% { filter: drop-shadow(0 0 6px rgba(191, 227, 240, 0.15)); } 100% { filter: drop-shadow(0 0 26px rgba(191, 227, 240, 0.45)); } }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--frost); transform-origin: 50% 50%; animation: spin 40s linear infinite; opacity: 0.85; }
@keyframes spin { to { transform: rotate(360deg); } }
.rune-ban { font-family: var(--font-runes); font-size: 19px; letter-spacing: 0.35em; color: var(--frost); text-shadow: 0 0 14px rgba(191, 227, 240, 0.55); }
.hero h1 {
	font-family: var(--font-deco); font-weight: 700; font-size: 92px; line-height: 1;
	background: linear-gradient(180deg, #FFFFFF 0%, #E6F3F7 45%, #F3C890 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.6));
}
.lead { font-size: 24px; font-style: italic; color: #E9E2D2; max-width: 760px; line-height: 1.55; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); }
.btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.motto { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 520px; color: var(--gold); }
.motto .ln { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.motto .ln.r { background: linear-gradient(90deg, var(--gold), transparent); }
.motto .rn { font-size: 16px; letter-spacing: 0.25em; white-space: nowrap; }
.up { animation: up 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.u1 { animation-delay: 0.2s; } .u2 { animation-delay: 0.4s; } .u3 { animation-delay: 0.6s; } .u4 { animation-delay: 0.8s; } .u5 { animation-delay: 1s; }
@keyframes up { 0% { opacity: 0; transform: translateY(24px); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }

/* Velkommen ------------------------------------------------------------ */

.intro { text-align: center; overflow: hidden; padding: 130px 0 140px; }
.intro::before {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, var(--night) 0%, rgba(7, 10, 11, 0.62) 25%, rgba(7, 10, 11, 0.62) 75%, var(--night) 100%),
		url(../img/soe.jpg) center 60% / cover no-repeat;
}
.intro .inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 0 28px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.intro p { font-size: 26px; font-style: italic; color: #ECE5D4; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); }

/* Om os ---------------------------------------------------------------- */

.om-grid { display: flex; flex-wrap: wrap; gap: 72px; align-items: flex-start; }
.portal { flex: 1 1 400px; min-width: 0; position: relative; padding-bottom: 120px; }
/* Ingen ramme: billedet toner ud i alle kanter og glider over i baggrunden ligesom de andre billeder */
.portal-img {
	position: relative; overflow: hidden; aspect-ratio: 4 / 5;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 100%);
	mask-composite: intersect;
}
.portal-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); animation: breathe 18s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: scale(1.14); } }
.portal-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 10, 11, 0.15), rgba(7, 10, 11, 0.35)); }
.portal-card {
	position: absolute; left: 28px; right: -20px; bottom: 0;
	background: rgba(12, 18, 19, 0.94); border: 1px solid var(--line); padding: 30px 30px 28px;
	display: flex; flex-direction: column; gap: 12px; backdrop-filter: blur(6px);
}
.portal-card h3 { font-size: 26px; color: var(--frost); }
.portal-card p { font-size: 17px; color: var(--mist); }
.om-text { flex: 1.2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.om-text p { color: var(--text-2); }
.om-text h3 { font-size: 23px; color: var(--ember-h); margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.om-text h3::before { content: ""; width: 22px; height: 1px; background: var(--ember); }

/* Historie ------------------------------------------------------------- */

.hist { min-height: 720px; display: flex; align-items: center; overflow: hidden; }
.hist::before {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, var(--night) 0%, rgba(7, 10, 11, 0.92) 38%, rgba(7, 10, 11, 0.45) 70%, rgba(7, 10, 11, 0.2) 100%),
		linear-gradient(180deg, var(--night) 0%, transparent 18%, transparent 82%, var(--night) 100%),
		url(../img/drikkehorn.jpg) 70% center / cover no-repeat;
}
.hist .wrap { position: relative; z-index: 1; width: 100%; }
.hist-col { max-width: 560px; display: flex; flex-direction: column; gap: 22px; }
.yrs { display: flex; align-items: flex-end; gap: 18px; }
.yrs .n {
	font-family: var(--font-deco); font-weight: 700; font-size: 150px; line-height: 0.82;
	background: linear-gradient(180deg, #FFD9A0, #E0762E); -webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 0 22px rgba(240, 138, 60, 0.45)); animation: flick 3.4s ease-in-out infinite alternate;
}
.yrs .t { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; }
.yrs .t b { font-family: var(--font-display); font-size: 38px; font-weight: 500; color: var(--bone); }
.hist p { color: var(--text-2); }

/* Fællesskab ----------------------------------------------------------- */

.fael { padding: 0; }
.banner { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; }
.banner::before {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(7, 10, 11, 0.15) 0%, rgba(7, 10, 11, 0.55) 45%, rgba(7, 10, 11, 0.94) 70%),
		linear-gradient(180deg, var(--night) 0%, transparent 20%, transparent 80%, var(--night) 100%),
		url(../img/offerskaal.jpg) left center / cover no-repeat;
}
.banner .wrap { position: relative; z-index: 1; width: 100%; display: flex; justify-content: flex-end; }
.banner .txt { max-width: 520px; display: flex; flex-direction: column; gap: 20px; }
.banner .txt p { font-size: 22px; font-style: italic; color: #E6DFCE; }

/* Årets fire store blót ------------------------------------------------ */

.blot { padding: 120px 0 130px; }
.blot::before {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, var(--night) 0%, rgba(7, 10, 11, 0.85) 22%, rgba(7, 10, 11, 0.85) 78%, var(--night) 100%),
		url(../img/kornmark.jpg) center 55% / cover no-repeat;
}
.blot .wrap { position: relative; z-index: 1; }
.blot-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 60px; }
.blot-head h3 { font-size: 46px; }
.blot-head p { color: var(--mist); font-style: italic; }
.wheel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); gap: 28px 44px; }
.wheel { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; }
.wheel svg { width: 280px; height: 280px; }
.wheel-spin { transform-origin: 150px 150px; animation: spin 160s linear infinite; }
.c1 { grid-column: 1; grid-row: 1; } .c2 { grid-column: 3; grid-row: 1; } .c3 { grid-column: 3; grid-row: 2; } .c4 { grid-column: 1; grid-row: 2; }
.card {
	--c: var(--gold);
	position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 30px;
	background: rgba(10, 15, 16, 0.9); border: 1px solid rgba(255, 255, 255, 0.08);
	transition: transform 0.4s, box-shadow 0.4s, border-color 0.4s;
}
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c); box-shadow: 0 0 18px var(--c); }
.card:hover { transform: translateY(-6px); border-color: var(--c); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 30px color-mix(in srgb, var(--c) 30%, transparent); }
.card.vin { --c: #BFE3F0; } .card.for { --c: #A9C98A; } .card.som { --c: #F08A3C; } .card.eft { --c: #D9A45A; }
.card .top { display: flex; justify-content: space-between; align-items: center; color: var(--c); }
.card .mo { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.24em; }
.card h4 { font-size: clamp(22px, 1.85vw, 27px); overflow-wrap: break-word; hyphens: auto; }
.card .sh { font-size: 17px; font-style: italic; color: var(--mist); }
.card .lg { font-size: 17px; line-height: 1.6; color: #D9D2C1; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 12px; }

/* Vedtægter ------------------------------------------------------------ */

.ved::before {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, var(--night) 0%, rgba(7, 10, 11, 0.9) 20%, rgba(7, 10, 11, 0.9) 80%, var(--night) 100%),
		url(../img/mostaage.jpg) center / cover no-repeat;
}
.ved .inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 0 28px; display: flex; flex-direction: column; gap: 44px; }
.ved-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ved-head p { color: var(--mist); font-style: italic; }
.law details { border-bottom: 1px solid var(--line); }
.law details:first-child { border-top: 1px solid var(--line); }
.law summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px; padding: 20px 6px; min-height: 44px; }
.law summary::-webkit-details-marker { display: none; }
.law summary:focus-visible { outline: 2px solid var(--frost); outline-offset: 2px; }
.law .no {
	font-family: var(--font-runes); width: 44px; height: 44px; flex: none;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--line); border-radius: 50%; color: var(--frost); font-size: 18px; transition: all 0.35s;
}
.law .tt { flex: 1; font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1.3; }
.law .chev { color: var(--frost-d); transition: transform 0.35s; }
.law details[open] .chev { transform: rotate(45deg); color: var(--ember); }
.law details[open] .no, .law summary:hover .no { border-color: var(--ember); color: var(--ember-h); box-shadow: 0 0 16px rgba(240, 138, 60, 0.4); }
.law .body { padding: 0 6px 26px 70px; display: flex; flex-direction: column; gap: 12px; color: #D4CEBD; font-size: 18px; }
.law ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.adopt { text-align: center; color: var(--mist); font-size: 16px; font-style: italic; display: flex; flex-direction: column; gap: 4px; }

/* Bliv medlem ---------------------------------------------------------- */

.medlem { overflow: hidden; }
.medlem .wrap { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: center; }
.m-text { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.m-text p { color: var(--text-2); }
.frost-card {
	flex: 1 1 300px; position: relative; overflow: hidden; padding: 40px 34px;
	display: flex; flex-direction: column; gap: 14px;
	background: linear-gradient(160deg, rgba(191, 227, 240, 0.1), rgba(12, 18, 19, 0.92) 45%);
	border: 1px solid rgba(191, 227, 240, 0.35);
}
.frost-card::after {
	content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
	animation: shine 6s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.frost-card h3 { font-size: 28px; color: var(--frost); }
.frost-card p { color: var(--text-2); }
.price { font-family: var(--font-deco); font-weight: 700; color: var(--frost); white-space: nowrap; text-shadow: 0 0 14px rgba(191, 227, 240, 0.5); }

/* Facebook og kontakt -------------------------------------------------- */

.kont { padding: 130px 0 140px; overflow: hidden; }
.kont::before {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, var(--night) 0%, rgba(7, 10, 11, 0.5) 25%, rgba(7, 10, 11, 0.62) 75%, var(--night-2) 100%),
		url(../img/sivsoe.jpg) center 55% / cover no-repeat;
}
.kont .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: stretch; }
.panel {
	background: rgba(7, 10, 11, 0.82); border: 1px solid var(--line); padding: 46px 42px;
	display: flex; flex-direction: column; gap: 18px; backdrop-filter: blur(4px);
}
.panel .ico { color: var(--ember); }
.panel h2 { font-size: 40px; }
.panel p { color: var(--text-2); }
.panel-foot { margin-top: auto; padding-top: 8px; }

.ab-admin-note { padding: 16px; border: 1px dashed var(--line-g); color: var(--text-2); font-size: 16px; }
.ab-form-fallback { color: var(--text-2); font-size: 18px; }

/* WPForms – så formularen matcher designet.
   Sæt WPForms → Indstillinger → Generelt → "Inkluder formularstyling" til "Kun grundlæggende styling". */
.kontakt-form .wpforms-container { margin: 0 !important; font-size: 18px; }
.kontakt-form .wpforms-field { padding: 0 0 16px !important; }
.kontakt-form .wpforms-field-label,
.kontakt-form .wpforms-field-sublabel {
	font-family: var(--font-display) !important; font-size: 12px !important; font-weight: 700 !important;
	letter-spacing: 0.2em; text-transform: uppercase; color: var(--frost-d) !important; margin-bottom: 6px !important;
}
.kontakt-form .wpforms-required-label { color: var(--ember) !important; }
.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form input[type="tel"],
.kontakt-form input[type="url"],
.kontakt-form input[type="number"],
.kontakt-form select,
.kontakt-form textarea {
	width: 100% !important; max-width: 100% !important; min-height: 46px; padding: 10px 2px !important;
	background: rgba(191, 227, 240, 0.04) !important; border: 0 !important; border-bottom: 1px solid rgba(191, 227, 240, 0.35) !important;
	border-radius: 0 !important; color: var(--bone) !important; font-family: var(--font-body) !important; font-size: 18px !important;
	box-shadow: none !important; transition: border-color 0.3s, box-shadow 0.3s;
}
.kontakt-form textarea { min-height: 130px; resize: vertical; }
.kontakt-form input:focus,
.kontakt-form select:focus,
.kontakt-form textarea:focus { outline: none !important; border-bottom-color: var(--ember) !important; box-shadow: 0 8px 16px -12px rgba(240, 138, 60, 0.8) !important; }
.kontakt-form .wpforms-field-gdpr-checkbox label,
.kontakt-form .wpforms-field-checkbox label { color: var(--text-2) !important; font-size: 16px !important; }
.kontakt-form .wpforms-submit-container { padding-top: 8px !important; }
.kontakt-form button[type="submit"],
.kontakt-form .wpforms-submit {
	min-height: 52px !important; padding: 0 30px !important; background: rgba(7, 10, 11, 0.4) !important;
	border: 1px solid rgba(191, 227, 240, 0.55) !important; border-radius: 0 !important; color: var(--bone) !important;
	font-family: var(--font-display) !important; font-size: 14px !important; font-weight: 700 !important;
	letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; box-shadow: none !important;
	transition: border-color 0.3s, box-shadow 0.3s;
}
.kontakt-form button[type="submit"]:hover,
.kontakt-form .wpforms-submit:hover { border-color: var(--frost) !important; box-shadow: 0 0 24px rgba(191, 227, 240, 0.35) !important; }
.kontakt-form label.wpforms-error,
.kontakt-form .wpforms-error { color: #F2A07B !important; font-size: 15px !important; }
.kontakt-form .wpforms-confirmation-container-full {
	background: rgba(191, 227, 240, 0.08) !important; border: 1px solid var(--frost) !important; color: var(--bone) !important;
}

/* Sidefod ------------------------------------------------------------- */

.site-footer { background: var(--night-2); border-top: 1px solid var(--line); }
.footer-inner {
	max-width: 1200px; margin: 0 auto; padding: 30px 32px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 16px; color: var(--mist); }
.footer-brand img { width: 44px; height: 44px; }
.footer-name { color: var(--mist); }
.footer-brand a { color: var(--mist); }
.footer-brand a:hover { color: var(--frost); }
.to-top {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none;
	font-family: var(--font-display); font-size: 13px; letter-spacing: 0.2em; color: var(--mist);
}
.to-top:hover { color: var(--frost); }

/* Almindelige sider (fx privatlivspolitik) ------------------------------ */

.page-main { padding: 80px 24px 112px; }
.page-article { max-width: 780px; margin: 0 auto 64px; }
.page-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 36px; }
.page-head h1 { font-size: clamp(34px, 5vw, 48px); }
.page-head h2 { font-size: 32px; }
.page-head h2 a { color: var(--bone); text-decoration: none; }
.gold-rule { display: block; width: 80px; height: 1px; background: linear-gradient(90deg, var(--frost), var(--ember)); }
.entry-content { color: var(--text-2); }
.entry-content > * + * { margin-top: 1em; }
.entry-content h2, .entry-content h3 { color: var(--bone); margin-top: 1.6em; }
.entry-content h2 { font-size: 30px; }
.entry-content h3 { font-size: 24px; }
.entry-content ul, .entry-content ol { padding-left: 24px; }
.page-full { min-height: 50vh; }

/* Tablet ------------------------------------------------------------- */

@media (max-width: 1000px) {
	.hero h1 { font-size: 64px; }
	.h2 { font-size: 42px; }
	.wheel-grid { grid-template-columns: minmax(0, 1fr); }
	.wheel, .c1, .c2, .c3, .c4 { grid-column: 1; grid-row: auto; }
	.wheel svg { width: 180px; height: 180px; }
	.kont .wrap { grid-template-columns: minmax(0, 1fr); }
	.banner { align-items: flex-end; padding: 280px 0 40px; }
	.banner .wrap { justify-content: flex-start; }
	.banner::before {
		background:
			linear-gradient(180deg, var(--night) 0%, rgba(7, 10, 11, 0) 12%, rgba(7, 10, 11, 0) 50%, rgba(7, 10, 11, 0.9) 68%, var(--night) 72%),
			url(../img/offerskaal.jpg) left top / auto 70% no-repeat;
		background-color: var(--night);
	}
}

/* Mobil --------------------------------------------------------------- */

@media (max-width: 640px) {
	body { font-size: 18px; }
	.wrap { padding: 0 16px; }
	.header-inner { padding: 12px 16px; }
	.brand { gap: 12px; min-width: 0; }
	.brand img { width: 44px; height: 44px; flex: none; }
	.brand-name { font-size: 14px; letter-spacing: 0.12em; }
	.js .nav-toggle-label { display: none; }
	.js .nav-toggle { padding: 0 12px; }
	.js .main-nav { padding: 4px 16px 24px; }
	/* Videoen vises som et bredt bånd nederst i toppen, så hele den brændende cirkel er med */
	.hero { min-height: 822px; padding: 110px 16px 0; background: var(--night); }
	.hero-vid {
		inset: auto; left: 50%; bottom: -24px; width: 150%; height: auto; aspect-ratio: 16 / 9;
		transform: translateX(-50%); object-fit: cover; object-position: center;
		/* Toppen toner ind, så det nederste af træerne ses; bunden under cirklen er skåret fra */
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 14%, #000 34%, #000 82%, transparent 92%);
		mask-image: linear-gradient(180deg, transparent 0%, transparent 14%, #000 34%, #000 82%, transparent 92%);
	}
	.hero-shade { background: linear-gradient(180deg, rgba(7, 10, 11, 0) 70%, rgba(7, 10, 11, 0.35) 100%); }
	.hero-glow { top: auto; bottom: -70px; width: 600px; height: 320px; transform: translateX(-50%); }
	.seal { width: 150px; height: 150px; }
	.seal img { width: 110px; height: 110px; }
	.hero h1 { font-size: 42px; }
	.lead { font-size: 19px; }
	/* På mobil ligger "Om os" og "Vedtægter" i menuen, så knapperne i toppen skjules */
	.btns { display: none; }
	.embers { bottom: 87px; }
	.h2 { font-size: 34px; }
	.blot-head h3, .panel h2 { font-size: 32px; }
	.sect, .intro, .blot, .kont { padding-top: 70px; padding-bottom: 70px; }
	.fael { padding: 0; }
	.intro p { font-size: 21px; }
	.intro::before {
		background:
			linear-gradient(180deg, var(--night) 0%, rgba(7, 10, 11, 0.4) 18%, rgba(7, 10, 11, 0.45) 82%, var(--night) 100%),
			url(../img/soe.jpg) center 60% / cover no-repeat;
	}
	.intro .inner { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9); }
	.kont::before {
		background:
			linear-gradient(180deg, var(--night) 0%, rgba(7, 10, 11, 0.25) 15%, rgba(7, 10, 11, 0.35) 85%, var(--night-2) 100%),
			url(../img/sivsoe.jpg) center 55% / cover no-repeat;
	}
	.portal { padding-bottom: 150px; }
	.portal-card { left: 12px; right: 12px; padding: 22px; }
	.yrs .n { font-size: 104px; }
	.yrs .t b { font-size: 28px; }
	.hist { align-items: flex-end; padding-top: 280px; }
	.hist::before {
		background:
			linear-gradient(180deg, var(--night) 0, rgba(7, 10, 11, 0) 50px, rgba(7, 10, 11, 0) 250px, rgba(7, 10, 11, 0.85) 380px, var(--night) 420px),
			url(../img/drikkehorn.jpg) 88% top / auto 420px no-repeat;
		background-color: var(--night);
	}
	.card { padding: 24px 22px; }
	.card h4 { font-size: 22px; }
	.law summary { gap: 14px; }
	.law .tt { font-size: 18px; }
	.law .body { padding: 0 4px 22px; }
	.panel { padding: 32px 20px; }
	.footer-inner { padding: 24px 16px; }
}

/* Respekter "reducer bevægelse" ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.em { display: none; }
	.hero-glow, .ring, .seal img, .up, .fog, .portal-img img, .yrs .n, .wheel-spin, .frost-card::after, .rv { animation: none; }
	.main-nav, .nav-toggle-bars span, .card { transition: none !important; }
}