/* polish.css — "a polished classic".
 * The 2009 Nihilistisk Folkeparti identity kept intact (black frame, white
 * paper panel, gold/olive, the five photo nav buttons, the box structure), with
 * the homemade / dated details repaired: flat cards instead of Web-2.0 grey
 * gloss, a real type system, fixed spacing, the venstrebar white-stripe gone,
 * proper responsive. Loaded last; the 2009 stylesheets stay as the base, so
 * this file can be removed to revert.
 */

/* ---------- self-hosted fonts (no third-party requests) ---------- */
@font-face { font-family:"Fraunces";       src:url(../fonts/fraunces.woff2) format("woff2");      font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Libre Franklin"; src:url(../fonts/librefranklin.woff2) format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; }

/* ---------- tokens ---------- */
:root{
	--frame:#000000;      /* the outer black frame (true black — the identity) */
	--paper:#ffffff;      /* the content panel */
	--card:#faf8f2;       /* warm off-white fill for boxes/menu, a hair off the paper */
	--ink:#23201a;        /* warm near-black body text */
	--muted:#6f6a58;      /* secondary / captions */
	--gold:#8a6a2b;       /* the one confident accent: box headers, hovers */
	--gold-deep:#6e5422;  /* links on paper (AA) */
	--line:#e6e0d2;       /* hairlines / card borders */
	--serif:"Fraunces", Georgia, "Times New Roman", serif;
	--gold-lo:#52400f; --gold-hi:#e4cd87;   /* for gilded 3D on the buttons */
	--sans:"Trebuchet MS", "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
	--radius:7px;
	--shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.07);
	--ease:.2s ease;

	/* themed chrome colour: silver normally (same family as the menu),
	 * one place to change. The .dyr override below turns it pink. */
	--bar:        linear-gradient(180deg,#bcc1bc 0%,#9ba19b 50%,#808780 100%);
	--bar-press:  linear-gradient(180deg,#808780 0%,#9ba19b 55%,#b2b7b2 100%);
	--accent:     #8a7f52;   /* quote rule / accents */
	--accent-ink: #6e633b;   /* links, quote text */
	--menu-img:        url(../images/venstremenuknap.jpg);
	--menu-img-hover:  url(../images/venstremenuknap_hover.jpg);
	--menu-img-active: url(../images/venstremenuknap_active.jpg);
	--box-fade:#b4bbb4;   /* the foot of img04_g.jpg: what made the boxes shine */
	--edge:    #7f857f;   /* button border — silver, NOT gold (gold was never in the original) */
	--edge-lo: #5f655f;   /* the raised bottom edge */
}

/* Dyrevelfærd page (loads style_dyr.css): the whole chrome goes pink. */
html:has(link[href*="style_dyr"]){
	--bar:        linear-gradient(180deg,#f3b4d4 0%,#e87db2 50%,#d4568f 100%);
	--bar-press:  linear-gradient(180deg,#d4568f 0%,#e87db2 55%,#f3a7cc 100%);
	--accent:     #c23b7e;
	--accent-ink: #a02d66;
	--menu-img:        url(../images/venstremenuknap_pink.jpg);
	--menu-img-hover:  url(../images/venstremenuknap_hover_pink_3d.jpg);
	--menu-img-active: url(../images/venstremenuknap_active_pink_3d.jpg);
	--box-fade:#f69ecd;   /* the foot of img04_pink.gif */
	--edge:    #c05a8e;
	--edge-lo: #9c3f6e;
}

/* keep the scrollbar gutter reserved so pages don't jump sideways when one is
 * taller than the viewport and the next is not */
html{ scrollbar-gutter:stable; }

/* ---------- base type ---------- */
body, th, td, input, textarea, button, select{
	font-family:var(--sans); font-size:17px; line-height:1.55; color:var(--ink);
	-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{ font-family:var(--serif); color:var(--ink); font-weight:600; letter-spacing:0; }
h1{ font-size:clamp(2rem, 1.4rem + 2vw, 2.7rem); line-height:1.08; margin:.1em 0 .4em; }
h2{ font-size:1.45rem; line-height:1.2; }
h3{ font-size:1.2rem; line-height:1.25; }
p{ text-align:left; line-height:1.55; }

#content, #content_noright, #content_forside, #content_press{ color:var(--ink); }
#content p, #content_noright p, #content_forside p, #content_press p{ max-width:68ch; }

/* An <a> with no href is a jump target, not a link: the 2009 FAQ wraps each
 * answer in one. It must not take the link colour or underline on hover and
 * promise a click that is not there. */
#content a:not([href]), #content_noright a:not([href]),
#content_forside a:not([href]), #content_press a:not([href]), #hojrebar a:not([href]),
#content a:not([href]):hover, #content_noright a:not([href]):hover{
	color:inherit !important; text-decoration:none !important; cursor:inherit;
}
#content a, #content_noright a, #content_forside a, #content_press a, #hojrebar a{
	color:var(--accent-ink); text-decoration:none; transition:color var(--ease);
}
#content a:hover, #content_noright a:hover, #content_forside a:hover, #hojrebar a:hover{
	color:var(--accent); text-decoration:underline;
}

/* ---------- RIGHT BOXES: flatten the grey gloss into clean cards ---------- */
/* ---------- 2009's picture-corners, done in CSS ----------------------------
 * The white panel's rounded top and bottom were two 900px GIFs stacked above
 * and below it (#top, #bottom). The curve in them is hard-edged, so the corner
 * stepped visibly against the black frame - the nick on the white edge - and
 * they only lined up at exactly 900px. The panel rounds itself instead.      */
#top, #top_forum, #bottom{ display:none !important; }
/* top.gif was 12px tall with a -4px margin, so the panel used to show a strip
 * of white above the five buttons. The radius alone does not: put it back. */
#page{ border-radius:12px; padding-top:8px; }

/* The sidebar boxes were three pictures too: img03_g.jpg for the header and
 * img04_g.jpg for the body, both 250px wide, both anchored to an edge. The
 * body's soft fade towards the bottom is what gave them their shine, so it is
 * kept - as a gradient over the same 250px the picture covered. */
#hojrebar li{
	background:linear-gradient(to top, var(--box-fade) 0, var(--card) 250px) !important;
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:0 0 .6rem 0;
	margin-bottom:1.25rem;
	overflow:hidden;                 /* clips the header to the rounded top */
}
#hojrebar h2{
	background:var(--bar) !important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 3px rgba(0,0,0,.18);
	color:var(--paper); text-shadow:0 1px 2px rgba(0,0,0,.4);
	font-family:var(--serif); font-size:1.15rem; font-weight:600;
	padding:.55rem 1rem; margin:0;
}

/* pull-quote: was a narrow (35%) floated + justified box with ugly word gaps.
 * Make it a clean italic serif quote with a gold left rule. */
.pullquote{
	text-align:left !important; letter-spacing:normal !important; word-spacing:normal !important;
	float:none !important; width:auto !important; max-width:38ch;
	/* it no longer floats, so it must start below a floated photo instead of
	 * wrapping its first line around it */
	clear:both;
	/* the 2009 sheet paints closequote.gif bottom right with !important; without
	 * the matching openquote.gif on the first letter it is just a stray mark */
	background-image:none !important;
	font-family:var(--serif); font-style:italic; font-weight:500;
	font-size:1.5rem !important; line-height:1.3 !important; color:var(--accent-ink);
	margin:1.25rem 0 !important; padding:.2rem 0 .2rem 1rem;
	border-left:3px solid var(--accent);
}
.pullquote:first-letter{ background:none !important; padding:0 !important; }

/* The closing slogan was a fixed 400px float with a 40px left padding on top,
 * which is wider than the column on a phone and ran off the right edge. */
.slogan{ float:none !important; width:auto !important; max-width:100%; }
#hojrebar p{ padding:.5rem 1rem; color:var(--ink); }
/* ---------- TEASERS AS CARDS --------------------------------------------
 * Two 2009 constructions did the same job with different hacks: the front
 * page drew a 2px grey rule above each item, and the section teasers put a
 * 3px bar on the left and right of the paragraph ONLY - so the heading hung
 * above the box, the picture leaned on the right bar and the "read more" link
 * fell outside it. Both become one card, in the same cloth as the sidebar
 * boxes: the panel's own off-white, a hairline, the shared radius and shadow.
 * (faithful.py turns the repeated ids into classes.) */
.markesag_venstre, .markesag_hojre, .teaser{
	background:var(--card) none;
	width:auto;
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:1rem 1.15rem .9rem;
	margin:0 0 1.35rem;
	overflow:hidden;                 /* the card contains its floated picture */
}
/* Text and picture were two fixed-width floats (330 + 150) that only added up
 * at one window width. The card lays them out side by side and lets them wrap
 * under each other when there is no room; the picture keeps the side it had. */
.markesag_venstre, .markesag_hojre{
	float:none; width:auto;
	display:flex; flex-wrap:wrap; align-items:flex-start; gap:0 1.15rem;
}
.markesag_venstre .sag_tekst, .markesag_hojre .sag_tekst{
	float:none; width:auto; flex:1 1 15rem; min-width:0;
}
.markesag_venstre .sag_billede, .markesag_hojre .sag_billede{
	float:none; width:auto; height:auto; margin:.2rem 0 0; flex:0 0 auto;
}
.markesag_venstre .sag_billede{ order:2; }
.markesag_hojre .sag_billede{ order:-1; }
.sag_billede img, .teaser .teaser-billede{ border-radius:5px; }
.teaser .teaser-billede{ float:right; padding:0; margin:.15rem 0 .5rem 1.15rem; }
.teaser h3{
	/* the box was drawn with two GIFs - tsr-t.gif for the top edge behind the
	 * heading, tsr-b.gif for the bottom - plus the side bars on the paragraph.
	 * The card draws itself now, so the pictures go. */
	background:none;
	margin:0 0 .55rem; padding:0;
	font-family:var(--serif); font-size:1.25rem; font-weight:600;
	text-transform:none; letter-spacing:0; color:var(--ink);
}
/* the column rules are written with an id (#content_noright p { padding ... }),
 * so the card's own paragraph has to answer in the same weight */
#content .teaser p, #content_noright .teaser p,
#content_forside .teaser p, #content_press .teaser p,
.teaser p{ border:0; padding:0; margin:0 0 .7rem; }
#content .teaser h3, #content_noright .teaser h3,
#content_forside .teaser h3{ padding:0; }
/* the body text of a front-page card was indented by the column rule, so it
 * no longer lined up with its own heading */
#content .sag_brodtekst, #content_noright .sag_brodtekst,
#content_forside .sag_brodtekst, .sag_brodtekst{ padding:0; margin:0; }
.teaser a.more, .sag_brodtekst a.more{
	display:inline; text-align:left; padding:0;
}

/* where a reference used to be a link and the material is gone for good */
.utilgaengelig{ color:var(--muted); font-style:italic; }

/* The arrow after "Læs mere her..." was a 9x16 black GIF - a jagged triangle
 * that ignored the text's colour and size. The character draws it sharp. */
a.more img[src*="tsr-a"]{ display:none; }
a.more::after{ content:"\00a0\25b8"; font-size:.85em; vertical-align:.05em; }
#hojrebar a{ color:var(--accent-ink); text-decoration:underline; }

/* ---------- LEFT MENU: fix the white stripe + flatten ---------- */
/* mobile "Menu" toggle for the side menu — hidden on desktop */
.menu-toggle{
	display:none; width:100%; box-sizing:border-box; margin:0 0 1rem;
	background:var(--bar); color:var(--paper); text-shadow:0 1px 2px rgba(0,0,0,.4);
	border:1px solid rgba(0,0,0,.25); border-radius:7px; box-shadow:0 2px 4px rgba(0,0,0,.25);
	font:700 1rem/1.2 var(--sans); padding:.75rem 1rem; text-align:left; cursor:pointer;
}
.menu-toggle:active{ box-shadow:inset 0 2px 5px rgba(0,0,0,.4); transform:translateY(1px); }

#venstrebar{ width:170px; padding-left:16px; box-sizing:border-box; }   /* restore the lost left gutter */
#venstrebar h2, .sektionsmenu h2{
	clear:both; float:none;
	font-family:var(--serif); text-transform:none; font-weight:600; text-align:left;
	font-size:1.1rem; color:var(--ink);
	border-bottom:2px solid var(--accent); padding-bottom:.2rem; margin:1.4rem 0 .5rem;
}
/* ONE rounded, raised group of connected elongated buttons (no gaps), using the
 * ORIGINAL silver button images — faithful to the old menu, just full-width (no
 * white stripe) and with a real press-DOWN on hover. Rounded corners on the group. */
#venstrebar ul, .sektionsmenu ul{
	float:none !important; width:auto; padding:0; margin:0 0 .5rem; list-style:none;
	border-radius:7px; overflow:hidden;
	box-shadow:0 2px 4px rgba(0,0,0,.3);           /* the whole group sits raised */
}
#venstrebar ul a, .sektionsmenu ul a,
#venstrebar .enkelt a, #venstrebar .dobbelt a{
	display:block;
	width:auto !important; max-width:none !important;    /* was 140/145px -> the white stripe */
	background:var(--menu-img) center/100% 100% no-repeat !important;  /* original silver (pink on dyr) */
	color:#ffffff !important; text-shadow:0 1px 1px rgba(0,0,0,.5);
	font-family:var(--sans); font-weight:700; font-size:.9rem;
	border:0; border-bottom:1px solid rgba(0,0,0,.22);
	margin:0; padding:.5rem .85rem;                      /* connected — no gaps */
	transition:box-shadow .1s ease, transform .08s ease;
}
/* raised by default, pressed DOWN on hover/focus (original behaviour) */
#venstrebar ul a:hover, #venstrebar ul a:focus,
.sektionsmenu ul a:hover, .sektionsmenu ul a:focus,
#venstrebar .enkelt a:hover, #venstrebar .dobbelt a:hover,
#venstrebar .enkelt a:focus, #venstrebar .dobbelt a:focus{
	background:var(--menu-img-hover) center/100% 100% no-repeat !important;
	box-shadow:inset 0 2px 5px rgba(0,0,0,.4);
	transform:translateY(1px);
}
#venstrebar ul a:active, .sektionsmenu ul a:active,
.sektionsmenu ul a[aria-current],
#venstrebar .enkelt a:active, #venstrebar .dobbelt a:active{
	background:var(--menu-img-active) center/100% 100% no-repeat !important;
	box-shadow:inset 0 3px 7px rgba(0,0,0,.55);
	transform:translateY(2px);
}
.venstremenutop, .venstremenubund{ display:none; }   /* rounded caps -> the group border-radius */

/* The section menu once more at the foot of the text, fully unfolded, so a
 * phone reader walks on to the next page instead of scrolling back up to the
 * toggle. On a wide screen the menu already stands beside the text, so the
 * copy stays hidden there. js/nav.js builds it. */
.sektionsmenu{ display:none; }
.sektionsmenu-titel{
	font-family:var(--serif); font-weight:600; font-size:1.1rem; color:var(--ink);
	margin:0 0 .75rem;
}
.sektionsmenu ul a[aria-current]{ cursor:default; }   /* the page you are on */

/* ---------- NAV BUTTONS: gilded 3D with a gleam (the page's one bold moment) ---------- */
#politik-knap, #parti-knap, #presse-knap, #politikere-knap, #formedlemmer-knap{
	box-sizing:border-box;   /* keep the border inside the 160px so 5 still fit in 900px */
	border-radius:8px; overflow:hidden; border:1px solid var(--edge);
	box-shadow:0 2px 0 var(--edge-lo), 0 7px 16px rgba(0,0,0,.4);   /* raised: themed bottom edge + drop */
	transition:transform .18s ease, box-shadow .18s ease;
}
#knapper a{
	position:relative; display:block; z-index:0;
	height:100%; box-sizing:border-box; cursor:pointer;   /* the whole button is the link */
	font-family:var(--sans); font-weight:700; letter-spacing:.04em;
	color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.5);
}
/* The 2009 composites (politik.png etc.) carry a silver label bar, rounded
 * corners and WHITE corner wedges baked in, which showed as white gaps inside
 * our rounded border. We use a clean photo strip instead: the photo fills the
 * bottom half 1:1, the label bar above it is drawn in CSS (::before) and takes
 * the theme's colour. */
#politik-knap, #parti-knap, #presse-knap, #politikere-knap, #formedlemmer-knap{
	background:none !important;
}
#politik-knap a{ background:url(../images/politik_photo.jpg) bottom/100% 50% no-repeat !important; }
#parti-knap a{ background:url(../images/parti_photo.jpg) bottom/100% 50% no-repeat !important; }
#presse-knap a{ background:url(../images/presse_photo.jpg) bottom/100% 50% no-repeat !important; }
#politikere-knap a{ background:url(../images/politikere_photo.jpg) bottom/100% 50% no-repeat !important; }
#formedlemmer-knap a{ background:url(../images/medlemmer_photo.jpg) bottom/100% 50% no-repeat !important; }
/* gilded relief bar over the top half (embossed gold), label sits on it */
#knapper a::before{
	content:""; position:absolute; left:0; right:0; top:0; height:50%; z-index:-1;
	background:var(--bar);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 3px rgba(0,0,0,.28);
}
/* a slow gleam that catches the light even without hover */
#knapper a::after{
	content:""; position:absolute; left:0; right:0; top:0; height:50%; z-index:1; pointer-events:none;
	background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
	background-size:260% 100%; background-position:170% 0;
	animation:nfpGleam 7s ease-in-out infinite;
}
@keyframes nfpGleam{ 0%,62%{background-position:170% 0;} 82%,100%{background-position:-70% 0;} }
/* Hover acts ONLY on the top half (the gilded label bar): it presses DOWN,
 * while the photo stays put — exactly like the original. The whole button is
 * NOT lifted. */
#knapper a:hover::before, #knapper a:focus::before{
	background:var(--bar-press);
	box-shadow:inset 0 2px 5px rgba(0,0,0,.45);     /* pressed in */
}
#knapper a:active::before{                           /* click presses deeper */
	background:var(--bar-press);
	box-shadow:inset 0 3px 7px rgba(0,0,0,.55);
}
#knapper a:hover::after{ animation:nfpGleamHover .55s ease; }
@keyframes nfpGleamHover{ from{background-position:170% 0;} to{background-position:-70% 0;} }

/* ---------- TEASER CARDS ---------- */
.sag{ border-radius:var(--radius); }
.sag_title{
	font-family:var(--serif); font-weight:600; font-size:1.25rem;
	text-transform:none; letter-spacing:0; padding:0; margin:0 0 .55rem;
}

/* ---------- dead external images (peecee.dk is gone) ---------- */
#content img[src*="peecee.dk"], #hojreside img[src*="peecee.dk"],
#content_noright img[src*="peecee.dk"]{ display:none; }

/* images never overflow */
#billede img, #header img, #content img, #content_noright img, #content_forside img,
#hojreside img, #hojrebar img{ max-width:100%; height:auto; }
.sag_billede img{ width:150px; max-width:45%; height:auto; }

/* ---------- quality floor ---------- */
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ---------- responsive (targeted to the real containers) ---------- */
@media (max-width:920px){
	html, body{ overflow-x:hidden; }

	#page, #header, #billede, #topbar, #knapper, #top, #top_forum, #bottom, #spacer,
	#content_press{
		width:100% !important; max-width:900px; box-sizing:border-box;
	}
	#page{ padding-left:14px; padding-right:14px; }

	#content, #content_noright, #content_forside, #content_press, #content_press_content,
	#hojreside, #hojrebar, .markesag_venstre, .markesag_hojre{
		float:none !important; clear:both !important;
		width:auto !important; max-width:100% !important;
		margin-left:0 !important; margin-right:0 !important; box-sizing:border-box;
	}
	#spacebar, #spacer{ display:none !important; }

	/* the footer keeps its 2009 fixed 900px, which a phone only clips */
	#footer, #footer p, #dedikation{
		width:100% !important; max-width:900px; box-sizing:border-box;
		padding-left:14px; padding-right:14px;
	}
	#footer p{ line-height:1.6; }
	#hojreside, #hojrebar{ margin-top:1.5rem !important; }

	/* teaser image stays BESIDE the text (not stacked) */
	.sag_tekst{ float:left !important; clear:none !important; width:calc(100% - 136px) !important; margin:0 !important; box-sizing:border-box; }
	.sag_billede{ float:right !important; clear:none !important; width:120px !important; max-width:none !important; margin:.2rem 0 .5rem .75rem !important; box-sizing:border-box; }
	.sag_billede img{ width:100% !important; }

	/* the 2009 float clearers carry a &nbsp; and so add ~52px of dead space
	 * between the buttons and the content; keep the clear, drop the height */
	#page > div[style*="clear"]{ font-size:0 !important; line-height:0 !important; height:0 !important; }

	/* A1: the 5 sections stay visible at the top; the section's sub-pages collapse
	 * behind a "I denne sektion" toggle (submenu). */
	.slogan p{ padding-left:0; padding-right:0; }
	.slogan_press h2 a{ padding-left:0; }
	.menu-toggle{ display:block; margin-top:1rem; }
	.sektionsmenu{
		display:block; clear:both;
		margin:2.5rem 0 0; padding-top:1.25rem; border-top:2px solid var(--accent);
	}
	/* Folded away only when there is a toggle to unfold it with - js/nav.js
	 * inserts that just before the menu. Without JavaScript the menu simply
	 * stands open, which is how it has to be for the next twenty years. */
	#venstrebar{ float:none !important; clear:both !important; width:auto !important; padding-left:0 !important; margin:.25rem 0 1.25rem !important; }
	.menu-toggle + #venstrebar{ display:none; }
	.menu-toggle + #venstrebar.open{ display:block; }

	/* on a phone the five buttons become a COMPACT menu: a photo thumbnail on the
	 * left with the label beside it, in rows — not big space-hungry photo blocks */
	#knapper{ height:auto; width:100% !important; display:block; float:none !important; margin-bottom:14px !important; }
	#politik-knap, #parti-knap, #presse-knap, #politikere-knap, #formedlemmer-knap{
		/* style.css gives ONLY #politik-knap display:inline (an old IE float hack);
		 * without the float that row ignores its margins and breaks the stack */
		float:none; display:block; margin:0 0 8px 0; width:100% !important; max-width:none; height:auto;
		background:none !important; border:0 !important; overflow:hidden;   /* kill composite div-bg + edge (the POLITIK ghost strip) */
		box-shadow:0 2px 5px rgba(0,0,0,.25) !important;
	}
	#knapper a{
		display:flex !important; align-items:center; gap:14px;
		height:58px !important; padding:0 14px 0 0 !important;
		background:var(--bar) !important; background-size:auto !important;
		font-size:1.05rem; color:#fff !important;
	}
	#knapper a::before{                      /* left photo thumbnail (clean photo, no grey label) */
		position:static !important; z-index:auto !important;
		flex:0 0 82px; align-self:stretch; height:auto;
		background-size:cover !important; background-position:center !important;
		box-shadow:none !important; border-right:1px solid rgba(0,0,0,.28);
	}
	#knapper a::after{ display:none !important; }   /* no gleam on the compact rows */
	#knapper a:active{ background:var(--bar-press) !important; box-shadow:inset 0 2px 6px rgba(0,0,0,.45); }
	#politik-knap a::before{ background-image:url(../images/politik_thumb.jpg) !important; }
	#parti-knap a::before{ background-image:url(../images/parti_thumb.jpg) !important; }
	#presse-knap a::before{ background-image:url(../images/presse_thumb.jpg) !important; }
	#politikere-knap a::before{ background-image:url(../images/politikere_thumb.jpg) !important; }
	#formedlemmer-knap a::before{ background-image:url(../images/formedlemmer_thumb.jpg) !important; }

	/* the 2009 bar is 10px tall and relies on the links overflowing it; on a
	 * phone the banner paints over them, so give the bar its own height */
	#topbar{ height:auto !important; padding:6px 14px 4px; background:#000; }
	#topbar ul{ float:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0 18px; justify-content:flex-end; }
	#topbar li{ float:none; display:inline-block; }
	#topbar a{ margin:0 !important; }
}

/* ---------- content swap --------------------------------------------------
 * js/nav.js exchanges only what is inside #page (the banner and the five
 * buttons stay mounted). The exchange is instant and the page does not scroll:
 * a frame whose contents change, not a page that reloads. An opacity fade used
 * to sit here; it made the left menu and the sidebar blink on every click even
 * when they were identical, which read as a page load.                      */

/* ---------- pages without the side menu (contact, FAQ) ---------------------
 * #content is a 400px column with a 30px gutter for a menu that is not there,
 * which leaves the page looking half empty. Give it the panel's width.      */
#page:not(:has(#venstrebar)) #content{
	float:none !important; width:auto !important; margin-left:0 !important;
	max-width:640px;
}

/* a heading that only screen readers and search engines need (the banner
 * image carries the name visually) */
.sr-only{
	position:absolute !important; width:1px; height:1px; overflow:hidden;
	clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- the dead-children counter as a physical electricity meter -------
 * Dark meter case, ivory digit wheels behind a cylinder shading, and a red
 * last wheel like the tenths wheel on a real Danish el-maaler. Built by
 * js/odometer.js, which replaces the 2009 inline text counter.             */
#deadC.odo{
	display:inline-flex; gap:2px; padding:7px 7px 8px;
	border-radius:3px; vertical-align:middle;
	background:linear-gradient(#2e302e,#121312 55%,#232523);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
	           inset 0 -2px 5px rgba(0,0,0,.65),
	           0 2px 4px rgba(0,0,0,.35);
	font:700 19px/1 var(--sans); font-variant-numeric:tabular-nums;
}
.odo-w{
	position:relative; overflow:hidden; width:19px; height:28px; border-radius:2px;
	background:linear-gradient(#efece3,#fffefa 46%,#d8d2c3);
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.5); color:#17160f;
}
.odo-w::after{                           /* the curve of the wheel */
	content:""; position:absolute; inset:0; pointer-events:none;
	background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0) 36%,
	                           rgba(0,0,0,0) 64%,rgba(0,0,0,.4));
}
.odo-w-last{
	background:linear-gradient(#9c2b24,#c53f34 46%,#7d211b); color:#fff;
}
.odo-strip{ display:block; transition:transform .42s cubic-bezier(.33,1.08,.44,1); }
.odo-c{ display:flex; align-items:center; justify-content:center; height:28px; }

@media (prefers-reduced-motion: reduce){
	.odo-strip{ transition:none; }
}
@media (max-width: 420px){
	#deadC.odo{ gap:1px; padding:6px; font-size:17px; }
	.odo-w{ width:17px; height:25px; }
	.odo-c{ height:25px; }
}

/* ---------- the films: click to play ---------------------------------------
 * The 2009 Flash players are gone, but the films are not. We show our own copy
 * of the poster frame and only call YouTube when the visitor presses play. */
.yt{ margin:0 auto; max-width:100%; }
.yt-play{
	display:block; position:relative; width:100%; padding:0; border:0; cursor:pointer;
	background:#111; border-radius:6px; overflow:hidden;
	box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.yt-play img{ display:block; width:100%; height:auto; opacity:.88; transition:opacity .2s ease, transform .3s ease; }
.yt-play:hover img, .yt-play:focus-visible img{ opacity:1; transform:scale(1.015); }
.yt-tri{
	position:absolute; left:50%; top:50%; width:58px; height:40px; margin:-20px 0 0 -29px;
	border-radius:9px; background:rgba(18,18,18,.62);
	box-shadow:0 1px 4px rgba(0,0,0,.5);
}
.yt-tri::after{
	content:""; position:absolute; left:23px; top:12px;
	border-left:16px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.yt-play:hover .yt-tri{ background:rgba(180,30,30,.85); }
.yt video{ display:block; width:100%; height:auto; border-radius:6px; background:#000; }
.yt iframe{ display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:6px; }

/* the film that starts by itself can only do so without sound */
.yt{ position:relative; }
.yt-sound{
	position:absolute; left:8px; bottom:8px; z-index:2;
	border:0; border-radius:4px; cursor:pointer;
	background:rgba(180,30,30,.92); color:#fff;
	font:700 .78rem/1 var(--sans); letter-spacing:.06em; padding:.5rem .7rem;
	box-shadow:0 1px 4px rgba(0,0,0,.45);
}
.yt-sound:hover{ background:#b41e1e; }
.yt-caption{
	margin:.35rem 0 1.4rem; padding:0 !important;
	font:italic .9rem/1.4 var(--serif); color:#4a463c;
}

/* ---------- forum archive (read-only) ------------------------------------ */
.arkivnote{
	margin:0 0 1.2rem; padding:.85rem 1rem !important;
	border-left:4px solid var(--accent); background:#f3f1e9;
	font-size:.95rem; line-height:1.5;
}
.forumtraad{ margin:0 0 2rem; }
.forumtraad h3{
	font-family:var(--serif); font-size:1.15rem; font-weight:600;
	margin:1.6rem 0 .2rem; color:var(--ink);
}
.traadmeta{
	margin:0 0 .6rem; padding:0 !important;
	font:italic .85rem/1.4 var(--serif); color:#6b6657;
}
.indlaeg{
	margin:0 0 .7rem; padding:.7rem .9rem;
	background:#faf9f5; border:1px solid #e3e0d6; border-radius:5px;
}
.indlaeg p{ padding:0 !important; margin:0 0 .6rem; }
.indlaeg p:last-child{ margin-bottom:0; }
.indlaegmeta{
	font:700 .85rem/1.3 var(--sans) !important; color:#45413a;
	border-bottom:1px solid #e8e5db; padding-bottom:.35rem !important;
}
.indlaegmeta span{ font-weight:400; color:#7b7566; }
.forumliste{ width:100%; border-collapse:collapse; font-size:.88rem; }
.forumliste th{
	text-align:left; font:700 .78rem/1.2 var(--sans); letter-spacing:.04em;
	border-bottom:2px solid var(--accent); padding:.4rem .5rem; color:#45413a;
}
.forumliste td{ padding:.35rem .5rem; border-bottom:1px solid #ece9e0; vertical-align:top; }
.forumliste tr:nth-child(even) td{ background:#faf9f5; }
@media (max-width:920px){
	.forumliste th:nth-child(2), .forumliste td:nth-child(2),
	.forumliste th:nth-child(4), .forumliste td:nth-child(4){ display:none; }
}

/* ---------- the Flash games, played by Ruffle ----------------------------- */
.spil{
	margin:1rem 0 1.6rem; padding:1.1rem; border-radius:6px;
	background:linear-gradient(#2b2d2b,#141514);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.35);
	text-align:center; color:#d8d5cc;
}
.spil p{ padding:0 !important; margin:0 0 .7rem; font:italic .9rem/1.4 var(--serif); }
.spil-start{
	border:0; border-radius:6px; cursor:pointer;
	background:var(--bar); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45);
	font:700 1rem/1 var(--sans); letter-spacing:.04em; padding:.8rem 1.4rem;
	box-shadow:0 2px 0 var(--edge-lo), 0 3px 8px rgba(0,0,0,.4);
}
.spil-start:hover{ background:var(--bar-press); }
.spil-start:active{ transform:translateY(1px); box-shadow:inset 0 2px 5px rgba(0,0,0,.45); }
.spil-start[disabled]{ opacity:.7; cursor:default; }
.spil ruffle-player{ max-width:100%; }

/* ---------- NFPTV: one screen, channels underneath ----------------------- */
.tv{
	margin:0 0 .4rem; padding:10px 10px 6px; border-radius:7px;
	background:linear-gradient(#303230,#141614 60%,#232523);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.35);
}
.tv .yt{ background:#000; border-radius:4px; overflow:hidden; }
.tv .yt-play{ border-radius:4px; }
.tv-titel{
	margin:.5rem 0 0; padding:0 2px !important;
	font:600 .95rem/1.3 var(--serif); color:#ddd9cf;
}
.tv-fodnote{
	margin:.8rem 0 0; padding:0 !important;
	font:italic .82rem/1.4 var(--serif); color:#6b6657;
}
.kanaler{ list-style:none; margin:.4rem 0 0; padding:0 !important; }
.kanaler li{ margin:0 0 6px; padding:0; background:none; }
.kanalgruppe{
	margin:1.2rem 0 .4rem !important; padding-bottom:.2rem;
	font:600 1rem/1.2 var(--serif); color:var(--ink);
	border-bottom:2px solid var(--accent);
}
.kanal{
	display:flex; align-items:center; gap:11px; width:100%; padding:0 12px 0 0;
	border:1px solid var(--edge); border-radius:6px; cursor:pointer; overflow:hidden;
	background:var(--bar); color:#fff; text-align:left;
	font:600 .92rem/1.25 var(--sans); text-shadow:0 1px 2px rgba(0,0,0,.45);
	box-shadow:0 2px 0 var(--edge-lo), 0 2px 5px rgba(0,0,0,.25);
}
.kanal img{ flex:0 0 76px; width:76px; height:46px; object-fit:cover;
	border-right:1px solid rgba(0,0,0,.3); }
.kanal:hover{ background:var(--bar-press); }
.kanal:active{ box-shadow:inset 0 2px 5px rgba(0,0,0,.45); transform:translateY(1px); }
.kanal[aria-current]{ box-shadow:inset 0 2px 6px rgba(0,0,0,.5); background:var(--bar-press); }
.kanal[aria-current] span::before{ content:"\25B6 "; font-size:.8em; }