/*
  Raps Crap — grundstil.

  Farverne er valgt til et gammelt værksted frem for til en annonceportal:
  mørk petroleum, rust og okker på en varm knoglefarvet bund. Alle
  kombinationer er efterprøvet med tal — se design/tokens.md for målingerne.

  Skrifttyperne er selvhostede. Der kaldes aldrig ud til Google Fonts.
*/

/* ==========================================================================
   1. Skrifttyper
   ========================================================================== */

/* Oswald — smal og kraftig, som bogstaverne på et emaljeskilt. Overskrifter. */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/oswald-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/oswald-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* Permanent Marker — priser og kategorier. Håndskriften gør en toiletskål
   og en Volvo lige naturlige på samme side. Apache License 2.0. */
@font-face {
	font-family: 'Permanent Marker';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/permanent-marker-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Figtree — til brødtekst, hvor det handler om at kunne læses. */
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/figtree-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* ==========================================================================
   2. Designværdier
   ========================================================================== */

:root {
	/*
	  Palet F — "Emaljeblå". Valgt 22. august 2026 ud fra designlærredet.
	  De klassiske danske emaljeskilte: dyb blå, cremehvid og signalrød,
	  på en opslagstavle i dæmpet blågrå.

	  Alle kombinationer er efterprøvet med beregnede kontrastforhold —
	  se design/tokens.md. To værdier blev justeret undervejs, fordi de
	  ikke holdt: gul på blå og dæmpet tekst på tavlen.
	*/

	/* Blå — sidehoved, overskrifter, emaljeskilte */
	--rc-blaa: #1d5b7e;
	--rc-blaa-moerk: #16455f;

	/* Rød — priser, primære knapper, accentstreg */
	--rc-roed: #c1372c;
	--rc-roed-moerk: #96291f;

	/* Gul — indledninger og markeringer på blå bund.
	   #f0c14b fra lærredet gav kun 4,36:1 mod --rc-blaa; denne giver 4,69:1. */
	--rc-gul: #f4c95e;

	/* Toppunktet i heroens åndende overlinje. Lysere end --rc-gul, aldrig
	   mørkere — se .rc-hero__kicker for hvorfor det er den eneste
	   tilladte retning. 5,83:1 mod --rc-blaa. */
	--rc-gul-lys: #fbe3a4;

	/* Flader */
	--rc-tavle: #aebcbd;        /* opslagstavlen bag kortene */
	--rc-tavle-moerk: #9fb0b1;  /* prikkerne i tavlen */
	--rc-papir: #f8f5ed;        /* kort og indholdsflader */
	--rc-ben: #eceae1;          /* sidens baggrund uden for tavlen */
	--rc-tape: #e6dcc2;         /* tapen der holder kortene */
	--rc-tape-blaek: #3d4a52;   /* håndskriften på tapen */

	/* Blæk */
	--rc-blaek: #16232e;
	/* #5d6f78 målte 4,81 mod papiret, men kun 4,34 mod --rc-ben, som
	   er en anelse mørkere — og dét er sidens egen baggrund. Under
	   kravet på 4,5. #586a73 giver 4,68 mod ben og 5,18 mod papir.
	   MÅL ALTID MOD BEGGE FLADER, ikke kun papiret. */
	--rc-daempet: #586a73;        /* på kort og lyse flader */
	--rc-daempet-tavle: #2f3f49;  /* på selve tavlen, som er mørkere */
	--rc-kant: #cfd6d2;
	--rc-hvid: #fff;

	/*
	  To roller, der før delte token — og som skiltes ad, da mørk
	  tilstand kom til.

	  `--rc-ben` var både sidens baggrund OG det lyse blæk på de mørke
	  flader (sidehoved, sidefod, emaljeskilte, ringebånd). I mørk
	  tilstand skal baggrunden blive mørk, men blækket på en mørkeblå
	  flade skal jo blive ved med at være lyst. Derfor:

	  --rc-lys-blaek  = tekst PÅ mørke flader. Ens i begge tilstande.
	  --rc-blaa-tekst = blå brugt som TEKST (overskrifter, korttitler).
	                    Skal lysne i mørk tilstand; den mørke blå måler
	                    kun 2,09:1 mod mørkt papir.
	*/
	--rc-lys-blaek: #eceae1;
	--rc-blaa-tekst: var(--rc-blaa);

	/*
	  Samme opdeling for rød. Knapper og bånd er røde FLADER med hvidt
	  blæk; priser er rød TEKST på papir. I mørk tilstand skal teksten
	  lysne (den mørke rust forsvinder i bunden), men fladen skal blive
	  mørk — ellers står hvid tekst på lys rød og måler 2,94:1.
	*/
	--rc-roed-flade: var(--rc-roed);

	/*
	  Fokusmarkeringen. Skal have mindst 3:1 mod sin baggrund (WCAG 2.2).
	  Rød holder på de lyse flader; på den blå header skiftes til gul
	  længere nede i filen.
	*/
	--rc-fokus: var(--rc-roed);

	/* Mål */
	--rc-bredde: 1200px;
	--rc-radius: 10px;
	--rc-radius-lille: 5px;
	--rc-luft: clamp(2.5rem, 6vw, 5rem);

	/* Skrift */
	--rc-skrift-brod: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--rc-skrift-titel: 'Oswald', 'Figtree', system-ui, sans-serif;
	--rc-skrift-haand: 'Permanent Marker', 'Bradley Hand', cursive;

	/* Skygger */
	--rc-skygge: 0 1px 2px rgba(20, 40, 50, .08), 0 3px 8px rgba(20, 40, 50, .07);
	--rc-skygge-loeftet: 0 2px 4px rgba(20, 40, 50, .1), 0 8px 20px rgba(20, 40, 50, .12);
	--rc-skygge-tavle: 3px 5px 12px rgba(20, 40, 50, .28);

	/*
	  De gamle navne peger på de nye, så intet i temaet knækker under
	  omlægningen. De ryddes ud, når alle regler er skrevet om.
	*/
	--rc-olie: var(--rc-blaa);
	--rc-benzin: var(--rc-blaa-moerk);
	--rc-rust: var(--rc-roed);
	--rc-rust-moerk: var(--rc-roed-moerk);
	--rc-okker: var(--rc-gul);
	--rc-okker-moerk: #7a5a10;

	/*
	  Papirfibre og oliefingre som SVG-filtre i data-URI'er.

	  Ingen billedfiler: browseren regner dem selv. `feTurbulence` med
	  `fractalNoise` giver et kornet, uregelmæssigt mønster, som ikke
	  gentager sig synligt — et lille PNG lagt som fliser ville danne
	  synlige rækker på store flader.

	  Værdierne står som tokens, så styrken kan skrues op og ned ét sted.
	*/
	--rc-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='.22'/%3E%3C/svg%3E");

	--rc-tavlekorn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.3'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. Grundlæggende
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background-color: var(--rc-ben);
	/* Papirstruktur: en meget svag kornethed, så fladen ikke er død.
	   Ligger som data-adresse, så den ikke koster en ekstra forespørgsel. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
	color: var(--rc-blaek);
	font-family: var(--rc-skrift-brod);
	font-size: 17px;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.rc-hoved {
	flex: 1 0 auto;
	padding-block: var(--rc-luft);
}

h1, h2, h3, h4 {
	font-family: var(--rc-skrift-titel);
	font-weight: 600;
	color: var(--rc-blaa-tekst);
	line-height: 1.15;
	letter-spacing: .01em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.5vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
h3 { font-size: 1.25rem; }

p, ul, ol {
	margin: 0 0 1.1em;
}

a {
	color: var(--rc-rust);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

a:hover,
a:focus {
	color: var(--rc-rust-moerk);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
  Ikoner følger teksten omkring sig i størrelse og farve. Står her som
  standard for alle SVG'er — glemmer man en regel et sted, bliver ikonet
  stadig et ikon og ikke et plakatstort billede.
*/
svg {
	width: 1.1em;
	height: 1.1em;
	fill: currentColor;
	flex: none;
	vertical-align: -.15em;
}

/*
  Kategoriikonerne er stregtegnede, ikke udfyldte. Reglen ovenfor ville
  ellers fylde dem ud — CSS vinder over fill="none" i selve SVG'en, og så
  bliver en bil til en klat. Klassen her har højere specificitet og vinder.
*/
.rc-kategoriikon {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

:focus-visible {
	outline: 3px solid var(--rc-fokus);
	outline-offset: 2px;
	border-radius: 2px;
}

/*
  Inde i de mørke flader skiftes fokusfarven til okker: 4,6:1 mod
  petroleum, hvor rust kun ville være 1,5:1. Variablen arves, så alt
  indeni følger med af sig selv.
*/
.rc-sidehoved,
.rc-sidefod,
.rc-hero,
.rc-ringebaand,
.rc-bjaelke__hoved {
	--rc-fokus: var(--rc-okker);
}

.rc-indhold {
	width: 100%;
	max-width: var(--rc-bredde);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Springlinket må gerne kunne ses, når man tabber til det. */
.rc-spring:focus {
	position: fixed !important;
	top: .5rem;
	left: .5rem;
	z-index: 999;
	width: auto;
	height: auto;
	margin: 0;
	padding: .7rem 1.1rem;
	clip-path: none;
	background: var(--rc-roed-flade);
	color: var(--rc-hvid);
	font-weight: 700;
	border-radius: var(--rc-radius-lille);
}

/* ==========================================================================
   4. Emaljeskiltet — sitets kendetegn
   ========================================================================== */

/*
  Et emaljeskilt med nitter i hjørnerne. Raps Crap sælger selv emaljeskilte,
  så det er ikke tilfældig pynt — det er butikkens eget sprog.
*/
.rc-skilt {
	display: inline-block;
	position: relative;
	padding: .45em 1.1em .5em;
	background: var(--rc-olie);
	color: var(--rc-lys-blaek);
	font-family: var(--rc-skrift-titel);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .045em;
	border: 3px solid var(--rc-rust);
	border-radius: var(--rc-radius-lille);
	box-shadow: inset 0 0 0 2px var(--rc-olie), var(--rc-skygge);
}

/* Nitterne. Tegnet med baggrunde frem for fire ekstra elementer. */
.rc-skilt::before {
	content: '';
	position: absolute;
	inset: 5px;
	border-radius: 2px;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 4px 4px, rgba(239, 231, 214, .55) 1.6px, transparent 1.9px),
		radial-gradient(circle at calc(100% - 4px) 4px, rgba(239, 231, 214, .55) 1.6px, transparent 1.9px),
		radial-gradient(circle at 4px calc(100% - 4px), rgba(239, 231, 214, .55) 1.6px, transparent 1.9px),
		radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), rgba(239, 231, 214, .55) 1.6px, transparent 1.9px);
}

.rc-skilt--rust {
	background: var(--rc-roed-flade);
	border-color: var(--rc-olie);
	box-shadow: inset 0 0 0 2px var(--rc-rust), var(--rc-skygge);
	color: var(--rc-hvid);
}

/* Sektionsoverskrift som skilt, let på skrå. Skævheden er beskeden med
   vilje — nok til at mærkes, ikke nok til at genere læsningen. */
.rc-sektionstitel {
	margin-bottom: 1.4em;
}

.rc-sektionstitel .rc-skilt {
	transform: rotate(-.7deg);
}

/* ==========================================================================
   5. Sidehovedet
   ========================================================================== */

.rc-sidehoved {
	background: linear-gradient(180deg, var(--rc-benzin) 0%, var(--rc-olie) 100%);
	color: var(--rc-lys-blaek);
	border-bottom: 4px solid var(--rc-rust);
}

.rc-sidehoved__raekke {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	padding-block: .9rem;
}

/* Logoet: et emaljeskilt med butikkens navn. Erstattes automatisk, hvis
   kunden lægger en rigtig logofil op under Udseende. */
.rc-logo {
	margin: 0;
	font-size: clamp(1.25rem, 2.6vw, 1.6rem);
	line-height: 1;
}

.rc-logo a {
	text-decoration: none;
	color: inherit;
	display: inline-block;
}

.rc-logo .rc-skilt {
	background: var(--rc-roed-flade);
	border-color: var(--rc-lys-blaek);
	box-shadow: inset 0 0 0 2px var(--rc-rust), var(--rc-skygge);
	color: var(--rc-hvid);
	font-weight: 700;
	letter-spacing: .06em;
	transform: rotate(-1.2deg);
	transition: transform .18s ease;
}

.rc-logo a:hover .rc-skilt,
.rc-logo a:focus .rc-skilt {
	transform: rotate(-1.2deg) scale(1.03);
}

.rc-logo img {
	max-height: 62px;
	width: auto;
}

.rc-sidehoved__hoejre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .7rem 1.4rem;
	margin-left: auto;
}

/* Menuen */
.rc-menu__liste {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem 1.3rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--rc-skrift-titel);
	font-size: 1.02rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.rc-menu__liste a {
	color: var(--rc-lys-blaek);
	text-decoration: none;
	padding: .35rem 0;
	display: inline-block;
	border-bottom: 2px solid transparent;
}

.rc-menu__liste a:hover,
.rc-menu__liste a:focus,
.rc-menu__liste .current-menu-item > a {
	color: var(--rc-okker);
	border-bottom-color: var(--rc-okker);
}

/* Telefonnummeret — det vigtigste kald til handling på hele sitet */
.rc-telefon {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--rc-skrift-titel);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--rc-hvid);
	background: var(--rc-roed-flade);
	padding: .45rem 1rem;
	border-radius: var(--rc-radius-lille);
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s ease;
}

.rc-telefon:hover,
.rc-telefon:focus {
	background: var(--rc-rust-moerk);
	color: var(--rc-hvid);
}

.rc-telefon svg {
	width: 1.05em;
	height: 1.05em;
	fill: currentColor;
	flex: none;
}

/* Søgefeltet */
.rc-soeg {
	display: flex;
	align-items: stretch;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(239, 231, 214, .28);
	border-radius: var(--rc-radius-lille);
	overflow: hidden;
}

.rc-soeg input[type='search'] {
	border: 0;
	background: transparent;
	color: var(--rc-lys-blaek);
	font: inherit;
	font-size: .95rem;
	padding: .45rem .7rem;
	min-width: 0;
	width: 11rem;
}

.rc-soeg input[type='search']::placeholder {
	color: rgba(239, 231, 214, .65);
}

/*
  Feltet og knappen er ét sammensat element. Markeringen lægges derfor
  om hele rammen frem for om det ene felt — ellers ser det ud som om
  kun halvdelen har fokus.
*/
.rc-soeg:focus-within {
	outline: 3px solid var(--rc-fokus);
	outline-offset: 2px;
	background: rgba(255, 255, 255, .16);
}

.rc-soeg input[type='search']:focus-visible,
.rc-soeg button:focus-visible {
	outline: none;
}

.rc-soeg button {
	border: 0;
	background: transparent;
	color: var(--rc-lys-blaek);
	cursor: pointer;
	padding: 0 .7rem;
	display: grid;
	place-items: center;
}

.rc-soeg button:hover {
	color: var(--rc-okker);
}

.rc-soeg svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

/* ==========================================================================
   6. Knapper
   ========================================================================== */

.rc-knap {
	display: inline-block;
	font-family: var(--rc-skrift-titel);
	font-size: 1.02rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .045em;
	text-decoration: none;
	padding: .6rem 1.4rem;
	border: 0;
	border-radius: var(--rc-radius-lille);
	cursor: pointer;
	background: var(--rc-roed-flade);
	color: var(--rc-hvid);
	box-shadow: var(--rc-skygge);
	transition: background .18s ease, transform .18s ease;
}

.rc-knap:hover,
.rc-knap:focus {
	background: var(--rc-rust-moerk);
	color: var(--rc-hvid);
	transform: translateY(-1px);
}

.rc-knap--moerk {
	background: var(--rc-olie);
}

.rc-knap--moerk:hover,
.rc-knap--moerk:focus {
	background: var(--rc-benzin);
}

/* ==========================================================================
   7. Sidefoden
   ========================================================================== */

.rc-sidefod {
	flex: none;
	background: var(--rc-olie);
	color: var(--rc-lys-blaek);
	border-top: 4px solid var(--rc-rust);
	padding-block: 2.8rem 1.6rem;
	font-size: .97rem;
}

.rc-sidefod__gitter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2rem 2.5rem;
}

.rc-sidefod h2 {
	font-size: 1.05rem;
	color: var(--rc-okker);
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: .7em;
}

.rc-sidefod a {
	color: var(--rc-lys-blaek);
}

.rc-sidefod a:hover,
.rc-sidefod a:focus {
	color: var(--rc-okker);
}

.rc-sidefod p {
	margin-bottom: .6em;
}

.rc-sidefod__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rc-sidefod__liste li {
	margin-bottom: .45em;
	display: flex;
	align-items: baseline;
	gap: .55em;
}

.rc-sidefod__liste svg {
	color: var(--rc-okker);
}

/* Menuen i sidefoden har ingen ikoner — den skal ikke have indryk. */
.rc-sidefod__menu .rc-sidefod__liste li {
	display: list-item;
}

.rc-sidefod__tider {
	white-space: pre-line;
	margin: 0;
}

.rc-sidefod__bund {
	margin: 2.2rem 0 0;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(239, 231, 214, .18);
	color: rgba(239, 231, 214, .7);
	font-size: .88rem;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.2rem;
}

/* ==========================================================================
   8. Sidens overskrift
   ========================================================================== */

.rc-sidetitel {
	margin: 0 0 1.6rem;
}

.rc-sidetitel .rc-skilt {
	transform: rotate(-.6deg);
	font-size: clamp(1.35rem, 3.2vw, 1.85rem);
}

.rc-sidetitel__manchet {
	margin: 1rem 0 0;
	color: var(--rc-daempet);
	max-width: 60ch;
}

/* ==========================================================================
   9. Forsiden
   ========================================================================== */

/* --- Heroen --- */

/* Heroen er en MØRK flade i begge tilstande (blå bund, foto ovenpå),
   så dens blæk skal være lyst i begge. Med --rc-papir forsvandt
   terningen og "Overrask mig" i mørk tilstand. */
.rc-hero {
	position: relative;
	background: var(--rc-blaa);
	color: var(--rc-lys-blaek);
	/*
	  Ingen bundpolstring: flammebåndet er det sidste i heroen og skal
	  slutte præcis i dens underkant.
	*/
	padding-block: clamp(2.2rem, 6vw, 3.4rem) 0;
	border-bottom: 5px solid var(--rc-roed);
	margin-top: calc(var(--rc-luft) * -1);
	margin-bottom: 0;
	overflow: hidden;
}

/* Skråstriber, meget svagt — de giver fladen liv uden at støje.

   Kun når der IKKE er et foto. Fotoet giver fladen liv af sig selv, og
   striber hen over en garage med emaljeskilte bliver til gitter frem for
   tekstur. Fjernes billedet i Tilpas, kommer striberne igen — så står
   heroen aldrig som en helt flad farve. */
.rc-hero:not(.rc-hero--foto)::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: .08;
	background-image: repeating-linear-gradient(45deg, var(--rc-gul) 0 14px, transparent 14px 28px);
	pointer-events: none;
}

/*
  Fotoet fra pladsen bag heroen.

  Billedet ligger i ::after under et kraftigt blåt slør, ikke som ren
  background-image. To grunde: sløret skal kunne styres uafhængigt af
  billedet, og teksten skal blive ved med at være knivskarp uanset hvilket
  billede kunden senere vælger i Tilpas. Et lyst foto uden slør ville gøre
  den hvide overskrift ulæselig — og vi ved ikke på forhånd, hvad hun
  lægger op.

  `--rc-hero-billede` sættes som inline style af rc_hero(). Uden den
  tegnes ingenting, og heroen ser ud som før.
*/
.rc-hero--foto::after {
	content: '';
	position: absolute;
	/*
	  Fladen er højere end heroen, så der er billede at flytte med.
	  Uden overskuddet ville parallaxen trække en tom kant ind i toppen,
	  når fotoet skubbes nedad.
	*/
	inset: -14% 0;
	z-index: 0;

	/*
	  Parallaxen sættes af main.js som en variabel. Er der intet
	  JavaScript — eller har den besøgende bedt om mindre bevægelse —
	  bliver den stående på nul, og fotoet opfører sig som før.

	  `translate3d` og ikke `top`: det holder arbejdet på grafikkortet,
	  så scroll ikke begynder at hakke.
	*/
	transform: translate3d(0, var(--rc-parallax, 0px), 0);
	will-change: transform;
	/*
	  Sløret er kraftigst til venstre og letter mod højre.

	  Overskriften og manchetten står i venstre side (max-width 52ch), og
	  dér skal underlaget være roligt nok til at holde kontrasten. Til
	  højre står der ingen tekst — dér må emaljeskiltene godt træde frem.
	  Et ensartet slør måtte lægge sig efter den værste plet på hele
	  fladen og gjorde derfor billedet til grumset baggrundsstøj.
	*/
	background-image:
		linear-gradient(to right,
			rgba(22, 69, 95, .92) 0%,
			rgba(22, 69, 95, .90) 36%,
			rgba(22, 69, 95, .70) 56%,
			rgba(22, 69, 95, .58) 100%),
		var(--rc-hero-billede);
	background-size: cover;
	/* Udsnittet er skåret, så veteranbilen i porten står midt i filen.
	   Derfor `center` og ikke en procentsats — bilen bliver liggende i
	   midten, uanset hvor meget `cover` skærer af i højden. */
	background-position: center center;
	pointer-events: none;
}

/*
  På smalle skærme falder teksten hen over hele bredden, så den vandrette
  gradient giver ingen mening — dér skal sløret være ensartet kraftigt.
*/
@media (max-width: 900px) {
	.rc-hero--foto::after {
		background-image:
			linear-gradient(to bottom, rgba(22, 69, 95, .90), rgba(22, 69, 95, .86)),
			var(--rc-hero-billede);
	}
}

.rc-hero > * {
	z-index: 2;
}

/*
  Uden bevægelse: intet at slå fra her — fotoet er stille. Men på meget
  små skærme flyttes udsnittet op, så skiltene og ikke gulvet er det, der
  bliver tilbage, når højden skrumper.
*/


.rc-hero > * {
	position: relative;
}

/* Den håndskrevne indledning over overskriften. */
.rc-hero__kicker {
	font-family: var(--rc-skrift-haand);
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	color: var(--rc-gul);
	transform: rotate(-2.2deg);
	display: inline-block;
	margin: 0 0 .35rem;

	/*
	  Linjen står og ånder, som fangede den værkstedslampens lys.

	  ⚠︎ Pulseringen går KUN mod lysere. Aldrig et dyk i opacity.

	  Den gule måler 4,69:1 mod --rc-blaa, og heroens slør er svagest i
	  bunden (.86) — ligger der et næsten hvidt sted i fotoet bag linjen,
	  falder den helt til 4,37:1. Der er altså ingen luft nedad
	  overhovedet; et dyk ville tage den under kravet på 4,5.

	  Derfor lysner farven i stedet op mod --rc-gul-lys, som måler 5,44:1
	  selv i det værste punkt. Kontrasten kan kun blive bedre undervejs.

	  Skæret er text-shadow og ikke en baggrund: det lægger sig om
	  bogstaverne uden at røre deres form og fylder intet i layoutet.
	  Transformen røres ikke — skævheden skal stå stille.
	*/
	/*
	  To bevægelser, og de har MED VILJE ikke samme længde.

	  3,8 s og 5,2 s går ikke op i hinanden, så vippet og åndedrættet
	  driver ind og ud af fase og gentager sig først efter godt fire
	  minutter. Havde de været ens, ville øjet straks opdage takten, og
	  så ligner det en maskine frem for et stykke papir, der rører sig.
	*/
	animation:
		rc-kicker-aander 3.8s ease-in-out infinite alternate,
		rc-kicker-vipper 5.2s ease-in-out infinite alternate;
}

@keyframes rc-kicker-aander {
	from {
		color: var(--rc-gul);
		text-shadow: 0 0 0 rgba(244, 201, 94, 0);
	}

	to {
		color: var(--rc-gul-lys);
		text-shadow: 0 0 .7em rgba(244, 201, 94, .5);
	}
}

/*
  Linjen vipper om sin midte, som en seddel der er tapet op i den ene
  ende og fanger et lufttræk.

  ⚠︎ Grundskævheden SKAL stå i begge nøglebilleder. Reglens egen
  `transform: rotate(-2.2deg)` sættes ud af kraft, så snart animationen
  rører transform — udelades den her, retter linjen sig op og bliver
  vandret, og hele pointen med håndskriften ryger.

  Vippet er 3,0 grader i alt, lagt symmetrisk omkring grundskævheden:
  (-3,7 + -0,7) / 2 = -2,2. Ingen lodret forskydning — et rent vip om
  midten, så begge ender flytter sig lige meget hver sin vej.

  Et tidligere forsøg lagde et lodret drys på ±1,5 px oveni for at give
  de korte linjer mere at rive i. Målt blev det skævt: det lagde til i
  den ene ende og trak fra i den anden, så linjen vandrede 9,7 px til
  venstre og kun 3,7 til højre. Den slags ser ud som en fejl.

  Vinklen er valgt efter den KORTESTE linje, ikke den længste. Målt i
  browseren på alle 23: "no rust, no soul…" er smallest med 181 px og
  flytter sine ender 4,7 px; "alt det der lander på huggerpladsen…" er
  bredest med 388 px og flytter 10,2 px. Vælges vinklen efter den lange,
  bliver den korte usynlig — og det er præcis den fælde, tre effekter
  faldt i 23. august.
*/
@keyframes rc-kicker-vipper {
	from { transform: rotate(-3.7deg); }
	to   { transform: rotate(-.7deg); }
}

@media (prefers-reduced-motion: reduce) {
	.rc-hero__kicker { animation: none; }
}

.rc-hero__titel {
	margin: 0 0 .8rem;
	font-size: clamp(1.7rem, 5vw, 2.6rem);
}

.rc-hero__titel .rc-skilt {
	transform: rotate(-1.1deg);
	background: var(--rc-roed-flade);
	border-color: var(--rc-ben);
	box-shadow: inset 0 0 0 2px var(--rc-rust), var(--rc-skygge);
	color: var(--rc-hvid);
	font-weight: 700;
	letter-spacing: .05em;
}

.rc-hero__manchet {
	/* 44ch og ikke 52: den lyse veteranbil ligger midt i fotoet, og en
	   linje der nåede hen over den, faldt til 3,6:1. Kortere linjer er
	   samtidig lettere at læse. */
	max-width: 44ch;
	margin: 0 0 1.5rem;
	font-size: clamp(1.02rem, 2vw, 1.18rem);
	color: rgba(239, 231, 214, .92);
}

/* --- "Se alle 67 ting" under kategorierne ---
   Rød, hvor kategoriknapperne er papir: den skal læses som hovedvejen og
   ikke som en niende kategori. */

.rc-hero__alt {
	margin: 1rem 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.1rem;
}

/*
  "Overrask mig" er et link, ikke en knap nummer to.

  To fyldte knapper ved siden af hinanden ville slås om opmærksomheden,
  og den vigtigste vej — hele sortimentet — ville tabe. Her er den
  dæmpet, indtil man nærmer sig.
*/
.rc-hero__overrask {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--rc-skrift-titel);
	font-size: .92rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--rc-lys-blaek);
	text-decoration: none;
	opacity: .82;
	padding: .35rem .2rem;
	transition: opacity .16s ease, color .16s ease;
}

.rc-hero__overrask:hover,
.rc-hero__overrask:focus-visible {
	opacity: 1;
	color: var(--rc-gul);
}

/* Terningen: fem øjne, som en femmer. Den ruller, når man nærmer sig. */
.rc-hero__terning {
	position: relative;
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	border: 1.5px solid currentColor;
	border-radius: 3px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	padding: 2px;
	transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}

.rc-hero__terning span {
	width: 2.5px;
	height: 2.5px;
	border-radius: 50%;
	background: currentColor;
	align-self: center;
	justify-self: center;
}

/* Femmerens mønster: hjørner og midte. */
.rc-hero__terning span:nth-child(1) { grid-area: 1 / 1; }
.rc-hero__terning span:nth-child(2) { grid-area: 1 / 3; }
.rc-hero__terning span:nth-child(3) { grid-area: 2 / 2; }
.rc-hero__terning span:nth-child(4) { grid-area: 3 / 1; }
.rc-hero__terning span:nth-child(5) { grid-area: 3 / 3; }

.rc-hero__overrask:hover .rc-hero__terning,
.rc-hero__overrask:focus-visible .rc-hero__terning {
	transform: rotate(-22deg) scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
	.rc-hero__overrask,
	.rc-hero__terning { transition: none; }
	.rc-hero__overrask:hover .rc-hero__terning { transform: none; }
}

.rc-hero__altknap {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	border: 1px solid var(--rc-roed-moerk);
}

/* Pilen er den samme som på kategoriknapperne, så de to hører sammen —
   bare hvid, fordi den ligger på rødt. */
.rc-hero__altpil {
	width: .45rem;
	height: .45rem;
	flex: none;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: .8;
	transition: transform .16s ease, opacity .16s ease;
}

.rc-hero__altknap:hover .rc-hero__altpil,
.rc-hero__altknap:focus-visible .rc-hero__altpil {
	opacity: 1;
	transform: rotate(-45deg) translate(2px, 2px);
}

@media (prefers-reduced-motion: reduce) {
	.rc-hero__altpil { transition: none; }
}

.rc-hero__soeg {
	max-width: 30rem;
	margin-bottom: 1.8rem;
}

.rc-hero__soeg .rc-soeg {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(239, 231, 214, .38);
}

.rc-hero__soeg .rc-soeg input[type='search'] {
	width: 100%;
	font-size: 1.05rem;
	padding: .7rem .9rem;
}

.rc-hero__soeg .rc-soeg button {
	padding-inline: 1rem;
}

/* --- Kategoriknapperne --- */

.rc-kategoriknapper {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/*
	 * Tre faste kolonner, ikke auto-fill.
	 *
	 * Med auto-fill bestemte den tilgængelige bredde antallet, og en skæv
	 * sidste række så ud som om nogen var faldet af. Med ni kategorier
	 * (siden september 2026) giver tre kolonner 3 + 3 + 3 — et fuldt
	 * kvadrat uden enker. Var der været otte, havde fire kolonner været
	 * bedre (4 + 4); ændres antallet igen, skal regnestykket laves om.
	 *
	 * `minmax(0, 1fr)` og ikke bare `1fr`: uden nulminimum nægter en
	 * gittersøjle at blive smallere end sit indhold, og de lange
	 * kategorinavne ville skubbe gitteret ud over hero'ens bredde.
	 */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .7rem;
	/* Alle rækker lige høje. Uden det bestemmer det længste kategorinavn
	   højden på sin egen række alene, og knapperne står i trapper. */
	grid-auto-rows: 1fr;
}

@media (max-width: 780px) {
	.rc-kategoriknapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
	.rc-kategoriknapper { grid-template-columns: minmax(0, 1fr); }
}

/* Knappen skal fylde hele sin celle, ellers hjælper grid-auto-rows ikke. */
.rc-kategoriknapper li { display: flex; }

/*
  Knapperne er sedler, ikke ruder.

  De var gennemsigtige — rgba(255,255,255,.07) oven på blå med gule
  skråstriber. På en flad farve gik det an; oven på et foto gør det ikke.
  Striber og motiv slog igennem, kanterne forsvandt, og otte knapper
  lignede otte vaskede felter frem for noget, man kan trykke på.

  Nu er de papir: uigennemsigtige, med blæk på. Det er samme greb som
  annoncekortene — sedler på en opslagstavle — og det har den egenskab,
  at læsbarheden ikke afhænger af, hvad der tilfældigvis ligger bagved.
  Kunden kan skifte fotoet i Tilpas uden at kunne ødelægge kontrasten.
*/
.rc-kategoriknap {
	display: flex;
	align-items: center;
	gap: .7rem;
	width: 100%;
	padding: .72rem .85rem;
	background: var(--rc-papir);
	border: 1px solid rgba(22, 35, 46, .18);
	/* Rød kant i venstre side: den samme markering som annoncekortenes
	   tape — et lille signal om at her er en vej videre. */
	border-left: 3px solid var(--rc-roed);
	border-radius: var(--rc-radius-lille);
	box-shadow: 0 2px 5px rgba(11, 26, 36, .28);
	color: var(--rc-blaek);
	text-decoration: none;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;

	/*
	  Fokusringen skal tilbage til rød her.

	  .rc-hero sætter --rc-fokus til okker, fordi heroen er mørk. Men
	  knappen er en lys ø inde i den mørke flade, og okker på papir er
	  langt under kravet. Samme fælde som den, der står i CLAUDE.md —
	  bare vendt om.
	*/
	--rc-fokus: var(--rc-roed);
}

.rc-kategoriknap:hover,
.rc-kategoriknap:focus-visible {
	/* En flade, ikke blæk — derfor papirets token, som følger med i
	   mørk tilstand. (--rc-hvid er hvidt BLÆK på røde og blå flader og
	   skal blive hvidt i begge tilstande.) */
	background: var(--rc-papir);
	border-color: rgba(22, 35, 46, .3);
	border-left-color: var(--rc-roed);
	color: var(--rc-blaek);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(11, 26, 36, .38);
}

/* Trykket skal kunne mærkes — knappen sætter sig, når man holder nede. */
.rc-kategoriknap:active {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(11, 26, 36, .3);
}

/* Pilen kommer frem ved berøring og siger hvad der sker. */
.rc-kategoriknap::after {
	content: "";
	flex: none;
	width: .5rem;
	height: .5rem;
	margin-left: auto;
	border-right: 2px solid var(--rc-roed);
	border-bottom: 2px solid var(--rc-roed);
	transform: rotate(-45deg);
	opacity: .35;
	transition: opacity .16s ease, transform .16s ease;
}

.rc-kategoriknap:hover::after,
.rc-kategoriknap:focus-visible::after {
	opacity: 1;
	transform: rotate(-45deg) translate(2px, 2px);
}

@media (prefers-reduced-motion: reduce) {
	.rc-kategoriknap,
	.rc-kategoriknap::after {
		transition: none;
	}
}

.rc-kategoriknap__ikon {
	display: grid;
	place-items: center;
	flex: none;
	color: var(--rc-roed);
}

.rc-kategoriknap__ikon svg {
	width: 26px;
	height: 26px;
	vertical-align: 0;
}

/*
  Navn og antal står nu i en søjle frem for side om side.

  Før delte de bredden med ikonet og en tællerpille, så navnet kun havde
  118 px af knappens 218 — og "Veterankøretøjer/youngtimers" knækkede midt
  i ordet. Nu får navnet næsten hele bredden, og de to lange navne bryder
  pænt ved skråstregen.
*/
.rc-kategoriknap__tekst {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	flex: 1 1 auto;
	min-width: 0;
}

.rc-kategoriknap__navn {
	font-family: var(--rc-skrift-titel);
	font-size: .97rem;
	line-height: 1.15;
}

.rc-kategoriknap__antal {
	font-size: .76rem;
	color: var(--rc-daempet);
}

/* --- Sektionsoverskrift med link --- */

.rc-sektionstitel--linje {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1rem;
}

.rc-sektionstitel--linje h2 {
	margin-bottom: 0;
}

.rc-sektionstitel__link {
	font-family: var(--rc-skrift-titel);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .95rem;
	white-space: nowrap;
}

/* --- Hvem er vi --- */

.rc-omos {
	margin-block: var(--rc-luft);
}

.rc-omos__indhold {
	max-width: 68ch;
}

.rc-omos__indhold img,
.rc-side__indhold img {
	border-radius: var(--rc-radius);
	margin-block: 1.2rem;
}

/* --- Sådan fungerer det --- */

.rc-trin {
	background: var(--rc-papir);
	border-block: 1px solid var(--rc-kant);
	padding-block: var(--rc-luft);
	margin-block: var(--rc-luft);
}

.rc-trin__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.6rem;
	counter-reset: trin;
}

.rc-trin__punkt {
	position: relative;
	padding-left: 3.4rem;
}

.rc-trin__nummer {
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--rc-olie);
	color: var(--rc-okker);
	font-family: var(--rc-skrift-titel);
	font-size: 1.25rem;
	font-weight: 700;
}

.rc-trin__ikon {
	display: none;
}

.rc-trin__punkt h3 {
	margin: .25rem 0 .3rem;
	font-size: 1.15rem;
}

.rc-trin__punkt p {
	margin: 0;
	color: var(--rc-daempet);
}

/* --- Ringebåndet --- */

.rc-ringebaand {
	background: var(--rc-olie);
	color: var(--rc-lys-blaek);
	padding-block: clamp(1.8rem, 4vw, 2.6rem);
	border-block: 4px solid var(--rc-rust);
}

.rc-ringebaand__indhold {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem 2rem;
}

.rc-ringebaand h2 {
	color: var(--rc-lys-blaek);
	margin-bottom: .35rem;
	font-size: clamp(1.3rem, 3vw, 1.7rem);
}

.rc-ringebaand p {
	margin: 0;
	max-width: 54ch;
	color: rgba(239, 231, 214, .85);
}

.rc-knap--stor {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: 1.22rem;
	padding: .8rem 1.7rem;
	white-space: nowrap;
}

/*
  Ringebåndet er sidste sektion på forsiden og skal støde helt op til
  sidefoden. To mørke bånd med en cremet stribe imellem ligner en fejl.
  Den negative margen ophæver bundluften på <main>.
*/
.rc-ringebaand:last-child {
	margin-bottom: calc(var(--rc-luft) * -1);
	border-bottom: 0;
}

/* --- Almindelige sider --- */

.rc-side__indhold {
	max-width: 68ch;
}

.rc-side__indhold h2 {
	margin-top: 1.8em;
}

.rc-side__indhold h2:first-child {
	margin-top: 0;
}

/* ==========================================================================
   10. Oversigten: sidebjælke og gitter
   ========================================================================== */

.rc-oversigt {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

.rc-oversigt__indhold {
	min-width: 0;
}

/* --- Sidebjælken med kategorier --- */

.rc-bjaelke {
	background: var(--rc-papir);
	border: 1px solid var(--rc-kant);
	border-radius: var(--rc-radius);
	box-shadow: var(--rc-skygge);
	overflow: hidden;
	position: sticky;
	top: 1rem;
}

.rc-bjaelke__hoved {
	background: var(--rc-olie);
	color: var(--rc-lys-blaek);
	padding: 1rem 1.2rem;
	border-bottom: 3px solid var(--rc-rust);
}

.rc-bjaelke__hoved h2 {
	margin: 0;
	color: var(--rc-lys-blaek);
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: .07em;
}

.rc-bjaelke__hoved p {
	margin: .25rem 0 0;
	font-size: .87rem;
	color: rgba(239, 231, 214, .78);
}

.rc-bjaelke__liste {
	list-style: none;
	margin: 0;
	padding: .4rem;
}

.rc-bjaelke__punkt {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .6rem .7rem;
	border-radius: var(--rc-radius-lille);
	text-decoration: none;
	color: var(--rc-blaa-tekst);
	border-left: 3px solid transparent;
}

.rc-bjaelke__punkt:hover,
.rc-bjaelke__punkt:focus {
	background: var(--rc-ben);
	color: var(--rc-blaa-tekst);
}

.rc-bjaelke__punkt.er-aktiv {
	background: var(--rc-ben);
	border-left-color: var(--rc-rust);
}

.rc-bjaelke__ikon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	background: var(--rc-ben);
	border: 1px solid var(--rc-kant);
	color: var(--rc-rust);
}

.rc-bjaelke__punkt:hover .rc-bjaelke__ikon,
.rc-bjaelke__punkt.er-aktiv .rc-bjaelke__ikon {
	background: var(--rc-olie);
	border-color: var(--rc-olie);
	color: var(--rc-okker);
}

.rc-bjaelke__ikon svg {
	width: 22px;
	height: 22px;
	vertical-align: 0;
}

.rc-bjaelke__navn {
	display: flex;
	flex-direction: column;
	font-family: var(--rc-skrift-titel);
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.2;
}

.rc-bjaelke__antal {
	font-family: var(--rc-skrift-brod);
	font-size: .8rem;
	font-weight: 400;
	color: var(--rc-daempet);
	margin-top: .12rem;
}

/* --- Gitteret --- */

/*
  Opslagstavlen. Prikkerne er tre forskudte punktgitre med hver sin
  størrelse — det giver en uregelmæssighed, ét gitter ikke kan.
*/
.rc-tavle {
	background-color: var(--rc-tavle);
	background-image:
		radial-gradient(circle at 20% 30%, var(--rc-tavle-moerk) 0 2px, transparent 2px),
		radial-gradient(circle at 70% 60%, var(--rc-tavle-moerk) 0 2px, transparent 2px),
		radial-gradient(circle at 45% 85%, var(--rc-tavle-moerk) 0 1.5px, transparent 1.5px);
	background-size: 22px 22px, 31px 31px, 17px 17px;
	/* Korkens korn oven på prikkerne. Uden det er tavlen en flad farve
	   med huller i — med det er den en plade. */
	background-blend-mode: multiply;
	border-top: 5px solid rgba(20, 40, 50, .14);
	border-bottom: 5px solid rgba(20, 40, 50, .14);
	padding-block: var(--rc-luft);
	position: relative;
	isolation: isolate;
}

.rc-tavle::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--rc-tavlekorn);
	opacity: .55;
	mix-blend-mode: multiply;
}

/*
  ⚠︎ Kortene skal ligge OVER kornet.

  `isolation: isolate` på tavlen holder blandingen inde i dens eget lag.
  Uden den slår `mix-blend-mode: multiply` igennem på alt, der ligger
  bagved — også heroens foto, når tavlen ligger ovenpå — og siden bliver
  gråmeleret i stedet for kun tavlen.
*/

/* Tekst direkte på tavlen skal være mørkere — den dæmpede tone rækker
   kun til 2,7:1 dér, hvor den klarer 4,8:1 på et kort. */
.rc-tavle .rc-sidetitel__manchet,
.rc-tavle .rc-filter__antal {
	color: var(--rc-daempet-tavle);
}

.rc-gitter {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	/* Mere luft end før: kortene er skæve og har tape stikkende op. */
	gap: 2.1rem 1.6rem;
	padding-top: .6rem;
}

/* --- Kortet --- */

/*
  Kortet er et opslag på en tavle: papir, en smule skævt, holdt af et
  stykke tape med kategorien skrevet på. Skævheden er lille og fast pr.
  kort — se nth-child længere nede — så gitteret stadig er roligt at
  scanne, men ikke ser maskinsat ud.
*/
/*
  Papiret får fibre.

  En meget svag støj oven på papirfarven. Forskellen mellem "hvid
  firkant" og "stykke papir" er næsten udelukkende overflade — og det
  koster ingen billedfil: mønsteret er et SVG-filter lagt i en data-URI,
  altså regnet i browseren.

  ⚠︎ STYRKEN ER SAT AF EN MÅLING, IKKE AF ØJET.

  `multiply` mørkner papiret, og kontrasten falder med det. Ved opacity
  .5 målte de mørkeste kornpletter 4,40:1 mod den dæmpede tekst — under
  kravet på 4,5. Prisen klarede sig med 4,58, men `--rc-daempet` har kun
  4,77 at give af mod rent papir og tåler derfor næsten ingen mørkning.

  Ved .28 er værste plet 4,58:1 for den dæmpede tekst og 4,72:1 for
  prisen. Skrues der op igen, skal begge måles på ny — det er ikke til at
  se med øjet, hvornår grænsen passeres.
*/
/*
  ⚠︎ `z-index: -1` — og IKKE z-index på kortets børn.

  Første udgave lagde fibrene på z-index 0 og gav alle direkte børn
  `position: relative; z-index: 1` for at få indholdet ovenpå. Det gav
  `.rc-kort__tekst` sin egen stacking context, og så kunne det strakte
  link (`.rc-kort__titel a::after`) ikke længere række ud over
  tekstblokken. Billedet holdt op med at være klikbart — den samme fælde,
  som prisen faldt i, bare fra den anden side.

  Med -1 ligger fibrene bag alt indhold uden at røre nogens stacking, og
  `isolation: isolate` på kortet holder `multiply` inde i kortet, så det
  ikke slår igennem på tavlen bagved.
*/
.rc-kort::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	opacity: .28;
	background-image: var(--rc-fibre);
	mix-blend-mode: multiply;
}

.rc-kort {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	background: var(--rc-papir);
	padding: 9px 9px 13px;
	border-radius: 2px;
	box-shadow: var(--rc-skygge-tavle);
	transition: transform .18s ease, box-shadow .18s ease;
	overflow: visible;
}

.rc-kort:nth-child(3n+1) { transform: rotate(-1.1deg); }
.rc-kort:nth-child(3n+2) { transform: rotate(.7deg); }
.rc-kort:nth-child(3n)   { transform: rotate(-.5deg); }

/*
  Kortet hænger i tapen.

  Drejepunktet ligger i tapestykket — midt for, en anelse over kortets
  overkant. Når kortet retter sig op ved hover, svinger bunden derfor
  mere end toppen, præcis som et stykke papir, der er hæftet op i det ene
  hjørne. Uden `transform-origin` drejede hele fladen om sit eget centrum,
  og løftet kunne have siddet på et hvilket som helst kort på et hvilket
  som helst site.
*/
.rc-kort {
	transform-origin: 50% -12px;
}

.rc-kort:hover,
.rc-kort:focus-within {
	transform: translateY(-4px) rotate(0deg);
	box-shadow: 4px 8px 20px rgba(20, 40, 50, .34);
	z-index: 2;
}

/* Tapen. Formen er klippet skævt, så den ikke ligner et klistermærke.

   `pointer-events: none`: tapen ligger med vilje over kortet (z-index 3),
   fordi den skal stikke op over kanten. Men den er ren pynt — markup'et
   sætter aria-hidden på den — og uden dette åd den trykket fra det
   strakte link nedenunder, præcis som prisen gjorde. Musen og fingeren
   går nu igennem; skærmlæsere er upåvirkede. */
.rc-kort__tape {
	position: absolute;
	left: 50%;
	top: -14px;
	z-index: 3;
	pointer-events: none;
	width: 118px;
	margin-left: -59px;
	padding: 5px 4px 4px;
	background: var(--rc-tape);
	opacity: .94;
	text-align: center;
	font-family: var(--rc-skrift-haand);
	font-size: .72rem;
	line-height: 1.15;
	color: var(--rc-tape-blaek);
	transform: rotate(-2.2deg);
	box-shadow: 0 1px 3px rgba(20, 40, 50, .18);
	/*
	  Revnede kanter. Tape rives af rullen; det klippes ikke med saks.

	  De to lange sider har mange små knæk, de korte ender kun få — sådan
	  river papirtape faktisk. Punkterne er sat i hånden og med vilje
	  uregelmæssige: et gentaget mønster afslører sig selv, når otte
	  tapestykker står under hinanden i et gitter.
	*/
	clip-path: polygon(
		2% 4%,   14% 0,    27% 3%,   41% 1%,   56% 4%,
		68% 1%,  81% 4%,   93% 2%,   100% 6%,
		98% 96%, 86% 100%, 73% 97%,  59% 100%, 45% 96%,
		31% 99%, 18% 96%,  6% 100%,  0 94%
	);
	/* Lange kategorinavne må hellere klippes end sprænge tapen. */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.rc-kort:nth-child(2n) .rc-kort__tape {
	transform: rotate(1.8deg);
}

.rc-kort__billede {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--rc-ben);
	overflow: hidden;
}

.rc-kort__billede img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rc-kort__intet-billede {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	color: var(--rc-kant);
}

.rc-kort__ikon {
	width: 56px;
	height: 56px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: 0;
}

.rc-kort__tekst {
	padding: .8rem .3rem 0;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.rc-kort__titel {
	font-size: 1.08rem;
	line-height: 1.25;
	margin: 0 0 .35rem;
}

.rc-kort__titel a {
	color: var(--rc-blaa-tekst);
	text-decoration: none;
}

/* Hele kortet er klikbart, men kun titlen er et rigtigt link. Så får
   skærmlæsere og tastaturbrugere ét tydeligt mål frem for fem.

   ⚠︎ `z-index` er ikke pynt her — uden den er prisen ikke klikbar.

   `.rc-kort__pris` har `transform: rotate(-1.1deg)`, den lille skævhed
   der får prisen til at se håndskrevet ud. En transform skaber en
   stacking context og løfter elementet over absolut positionerede
   søskende med `z-index: auto`. Prisen lå derfor oven på den strakte
   flade og åd trykket: man ramte teksten, den blev markeret, og
   annoncen åbnede ikke. Fejlen var værst på telefon, hvor prisen er
   det største og mest oplagte sted at trykke.

   z-index 1 lægger fladen over prisen igen. Stemplet ("Solgt") ligger
   på 2 og bliver derfor stadig ovenpå — det skal kun ses, ikke klikkes.

   Husk det ved nye transformerede elementer inde i kortet: de skal enten
   under denne flade eller selv gøres til links. */
.rc-kort__titel a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.rc-kort:hover .rc-kort__titel a {
	color: var(--rc-rust);
}

.rc-kort__meta {
	margin: 0 0 .6rem;
	font-size: .87rem;
	color: var(--rc-daempet);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem .8rem;
}

.rc-kort__sted {
	display: inline-flex;
	align-items: center;
	gap: .3em;
}

.rc-kort__sted svg {
	width: 1em;
	height: 1em;
	color: var(--rc-rust);
}

.rc-kort__aargang::before {
	content: '·';
	margin-right: .8rem;
	color: var(--rc-kant);
}

/*
  Prisen er håndskrevet. Det er dét, der får en toiletskål til 250 kr.
  og en Bel-Air til 300.000 til at høre til på samme side.
*/
.rc-kort__pris {
	margin: auto 0 0;
	padding-top: .6rem;
	font-family: var(--rc-skrift-haand);
	font-size: 1.42rem;
	line-height: 1.15;
	color: var(--rc-roed);
	transform: rotate(-1.1deg);
	align-self: flex-start;
}

/* Solgte annoncer dæmpes, men fjernes ikke — de holder adressen i live
   og trækker fortsat besøgende ind. */
.rc-kort--solgt .rc-kort__billede img {
	filter: grayscale(.75) contrast(.92);
	opacity: .82;
}

.rc-kort--solgt .rc-kort__pris {
	color: var(--rc-daempet);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

/* --- Stempler --- */

/*
  Stemplet slås på, når kortet kommer til syne.

  Det kommer skævt ind, for stort, og sætter sig så på plads med et lille
  overskud — som et gummistempel, der rammer papiret og giver efter et
  øjeblik. Det er den eneste tilstandsændring på sitet med rigtig
  dramatik i sig; før var den bare grå tekst.
*/
@keyframes rc-stempel-slag {
	0%   { opacity: 0; transform: rotate(-16deg) scale(2.4); }
	55%  { opacity: 1; transform: rotate(-7.5deg) scale(.92); }
	72%  { transform: rotate(-8.6deg) scale(1.04); }
	100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}

.rc-stempel {
	position: absolute;
	top: 1.1rem;
	left: -.4rem;
	z-index: 2;
	animation: rc-stempel-slag .5s cubic-bezier(.2, .9, .3, 1.2) both;
	animation-delay: .35s;
	/* Skal ses, ikke klikkes — ellers spærrer "Solgt" for kortets link.
	   Påvirker kun mus og finger, ikke skærmlæsere. */
	pointer-events: none;
	font-family: var(--rc-skrift-titel);
	font-size: .95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	padding: .3rem 1rem;
	color: var(--rc-hvid);
	transform: rotate(-6deg);
	box-shadow: 0 2px 6px rgba(36, 30, 24, .3);
}

.rc-stempel--solgt {
	background: var(--rc-roed-flade);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 2px 6px rgba(36, 30, 24, .3);
}

.rc-stempel--reserveret {
	background: var(--rc-okker-moerk);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 2px 6px rgba(36, 30, 24, .3);
}

/*
  NYT — på ting under en uge gamle ("Nyt på pladsen" nr. 1, sept. 2026).

  Bevidst MINDRE end SOLGT og i modsat hjørne: statusstemplet er en dom
  og beholder autoriteten; NYT er kun en hilsen. Ingen slag-animation —
  med 10-14 nye om ugen ville otte stempler slå sig på plads i kor, og
  så er teatret støj. Farverne er faste og IKKE tokens: gul flade med
  mørkt blæk skal se ens ud i lys og mørk tilstand, og blæk-tokenet
  vender om i mørke. Målt: #453407 på #f4c95e giver 7,65:1.
*/
.rc-stempel--nyt {
	top: .55rem;
	left: auto;
	right: -.35rem;
	background: var(--rc-gul);
	color: #453407;
	font-size: .72rem;
	padding: .18rem .6rem;
	animation: none;
	opacity: 1;
	transform: rotate(6deg);
	box-shadow: inset 0 0 0 1.5px rgba(69, 52, 7, .35), 0 2px 5px rgba(36, 30, 24, .25);
}

/* --- Ingen resultater --- */

.rc-tomt {
	background: var(--rc-papir);
	border: 1px dashed var(--rc-kant);
	border-radius: var(--rc-radius);
	padding: 2.5rem 2rem;
	text-align: center;
}

.rc-tomt h2 {
	margin-top: 0;
}

.rc-tomt p {
	max-width: 46ch;
	margin-inline: auto;
	color: var(--rc-daempet);
}

/* --- Sidetal --- */

.pagination {
	margin-top: 2.2rem;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding-inline: .6rem;
	background: var(--rc-papir);
	border: 1px solid var(--rc-kant);
	border-radius: var(--rc-radius-lille);
	color: var(--rc-blaa-tekst);
	text-decoration: none;
	font-family: var(--rc-skrift-titel);
}

.pagination .page-numbers:hover {
	border-color: var(--rc-rust);
	color: var(--rc-rust);
}

.pagination .page-numbers.current {
	background: var(--rc-roed-flade);
	border-color: var(--rc-rust);
	color: var(--rc-hvid);
}

/* ==========================================================================
   11. Filterlinjen
   ========================================================================== */

.rc-filter {
	background: var(--rc-papir);
	border: 1px solid var(--rc-kant);
	border-radius: var(--rc-radius);
	box-shadow: var(--rc-skygge);
	margin-bottom: 1.4rem;
}

.rc-filter__linje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem 1.2rem;
	padding: .75rem 1.1rem;
}

.rc-filter__antal {
	margin: 0;
	color: var(--rc-daempet);
	font-size: .95rem;
}

.rc-filter__antal strong {
	color: var(--rc-blaa-tekst);
	font-family: var(--rc-skrift-titel);
	font-size: 1.15rem;
	margin-right: .15em;
}

.rc-filter__sorter {
	margin: 0;
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .93rem;
	color: var(--rc-daempet);
}

/* Knappen ved sorteringen. Vises kun uden JavaScript — main.js skjuler
   den og sender formularen ved ændring i stedet. Den skal derfor se
   ordentlig ud, men ikke stjæle opmærksomhed fra listen. */
.rc-filter__sorter-knap {
	flex: none;
	padding: .34rem .8rem;
	font-family: var(--rc-skrift-titel);
	font-size: .84rem;
	line-height: 1.3;
	color: var(--rc-hvid);
	background: var(--rc-blaa);
	border: 1px solid var(--rc-blaa-moerk);
	border-radius: var(--rc-radius-lille);
	cursor: pointer;
}

.rc-filter__sorter-knap:hover { background: var(--rc-blaa-moerk); }
.rc-filter__sorter-knap[hidden] { display: none; }

/* Felter i filteret deler udseende. */
.rc-filter select,
.rc-filter input[type='number'] {
	font: inherit;
	font-size: .95rem;
	padding: .38rem .55rem;
	color: var(--rc-blaek);
	background: var(--rc-ben);
	border: 1px solid var(--rc-kant);
	border-radius: var(--rc-radius-lille);
	max-width: 100%;
}

.rc-filter select:focus,
.rc-filter input:focus {
	border-color: var(--rc-rust);
}

/* --- Udfoldningen --- */

.rc-filter__foldud {
	border-top: 1px solid var(--rc-kant);
}

.rc-filter__foldud summary {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem 1.1rem;
	cursor: pointer;
	font-family: var(--rc-skrift-titel);
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--rc-blaa-tekst);
	list-style: none;
}

.rc-filter__foldud summary::-webkit-details-marker {
	display: none;
}

/* Egen pil, så den vender med udfoldningen. */
.rc-filter__foldud summary::before {
	content: '';
	width: .5rem;
	height: .5rem;
	border-right: 2px solid var(--rc-rust);
	border-bottom: 2px solid var(--rc-rust);
	transform: rotate(-45deg);
	transition: transform .18s ease;
	flex: none;
	margin-left: .15rem;
}

.rc-filter__foldud[open] summary::before {
	transform: rotate(45deg);
}

.rc-filter__foldud summary:hover {
	color: var(--rc-rust);
}

.rc-filter__maerkat {
	background: var(--rc-roed-flade);
	color: var(--rc-hvid);
	font-size: .72rem;
	letter-spacing: .06em;
	padding: .12rem .5rem;
	border-radius: 999px;
}

.rc-filter__felter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem 1.4rem;
	padding: .3rem 1.1rem 1.1rem;
}

.rc-filter__felt {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
	border: 0;
	padding: 0;
	min-width: 0;
}

.rc-filter__felt > label,
.rc-filter__felt > legend {
	font-size: .84rem;
	color: var(--rc-daempet);
	padding: 0;
}

.rc-filter__interval {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: .35rem;
}

.rc-filter__interval legend {
	width: 100%;
	margin-bottom: .3rem;
}

.rc-filter__interval input {
	width: 6.2rem;
}

.rc-filter__interval span {
	color: var(--rc-kant);
}

.rc-filter__afkryds {
	flex-direction: row;
	align-items: center;
}

.rc-filter__afkryds label {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .95rem;
	cursor: pointer;
}

.rc-filter__knapper {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	margin-left: auto;
}

.rc-filter__nulstil {
	font-size: .92rem;
	color: var(--rc-daempet);
}

/* ==========================================================================
   12. Den enkelte annonce
   ========================================================================== */

/* --- Brødkrummer --- */

.rc-krummer ol {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .2rem .5rem;
	font-size: .89rem;
	color: var(--rc-daempet);
}

.rc-krummer li + li::before {
	content: '›';
	margin-right: .5rem;
	color: var(--rc-kant);
}

.rc-krummer a {
	color: var(--rc-daempet);
	text-decoration: none;

	/*
	  Trykfladen gøres høj nok til en tommelfinger uden at flytte noget.

	  Målt på telefon var linjen 17 px høj — man skulle ramme en
	  bogstavhøjde for at komme tilbage. Polstringen løfter den til
	  omkring 41 px, og den negative margen trækker linjeafstanden
	  tilbage igen, så krummerne står præcis, hvor de stod.

	  `inline-block` er nødvendig: på et rent inline-element vokser
	  trykfladen ikke lodret af polstring alene.
	*/
	display: inline-block;
	padding-block: .6rem;
	margin-block: -.6rem;
}

.rc-krummer a:hover {
	color: var(--rc-rust);
	text-decoration: underline;
}

.rc-krummer [aria-current] {
	color: var(--rc-blaa-tekst);
	font-weight: 600;
}

/* --- Overskrift og opdeling --- */

.rc-annonce__titel {
	margin-bottom: 1.2rem;
}

.rc-annonce__top {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

/* --- Galleriet --- */

.rc-galleri__stor {
	position: relative;
	margin: 0;
	background: var(--rc-papir);
	border: 1px solid var(--rc-kant);
	border-radius: var(--rc-radius);
	box-shadow: var(--rc-skygge);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.rc-galleri__billede {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rc-galleri__smaa {
	list-style: none;
	margin: .8rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: .6rem;
}

.rc-galleri__lille {
	display: block;
	border: 2px solid transparent;
	border-radius: var(--rc-radius-lille);
	overflow: hidden;
	line-height: 0;
	background: var(--rc-papir);
	transition: border-color .16s ease;
}

.rc-galleri__lille img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.rc-galleri__lille:hover,
.rc-galleri__lille:focus-visible {
	border-color: var(--rc-rust);
}

.rc-galleri__lille.er-valgt {
	border-color: var(--rc-rust);
	box-shadow: 0 0 0 1px var(--rc-rust);
}

.rc-galleri--tom {
	display: grid;
	place-items: center;
	gap: .8rem;
	aspect-ratio: 4 / 3;
	background: var(--rc-papir);
	border: 1px dashed var(--rc-kant);
	border-radius: var(--rc-radius);
	color: var(--rc-daempet);
	text-align: center;
	padding: 1.5rem;
}

.rc-galleri__ikon {
	width: 78px;
	height: 78px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.1;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--rc-kant);
	vertical-align: 0;
}

.rc-galleri--tom p {
	margin: 0;
	max-width: 30ch;
}

.rc-stempel--stor {
	top: 1.6rem;
	left: -.6rem;
	font-size: 1.3rem;
	padding: .45rem 1.6rem;
	letter-spacing: .14em;
}

/* --- Kortet med pris og kontakt --- */

.rc-annonce__kort {
	background: var(--rc-papir);
	border: 1px solid var(--rc-kant);
	border-top: 4px solid var(--rc-rust);
	border-radius: var(--rc-radius);
	box-shadow: var(--rc-skygge);
	padding: 1.4rem 1.5rem 1.5rem;
	position: sticky;
	top: 1rem;
}

.rc-annonce__pris {
	margin: 0;
	font-family: var(--rc-skrift-titel);
	font-size: clamp(1.9rem, 3.4vw, 2.4rem);
	font-weight: 700;
	line-height: 1.05;
	color: var(--rc-rust);
}

.rc-annonce__status {
	display: inline-block;
	margin: .5rem 0 0;
	padding: .18rem .7rem;
	border-radius: var(--rc-radius-lille);
	font-family: var(--rc-skrift-titel);
	font-size: .92rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--rc-hvid);
}

.rc-annonce__status--solgt {
	background: var(--rc-roed-flade);
}

.rc-annonce__status--reserveret {
	background: var(--rc-okker-moerk);
}

.rc-annonce__sted {
	margin: .7rem 0 0;
	display: flex;
	align-items: center;
	gap: .35em;
	color: var(--rc-daempet);
	font-size: .95rem;
}

.rc-annonce__sted svg {
	color: var(--rc-rust);
}

/* --- Faktatabellen --- */

.rc-fakta {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2rem 0 0;
	font-size: .95rem;
}

.rc-fakta th,
.rc-fakta td {
	text-align: left;
	padding: .5rem 0;
	border-bottom: 1px solid var(--rc-kant);
	vertical-align: top;
}

.rc-fakta tr:last-child th,
.rc-fakta tr:last-child td {
	border-bottom: 0;
}

.rc-fakta th {
	font-family: var(--rc-skrift-brod);
	font-weight: 400;
	color: var(--rc-daempet);
	width: 42%;
	padding-right: 1rem;
}

.rc-fakta td {
	font-weight: 600;
	color: var(--rc-blaa-tekst);
}

/* --- Mærkesporet ---
   Vejen videre til de andre ting af samme mærke. Diskret: det er et
   tilbud, ikke en opfordring — prisen og kontakten skal stadig veje
   tungest på siden. */

.rc-annonce__spor {
	margin: .9rem 0 0;
	font-size: .95rem;
}

.rc-annonce__spor a {
	display: inline-flex;
	align-items: baseline;
	gap: .45rem;
	color: var(--rc-blaa-tekst);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}

.rc-annonce__spor a:hover,
.rc-annonce__spor a:focus-visible {
	color: var(--rc-roed);
}

.rc-annonce__spor-antal {
	font-size: .85em;
	color: var(--rc-daempet);
	white-space: nowrap;
}

/* --- Kontaktknapper --- */

.rc-annonce__kontakt {
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--rc-kant);
	display: grid;
	gap: .6rem;
}

/* Formularen har allerede sin egen skillelinje foroven. */
.rc-annonce__kontakt .rc-bud {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.rc-annonce__kontakt .rc-annonce__besked {
	margin-top: .5rem;
}

.rc-annonce__besked {
	margin: 0 0 .3rem;
	color: var(--rc-daempet);
	font-size: .95rem;
}

.rc-knap--bred {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	text-align: center;
}

/* --- Beskrivelsen --- */

.rc-annonce__beskrivelse {
	margin-top: 2.5rem;
	max-width: 68ch;
}

.rc-annonce__beskrivelse h2 {
	font-size: 1.35rem;
}

.rc-annonce__beskrivelse img {
	border-radius: var(--rc-radius);
	margin-block: 1.2rem;
}

/* --- Mere af samme slags --- */

.rc-relaterede {
	margin-top: 3.2rem;
	padding-top: 2.4rem;
	border-top: 1px solid var(--rc-kant);
}

/* ==========================================================================
   13. Bud-formularen
   ========================================================================== */

.rc-bud {
	margin-top: 1.4rem;
	padding-top: 1.3rem;
	border-top: 1px solid var(--rc-kant);
}

.rc-bud__titel {
	font-size: 1.2rem;
	margin-bottom: .7rem;
}

.rc-bud__formular {
	display: grid;
	gap: .85rem;
}

.rc-bud__felt {
	display: flex;
	flex-direction: column;
	gap: .28rem;
	margin: 0;
}

.rc-bud__felt label {
	font-size: .88rem;
	color: var(--rc-daempet);
}

.rc-bud__paakraevet {
	color: var(--rc-rust);
}

.rc-bud input[type='text'],
.rc-bud input[type='tel'],
.rc-bud input[type='email'],
.rc-bud input[type='number'],
.rc-bud textarea {
	font: inherit;
	font-size: 1rem;
	padding: .5rem .65rem;
	color: var(--rc-blaek);
	background: var(--rc-ben);
	border: 1px solid var(--rc-kant);
	border-radius: var(--rc-radius-lille);
	width: 100%;
}

.rc-bud textarea {
	resize: vertical;
	min-height: 6rem;
}

.rc-bud input:focus,
.rc-bud textarea:focus {
	border-color: var(--rc-rust);
	background: var(--rc-papir);
}

.rc-bud [aria-invalid='true'] {
	border-color: var(--rc-rust);
	background: rgba(168, 57, 26, .05);
}

/* To felter side om side, hvis der er plads. */
.rc-bud__par {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: .85rem;
}

.rc-bud__hjaelp {
	margin: -.35rem 0 0;
	font-size: .84rem;
	color: var(--rc-daempet);
}

.rc-bud__fejl {
	display: block;
	color: var(--rc-rust);
	font-size: .86rem;
	font-weight: 600;
}

.rc-bud__advarsel {
	background: rgba(168, 57, 26, .08);
	border-left: 3px solid var(--rc-rust);
	padding: .7rem .9rem;
	border-radius: var(--rc-radius-lille);
	color: var(--rc-rust-moerk);
	margin: 0 0 .9rem;
	font-size: .93rem;
}

.rc-bud__knap .rc-knap {
	width: 100%;
}

.rc-bud__knap {
	margin: .25rem 0 0;
}

.rc-bud__smaat {
	margin: 0;
	font-size: .8rem;
	color: var(--rc-daempet);
}

/*
  Honningkrukken. Skjules for øjet, men ikke med `display: none` —
  nogle robotter springer netop de felter over. Den skubbes ud af
  billedet i stedet, og `aria-hidden` holder skærmlæsere væk.
*/
.rc-bud__krukke {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Kvitteringen --- */

.rc-bud--kvittering h2 {
	font-size: 1.2rem;
	color: var(--rc-rust);
	margin-bottom: .4rem;
}

.rc-bud--kvittering p {
	margin: 0;
	color: var(--rc-blaek);
}

.rc-bud__tlf {
	font-weight: 700;
	white-space: nowrap;
}

/* ==========================================================================
   14. Indglidning
   ========================================================================== */

/*
  Starttilstanden sættes fra main.js, aldrig herfra — så står indholdet
  synligt, hvis scriptet fejler.
*/
/*
  ⚠︎ Indglidningen bruger `translate`, ikke `transform`.
  
  Den brugte `transform: translateY(14px)` og nulstillede med
  `transform: none`. Det slog alt andet transform på elementet ihjel —
  annoncekortenes skæve rotation og, værre, deres løft ved hover.
  `.rc-glider.er-inde` og `.rc-kort:hover` har nøjagtig samme specificitet
  (to klasser mod klasse plus pseudoklasse), og indglidningen står senest
  i filen, så den vandt. På forsiden, hvor kortene glider ind, skete der
  derfor ingenting, når man kørte musen hen over dem.

  `translate` er sin egen egenskab i moderne CSS og lægger sig oven i
  `transform` i stedet for at erstatte den. De to kan nu ikke røre
  hinanden. Kan en gammel browser ikke finde ud af `translate`, glider
  elementet bare ikke — det toner stadig ind, og det er pynt alligevel.
*/
.rc-glider {
	opacity: 0;
	translate: 0 14px;
	transition: opacity .5s ease, translate .5s ease;
}

.rc-glider.er-inde {
	opacity: 1;
	translate: 0 0;
}

/* ==========================================================================
   15. Mindre skærme
   ========================================================================== */

@media (max-width: 960px) {
	.rc-oversigt {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Prisen og kontaktknapperne skal stå over den lange beskrivelse,
	   ikke under den. Galleriet først, så prisen. */
	.rc-annonce__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.rc-annonce__kort {
		position: static;
	}

	/* Kategorierne flyttes under annoncerne. Den, der er kommet ind på en
	   kategoriside, vil se varerne først — ikke en liste over alt andet. */
	.rc-bjaelke {
		position: static;
		order: 2;
	}

	.rc-oversigt__indhold {
		order: 1;
	}

	.rc-bjaelke__liste {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	}
}

@media (max-width: 860px) {
	.rc-sidehoved__raekke {
		gap: .8rem 1rem;
	}

	.rc-sidehoved__hoejre {
		width: 100%;
		margin-left: 0;
		justify-content: space-between;
	}

	.rc-soeg input[type='search'] {
		width: 100%;
	}

	.rc-soeg {
		flex: 1;
	}
}

@media (max-width: 560px) {
	body {
		font-size: 16px;
	}

	.rc-gitter {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 1rem;
	}

	.rc-filter__linje {
		flex-direction: column;
		align-items: stretch;
	}

	.rc-filter__sorter select {
		flex: 1;
	}

	.rc-filter__felter {
		flex-direction: column;
		align-items: stretch;
	}

	.rc-filter__interval input {
		flex: 1;
		width: auto;
	}

	.rc-filter__knapper {
		margin-left: 0;
		justify-content: space-between;
	}

	.rc-kort__titel {
		font-size: .98rem;
	}

	.rc-kort__pris {
		font-size: 1.12rem;
	}

	/*
	  Sidehovedet må ikke æde hele den første skærm på en telefon.
	  Logo og telefonnummer deler øverste række; søgefeltet og menuen
	  ligger i fuld bredde under. `display: contents` lader indholdet af
	  højre-gruppen deltage direkte i gitteret.
	*/
	.rc-sidehoved__raekke {
		display: grid;
		grid-template-columns: auto minmax(0, auto);
		align-items: center;
		gap: .55rem .7rem;
		padding-block: .7rem;
	}

	.rc-sidehoved__hoejre {
		display: contents;
	}

	.rc-logo {
		grid-column: 1;
		grid-row: 1;
	}

	.rc-telefon {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		padding: .4rem .75rem;
		font-size: 1rem;
	}

	.rc-soeg,
	.rc-menu {
		grid-column: 1 / -1;
	}

	.rc-menu__liste {
		gap: .1rem 1rem;
		font-size: .95rem;
	}
}

/* ==========================================================================
   16. Rettelser efter gennemgangen 22. august
   ========================================================================== */

/* --- Heroen: overskriften er nu en påstand, ikke et logo igen --- */

.rc-hero__titel {
	font-size: clamp(2.1rem, 5.4vw, 3.4rem);
	font-weight: 700;
	line-height: .96;
	text-transform: uppercase;
	color: var(--rc-lys-blaek);
	text-shadow: 4px 4px 0 var(--rc-roed);
	margin: 0 0 .8rem;
	text-wrap: balance;
}

/* Søgefeltet er flyttet under kategorierne: folk browser, de søger sjældent. */
.rc-hero__soeg {
	max-width: 26rem;
	margin: 1.6rem 0 0;
}

/* --- Se det hele, under gitteret --- */

.rc-nyeste__videre {
	margin: 1.8rem 0 0;
	text-align: center;
}

/* --- Galleriets pile --- */

.rc-galleri__pil {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2.9rem;
	height: 2.9rem;
	border: 0;
	border-radius: 50%;
	background: rgba(22, 48, 47, .72);
	color: var(--rc-lys-blaek);
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
	transition: background .16s ease;
}

.rc-galleri__pil:hover,
.rc-galleri__pil:focus-visible {
	background: var(--rc-roed-flade);
}

.rc-galleri__pil--forrige { left: .7rem; }
.rc-galleri__pil--naeste  { right: .7rem; }

.rc-galleri__pil span[aria-hidden] {
	/* Chevronen sidder optisk lidt for lavt i sin egen linje. */
	margin-top: -.18em;
}

.rc-galleri__taeller {
	position: absolute;
	right: .7rem;
	bottom: .7rem;
	z-index: 3;
	background: rgba(22, 48, 47, .72);
	color: var(--rc-lys-blaek);
	font-family: var(--rc-skrift-titel);
	font-size: .88rem;
	padding: .15rem .55rem;
	border-radius: 999px;
}

/* --- Bud-formularen bag en knap --- */

.rc-budfold summary {
	list-style: none;
	cursor: pointer;
	text-align: center;
}

.rc-budfold summary::-webkit-details-marker {
	display: none;
}

.rc-budfold[open] summary {
	background: var(--rc-rust-moerk);
	border-radius: var(--rc-radius-lille) var(--rc-radius-lille) 0 0;
}

.rc-budfold .rc-bud {
	margin-top: 0;
	padding-top: 1rem;
	border-top: 0;
	border: 1px solid var(--rc-kant);
	border-top: 0;
	border-radius: 0 0 var(--rc-radius) var(--rc-radius);
	padding-inline: 1rem;
	padding-bottom: 1rem;
	background: var(--rc-ben);
}

/* --- Beskrivelsen ligger nu i venstre spalte --- */

.rc-annonce__venstre .rc-annonce__beskrivelse {
	margin-top: 2rem;
	max-width: none;
}

/* --- Den primære knap: åbner formularen --- */

.rc-knap--primaer {
	background: var(--rc-roed-flade);
}

.rc-knap--primaer:hover,
.rc-knap--primaer:focus {
	background: var(--rc-rust-moerk);
}

/* Pilen fortæller, at knappen folder noget ud frem for at føre videre. */
.rc-budfold__pil {
	width: .48rem;
	height: .48rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-.1em);
	transition: transform .18s ease;
	flex: none;
}

.rc-budfold[open] .rc-budfold__pil {
	transform: rotate(-135deg) translateY(-.1em);
}

/* --- Forstørrelse af billedet --- */

.rc-galleri__forstoer {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	cursor: zoom-in;
}

.rc-galleri__lup {
	position: absolute;
	left: .7rem;
	bottom: .7rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: rgba(22, 48, 47, .72);
	color: var(--rc-lys-blaek);
	opacity: 0;
	transition: opacity .16s ease;
}

.rc-galleri__forstoer:hover .rc-galleri__lup,
.rc-galleri__forstoer:focus-visible .rc-galleri__lup {
	opacity: 1;
}

.rc-galleri__lup svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
	vertical-align: 0;
}

/* Laget over siden */

.rc-lup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: rgba(22, 48, 47, .93);
	padding: clamp(1rem, 4vw, 3rem);
}

.rc-lup__billede {
	max-width: 100%;
	max-height: 88vh;
	width: auto;
	border-radius: var(--rc-radius-lille);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}

.rc-lup__luk,
.rc-lup__pil {
	position: absolute;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: var(--rc-lys-blaek);
	cursor: pointer;
	transition: background .16s ease;
}

.rc-lup__luk:hover,
.rc-lup__pil:hover,
.rc-lup__luk:focus-visible,
.rc-lup__pil:focus-visible {
	background: var(--rc-roed-flade);
}

.rc-lup__luk {
	top: 1rem;
	right: 1rem;
	width: 2.8rem;
	height: 2.8rem;
	font-size: 1.15rem;
}

.rc-lup__pil {
	top: 50%;
	transform: translateY(-50%);
	width: 3.2rem;
	height: 3.2rem;
	font-size: 2.1rem;
	line-height: 1;
}

.rc-lup__pil--forrige { left: 1rem; }
.rc-lup__pil--naeste  { right: 1rem; }

.rc-lup__taeller {
	position: absolute;
	bottom: 1.2rem;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, .4);
	color: var(--rc-lys-blaek);
	font-family: var(--rc-skrift-titel);
	font-size: .95rem;
	padding: .2rem .7rem;
	border-radius: 999px;
}

/* Siden bagved må ikke kunne rulles, mens laget er åbent. */
body.rc-laast {
	overflow: hidden;
}

@media (max-width: 560px) {
	.rc-lup__pil {
		width: 2.6rem;
		height: 2.6rem;
		font-size: 1.7rem;
	}
}

/* ==========================================================================
   17. Palet F — opslagstavlen
   ========================================================================== */

/* Tavlen inde i en spalte, med afrundede hjørner frem for kant til kant. */
.rc-tavle--indlejret {
	border: 0;
	border-radius: var(--rc-radius);
	padding: 1.6rem 1.4rem 2rem;
	box-shadow: inset 0 2px 6px rgba(20, 40, 50, .18);
}

/* Emaljeskiltet: nu blåt med cremehvid kant, som de rigtige.

   Blæk og kant bruger --rc-lys-blaek, ikke --rc-papir: skiltet er blåt
   i BEGGE tilstande, så teksten skal være cremet i begge. Med papirets
   token blev skiltet mørkt på mørkt i mørk tilstand (2,09:1). */
.rc-skilt {
	background: var(--rc-blaa);
	border-color: var(--rc-lys-blaek);
	box-shadow: inset 0 0 0 2px var(--rc-blaa), 3px 3px 0 rgba(20, 40, 50, .22);
	color: var(--rc-lys-blaek);
}

.rc-skilt--rust {
	background: var(--rc-roed-flade);
	border-color: var(--rc-lys-blaek);
	box-shadow: inset 0 0 0 2px var(--rc-roed), 3px 3px 0 rgba(20, 40, 50, .22);
}

/* Logoet skiller sig ud fra sidehovedet ved at være rødt på blåt. */
.rc-logo .rc-skilt {
	background: var(--rc-roed-flade);
	border-color: var(--rc-lys-blaek);
	box-shadow: inset 0 0 0 2px var(--rc-roed), 3px 3px 0 rgba(0, 0, 0, .28);
	transform: rotate(-2.2deg);
}

.rc-logo a:hover .rc-skilt,
.rc-logo a:focus .rc-skilt {
	transform: rotate(-2.2deg) scale(1.03);
}

/* Sidehoved og sidefod i emaljeblå. */
.rc-sidehoved {
	background: var(--rc-blaa);
	border-bottom-color: var(--rc-roed);
}

.rc-sidefod {
	background: var(--rc-blaa-moerk);
	border-top-color: var(--rc-roed);
}

.rc-sidefod h2 {
	color: var(--rc-gul);
}

.rc-ringebaand {
	background: var(--rc-blaa-moerk);
	border-block-color: var(--rc-roed);
}

/* Kategoriknapperne står ikke længere på blåt — de er blevet papir.
   Gul på papir er 1,44:1 og altså praktisk talt usynligt; rød er 4,9:1.
   Reglen stammer fra palet-F-runden, hvor knapperne var gennemsigtige
   oven på den blå hero. */
.rc-kategoriknap__ikon {
	color: var(--rc-roed);
}

/* Sidebjælkens hoved følger med. */
.rc-bjaelke__hoved {
	background: var(--rc-blaa);
	border-bottom-color: var(--rc-roed);
}

/* Prisen på den enkelte annonce er håndskrevet som på kortene. */
.rc-annonce__pris {
	font-family: var(--rc-skrift-haand);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 2.6rem);
	color: var(--rc-roed);
	transform: rotate(-1deg);
	display: inline-block;
	line-height: 1.1;
}

/* Sektionstitlen på tavlen skal have luft til kortene. */
.rc-tavle .rc-sektionstitel {
	margin-bottom: 1.8rem;
}

/*
  Telefonrøret ringer, når man nærmer sig.

  To ryk frem og tilbage, én gang. Selve knappen står stille — det er kun
  ikonet, der bevæger sig, så nummeret bliver ved med at være læseligt.
  Telefonen er den hurtigste vej til en handel; den må gerne gøre lidt
  opmærksom på sig selv.
*/
@keyframes rc-ringer {
	0%, 100%        { transform: rotate(0); }
	12%, 36%        { transform: rotate(-11deg); }
	24%, 48%        { transform: rotate(11deg); }
	60%             { transform: rotate(0); }
}

/*
  Målrettet `tel:`-links, ikke klassenavne.

  Ring-knappen findes i seks forskellige klædedragter — sidehovedet,
  annoncen, ringebåndet, den tomme oversigt, bud-formularen og sidefoden
  — og de har ikke ét klassenavn til fælles. Første forsøg listede dem,
  og listen ramte ved siden af på fem af de seks. Adressen er derimod den
  samme hver gang, og en ny ring-knap får effekten uden at nogen skal
  huske at føje den til.
*/
a[href^="tel:"] svg {
	transform-origin: 55% 45%;
}

a[href^="tel:"]:hover svg,
a[href^="tel:"]:focus-visible svg {
	animation: rc-ringer .7s ease-in-out;
}

/* --- Kilometertælleren ---
   Tallet over gitteret sat som den slags mekaniske tæller, der sidder i
   halvdelen af det, der kommer forbi pladsen. Hver rulle har en mørk
   stribe hen over midten, så cifret ser ud til at bue som en cylinder. */

.rc-taeller {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: #0b1218;
	border: 1px solid rgba(0, 0, 0, .5);
	border-radius: 3px;
	box-shadow:
		inset 0 1px 3px rgba(0, 0, 0, .7),
		0 1px 0 rgba(255, 255, 255, .12);
	vertical-align: -.18em;
	line-height: 1;
}

.rc-taeller__ciffer {
	display: block;
	min-width: 1.05em;
	padding: .22em .16em;
	font-family: var(--rc-skrift-titel);
	font-size: 1.18em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	text-align: center;
	/* Rullen er mørk i begge tilstande, så cifret skal være lyst i
	   begge. Med --rc-papir blev det mørkt på mørkt (1,23:1). */
	color: var(--rc-lys-blaek);
	border-radius: 1px;

	/* Cylinderen: lys foroven og forneden, mørkest på midten, hvor
	   rullen "vender væk" fra en. */
	background: linear-gradient(
		180deg,
		#3a4d59 0%,
		#22323d 34%,
		#101b23 50%,
		#22323d 66%,
		#3a4d59 100%
	);
	text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}

/* Sidste rulle står og hakker, som var den lige ved at tælle op.

   Første forsøg flyttede den under en halv pixel. Det kunne ikke ses —
   en bevægelse, ingen opdager, er ingen bevægelse. Nu vipper cifret godt
   en pixel og falder tilbage, med et lille ryk som en tandhjulstand, der
   springer. Den står stille i tre af hvert fire sekunder; det er
   pausen, der gør rykket synligt. */
@keyframes rc-taeller-dirre {
	0%, 74%, 100% { transform: translateY(0); }
	78%           { transform: translateY(1.4px); }
	83%           { transform: translateY(-1.1px); }
	88%           { transform: translateY(.5px); }
	93%           { transform: translateY(-.2px); }
}

/*
  Rullen, når den er sat i gang af main.js.

  Cifret bliver en lodret strimmel, der skubbes op bag et vindue med
  `overflow: hidden`. Klassen sættes kun af scriptet — uden JavaScript
  står tallet, som serveren skrev det, og der er intet at skjule.
*/
.rc-taeller__ciffer.er-rullende {
	overflow: hidden;
	position: relative;
	padding-block: 0;
	height: 1.62em;
	line-height: 1.62em;
}

.rc-taeller__strimmel {
	display: block;
	transition: transform 1s cubic-bezier(.16, .84, .28, 1);
	will-change: transform;
}

.rc-taeller__strimmel span {
	display: block;
	height: 1.62em;
	line-height: 1.62em;
	text-align: center;
}

.rc-taeller__ciffer--sidste {
	animation: rc-taeller-dirre 4s cubic-bezier(.36, .07, .19, .97) infinite;
	/* Bunden af rullen er en anelse lysere, som om cifret sidder løsere
	   end de andre og hviler på kanten af det næste. */
	background: linear-gradient(
		180deg,
		#3a4d59 0%,
		#22323d 32%,
		#101b23 48%,
		#22323d 64%,
		#425866 100%
	);
}

@media (prefers-reduced-motion: reduce) {
	.rc-taeller__ciffer--sidste,
	.rc-stempel,
	a[href^="tel:"]:hover svg,
	a[href^="tel:"]:focus-visible svg {
		animation: none;
	}

	/* Stemplet skal stadig kunne ses — det er indhold, ikke pynt. */
	.rc-stempel { opacity: 1; transform: rotate(-8deg); }
}

/* --- Nålehuller og tegnestifter ---

   Hvert fjerde kort hænger i en tegnestift i stedet for tape. Otte ens
   tapestykker afslører, at det er et system; en enkelt stift antyder, at
   nogen har hængt tingene op i hånden.

   Nålehullet sidder på alle kort — også dem med tape, for tapen dækker
   jo et hul, der allerede var der. */

.rc-kort__naal {
	position: absolute;
	top: 5px;
	left: 50%;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	z-index: 1;
	border-radius: 50%;
	background: rgba(22, 35, 46, .32);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
	pointer-events: none;
}

/* Hvert fjerde kort får en stift i stedet for tape. */
.rc-kort--stift .rc-kort__tape { display: none; }

.rc-kort__stift {
	position: absolute;
	top: -7px;
	left: 50%;
	margin-left: -8px;
	width: 16px;
	height: 16px;
	z-index: 3;
	border-radius: 50%;
	pointer-events: none;
	background:
		radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .75) 0 2px, transparent 2.5px),
		radial-gradient(circle at 50% 50%, var(--rc-roed) 0 55%, var(--rc-roed-moerk) 56% 100%);
	box-shadow: 0 2px 4px rgba(11, 26, 36, .45);
}

/* Skiftende hældning, så de ikke sidder ens. */
.rc-kort:nth-child(4n) .rc-kort__stift { transform: translateY(1px) rotate(6deg); }
.rc-kort:nth-child(8n) .rc-kort__stift { transform: translateY(-1px) rotate(-8deg); }

/* --- Fedtede fingre ---

   To halvgennemsigtige oliefingre på tavlen. De ligger ALDRIG hen over
   et kort eller en tekst — kun i tavlens egne huller mellem gitteret og
   kanten. En plads, hvor folk har olie på hænderne, har også aftryk på
   opslagstavlen. */

.rc-tavle::after {
	content: '';
	position: absolute;
	z-index: -1;
	pointer-events: none;
	top: 1.4rem;
	right: 1.1rem;
	width: 74px;
	height: 96px;
	opacity: .13;
	background-image:
		radial-gradient(ellipse 30px 40px at 50% 42%, #2b1c10 0 42%, transparent 62%),
		radial-gradient(ellipse 13px 17px at 24% 82%, #2b1c10 0 45%, transparent 65%),
		radial-gradient(ellipse 12px 16px at 74% 86%, #2b1c10 0 45%, transparent 65%);
	transform: rotate(-13deg);
}

/* --- Kaffering ---

   Én ring, ét sted på hele sitet: nederst på kontaktsiden. Virker kun,
   fordi den er sjælden. To ringe er en tekstur; én ring er en historie. */

.rc-kaffering {
	position: relative;
}

/*
  Ringen er tegnet med gradienter, ikke med `border`.

  En border giver en perfekt, ensartet cirkel — og det er præcis dét, en
  kaffering ikke er. Her lægges tre lag oven på hinanden: en blød ydre
  rand, et kraftigere strøg i den ene side, hvor koppen har stået skævt,
  og et næsten usynligt slør indeni, hvor der er løbet lidt.

  Den går med vilje ud over kanten forneden. En plet, der lige akkurat er
  hel og centreret i et tomt felt, ser tegnet ud.
*/
.rc-kaffering::after {
	content: '';
	position: absolute;
	right: 6%;
	bottom: -2.2rem;
	width: 124px;
	height: 118px;
	pointer-events: none;
	border-radius: 50%;
	opacity: .5;
	background:
		/* det tunge strøg, hvor koppen har hvilet */
		radial-gradient(ellipse 62px 59px at 52% 54%,
			transparent 0 74%,
			rgba(104, 64, 30, .22) 78% 88%,
			transparent 93%),
		/* den bløde ydre rand */
		radial-gradient(ellipse 62px 59px at 50% 50%,
			transparent 0 78%,
			rgba(104, 64, 30, .1) 83% 96%,
			transparent 100%),
		/* en anelse indeni, hvor der er løbet lidt */
		radial-gradient(ellipse 40px 34px at 44% 60%,
			rgba(104, 64, 30, .045) 0 60%,
			transparent 78%);
	transform: rotate(-7deg);
}

/* --- "…men vi har det her" ---
   Vises kun, når en søgning eller et filter ikke gav noget. Overskriften
   er håndskrevet og skæv: det er en trøst, ikke en overskrift. */

.rc-alligevel {
	margin-top: 2.2rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--rc-kant);
}

.rc-alligevel__titel {
	margin: 0 0 1.2rem;
	font-family: var(--rc-skrift-haand);
	font-weight: 400;
	font-size: 1.28rem;
	color: var(--rc-roed);
}

.rc-alligevel__titel span {
	display: inline-block;
	transform: rotate(-1.6deg);
}

/* Tre kort skal ikke strække sig over hele bredden som tolv gør. */
.rc-gitter--faa {
	grid-template-columns: repeat(auto-fill, minmax(200px, 240px));
}

/* ==========================================================================
   404: bilen i grøften
   ========================================================================== */

.rc-groeft {
	padding-block: clamp(1.5rem, 5vw, 3rem) clamp(2rem, 6vw, 4rem);
}

.rc-groeft__tegning {
	max-width: 34rem;
	margin: 0 0 1.8rem;
}

/*
  Tegningen er en rigtig illustration i sin egen tegneserierude — ikke et
  ikon. Ruden har papirfarvet bund og sort ramme og bærer derfor sin egen
  baggrund: den samme fil virker på den lyse side OG i mørk tilstand,
  uden at der skal to udgaver til.
*/
.rc-groeft__tegning img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
	box-shadow: var(--rc-skygge-loeftet);
	/* Falder på plads som et stykke papir. Klassen findes ikke — det er
	   en ren indlæsningsanimation, og den ligger bag reduced-motion
	   nedenfor. */
	animation: rc-rude-lander .55s cubic-bezier(.2, .9, .3, 1.15) both;
}

@keyframes rc-rude-lander {
	from { opacity: 0; transform: translateY(-10px) rotate(-1.4deg); }
	to   { opacity: 1; transform: none; }
}

/*
  I mørk tilstand er ruden en lys flade på mørk bund. Den dæmpes en
  anelse, så den ikke skriger — men kun lidt: det er stadig den, siden
  handler om.
*/
.rc-moerk .rc-groeft__tegning img {
	filter: brightness(.88) saturate(.94);
}

@media (prefers-reduced-motion: reduce) {
	.rc-groeft__tegning img { animation: none; }
}

.rc-groeft__veje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem 1.2rem;
	margin-block: 1.2rem;
}

.rc-groeft__overrask {
	font-family: var(--rc-skrift-haand);
	font-size: 1.05rem;
	color: var(--rc-roed);
	text-decoration: none;
	transform: rotate(-1.4deg);
	display: inline-block;
	border-bottom: 2px solid transparent;
	transition: border-color .16s ease;
}

.rc-groeft__overrask:hover,
.rc-groeft__overrask:focus-visible {
	border-bottom-color: var(--rc-roed);
}

@media (prefers-reduced-motion: reduce) {
	/* Egerne og røgen hørte til den gamle SVG-bil og findes ikke mere. */
	.rc-groeft__overrask { transition: none; }
}

/* --- Cookieoversigten i privatlivspolitikken ---
   Fem kolonner er for meget til en telefon. Tabellen får derfor lov at
   rulle vandret inde i sin egen ramme — siden selv må aldrig kunne rulle
   sidelæns. */

.rc-cookietabel {
	overflow-x: auto;
	margin-block: 1.5rem;
	border: 1px solid var(--rc-kant);
	border-radius: 3px;
	background: var(--rc-papir);
}

.rc-cookietabel table {
	width: 100%;
	/* Lige smal nok til at passe i tekstkolonnen på en almindelig skærm.
	   Var den bredere, ville tabellen rulle sidelæns også dér, hvor der
	   var plads — og en afklippet kolonne ser ud som en fejl, ikke som
	   noget man skal trække i. */
	min-width: 37rem;
	border-collapse: collapse;
	font-size: .86rem;
}

.rc-cookietabel th,
.rc-cookietabel td {
	text-align: left;
	vertical-align: top;
	padding: .6rem .8rem;
	border-bottom: 1px solid var(--rc-kant);
}

.rc-cookietabel thead th {
	font-family: var(--rc-skrift-titel);
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rc-blaa-moerk);
	background: var(--rc-ben);
	border-bottom-width: 2px;
	white-space: nowrap;
}

.rc-cookietabel tbody tr:last-child td {
	border-bottom: 0;
}

.rc-cookietabel td code {
	font-size: .92em;
	white-space: nowrap;
	background: var(--rc-ben);
	padding: .1em .35em;
	border-radius: 2px;
	color: var(--rc-blaek);
}

/* Kategori og udløb er opslagsværdier, ikke læsestof. */
.rc-cookietabel td:nth-child(2),
.rc-cookietabel td:nth-child(5) {
	white-space: nowrap;
	color: var(--rc-daempet);
}

/* Formålet er det eneste, man faktisk læser — det får pladsen. */
.rc-cookietabel th:nth-child(3),
.rc-cookietabel td:nth-child(3) {
	width: 38%;
}

/* ==========================================================================
   Cookie-samtykke
   ==========================================================================

   Formen er den samme som på søsterprojektet Søborg Autoophug — samme
   bredde, samme runde hjørner, samme pilleformede knapper og samme
   kontakter. Kun farverne er vores egne: papir og blæk i stedet for
   mørkegrå, og rødt hvor Søborg har grønt.

   Boksen ligger midt på skærmen over et slør, der gør resten utilgængelig,
   indtil der er taget stilling. Et banner nede i hjørnet er nemt at klikke
   væk uden at læse; et samtykke, man giver for at slippe af med noget, er
   ikke rigtigt et samtykke.
   ========================================================================== */

.rc-samtykke__sloer {
	position: fixed;
	inset: 0;
	z-index: 89;
	background: rgba(11, 26, 36, .45);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.rc-samtykke__sloer.er-aaben { opacity: 1; pointer-events: auto; }
.rc-samtykke__sloer[hidden] { display: none; }

.rc-samtykke {
	position: fixed;
	z-index: 90;
	top: 50%;
	left: 50%;
	width: min(680px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: var(--rc-papir);
	color: var(--rc-blaek);
	border: 1px solid rgba(22, 35, 46, .14);
	border-radius: 16px;
	box-shadow: 0 18px 50px rgba(11, 26, 36, .45);
	transform: translate(-50%, -46%);
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;

	/* Boksen er en lys ø. Fokusringen skal derfor være rød og ikke okker —
	   samme fælde som kategoriknapperne i heroen, bare et andet sted. */
	--rc-fokus: var(--rc-roed);
}

.rc-samtykke.er-aaben { opacity: 1; transform: translate(-50%, -50%); }
.rc-samtykke[hidden] { display: none; }

.rc-samtykke__indre { padding: 22px 24px; }

.rc-samtykke__titel {
	margin: 0 0 6px;
	font-family: var(--rc-skrift-titel);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--rc-blaa-tekst);
}

.rc-samtykke__tekst {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--rc-blaek);
}

.rc-samtykke__tekst a {
	color: var(--rc-roed);
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* --- kategorierne --- */

.rc-samtykke__valg {
	margin: 16px 0 4px;
	border-top: 1px solid rgba(22, 35, 46, .14);
	padding-top: 8px;
}

.rc-samtykke__valg[hidden] { display: none; }

.rc-samtykke__linje {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(22, 35, 46, .09);
	cursor: pointer;
}

.rc-samtykke__linje:last-child { border-bottom: 0; }

.rc-samtykke__info { flex: 1; }

.rc-samtykke__navn {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--rc-blaek);
}

.rc-samtykke__hjaelp {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--rc-daempet);
}

/* Afkrydsningsfeltet er der stadig — det er kun gemt for øjet, så
   tastatur og skærmlæsere har noget rigtigt at arbejde med. */
.rc-samtykke__linje input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.rc-samtykke__switch {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 26px;
	border-radius: 999px;
	background: #b3ada1;
	transition: background .2s ease;
}

.rc-samtykke__switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--rc-papir);
	box-shadow: 0 1px 2px rgba(11, 26, 36, .3);
	transition: transform .2s ease;
}

.rc-samtykke__linje input:checked ~ .rc-samtykke__switch { background: var(--rc-roed-flade); }
.rc-samtykke__linje input:checked ~ .rc-samtykke__switch::after { transform: translateX(18px); }

/* Kontakten er det eneste synlige, når feltet har fokus — så den skal
   selv vise det. Uden dette kan en tastaturbruger ikke se, hvor de er. */
.rc-samtykke__linje input:focus-visible ~ .rc-samtykke__switch {
	outline: 3px solid var(--rc-roed);
	outline-offset: 2px;
}

.rc-samtykke__linje--laast { cursor: default; }
.rc-samtykke__linje--laast .rc-samtykke__switch { background: var(--rc-roed-moerk); }

/* --- knapperne --- */

.rc-samtykke__knapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
}

.rc-samtykke__knap {
	appearance: none;
	border: 0;
	cursor: pointer;
	font-family: var(--rc-skrift-titel);
	font-weight: 700;
	font-size: 14px;
	border-radius: 999px;
	padding: 12px 22px;
	transition: background .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
}

.rc-samtykke__knap--ja,
.rc-samtykke__knap--gem {
	color: var(--rc-hvid);
	background: linear-gradient(135deg, var(--rc-roed-flade) 0%, var(--rc-roed-moerk) 100%);
}

.rc-samtykke__knap--ja { margin-left: auto; }

.rc-samtykke__knap--ja:hover,
.rc-samtykke__knap--gem:hover { filter: brightness(1.07); }

.rc-samtykke__knap--gem[hidden] { display: none; }

.rc-samtykke__knap--afvis {
	background: transparent;
	color: var(--rc-blaek);
	border: 1px solid rgba(22, 35, 46, .32);
}

.rc-samtykke__knap--afvis:hover { border-color: currentColor; }

.rc-samtykke__knap--tekst {
	background: transparent;
	color: var(--rc-blaek);
	opacity: .8;
	padding-inline: 6px;
	text-decoration: underline;
	text-underline-offset: .18em;
}

.rc-samtykke__knap--tekst:hover { opacity: 1; }
.rc-samtykke__knap--tekst[hidden] { display: none; }

/* Genåbningslinket i sidefoden. */
.rc-samtykke__genaabn { color: inherit; }

@media (max-width: 520px) {
	.rc-samtykke { width: calc(100vw - 20px); }
	.rc-samtykke__indre { padding: 18px; }
	.rc-samtykke__knapper { gap: 8px; }

	/* Knapperne får hele bredden at dele, og den primære lægger sig øverst
	   — så er den inden for tommelfingerens rækkevidde og ikke gemt bag
	   en linjeombrydning. */
	.rc-samtykke__knap { flex: 1 1 auto; text-align: center; padding: 12px 14px; }
	.rc-samtykke__knap--ja { margin-left: 0; order: -1; flex-basis: 100%; }
	.rc-samtykke__knap--tekst { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.rc-samtykke,
	.rc-samtykke__sloer,
	.rc-samtykke__switch,
	.rc-samtykke__switch::after {
		transition: none;
	}
}

/* ==========================================================================
   Etape 4 — luppen, forslagene, kvitteringsstemplet og tuschstregen
   ========================================================================== */

/* --- 22: Luppen på annoncebilledet ---

   Et forstørret udsnit, der følger musen. Oprettes og styres af main.js
   og findes kun på enheder med mus eller pegepen. Ingen overgange: den
   flytter sig kun, når hånden gør, og hører derfor ikke under
   bevægelses-indstillingen. pointer-events: none, så klikket til den
   store forstørrelse går lige igennem den. */

.rc-naerlup {
	position: absolute;
	z-index: 3;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	border: 3px solid var(--rc-papir);
	box-shadow: 0 4px 14px rgba(22, 35, 46, .45), inset 0 0 0 1px rgba(22, 35, 46, .25);
	background-repeat: no-repeat;
	background-color: var(--rc-papir);
	pointer-events: none;
}

/* --- 26: Forslagene på den tomme, filtrerede liste --- */

.rc-tomt__men {
	font-weight: 600;
	color: var(--rc-blaek);
}

.rc-tomt__forslag {
	list-style: none;
	margin: .3rem 0 1.2rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .55rem;
}

.rc-tomt__forslag a {
	display: inline-block;
	padding: .5rem 1rem;
	border: 2px solid var(--rc-blaa);
	border-radius: 3px;
	color: var(--rc-blaa-moerk);
	font-weight: 600;
	text-decoration: none;
	background: var(--rc-papir);
}

.rc-tomt__forslag a:hover,
.rc-tomt__forslag a:focus-visible {
	background: var(--rc-blaa);
	color: var(--rc-lys-blaek);
}

/* --- 28: Kvitteringen stemples MODTAGET ---

   Samme slag som "Solgt" (rc-stempel-slag ender på -8 grader), bare i
   emaljeblå og oppe i kvitteringens hjørne. aria-hidden i markup'et:
   beskeden står i overskriften, stemplet er glasuren. */

.rc-bud--kvittering {
	position: relative;
	/* Luft til stemplet, så det ikke lander oven i overskriften. */
	padding-top: 2.4rem;
}

.rc-stempel--modtaget {
	top: .4rem;
	left: auto;
	right: .6rem;
	background: var(--rc-blaa);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 2px 6px rgba(36, 30, 24, .3);
}

/* --- 15: Tuschstregen under sektionsskiltene ---

   En håndtegnet streg under emaljeskiltet, som tegnes fra venstre mod
   højre, når overskriften kommer til syne. Grundtilstanden er en FÆRDIG
   streg — klasserne .rc-tegner (skjult) og .er-tegnet (tegn den) sættes
   kun af main.js, præcis som .rc-glider. Uden JavaScript, eller med
   bevægelse slået fra, står stregen bare stille fra start. */

.rc-sektionstitel .rc-skilt {
	position: relative;
}

.rc-sektionstitel .rc-skilt::after {
	content: "";
	position: absolute;
	left: .5rem;
	right: 1.1rem;
	bottom: -.7rem;
	height: 7px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2C32 2.4 63 6.8 94 4.6c31-2.2 62 2.6 93-.8 22-2.4 40 1.4 51 1.8' fill='none' stroke='%23c1372c' stroke-width='2.7' stroke-linecap='round' opacity='.9'/%3E%3Cpath d='M6 6.6c40-2 90 1.6 130-1' fill='none' stroke='%23c1372c' stroke-width='1.3' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	transform: rotate(-.35deg);
	pointer-events: none;
}

.rc-sektionstitel.rc-tegner .rc-skilt::after {
	clip-path: inset(-40% 100% -40% 0);
}

.rc-sektionstitel.rc-tegner.er-tegnet .rc-skilt::after {
	clip-path: inset(-40% 0 -40% 0);
	transition: clip-path .55s ease-out .12s;
}

@media (prefers-reduced-motion: reduce) {
	/* Bagstopper til JS-vagten: stregen står altid færdig. */
	.rc-sektionstitel.rc-tegner .rc-skilt::after {
		clip-path: inset(-40% 0 -40% 0);
		transition: none;
	}
}

/* ==========================================================================
   Etape 5 — tapefiltrene, heroens slag, prisen der skrives og sidst set
   ========================================================================== */

/* --- 30: Aktive filtre som tapestykker, der kan rives af ---

   Rene links, tegnet af serveren — de virker uden JavaScript, og
   main.js lægger kun selve rivet ovenpå. Samme revnede kanter som
   kortenes tape, bare i en lille udgave. */

.rc-tapefiltre {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .45rem .55rem;
}

.rc-tapefiltre__stykke {
	margin: 0;
}

.rc-tapefilter {
	display: inline-flex;
	align-items: baseline;
	gap: .45rem;
	padding: .34rem .8rem .38rem;
	background: var(--rc-tape);
	color: var(--rc-tape-blaek);
	font-family: var(--rc-skrift-haand);
	font-size: .82rem;
	line-height: 1.1;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(20, 40, 50, .18);
	transform: rotate(-1.1deg);
	clip-path: polygon(
		2% 6%,   16% 0,    31% 5%,   47% 1%,   62% 6%,
		78% 1%,  91% 5%,   100% 8%,
		98% 94%, 84% 100%, 69% 95%,  53% 100%, 37% 94%,
		22% 99%, 8% 95%,   0 92%
	);
}

.rc-tapefiltre__stykke:nth-child(2n) .rc-tapefilter {
	transform: rotate(1.3deg);
}

.rc-tapefilter:hover,
.rc-tapefilter:focus-visible {
	background: #efe6cd;
	transform: rotate(0deg);
}

.rc-tapefilter__kryds {
	font-family: var(--rc-skrift-brod);
	font-weight: 700;
	opacity: .55;
}

.rc-tapefilter:hover .rc-tapefilter__kryds,
.rc-tapefilter:focus-visible .rc-tapefilter__kryds {
	opacity: 1;
	color: var(--rc-roed);
}

.rc-tapefilter--ryd {
	background: none;
	box-shadow: none;
	clip-path: none;
	font-family: var(--rc-skrift-brod);
	font-weight: 600;
	color: var(--rc-daempet-tavle);
	text-decoration: underline;
	transform: none;
}

/* Rivet: op i hjørnet og væk — klassen sættes kun af main.js, og kun
   når bevægelse er tilladt. */
@keyframes rc-riv-af {
	30%  { transform: rotate(4deg) translate(2px, -3px); }
	100% { transform: rotate(14deg) translate(18px, 26px); opacity: 0; }
}

.rc-tapefilter.rives-af {
	animation: rc-riv-af .26s ease-in both;
	transform-origin: 15% 85%;
}

/* --- 10: Overskriften slår sine fire slag ---

   Spanene og klasserne herunder findes kun, når main.js har delt
   teksten op — uden JavaScript, med bevægelse slået fra eller ved
   andet besøg i fanen står overskriften urørt i HTML'en. */

.rc-hero__titel .rc-slag {
	display: inline-block;
	opacity: 0;
	transform: translateY(.22em) rotate(-1.4deg);
}

.rc-hero__titel .rc-slag.er-slaaet {
	opacity: 1;
	transform: none;
	transition:
		opacity .2s ease,
		transform .3s cubic-bezier(.2, .9, .3, 1.18);
}

/* --- 23: Prisen skrives ---

   Én hurtig afsløring fra venstre — bagefter står prisen bomstille,
   som fakta skal. .rc-skrives sættes af main.js, aldrig af skabelonen,
   så prisen altid står færdig uden script. Overmålet (-6 %) er til de
   skæve håndskrevne tegn, der rager ud over tekstboksen. */

.rc-annonce__pris.rc-skrives {
	clip-path: inset(-12% 100% -12% -2%);
}

.rc-annonce__pris.rc-skrives.er-skrevet {
	clip-path: inset(-12% -6% -12% -2%);
	transition: clip-path .5s ease-out .12s;
}

/* --- 18: Sidst set — en stak sedler ---

   Bygges af main.js ud fra browserens eget lager. Ingen server, ingen
   cookies — og derfor findes afsnittet slet ikke uden JavaScript. */

.rc-sidstset {
	margin-top: 2.6rem;
}

.rc-sidstset__stak {
	list-style: none;
	margin: 0;
	padding: .3rem 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .9rem 1rem;
}

.rc-sidstset__seddel {
	margin: 0;
	width: 154px;
	background: var(--rc-papir);
	border: 1px solid var(--rc-kant);
	box-shadow: 0 2px 5px rgba(20, 40, 50, .14);
	transform: rotate(-1.4deg);
}

.rc-sidstset__seddel:nth-child(2n) {
	transform: rotate(1.1deg);
	margin-top: .4rem;
}

.rc-sidstset__seddel:nth-child(3n) {
	transform: rotate(-.5deg);
}

.rc-sidstset__seddel a {
	display: block;
	padding: .5rem .55rem .6rem;
	color: var(--rc-blaek);
	text-decoration: none;
}

.rc-sidstset__seddel img {
	display: block;
	width: 100%;
	height: 92px;
	object-fit: cover;
	border: 1px solid var(--rc-kant);
	margin-bottom: .45rem;
}

.rc-sidstset__titel {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.25;
}

.rc-sidstset__pris {
	display: block;
	margin-top: .2rem;
	font-family: var(--rc-skrift-haand);
	font-size: .88rem;
	color: var(--rc-roed);
}

.rc-sidstset__seddel:hover,
.rc-sidstset__seddel:focus-within {
	transform: rotate(0deg) translateY(-3px);
	transition: transform .16s ease;
}

@media (prefers-reduced-motion: reduce) {
	/* Bagstoppere til JS-vagterne: alt står stille og fremme. */
	.rc-tapefilter.rives-af { animation: none; }
	.rc-hero__titel .rc-slag { opacity: 1; transform: none; transition: none; }
	.rc-annonce__pris.rc-skrives { clip-path: none; transition: none; }
	.rc-sidstset__seddel:hover,
	.rc-sidstset__seddel:focus-within { transition: none; }
}

/* ==========================================================================
   Etape 6 — støvet, lampen, notaterne og smugkigget
   ========================================================================== */

/* --- 09: Støv i lyset ---

   Canvas, oprettet af main.js som heroens første barn — samme z-lag som
   indholdet, men tegnet før det, så kornene ligger over sløret og under
   teksten. Uden JavaScript findes det slet ikke. */

.rc-hero__stoev {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* --- 11: Værkstedslampen ---

   Hænger fra heroens overkant i højre side, hvor ingen tekst står, og
   gynger ganske langsomt om sit ophæng. Lyskeglen følger med, fordi den
   sidder i samme element. Skjult på smalle skærme, hvor teksten bruger
   hele bredden. */

.rc-lampe {
	position: absolute;
	/*
	  Ledningen fortsætter op bag sidehovedet.
	  
	  Elementet begynder 150 px OVER heroens overkant, og heroens
	  `overflow: hidden` klipper det, der stikker op — så ledningen ser
	  ud til at forsvinde op bag menulinjen. Selve tegningen har kun den
	  nederste tredjedel af ledningen; resten tegnes af ::before.
	  
	  Pointen er ikke pynt: ophængspunktet flytter med op, og et pendul
	  med dobbelt så lang snor svinger langsommere. Se farten nedenfor.
	*/
	top: -150px;
	right: 7%;
	z-index: 2;
	width: 117px;
	pointer-events: none;
	color: #10202b;
	transform-origin: 50% 0;
	/*
	  Farten er regnet, ikke gættet: T = 2π√(L/g).
	  
	  Ledningen blev fordoblet 24. august, og svingningstiden vokser med
	  KVADRATRODEN af længden — ikke med længden. Dobbelt så lang snor
	  giver altså √2 ≈ 41 % langsommere, ikke dobbelt. Fra 1,4 til 2,8
	  meter: T går fra 2,4 til 3,4 s, og med `alternate` er varigheden
	  det halve — 1,7 s.
	  
	  ease-in-out svarer til pendulets egen bevægelse: hurtigst nederst,
	  langsomst i vendingerne.
	*/
	animation: rc-lampe-sving 1.7s ease-in-out infinite alternate;
}

/*
  Tegningen afløste en stregtegnet SVG 24. august 2026. Bredden følger
  af filens eget forhold (351 × 450); højden er sat, og bredden regnes
  ud, så ophængspunktet bliver ved med at sidde midt i elementet.

  De to tilstande ligger oven på hinanden og krydsfader. Den slukkede
  ligger i strømmen og bestemmer elementets størrelse; den tændte ligger
  absolut ovenpå. Begge er hentet på forhånd, så skiftet ikke blinker.
*/
/*
  Ledningens forlængelse op mod ophængspunktet. Farven er aflæst i
  tegningens egen ledning (rgb(31,28,23)), og bredden svarer til dens 9
  af 351 punkter ved den viste bredde — ellers ville samlingen kunne ses.
*/
.rc-lampe::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 3px;
	height: 152px;
	margin-left: -1.5px;
	background: rgb(31, 28, 23);
}

.rc-lampe__tegning {
	display: block;
	/* Skubbes ned under den tegnede ledningsforlængelse. */
	margin-top: 150px;
	width: auto;
	height: 150px;
	transition: opacity .35s ease;
}

.rc-lampe__tegning--taendt {
	position: absolute;
	top: 150px;
	left: 0;
	margin-top: 0;
}

/*
  Lys tilstand: lampen hænger slukket, og der er ingen lyskegle. Man
  tænder ikke en lampe, mens det er lyst — og en kegle på en lys flade
  ville alligevel ikke kunne ses.
*/
.rc-lampe__tegning--taendt { opacity: 0; }
.rc-lampe__lys { opacity: 0; transition: opacity .35s ease; }

/* Mørk tilstand: lyset er tændt, og keglen falder ned over fotoet. */
.rc-moerk .rc-lampe__tegning--slukket { opacity: 0; }
.rc-moerk .rc-lampe__tegning--taendt { opacity: 1; }
.rc-moerk .rc-lampe__lys { opacity: 1; }

/* Keglen: et blødt, varmt lys ned over fotoet. screen-blandingen gør den
   til lys frem for maling. */
.rc-lampe__lys {
	position: absolute;
	/* Skærmens underkant: 138 px inde i tegningen, som nu selv begynder
	   150 px nede. Flyttes lampen eller ledningens længde, skal keglen
	   følge med, ellers hænger lyset i luften. */
	top: 288px;
	left: 50%;
	width: 300px;
	height: 340px;
	margin-left: -150px;
	background: radial-gradient(ellipse 46% 50% at 50% 12%, rgba(244, 201, 94, .34), rgba(244, 201, 94, .1) 55%, transparent 75%);
	clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
	mix-blend-mode: screen;
	pointer-events: none;
}

/*
   Vinklen faldt, da ledningen blev fordoblet — og det er også fysik.
   Et langt pendul, der får det samme skub, svinger med en MINDRE
   vinkel; det er den vandrette vandring, der er ens, ikke graderne.
   Skærmen sidder nu 288 px fra ophængspunktet mod 138 før, så ±2,5
   grader flytter den lige så langt, som ±5 gjorde. Beholdt man de 5,
   ville lampen slå ud dobbelt så langt og se forpustet ud. */
@keyframes rc-lampe-sving {
	from { transform: rotate(2.5deg); }
	to   { transform: rotate(-2.5deg); }
}

@media (max-width: 900px) {
	.rc-lampe { display: none; }
}

/* --- 14: Håndtegnede notater med pile --- */

.rc-hero__notat {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-left: .3rem;
	font-family: var(--rc-skrift-haand);
	font-size: .95rem;
	color: var(--rc-gul);
	/* Notatet sidder i højde med knappen, ikke over den — pilen skal
	   pege på terningen, ikke på luften over den. */
	transform: rotate(-2deg);
	pointer-events: none;
}

.rc-hero__notatpil {
	width: 34px;
	height: 24px;
	flex: none;
}

@media (max-width: 700px) {
	.rc-hero__notat { display: none; }
}

.rc-annonce__notat {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: .35rem;
	margin: .9rem 0 -.4rem;
	font-family: var(--rc-skrift-haand);
	font-size: .92rem;
	color: var(--rc-roed);
	transform: rotate(-1.6deg);
	pointer-events: none;
}

.rc-annonce__notatpil {
	width: 22px;
	height: 26px;
	flex: none;
	margin-top: .35rem;
}

/* --- 20: Smugkigget på kategoriknapperne ---

   Et foto fra kategorien, der folder sig ud bag knappen som et polaroid.
   Kun for mus og pegepen — på touch er der intet hover, og fotoet bliver
   pænt liggende bag knappen. */

.rc-kategoriknap {
	position: relative;
}

.rc-kategoriknap__kig {
	position: absolute;
	left: 50%;
	bottom: calc(100% - 10px);
	z-index: 3;
	width: 132px;
	margin-left: -66px;
	padding: 5px 5px 8px;
	background: var(--rc-papir);
	box-shadow: 0 4px 12px rgba(11, 26, 36, .4);
	opacity: 0;
	transform: translateY(12px) rotate(-4deg) scale(.82);
	transform-origin: 50% 100%;
	pointer-events: none;
}

.rc-kategoriknap__kig img {
	display: block;
	width: 100%;
	height: 84px;
	object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
	.rc-kategoriknap__kig {
		transition: opacity .18s ease .06s, transform .22s cubic-bezier(.2, .9, .3, 1.15) .06s;
	}

	.rc-kategoriknap:hover .rc-kategoriknap__kig,
	.rc-kategoriknap:focus-visible .rc-kategoriknap__kig {
		opacity: 1;
		transform: translateY(0) rotate(-2.4deg) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rc-lampe { animation: none; transform: rotate(1deg); }
	/* Skiftet mellem tændt og slukket sker uden overgang — tilstanden
	   ændrer sig stadig, den fader bare ikke. */
	.rc-lampe__tegning,
	.rc-lampe__lys { transition: none; }
	.rc-hero__stoev { display: none; }
	.rc-kategoriknap__kig { transition: none; }
}

/* ==========================================================================
   29 — Mørk tilstand: garagen efter lukketid

   Fem klik på skiltet tænder og slukker lyset. Valget bor i browserens
   eget lager, ikke i en cookie, og sættes allerede i <head>
   (rc_moerk_bootstrap), så siden aldrig blinker hvid først.

   Hele temaet er bygget på tokens, så det er dem, der byttes — ikke
   reglerne. ALLE tretten kombinationer er målt mod WCAG før de blev
   sat: brødtekst 12,02:1, dæmpet 6,93:1, prisen 5,24:1, gul på blå
   4,69:1, hvid på rød knap 5,45:1. Ændres en farve, skal de måles igen.
   ========================================================================== */

.rc-moerk {
	color-scheme: dark;

	/* Flader — mørke, men ikke sorte: en garage er grå, ikke tom. */
	--rc-ben: #111a21;
	--rc-papir: #1b262f;
	--rc-tavle: #151f27;
	--rc-tavle-moerk: #101920;

	/* Blæk — lyst på mørkt. --rc-lys-blaek røres IKKE: sidehoved,
	   sidefod og emaljeskilte er mørkeblå i begge tilstande, så deres
	   tekst skal blive ved med at være lys. */
	--rc-blaa-tekst: #8fc0dd;
	--rc-blaek: #e8e3d8;
	--rc-daempet: #a2b0ba;
	--rc-daempet-tavle: #9dabb5;
	--rc-kant: #2e3d48;

	/* Rød skal lysne: den mørke rust forsvandt i den mørke bund.
	   #e4776a giver 5,24:1 mod papiret, #c1372c kun 1,9. */
	--rc-roed: #e4776a;
	--rc-roed-moerk: #c1372c;
	/* Fladen holder den mørke rød: hvidt blæk på den giver 5,45:1,
	   på den lyse kun 2,94:1. */
	--rc-roed-flade: #c1372c;

	/* Tapen bliver mat og mørk, håndskriften lys. */
	--rc-tape: #4a4436;
	--rc-tape-blaek: #ded3b8;

	/* Skygger dur ikke på mørk bund — de bliver til huller. Erstattes
	   af et svagt lys udefra, som når noget står under en lampe. */
	--rc-skygge: 0 1px 2px rgba(0, 0, 0, .5), 0 3px 8px rgba(0, 0, 0, .35);
	--rc-skygge-loeftet: 0 2px 4px rgba(0, 0, 0, .55), 0 8px 20px rgba(0, 0, 0, .45);
	--rc-skygge-tavle: 3px 5px 14px rgba(0, 0, 0, .6);
}

/* Fotos og kort dæmpes en anelse, så de ikke skriger på mørk bund.
   Ikke på galleriets store billede — dét skal man kunne se rusten på. */
.rc-moerk .rc-kort__billede img,
.rc-moerk .rc-sidstset__seddel img {
	filter: brightness(.9) saturate(.95);
}

/* Papirfibrene skal LYSNE på mørkt papir, ikke mørkne — multiply på en
   mørk flade gør bare kortet til en sort firkant. */
.rc-moerk .rc-kort::before,
.rc-moerk .rc-tavle::before {
	mix-blend-mode: soft-light;
	opacity: .5;
}

/* Lampen kan klikkes — men kun med mus. Den er aria-hidden og hører
   ikke til i tastaturrækkefølgen; sidefodens knap er vejen for alle
   andre.

   ⚠︎ `z-index: 3` er ikke pynt. Lampen og heroens `.rc-indhold` havde
   begge z-index 2, og indholdet kommer senere i koden — altså lå det
   ovenpå og opslugte klikket. Kun det stykke ledning, der stak op OVER
   indholdsboksen, kunne rammes, og det er præcis, hvad man mærkede:
   "den er kun klikbar på ledningen". Samme slags fælde som prisen på
   annoncekortet. */
.rc-lampe--klikbar {
	pointer-events: auto;
	cursor: pointer;
	z-index: 3;
}

/* Sidefodens lyskontakt — samme udseende som de øvrige links dernede,
   så den ikke råber op. Skrives af main.js. */
.rc-lysknap {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.rc-lysknap:hover,
.rc-lysknap:focus-visible {
	color: var(--rc-gul);
}

/* Beskeden, når lyset slukkes eller tændes. */
.rc-lyskontakt {
	position: fixed;
	left: 50%;
	bottom: 1.6rem;
	z-index: 60;
	transform: translateX(-50%);
	margin: 0;
	padding: .7rem 1.2rem;
	max-width: min(92vw, 34rem);
	text-align: center;
	background: var(--rc-blaa-moerk);
	color: var(--rc-lys-blaek);
	border-left: 3px solid var(--rc-gul);
	border-radius: var(--rc-radius-lille);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
	font-size: .92rem;
}

.rc-lyskontakt.forsvinder {
	opacity: 0;
	transition: opacity .7s ease;
}

@media (prefers-reduced-motion: reduce) {
	.rc-lyskontakt.forsvinder { transition: none; }
}

/* ==========================================================================
   Kategoriikonerne — masker, ikke billeder (24. august 2026)

   Ikonerne er tegnet uden for temaet og ligger som PNG i assets/ikoner/.
   De vises som MASKE: filen bestemmer formen, CSS maler farven igennem
   den. Derfor virker `color` på dem præcis som på de gamle SVG'er — rød
   på papir, cremet på blåt, lyst i mørk tilstand. Et almindeligt <img>
   ville have haft én fast farve og set forkert ud de fleste steder.

   ⚠︎ TO UDGAVER PR. IKON, og det er ikke pynt.
   Tegningens streg er 1,6 % af bredden. Ved 22 px bliver det 0,34 px —
   under én pixel, altså usynligt. `-lille.png` er den samme tegning med
   stregen fortykket, så den overlever de små visninger. Skift ikke
   størrelsesgrænserne uden at kigge på resultatet ved 22 px.
   ========================================================================== */

.rc-kategoriikon,
.rc-kort__ikon,
.rc-galleri__ikon,
.rc-kategoriknap__ikon > span,
.rc-bjaelke__ikon > span {
	display: inline-block;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Store visninger: kortet uden billede og galleriet uden billede. Her
   er der plads til den fine streg. */
.rc-kort__ikon {
	-webkit-mask-image: var(--rc-ikon);
	mask-image: var(--rc-ikon);
}

.rc-galleri__ikon {
	-webkit-mask-image: var(--rc-ikon);
	mask-image: var(--rc-ikon);
}

/* Små visninger: sidebjælken (22), forsidens knapper (26) og
   redigeringsskærmen (30). Den fortykkede udgave. */
.rc-kategoriikon {
	width: 22px;
	height: 22px;
	-webkit-mask-image: var(--rc-ikon-lille);
	mask-image: var(--rc-ikon-lille);
}

.rc-kategoriknap__ikon .rc-kategoriikon {
	width: 26px;
	height: 26px;
}

/*
  ⚠︎ "Alt vores crap" er en STREGTEGNING og må IKKE have .rc-kategoriikon.

  Den klasse er ikke længere en SVG-klasse, men en maske-klasse: den
  sætter `background-color: currentColor` og maler farven gennem et
  PNG i `mask-image`. På et <span> giver det ikonet. På et <svg> er der
  ingen maske at male igennem, så hele kassen bliver fyldt — det stod
  som en massiv klods i listen, første gang det blev prøvet.

  Den gamle SVG-regel højere oppe i filen (fill: none) taber til
  maske-reglen: samme specificitet, og den her står senere.

  Derfor sin egen klasse med samme mål som de små masker (22 px), så
  rækken står på linje med de otte kategorier.
*/
.rc-bjaelke__altikon {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Kategoriernes filstier. ⚠︎ Administrationen indlæser ikke den her
   fil — samme liste (kun -lille) står også i admin.css, og en ny
   kategori skal ind BEGGE steder. */
.rc-ikon--veterankoeretoejer-youngtimers {
	--rc-ikon: url(../ikoner/veterankoeretoejer-youngtimers.png);
	--rc-ikon-lille: url(../ikoner/veterankoeretoejer-youngtimers-lille.png);
}

.rc-ikon--hverdagsbiler {
	--rc-ikon: url(../ikoner/hverdagsbiler.png);
	--rc-ikon-lille: url(../ikoner/hverdagsbiler-lille.png);
}

.rc-ikon--knallerter-motorcykler {
	--rc-ikon: url(../ikoner/knallerter-motorcykler.png);
	--rc-ikon-lille: url(../ikoner/knallerter-motorcykler-lille.png);
}

.rc-ikon--skilte {
	--rc-ikon: url(../ikoner/skilte.png);
	--rc-ikon-lille: url(../ikoner/skilte-lille.png);
}

.rc-ikon--retro {
	--rc-ikon: url(../ikoner/retro.png);
	--rc-ikon-lille: url(../ikoner/retro-lille.png);
}

.rc-ikon--legetoej-toys {
	--rc-ikon: url(../ikoner/legetoej-toys.png);
	--rc-ikon-lille: url(../ikoner/legetoej-toys-lille.png);
}

.rc-ikon--elektronik-musik {
	--rc-ikon: url(../ikoner/elektronik-musik.png);
	--rc-ikon-lille: url(../ikoner/elektronik-musik-lille.png);
}

.rc-ikon--krimskrams {
	--rc-ikon: url(../ikoner/krimskrams.png);
	--rc-ikon-lille: url(../ikoner/krimskrams-lille.png);
}

.rc-ikon--klassiske-motorer-reservedele {
	--rc-ikon: url(../ikoner/klassiske-motorer-reservedele.png);
	--rc-ikon-lille: url(../ikoner/klassiske-motorer-reservedele-lille.png);
}

/*
  ⚠︎ Nødplanen for en UKENDT kategori er et <svg>, og masken må ikke
  male det. rc_kategoriikon() falder tilbage til kassetegningen, når et
  slug ikke har noget PNG-ikon endnu — men klasserne herover sætter
  `background-color: currentColor`, og uden maske fyldes hele kassen
  (samme fælde som "alt"-ikonet). Da Tina oprettede "Klassiske
  motorer/reservedele" (september 2026), stod der en massiv rød klods i
  bjælken og på forsideknappen, og stregen ovenpå tegnedes i samme
  farve. Reglen her trækker baggrunden af igen, netop når elementet er
  et SVG — så står kassetegningen der, til det rigtige ikon er skåret.
*/
svg.rc-kategoriikon,
svg.rc-kort__ikon,
svg.rc-galleri__ikon {
	background-color: transparent;
	-webkit-mask-image: none;
	mask-image: none;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Kan browseren ikke maske, ville den male en solid firkant. Så hellere
   ingenting — resten af kortet siger stadig, hvad tingen er. Kun de
   maskebårne <span> skjules; nødplanens <svg> klarer sig uden maske. */
@supports not ((-webkit-mask-image: url(x.png)) or (mask-image: url(x.png))) {
	span.rc-kategoriikon,
	span.rc-kort__ikon,
	span.rc-galleri__ikon {
		display: none;
	}
}

/* ==========================================================================
   Bud-formularen folder sig ud (24. august 2026)

   Knappen åbnede en <details>, og felterne stod der bare pludselig. Nu
   falder de på plads ét ad gangen, formularen får et kort strejf af
   farve, og send-knappen giver ét nik. Så er det tydeligt, at man er
   gået fra at læse til at skrive.

   Klasserne sættes KUN af main.js. Uden JavaScript folder <details>
   stadig ud af sig selv — bare uden optrin.
   ========================================================================== */

/* Formularen slås ned på bordet: et lille ryk, en anelse skævt, og et
   strejf af rød der løber ud. Kortere end det lyder — 0,9 sekund. */
.rc-bud__formular.rc-bud--aabner {
	animation: rc-bud-slag .9s cubic-bezier(.18, .9, .3, 1.2) both;
}

@keyframes rc-bud-slag {
	0% {
		transform: scale(.965) rotate(-.7deg);
		box-shadow: 0 0 0 0 rgba(193, 55, 44, .5);
		background: rgba(193, 55, 44, .1);
	}
	45% {
		transform: scale(1.008) rotate(.25deg);
		box-shadow: 0 0 0 9px rgba(193, 55, 44, .14);
		background: rgba(193, 55, 44, .07);
	}
	70% { transform: scale(.998) rotate(-.1deg); }
	100% {
		transform: none;
		box-shadow: 0 0 0 0 rgba(193, 55, 44, 0);
		background: transparent;
	}
}

/*
  Felterne deles ud som sedler: skiftevis fra venstre og højre, skævt
  ind og rettet op — samme bevægelse som annoncekortene på tavlen.
  `--rc-side` sættes af main.js til -1 eller 1.
*/
.rc-bud--aabner .rc-bud__felt,
.rc-bud--aabner .rc-bud__par,
.rc-bud--aabner .rc-bud__hjaelp,
.rc-bud--aabner .rc-bud__knap {
	animation: rc-bud-seddel .42s cubic-bezier(.2, 1.15, .35, 1) both;
}

@keyframes rc-bud-seddel {
	from {
		opacity: 0;
		transform:
			translateX(calc(var(--rc-side, -1) * 26px))
			translateY(10px)
			rotate(calc(var(--rc-side, -1) * -2.2deg));
	}
	60% {
		opacity: 1;
		transform: translateX(0) translateY(-2px) rotate(calc(var(--rc-side, -1) * .5deg));
	}
	to { opacity: 1; transform: none; }
}

/*
  Send-knappen bliver STEMPLET på til sidst — samme slag som "Solgt" på
  et kort, fordi det er samme slags øjeblik: her sker der noget.
  Derefter to ringe, der løber ud og stopper. To, ikke uendeligt: en
  knap, der bliver ved med at pulse, holder op med at betyde noget.
*/
.rc-bud--aabner button[type="submit"] {
	animation:
		rc-bud-stempel .55s cubic-bezier(.2, .9, .3, 1.35) .62s both,
		rc-bud-ring 1.1s ease-out 1.1s 2 both;
}

/*
  Slaget er LODRET, ikke en opskalering.

  Send-knappen er fuldbred (386 px i sidebjælken). Et stempel, der
  starter på 145 %, ville stikke 173 px ud over formularen og hen over
  siden — målt. En bred flade stemples ned ovenfra; den vokser ikke.
  Rotationen er tilsvarende lille: 7 grader på noget så bredt fejer
  urimeligt meget.
*/
@keyframes rc-bud-stempel {
	0%   { transform: translateY(-16px) scale(1.02) rotate(-1.1deg); opacity: .2; }
	55%  { transform: translateY(4px) scale(1.03) rotate(.4deg); opacity: 1; }
	78%  { transform: translateY(-2px) scale(.995) rotate(-.15deg); }
	100% { transform: none; opacity: 1; }
}

@keyframes rc-bud-ring {
	0%   { box-shadow: 0 0 0 0 rgba(193, 55, 44, .55); }
	100% { box-shadow: 0 0 0 14px rgba(193, 55, 44, 0); }
}

/* Pilen på knappen vender, når formularen er åben — den viser vejen
   tilbage. Findes uden JavaScript, fordi <details> selv sætter [open]. */
.rc-budfold[open] .rc-budfold__pil {
	transform: rotate(180deg);
}

.rc-budfold__pil {
	transition: transform .25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.rc-bud__formular.rc-bud--aabner,
	.rc-bud--aabner .rc-bud__felt,
	.rc-bud--aabner .rc-bud__par,
	.rc-bud--aabner .rc-bud__hjaelp,
	.rc-bud--aabner .rc-bud__knap,
	.rc-bud--aabner button[type="submit"] {
		animation: none;
		transform: none;
	}

	.rc-budfold__pil { transition: none; }
}

/* ==========================================================================
   "Overrask mig" som fast knap i hjørnet (24. august 2026)

   Findes kun i crap-delen: oversigt, kategorier, mærkesider og den
   enkelte annonce. Diskret med vilje — den skal kunne overses af den,
   der ved hvad han leder efter, og findes af den, der ikke gør.
   ========================================================================== */

.rc-flyder {
	position: fixed;
	right: clamp(.8rem, 3vw, 1.6rem);
	/* Sikker afstand til hjemmeknappen på telefoner uden fysisk knap. */
	bottom: calc(clamp(.8rem, 3vw, 1.6rem) + env(safe-area-inset-bottom, 0px));
	z-index: 40;

	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem .95rem;

	background: var(--rc-papir);
	color: var(--rc-blaek);
	border: 1px solid var(--rc-kant);
	border-left: 3px solid var(--rc-roed);
	border-radius: var(--rc-radius-lille);
	box-shadow: var(--rc-skygge-loeftet);

	font-family: var(--rc-skrift-titel);
	font-size: .82rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;

	opacity: .88;
	transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.rc-flyder:hover,
.rc-flyder:focus-visible {
	opacity: 1;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(11, 26, 36, .3);
}

/* Terningen er den samme femmer som i heroen — bare mindre. */
.rc-flyder__terning {
	position: relative;
	flex: none;
	width: 1rem;
	height: 1rem;
	border: 1.5px solid var(--rc-roed);
	border-radius: 3px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	padding: 2px;
	transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}

.rc-flyder__terning span {
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: var(--rc-roed);
	align-self: center;
	justify-self: center;
}

.rc-flyder__terning span:nth-child(1) { grid-area: 1 / 1; }
.rc-flyder__terning span:nth-child(2) { grid-area: 1 / 3; }
.rc-flyder__terning span:nth-child(3) { grid-area: 2 / 2; }
.rc-flyder__terning span:nth-child(4) { grid-area: 3 / 1; }
.rc-flyder__terning span:nth-child(5) { grid-area: 3 / 3; }

.rc-flyder:hover .rc-flyder__terning,
.rc-flyder:focus-visible .rc-flyder__terning {
	transform: rotate(90deg);
}

/*
  Knappen viger for sidefoden.

  En fast knap, der lægger sig oven på kontaktoplysningerne, ser ud som
  en fejl. Klassen sættes af main.js, når sidefoden kommer til syne.
*/
.rc-flyder.er-vaek {
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
}

/* På helt smalle skærme fylder teksten for meget — terningen alene
   bærer betydningen, når man først har set knappen én gang. */
@media (max-width: 400px) {
	.rc-flyder__tekst {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.rc-flyder {
		padding: .7rem;
		border-radius: 50%;
		border-left-width: 1px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rc-flyder,
	.rc-flyder__terning { transition: none; }
}

/* ==========================================================================
   Flammerne i heroens underkant (24. august 2026)

   Raps eget ønske, og hans egen sætning. Tegningen er lavet efter hans
   foto af en flammelakeret bil: blå kontur, orange krop, rød skygge —
   som tilfældigvis er sitets egen palet.

   De FLYDER hen over heroen, de slikker ikke op fra kanten. Sådan
   ligger flammer på en motorhjelm; det andet er tegneserie-ild.
   ========================================================================== */

.rc-flammer {
	/*
	  Båndet ligger i STRØMMEN som heroens sidste element, og heroens
	  bundpolstring er sat til nul. Så slutter det i underkanten, uden
	  at nogen skal regne på, hvor heroens højde kommer fra.
	  
	  To andre veje blev prøvet og forkastet: `margin-top: auto` i en
	  flexspalte (virkede bredt, svigtede på telefon) og absolut
	  placering med `bottom: 0` (landede halvandet hundrede punkter for
	  højt). Det enkle var det rigtige.
	*/
	position: relative;
	z-index: 2;
	margin-top: clamp(1rem, 3vw, 2rem);

	/*
	  Højden står som variabel, fordi sætningen skal kunne regne sig
	  frem til, hvor flammerne slutter. Tegningen er 5,33:1 og vises i
	  150 % af båndets højde, så flammerne er godt otte gange højden
	  brede: 5,33 × 1,5 = 8,0.
	*/
	--rc-flammehoejde: clamp(72px, 11vw, 132px);
	--rc-flammebredde: calc(var(--rc-flammehoejde) * 8);
	height: var(--rc-flammehoejde);

	/*
	  ⚠︎ `auto 100%`, IKKE `cover`.
	  
	  Båndet er omkring 9,6:1, tegningen 5,1:1. Med `cover` skar
	  browseren over halvdelen af højden væk — og i venstre side, hvor
	  flammerne er en massiv kile, blev et vandret snit til en FLAD
	  ORANGE KASSE uden en eneste flamme i. Det så ud som en fejl,
	  fordi det var en.
	  
	  Med `auto 100%` fylder tegningen højden og beholder sit forhold:
	  hele flammejobbet er synligt fra den tætte masse til de tynde
	  tunger. På en bred skærm når flammerne omkring midten, og resten
	  er åbent foto — dér står sætningen. På en telefon fylder de
	  bredden. Tegningen bliver aldrig strakt og aldrig skåret over.
	  
	  Tegningen er den anden ChatGPT lavede — california-flames.png — med
	  rigtig hot-rod-skygning: gul i midten gennem orange til rødt i
	  kanten. Den bruges, som den er tegnet; den første måtte vendes på
	  hovedet, fordi dens tunger krøllede nedad, men denne er symmetrisk
	  nok til at virke begge veje.
	  
	  ⚠︎ 150 %, ikke 100 %. Ved 100 % er flammerne matematisk korrekte —
	  forholdet er 4,99:1 i både originalen og filen på sitet, målt — men
	  de SER flade ud, fordi hele det lange flammejob skal ned i et lavt
	  bånd. Ved 150 % bliver lobberne runde igen, og den nederste del af
	  tegningen falder ud under heroens røde kant. Det er med vilje:
	  flammerne skal hellere skæres af end mases sammen.
	*/
	background: url(../img/flammer.webp) left top / auto 150% no-repeat;

	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding-bottom: clamp(.2rem, 1vw, .8rem);
}

/*
  Sætningen står i højre side, hvor flammerne er tyndest — ellers ville
  den ligge oven i orange og blive ulæselig. Skyggen bag er der, fordi
  baggrunden skifter med fotoet: uden den ville den kunne lande på en
  lys plet i garagebilledet.
*/
.rc-flammer__raab {
	/*
	  Sætningen står, hvor flammerne SLUTTER — ikke ved skærmens højre
	  kant.

	  Før hang den yderst til højre, og på en bred skærm blev der et
	  halvt tusind punkters tomrum mellem flammerne og teksten; de så
	  ud som to ting, der ikke havde med hinanden at gøre. Nu skubbes
	  den frem til flammernes ende og lægger sig ind over de sidste
	  tynde tunger, så øjet forbinder dem.

	  `min()` holder den inde på siden: kan flammerne ikke være der,
	  standser skubbet, før sætningen ryger ud over kanten.
	*/
	/*
	  Sætningen ligger på den STORE GULE FLADE i flammernes forende.
	  
	  Målt i tegningen: de første 19 % er massiv gul med 86–95 %
	  dækning, og det gule rækker til omkring 44 %. Flammerne er otte
	  gange båndets højde brede, så 0,6 × højden placerer sætningen
	  inde i den flade med luft til begge sider. Længere inde bliver
	  baggrunden broget af tunger og huller, og så skal skriften
	  kæmpe igen.
	  
	  `min()` holder den inde på siden, hvis flammerne er bredere end
	  skærmen.
	*/
	margin: 0 0 0 min(
		calc(var(--rc-flammehoejde) * .6),
		calc(100% - 22ch)
	);
	font-family: var(--rc-skrift-haand);
	font-size: clamp(.85rem, 1.9vw, 1.35rem);
	line-height: 1.15;
	/*
	  Mørkt blæk med cremet kontur — ikke gult.

	  Gult på gule flammer forsvinder, uanset hvor kraftig konturen er;
	  hvidt bliver larmende. Mørk skrift med lys kontur er dét, en
	  skiltemaler ville lave oven på en flammelakering.

	  ⚠︎ FAST farve, ikke blæk-tokenet: flammerne er en lakering, der
	  ikke skifter farve, fordi man slukker loftslyset — og tokenet
	  vender lyst i mørk tilstand, så sætningen stod som lys-på-lys og
	  var næsten usynlig (fundet af Andreas, 1. september). Samme
	  princip som 404-ruden, notesblokken og NYT-stemplet.
	*/
	color: #16232e;
	text-align: left;
	text-wrap: balance;
	transform: rotate(-1.8deg);

	/*
	  Læsbar oven på flammerne: en mørk kontur bag skriften, tegnet med
	  `paint-order`, så stregen ligger BAG fyldet og ikke æder bogstavernes
	  form. Gul på orange er ellers 1,4:1 og reelt ulæseligt. Skyggen
	  ovenpå giver dybde, men det er konturen, der gør arbejdet.
	*/
	paint-order: stroke fill;
	/* Tykkelsen i `em`, ikke i punkter: 5 px stod fint ved 21 px skrift
	   og lukkede bogstavernes huller ved 13. */
	-webkit-text-stroke: .17em rgba(248, 245, 237, .95);
	text-shadow: 0 2px 5px rgba(9, 17, 24, .35);
	pointer-events: none;
}

/* Kan browseren ikke tegne konturen bag skriften, falder vi tilbage på
   en kraftig skygge hele vejen rundt. Den er tungere at se på, men den
   virker alle steder. */
@supports not (paint-order: stroke) {
	.rc-flammer__raab {
		-webkit-text-stroke: 0;
		text-shadow:
			-.08em -.08em 0 rgba(248, 245, 237, .95), .08em -.08em 0 rgba(248, 245, 237, .95),
			-.08em .08em 0 rgba(248, 245, 237, .95), .08em .08em 0 rgba(248, 245, 237, .95),
			0 .14em .4em rgba(9, 17, 24, .5);
	}
}


/* ==========================================================================
   Vejene videre fra forsiden (25. august 2026)

   To ting, der lignede tekst mere end veje: overskriften og knappen
   under gitteret. Begge fører til /crap/.
   ========================================================================== */

/* Emaljeskiltet er selv et link. Folk peger på et skilt og forventer,
   at der sker noget — så lad der gøre det. */
.rc-skilt--link {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	text-decoration: none;
	transition: transform .16s ease, box-shadow .16s ease;
}

.rc-skilt--link:hover,
.rc-skilt--link:focus-visible {
	transform: rotate(-.7deg) translateY(-2px);
	box-shadow: inset 0 0 0 2px var(--rc-blaa), 5px 6px 0 rgba(20, 40, 50, .28);
}

.rc-skilt__pil {
	width: .42em;
	height: .42em;
	flex: none;
	border-right: .12em solid currentColor;
	border-bottom: .12em solid currentColor;
	transform: rotate(-45deg);
	opacity: .75;
	transition: transform .16s ease, opacity .16s ease;
}

.rc-skilt--link:hover .rc-skilt__pil,
.rc-skilt--link:focus-visible .rc-skilt__pil {
	opacity: 1;
	transform: rotate(-45deg) translate(.1em, .1em);
}

/* Knappen under gitteret: rød som resten af sitets primære veje, med
   samme pil som heroens. Den var blå og flad og lignede en overskrift. */
.rc-knap--pil {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
}

.rc-knap__pil {
	width: .45rem;
	height: .45rem;
	flex: none;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: .85;
	transition: transform .16s ease, opacity .16s ease;
}

.rc-knap--pil:hover .rc-knap__pil,
.rc-knap--pil:focus-visible .rc-knap__pil {
	opacity: 1;
	transform: rotate(-45deg) translate(2px, 2px);
}

@media (prefers-reduced-motion: reduce) {
	.rc-skilt--link,
	.rc-skilt__pil,
	.rc-knap__pil { transition: none; }
}

/* ==========================================================================
   Nyt på pladsen (september 2026) — forsidens friskheds-signaler.

   NYT-stemplet og skillestregen står ved deres naboer længere oppe;
   her bor heroens ankomst-replik, ugetallet, prikkerne og "Væk er væk".
   Fælles regel: elementerne FINDES kun, når der er noget nyt — så der
   er ingen tom-tilstand at style.
   ========================================================================== */

/* Heroens "Senest ind:"-link. Gul på den mørke hero, som fokusfarven —
   målt 4,69:1 mod --rc-blaa-moerk. Understregningen siger "vej videre". */
.rc-hero__ankomst {
	color: var(--rc-gul);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.rc-hero__ankomst:hover,
.rc-hero__ankomst:focus-visible {
	text-decoration-thickness: 3px;
}

/* Ugetallet: en lille håndskrevet seddel klistret ved emaljeskiltet.
   Sedlen er selv et link til /crap/ — folk prikker på den slags. */
.rc-nyeste__uge {
	display: inline-block;
	margin: .5rem 0 0;
	padding: .2rem .8rem .3rem;
	background: var(--rc-papir);
	color: var(--rc-blaek);
	font-family: var(--rc-skrift-haand);
	font-size: 1.02rem;
	text-decoration: none;
	transform: rotate(-1.8deg);
	box-shadow: 0 2px 5px rgba(22, 35, 46, .22);
	transition: transform .15s ease, box-shadow .15s ease;
}

.rc-nyeste__uge:hover,
.rc-nyeste__uge:focus-visible {
	transform: rotate(-1.8deg) translateY(-2px);
	box-shadow: 0 4px 9px rgba(22, 35, 46, .28);
}

.rc-nyeste__ugepil {
	color: var(--rc-roed);
	margin-left: .15rem;
}

@media (prefers-reduced-motion: reduce) {
	.rc-nyeste__uge {
		transition: none;
	}
}

/*
  Badgen — "ulæste beskeder" på en kategoriknap, med ANTALLET i
  (Andreas' ønske, 1. september — tallet kan ikke misforstås som en del
  af "14 ting", fordi det står i sin egen røde prik). Hvidt blæk på rød
  flade som SOLGT-stemplet. Pulsen er bevidst LANGSOM og blød — den
  skal hviske "psst", ikke blinke som en alarm — og den slås fra for
  den, der har bedt om mindre bevægelse.
*/
@keyframes rc-nyprik-puls {
	0%   { box-shadow: 0 0 0 0 rgba(193, 55, 44, .5); }
	55%  { box-shadow: 0 0 0 8px rgba(193, 55, 44, 0); }
	100% { box-shadow: 0 0 0 0 rgba(193, 55, 44, 0); }
}

.rc-nyprik {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--rc-roed-flade, var(--rc-roed));
	color: var(--rc-hvid);
	font-size: .74rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	border: 2px solid var(--rc-papir);
	animation: rc-nyprik-puls 2.6s ease-out infinite;
}

/* I bjælken står badgen ude til højre i punktets luft — lodret
   centreret, hvor der alligevel er tomt. I tekstlinjen kvaltes den
   mellem navn og antal. */
.rc-bjaelke__punkt {
	position: relative;
}

.rc-nyprik--bjaelke {
	top: 50%;
	right: .8rem;
	transform: translateY(-50%);
	border-color: var(--rc-papir);
}

@media (prefers-reduced-motion: reduce) {
	.rc-nyprik {
		animation: none;
	}
}

/* --- "Væk er væk" — de nyligt solgte --- */

.rc-vaek {
	padding: 2.6rem 0 3rem;
}

.rc-vaek__hoved {
	margin-bottom: 1.3rem;
}

/* Håndskrevet seddel, ikke et emaljeskilt: skiltene er butikkens faste
   inventar — det her er en bemærkning i forbifarten. */
.rc-vaek__seddel {
	margin: 0 0 .45rem;
	font-family: var(--rc-skrift-haand);
	font-size: clamp(1.45rem, 3.5vw, 1.8rem);
	font-weight: 400;
	line-height: 1.3;
	color: var(--rc-blaek);
	transform: rotate(-1.4deg);
}

.rc-vaek__manchet {
	margin: 0;
	color: var(--rc-daempet);
}

/* Tre kort er ikke et fuldt gitter — midterstil dem, så rækken ikke
   klumper i venstre side af tavlen. */
.rc-vaek .rc-gitter--faa {
	justify-content: center;
}

/*
  Førprisen ved et nedslag ("Nyt på pladsen" nr. 7). Prisen forbliver
  stram — det eneste skæve er selve tuschstregen hen over det gamle tal.
  Ingen "SAT NED"-mærker: overstregningen ER signalet. Dæmpet tekst
  (målt 4,68:1 mod papir), stregen i rød med let hældning.
*/
.rc-pris-foer {
	position: relative;
	text-decoration: none;
	color: var(--rc-daempet);
	font-size: .78em;
	font-weight: 600;
	margin-right: .25em;
	white-space: nowrap;
}

.rc-pris-foer::after {
	content: "";
	position: absolute;
	left: -3%;
	right: -3%;
	top: 52%;
	height: .13em;
	min-height: 2px;
	background: var(--rc-roed);
	transform: rotate(-4deg);
	border-radius: 1px;
}

/* "X nye siden sidst"-notatet over gitteret på /crap/. Håndskrift som
   de andre notater — men IKKE aria-hidden: tallet er information. Står
   stille; pilen og hånden er nok. */
.rc-nytnotat {
	display: flex;
	align-items: center;
	gap: .3rem;
	margin: 0 0 .6rem;
	font-family: var(--rc-skrift-haand);
	font-size: 1.1rem;
	color: var(--rc-roed);
	transform: rotate(-1.6deg);
}

.rc-nytnotat__pil {
	font-size: 1.25rem;
	line-height: 1;
	transform: translateY(.1em) rotate(12deg);
}

/* --- Hjertet på annoncen (afløste tegnestifterne 2. september) --- */

/* Kun hjertet, ingen tekst (Andreas) - ordene bor i aria-label, og
   fyldningen viser svaret for øjnene. 44 px: en tommelfingers flade. */
.rc-hjerteknap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	/* Højrestillet i kortet (Andreas): auto-margen skubber knappen mod
	   højre kant - prisen står til venstre, hjertet svarer til højre. */
	margin-left: auto;
	margin-top: .35rem;
	padding: 0;
	color: var(--rc-blaek);
	background: var(--rc-papir);
	border: 1.5px dashed var(--rc-daempet);
	border-radius: 50%;
	cursor: pointer;
	transition: transform .12s ease;
}

.rc-hjerteknap:hover {
	border-style: solid;
	border-color: var(--rc-roed);
	transform: scale(1.06);
}

.rc-hjerteknap__hjerte {
	width: 24px;
	height: 24px;
	flex: none;
	fill: none;
	stroke: var(--rc-roed);
	stroke-width: 1.8;
	stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
	.rc-hjerteknap {
		transition: none;
	}
}

/* Sat: hjertet fyldes, kanten står fast - man kan se svaret uden at læse. */
.rc-hjerteknap.er-sat {
	border-style: solid;
	border-color: var(--rc-roed);
}

.rc-hjerteknap.er-sat .rc-hjerteknap__hjerte {
	fill: var(--rc-roed);
}

/* --- Nyhedsbåndet under sidehovedet --- */

/*
  Dagens og gårsdagens nye ting ruller forbi med foto og titel - som
  aviskiosken, der har sat dagens forsider i vinduet. Rullen er ren
  CSS og kører også uden JavaScript; hviler musen på båndet (eller
  lander fokus i det), holder det stille, så man kan ramme det, man
  kigger på. Gul fokusring som på de andre mørke flader.
*/
/* Gul (Andreas' valg efter rød og blå) - avisbudets gule bånd. Fast
   gul flade med fast mørkt blæk, så det står ens i lys og mørk
   tilstand, som NYT-stemplet. Målt: blæk 10,2:1, mørk rød 5,1:1.
   Lys flade -> RØD fokusring, som reglerne kræver. */
.rc-strimmel {
	--rc-fokus: var(--rc-roed);
	/* Let hvælvet flade: lysere top, dybere bund - og en skygge ned over
	   heroen, så båndet ligger OVEN PÅ siden i stedet for at være malet
	   på den. Mørkeste bund mod blækket er stadig over 9:1. */
	background: linear-gradient(#f9d67f, #f4c95e 45%, #ecbd48);
	color: #16232e;
	overflow: hidden;
	position: relative;
	z-index: 5;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		inset 0 -2px 3px rgba(105, 80, 15, .28),
		0 3px 9px rgba(22, 35, 46, .3);
}

.rc-strimmel__indhold {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding-block: .95rem;
}

/* Etiketten står fast til venstre i skiltefonten, mens tingene ruller. */
.rc-strimmel__etiket {
	flex: none;
	font-family: var(--rc-skrift-titel);
	font-weight: 700;
	font-size: 1.02rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #96291f;
	padding-right: 1rem;
	border-right: 2px solid rgba(22, 35, 46, .35);
}

.rc-strimmel__vindue {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

/* Blød ud- og indtoning i kanterne - men KUN når båndet ruller. En
   stillestående vare skal stå skarpt, ikke tone ud i venstre side
   (Andreas' fund). Klassen sættes af tjekRul() sammen med rullen. */
.rc-strimmel__vindue.er-rullende {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

@keyframes rc-strimmel-rul {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.rc-strimmel__rul {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

/* Klassen sættes af strimmel() i main.js - KUN når tingene ikke kan
   være i båndet. Ellers står de stille, og ingen gentages. */
.rc-strimmel__rul.er-rullende {
	animation: rc-strimmel-rul var(--rc-rul-tid, 30s) linear infinite;
}

.rc-strimmel:hover .rc-strimmel__rul,
.rc-strimmel:focus-within .rc-strimmel__rul {
	animation-play-state: paused;
}

.rc-strimmel__dublet {
	display: inline-flex;
	align-items: center;
}

.rc-strimmel__ting {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-right: 2.2rem;
	color: #16232e;
	text-decoration: none;
}

.rc-strimmel__ting img {
	width: 64px;
	height: 48px;
	object-fit: cover;
	border-radius: 2px;
	border: 1.5px solid rgba(22, 35, 46, .55);
	flex: none;
}

.rc-strimmel__titel {
	font-weight: 600;
	font-size: 1.02rem;
	text-decoration: underline;
	text-decoration-color: rgba(22, 35, 46, .4);
	text-underline-offset: 3px;
}

.rc-strimmel__ting:hover .rc-strimmel__titel,
.rc-strimmel__ting:focus-visible .rc-strimmel__titel {
	text-decoration-color: #96291f;
	color: #96291f;
}

.rc-strimmel__luk {
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	font-size: 1.35rem;
	line-height: 1;
	color: #16232e;
	background: rgba(22, 35, 46, .08);
	border: 1px solid rgba(22, 35, 46, .45);
	border-radius: 50%;
	cursor: pointer;
}

.rc-strimmel__luk:hover,
.rc-strimmel__luk:focus-visible {
	background: rgba(22, 35, 46, .18);
}

/* Mindre bevægelse: båndet står stille og kan rulles med fingeren;
   kopien er så kun støj og skjules. */
@media (prefers-reduced-motion: reduce) {
	.rc-strimmel__rul.er-rullende {
		animation: none;
	}

	.rc-strimmel__vindue {
		overflow-x: auto;
	}

	.rc-strimmel__dublet {
		display: none;
	}
}

/* --- Pladsens favoritter: sedle-stakken (genbruger sidst set-stilen) --- */

.rc-favoritter {
	padding: 0 0 2.4rem;
}

.rc-favoritter__hoved {
	margin-bottom: .4rem;
}

.rc-favoritter__titel {
	margin: 0 0 .45rem;
	font-family: var(--rc-skrift-haand);
	font-size: clamp(1.25rem, 3vw, 1.5rem);
	font-weight: 400;
	line-height: 1.3;
	color: var(--rc-blaek);
	transform: rotate(-1.2deg);
}

.rc-favoritter__manchet {
	margin: 0;
	color: var(--rc-daempet);
	font-size: .95rem;
}

/* --- Nyhedsbrevet i sidefoden ("Ugens nye crap") --- */

.rc-nyhedsbrev__om {
	margin: 0 0 .6rem;
}

.rc-nyhedsbrev__form {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
}

.rc-nyhedsbrev__form input[type="email"] {
	flex: 1 1 170px;
	min-width: 0;
	padding: .55rem .7rem;
	font: inherit;
	border-radius: var(--rc-radius-lille, 4px);
	border: 1px solid rgba(248, 245, 237, .4);
	background: rgba(248, 245, 237, .12);
	color: var(--rc-lys-blaek);
}

.rc-nyhedsbrev__form input[type="email"]::placeholder {
	color: var(--rc-lys-blaek);
	opacity: .55;
}

/* Kvitteringen: en gul seddel — samme faste blæk-på-gul som NYT-stemplet,
   så den holder i begge tilstande. role="status", så skærmlæsere får den. */
.rc-nyhedsbrev__besked {
	margin: 0 0 .7rem;
	padding: .5rem .75rem;
	background: var(--rc-gul);
	color: #453407;
	font-weight: 600;
	border-radius: var(--rc-radius-lille, 4px);
}

/* --- Sedlen fra kanten (forslag, 1. september 2026) --- */

/*
  En papir-seddel stukket ind fra højre kant: fast nederst til højre,
  med tape i toppen og en anelse skæv — banner-energi i tavlens eget
  sprog. Glider ind fra kanten; ved reduced motion står den bare der.
  Serveren skriver den kun ud på forsiden ved mindst 3 nye i ugen.
*/
.rc-nyseddel {
	position: fixed;
	right: 1rem;
	bottom: 1.1rem;
	z-index: 60;
	width: min(350px, calc(100vw - 2rem));
	padding: 1.5rem 1.35rem 1.25rem;
	background: var(--rc-papir);
	color: var(--rc-blaek);
	box-shadow: 0 6px 22px rgba(22, 35, 46, .3);
	/* Blokken BOR i mini-knappen: den vokser op af hjørnet ved åbning og
	   falder sammen ned i det igen ved luk (Andreas). Origin i nederste
	   højre hjørne er præcis dér, knappen står. */
	transform-origin: 96% 102%;
	transform: scale(.06) rotate(-1.6deg);
	opacity: 0;
	transition: transform .4s cubic-bezier(.2, .85, .3, 1.05), opacity .3s ease;
	max-height: 86vh;
	overflow-y: auto;
}

/*
  Polaroiderne: ugens ting i samme fotostil som kategoriknappernes
  smugkig — papirramme med tyk underkant, hver sin lille vinkel, let
  overlap som fotos smidt på et bord. Rigtige links; midterste løftes
  en anelse, så viften ser kastet ud, ikke sat op.
*/
.rc-nyseddel__fotos {
	display: flex;
	justify-content: center;
	margin: .55rem 0 .3rem;
}

.rc-nyseddel__foto {
	display: block;
	padding: 4px 4px 12px;
	background: var(--rc-papir);
	box-shadow: 0 3px 9px rgba(11, 26, 36, .35);
	transform: rotate(-5deg);
	transition: transform .15s ease;
}

.rc-nyseddel__foto img {
	display: block;
	width: 82px;
	height: 74px;
	object-fit: cover;
}

.rc-nyseddel__foto:nth-child(2) {
	transform: rotate(3deg) translateY(-5px);
	margin: 0 -7px;
	z-index: 1;
}

.rc-nyseddel__foto:nth-child(3) {
	transform: rotate(-2deg);
}

.rc-nyseddel__foto:hover,
.rc-nyseddel__foto:focus-visible {
	transform: rotate(0deg) translateY(-4px) scale(1.06);
	z-index: 2;
}

.rc-nyseddel.er-inde {
	transform: scale(1) rotate(-1.6deg);
	opacity: 1;
}

/*
  Spiralryggen — det, der gør sedlen til en NOTESBLOK. En række
  trådringe langs overkanten, tegnet med gentagne radial-gradienter.
  Trådens farve er fast metalmørk i begge tilstande; det er tråd.
*/
.rc-blok__spiral {
	position: absolute;
	top: -8px;
	left: 14px;
	right: 14px;
	height: 16px;
	background-image: radial-gradient(circle at 7px 8px, transparent 0 2.4px, #5f5648 2.5px 4px, transparent 4.5px);
	background-size: 15px 16px;
	background-repeat: repeat-x;
	pointer-events: none;
}

/*
  Den lukkede tilstand: en lille notesblok-knap, der klæber i hjørnet.
  Skjult fra serveren — uden JavaScript kan den ingenting. Badgen er
  samme røde prik som kategoriknappernes.
*/
.rc-blok__knap {
	position: fixed;
	right: 1rem;
	bottom: 1.1rem;
	z-index: 59;
	width: 64px;
	height: 60px;
	padding: 14px 6px 6px;
	background: var(--rc-papir);
	color: var(--rc-blaek);
	border: 0;
	box-shadow: 0 4px 14px rgba(22, 35, 46, .35);
	transform: rotate(-2deg);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}

.rc-blok__knap .rc-blok__spiral {
	top: -7px;
	left: 7px;
	right: 7px;
}

.rc-blok__knap:hover,
.rc-blok__knap:focus-visible {
	transform: rotate(-2deg) translateY(-3px);
	box-shadow: 0 7px 18px rgba(22, 35, 46, .4);
}

.rc-blok__knapord {
	font-family: var(--rc-skrift-haand);
	font-size: 1.15rem;
	color: var(--rc-roed);
	display: block;
	transform: rotate(-2deg);
}

.rc-blok__badge {
	position: absolute;
	top: -9px;
	right: -9px;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--rc-roed-flade, var(--rc-roed));
	color: var(--rc-hvid);
	font-size: .78rem;
	font-weight: 700;
	line-height: 1;
	border: 2px solid var(--rc-papir);
	animation: rc-nyprik-puls 2.6s ease-out infinite;
}

/* Mens blokken er åben, træder knappen af — panelet står samme sted. */
.rc-blok.er-aaben .rc-blok__knap {
	opacity: 0;
	pointer-events: none;
}

.rc-nyseddel__psst {
	margin: 0;
	font-family: var(--rc-skrift-haand);
	font-size: 1.35rem;
	color: var(--rc-roed);
	transform: rotate(-1.2deg);
	/* ⚠︎ Rotationen skaber en stakkontekst, og teksten kommer senere i
	   DOM'en end luk-knappen - uden det her lå den OVER krydset og åd
	   klikkene (målt: 3 af 5 punkter ramte teksten). Samme fælde som
	   lampen og prisen på kortet. */
	pointer-events: none;
}

.rc-nyseddel__tekst {
	margin: .15rem 0 .85rem;
	font-size: 1.06rem;
	line-height: 1.35;
}

.rc-nyseddel__tekst strong {
	font-size: 1.3em;
}

/* Krydset skal LIGNE en knap, ikke et vandmærke (Andreas): rund flade
   med kant, stort nok til en tommelfinger. */
.rc-nyseddel__luk {
	position: absolute;
	top: .45rem;
	right: .5rem;
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--rc-blaek);
	background: var(--rc-ben);
	border: 1.5px solid rgba(22, 35, 46, .35);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(22, 35, 46, .2);
	cursor: pointer;
}

.rc-nyseddel__luk:hover,
.rc-nyseddel__luk:focus-visible {
	color: var(--rc-hvid);
	background: var(--rc-roed-flade, var(--rc-roed));
	border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.rc-nyseddel,
	.rc-nyseddel__foto {
		transition: none;
	}

	.rc-nyseddel {
		transform: scale(1) rotate(-1.6deg);
		opacity: 1;
	}
}

/*
  I mørk tilstand er sedlen RIGTIGT gulnet papir, ikke en mørk flade
  (Andreas: papir-tokenet gjorde den for mørk). Samme princip som
  404-tegningens rude: en fysisk genstand bærer sin egen bund, så den
  ser ens rigtig ud i begge tilstande. Farverne er derfor faste og
  IKKE tokens. Målt på #ece0bd: blæk 11,4:1, mørk rød 6,1:1, luk 4,9:1.
*/
.rc-moerk .rc-nyseddel {
	background: #ece0bd;
	color: #2e2617;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .55);
}

.rc-moerk .rc-blok__knap {
	background: #ece0bd;
	color: #2e2617;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .55);
}

.rc-moerk .rc-blok__knapord {
	color: #96291f;
}

.rc-moerk .rc-nyseddel__psst {
	color: #96291f;
}

.rc-moerk .rc-nyseddel__luk {
	color: #2e2617;
	background: #e0d4ae;
	border-color: rgba(46, 38, 23, .4);
}

.rc-moerk .rc-nyseddel__luk:hover,
.rc-moerk .rc-nyseddel__luk:focus-visible {
	color: #f6efd9;
	background: #96291f;
	border-color: transparent;
}

/* Polaroidernes rammer: fotopapir er lysere end sedlen — også om aftenen. */
.rc-moerk .rc-nyseddel__foto {
	background: #f6efd9;
}

/* Notesblokkens indre: skillestreg, punktnavne og de to funktioner. */

.rc-nyseddel__streg {
	height: 5px;
	border: 0;
	margin: 1rem 0 .7rem;
	background: currentColor;
	opacity: .35;
	clip-path: polygon(0 55%, 14% 12%, 42% 50%, 70% 8%, 100% 45%, 98% 88%, 58% 58%, 24% 95%, 2% 82%);
}

.rc-nyseddel__punktnavn {
	margin: 0 0 .4rem;
	font-family: var(--rc-skrift-haand);
	font-size: 1.02rem;
	transform: rotate(-1deg);
}

.rc-nyseddel__punktnavn + .rc-nyseddel__punktnavn,
.rc-nyseddel__nb + .rc-nyseddel__punktnavn {
	margin-top: .9rem;
}

.rc-nyseddel__nb {
	display: flex;
	gap: .45rem;
	flex-wrap: wrap;
}

.rc-nyseddel__nb input[type="email"] {
	flex: 1 1 150px;
	min-width: 0;
	padding: .5rem .65rem;
	font: inherit;
	font-size: .95rem;
	border-radius: var(--rc-radius-lille, 4px);
	border: 1px solid rgba(22, 35, 46, .35);
	background: rgba(255, 255, 255, .55);
	color: inherit;
}

.rc-nyseddel__ring {
	width: 100%;
	justify-content: center;
}

.rc-moerk .rc-nyseddel__nb input[type="email"] {
	border-color: #8a7c5d;
	background: #f6efd9;
	color: #2e2617;
}

.rc-moerk .rc-nyseddel__nb input[type="email"]::placeholder {
	color: #6a5d45;
}

/* ⚠︎ `display: inline-flex` ovenfor vinder ellers over hidden-attributten
   — badgen stod og lyste "4" på en blok, der lige var læst. Samme fælde
   ramte kategori-badgerne: nedtællingen satte hidden, og de blev
   stående alligevel (Andreas: "jeg kan ikke få dem til at forsvinde"). */
.rc-blok__badge[hidden],
.rc-nyprik[hidden] {
	display: none;
}

/* --- Live-popup'en: "Lige lagt op" (nederst til venstre) --- */

/*
  Samme gule papir som nyhedsbåndet - det ER samme budskab, bare
  leveret mens man står der. Nederst til VENSTRE: notesblokken bor til
  højre, og de to skal kunne stå fremme samtidig.
*/
.rc-livenyt {
	position: fixed;
	left: 1rem;
	bottom: 1.1rem;
	z-index: 60;
	width: min(300px, calc(100vw - 2rem));
	padding: .9rem 2.4rem .9rem 1rem;
	background: linear-gradient(#f9d67f, #f4c95e 45%, #ecbd48);
	color: #16232e;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		inset 0 -2px 3px rgba(105, 80, 15, .28),
		0 6px 18px rgba(22, 35, 46, .35);
	transform: translateX(calc(-100% - 2rem)) rotate(1.4deg);
	transition: transform .45s cubic-bezier(.2, .85, .3, 1.05);
}

.rc-livenyt.er-inde {
	transform: translateX(0) rotate(1.4deg);
}

.rc-livenyt__psst {
	margin: 0 0 .45rem;
	font-family: var(--rc-skrift-haand);
	font-size: 1.1rem;
	color: #96291f;
	transform: rotate(-1.2deg);
}

.rc-livenyt__ting {
	display: flex;
	align-items: center;
	gap: .6rem;
	color: #16232e;
	text-decoration: none;
}

.rc-livenyt__ting img {
	width: 56px;
	height: 42px;
	object-fit: cover;
	border-radius: 2px;
	border: 1.5px solid rgba(22, 35, 46, .55);
	flex: none;
}

.rc-livenyt__ting span {
	font-weight: 700;
	line-height: 1.3;
	text-decoration: underline;
	text-decoration-color: rgba(22, 35, 46, .4);
	text-underline-offset: 3px;
}

.rc-livenyt__ting:hover span,
.rc-livenyt__ting:focus-visible span {
	color: #96291f;
	text-decoration-color: #96291f;
}

.rc-livenyt__luk {
	position: absolute;
	top: .4rem;
	right: .4rem;
	width: 30px;
	height: 30px;
	padding: 0;
	font-size: 1.25rem;
	line-height: 1;
	color: #16232e;
	background: rgba(22, 35, 46, .08);
	border: 1px solid rgba(22, 35, 46, .45);
	border-radius: 50%;
	cursor: pointer;
}

.rc-livenyt__luk:hover,
.rc-livenyt__luk:focus-visible {
	background: rgba(22, 35, 46, .18);
}

@media (prefers-reduced-motion: reduce) {
	.rc-livenyt {
		transition: none;
		transform: translateX(0) rotate(1.4deg);
	}
}

/* --- Huskelisten i notesblokken (2. september, aften) --- */

/* Klistermærket: det håndtegnede hjerte på omslaget, når man har
   hjertet noget. Ordet "Nyt" bliver stående - badgen betyder ugens
   tal, aldrig hjerter. */
.rc-blok__maerke {
	position: absolute;
	top: -9px;
	left: -11px;
	width: 26px;
	height: 26px;
	transform: rotate(-14deg);
	filter: drop-shadow(0 1px 2px rgba(22, 35, 46, .35));
}

.rc-blok__maerke svg {
	width: 100%;
	height: 100%;
	fill: #c1372c;
	stroke: #7e1f16;
	stroke-width: 1.2;
	stroke-linejoin: round;
}

/* display-reglen ville ellers slå hidden-attributten (kendt fælde). */
.rc-blok__maerke[hidden] {
	display: none;
}

/* Duppet, når et hjerte lander - ender i knappens egen hældning. */
@keyframes rc-blok-dup {
	0%   { transform: rotate(-2deg) scale(1); }
	45%  { transform: rotate(-2deg) scale(1.14); }
	100% { transform: rotate(-2deg) scale(1); }
}

.rc-blok__knap.er-dup {
	animation: rc-blok-dup .45s ease-out;
}

/* Flyvehjertet: klonen, der rejser fra annonce-knappen til blokken.
   Selve rejsen sættes som inline-transitions af flyvHjerte(). */
.rc-flyvehjerte {
	position: fixed;
	z-index: 80;
	pointer-events: none;
}

/* Linjerne: håndskrevne noter på blokkens papir. Ved mange ruller
   listen selv - nyhedsbrev og ring-knap må aldrig skubbes ud. */
.rc-huskeliste {
	list-style: none;
	margin: 0 0 .6rem;
	padding: 0 .2rem 0 0;
	max-height: 38vh;
	overflow-y: auto;
}

.rc-huskeliste__linje {
	position: relative;
	border-bottom: 1px dashed rgba(22, 35, 46, .25);
}

.rc-huskeliste__led {
	display: flex;
	align-items: baseline;
	gap: .45rem;
	padding: .4rem 2rem .4rem 0;
	color: inherit;
	text-decoration: none;
}

.rc-huskeliste__hjerte {
	width: 14px;
	height: 14px;
	flex: none;
	align-self: center;
	fill: #c1372c;
}

.rc-huskeliste__titel {
	font-family: var(--rc-skrift-haand);
	font-size: 1.02rem;
	line-height: 1.35;
	min-width: 0;
}

.rc-huskeliste__led:hover .rc-huskeliste__titel,
.rc-huskeliste__led:focus-visible .rc-huskeliste__titel {
	color: #96291f;
}

.rc-huskeliste__pris {
	margin-left: auto;
	flex: none;
	font-family: var(--rc-skrift-haand);
	font-size: .92rem;
	color: #96291f;
}

.rc-huskeliste__fjern {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	padding: 0;
	font-size: 1.1rem;
	line-height: 1;
	color: inherit;
	opacity: .55;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.rc-huskeliste__fjern:hover,
.rc-huskeliste__fjern:focus-visible {
	opacity: 1;
	color: #96291f;
	background: rgba(22, 35, 46, .08);
}

/* Fortrydelsen: tuschstregen vokser hen over linjen, før den glider ud. */
.rc-huskeliste__linje::after {
	content: "";
	position: absolute;
	left: 0;
	top: 52%;
	width: 0;
	height: 3px;
	background: #96291f;
	transform: rotate(-.6deg);
	transition: width .4s ease-in;
	pointer-events: none;
}

.rc-huskeliste__linje.er-streget::after {
	width: 100%;
}

.rc-huskeliste__linje.er-streget .rc-huskeliste__led {
	opacity: .45;
}

/* Polaroid-smugkigget: ét fælles element på body, stillet til VENSTRE
   for panelet ud for linjen. ⚠︎ Det kan ikke bo i listen - både listen
   og panelet ruller, og overflow klipper alt, der stikker ud (fundet
   af Andreas). Positionen sættes af visKig() i main.js. */
.rc-huskekig {
	position: fixed;
	z-index: 70;
	width: 130px;
	padding: 5px 5px 9px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(11, 26, 36, .45);
	opacity: 0;
	transform: translateX(10px) rotate(-4deg) scale(.85);
	transform-origin: 90% 50%;
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none;
}

.rc-huskekig img {
	display: block;
	width: 100%;
	height: 88px;
	object-fit: cover;
}

.rc-huskekig.er-fremme {
	opacity: 1;
	transform: translateX(0) rotate(-3deg) scale(1);
}

/* Terningen stables oven over blokken - hjørnet betyder notesblok.
   Klassen sættes af nyseddel(), så sider uden blok står som før. */
.rc-flyder.er-i-stak {
	bottom: calc(1.1rem + 74px);
}

@media (prefers-reduced-motion: reduce) {
	.rc-blok__knap.er-dup {
		animation: none;
	}

	.rc-huskeliste__linje::after {
		transition: none;
	}

	.rc-huskekig {
		transition: none;
	}
}

/* Siden bag nyhedsbrevets bekræft/afmeld-links: én knap, ét nej tak. */
.rc-nb-knapside__form {
	margin: 1.6rem 0 1rem;
}

.rc-nb-knapside__nej {
	color: var(--rc-daempet);
}

/* Logoet som rigtig emaljeplade (assets/img/logo-plade-*.webp, se
   rc_logo_plade()). Pladen er et <img> i strømmen, så dens egne
   proportioner bestemmer kassen; teksten ligger ovenpå som rigtig tekst.
   Skyggen er drop-shadow: den følger alfakanalen (de afslåede kanter),
   hvor box-shadow ville tegne en kasse. Står sidst i filen med vilje —
   skal vinde over .rc-logo .rc-skilt i BEGGE tilstande. */
.rc-logo .rc-skilt--plade {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	filter: drop-shadow(3px 3px 0 rgba(20, 40, 50, .22));
}

.rc-skilt__plade {
	display: block;
	height: 2.3em;
	width: auto;
}

.rc-skilt__tekst {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 .9em;
	white-space: nowrap;
	color: var(--rc-hvid);
	text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

html.rc-moerk .rc-logo .rc-skilt--plade {
	filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .28));
}