/* ==========================================================================
   City Cleaning – hovedstilark
   1. Designværdier (variabler)   5. Sidehoved og menu
   2. Nulstilling og basis        6. Sidefod
   3. Typografi                   7. Ringbar (mobil)
   4. Layout og sektioner         8. Knapper og fælles dele
   ========================================================================== */

/* 0. SKRIFTTYPE
   Figtree (SIL Open Font License) ligger på vores egen server – ingen kald
   til Google, og dermed ingen tredjepartsdata ved hver sidevisning.
   Variabel skrift: én fil dækker alle vægte fra 400 til 800.
   ========================================================================== */
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 400 800;
	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: 400 800;
	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;
}

/* 1. DESIGNVÆRDIER
   Målt fra kundens nuværende site. Ret en farve her, og den slår igennem
   alle steder på sitet.
   ========================================================================== */
:root {
	/* Farver */
	--cc-navy: #1c3f5b;
	--cc-navy-dyb: #132839;
	--cc-blaa: #2e6f99;
	--cc-blaa-moerk: #245a7d;
	--cc-blaa-lys: #4b8cbb;
	--cc-graa: #f0f0f0;
	--cc-graa-kant: #dde3e8;
	--cc-tekst: #23313c;
	--cc-tekst-daempet: #59666f;
	--cc-hvid: #fff;

	/* Skrift. Figtree ligger på vores egen server (se @font-face ovenfor).
	   Systemskrifterne bagefter er reserve, hvis filen ikke kan hentes. */
	--cc-skrift: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cc-skrift-overskrift: var(--cc-skrift);

	/* Mål */
	--cc-container: 1120px;
	--cc-container-smal: 780px;
	--cc-sektion: clamp(3rem, 7vw, 5.5rem);
	--cc-radius: 6px;
	--cc-radius-stor: 10px;

	/* Skygger */
	--cc-skygge: 0 2px 8px rgba(19, 40, 57, .08);
	--cc-skygge-stor: 0 12px 32px rgba(19, 40, 57, .18);

	/* Højde på det faste sidehoved – bruges til at forskyde ankre */
	--cc-tophoejde: 76px;
}

/* 2. NULSTILLING OG BASIS
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--cc-tophoejde) + 1rem);
	-webkit-text-size-adjust: 100%;
}

/* Sidefoden skal blive i bunden, også på korte sider som tak-siden. */
body {
	margin: 0;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	font-family: var(--cc-skrift);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--cc-tekst);
	background: var(--cc-hvid);
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video { max-width: 100%; height: auto; }

img { display: block; }

a { color: var(--cc-blaa-moerk); }

/*
 * :where() giver reglen vægt nul. Uden det slog den igennem på fx logoet,
 * der er hvidt på navy — og som derfor blev usynligt ved mouseover.
 * Nu vinder et elements egen farve altid, og reglen gælder kun de links,
 * der ikke selv bestemmer.
 */
:where(a):hover,
:where(a):focus-visible { color: var(--cc-navy); }

/* Synlig tastaturmarkering – vigtigt for tilgængelighed. */
:focus-visible {
	outline: 3px solid var(--cc-blaa-lys);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Respekterer brugerens systemvalg om reduceret bevægelse. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* Kun for skærmlæsere. */
.cc-skjult {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Springlink: første tab-stop, så tastaturbrugere kan springe menuen over. */
.cc-spring-over {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 100;
	padding: .75rem 1.25rem;
	background: var(--cc-hvid);
	color: var(--cc-navy);
	font-weight: 600;
	border-radius: 0 0 var(--cc-radius) var(--cc-radius);
	box-shadow: var(--cc-skygge-stor);
	transition: top .15s ease;
}

.cc-spring-over:focus { top: 0; }

/* 3. TYPOGRAFI
   Overskrifterne skalerer glidende med skærmbredden (clamp), så de er
   læsbare på mobil uden at blive små på store skærme.
   ========================================================================== */
h1, h2, h3, h4 {
	font-family: var(--cc-skrift-overskrift);
	color: var(--cc-navy);
	line-height: 1.2;
	margin: 0 0 .6em;
	text-wrap: balance;
	font-weight: 800;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.6rem); letter-spacing: -.015em; }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); }
h4 { font-size: 1.1rem; }

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

p:last-child,
ul:last-child,
ol:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--cc-navy); }

/* Lys tekst på mørk baggrund. */
.cc-lys,
.cc-lys h1,
.cc-lys h2,
.cc-lys h3,
.cc-lys h4,
.cc-lys strong { color: var(--cc-hvid); }

.cc-lys a { color: #cfe3f1; }

.cc-lys a:hover,
.cc-lys a:focus-visible { color: var(--cc-hvid); }

/* Manchet – den lidt større indledningstekst. */
.cc-manchet {
	font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
	max-width: 62ch;
}

/* 4. LAYOUT OG SEKTIONER
   ========================================================================== */
.cc-indhold { flex: 1 0 auto; }

.cc-container {
	width: min(100% - 2.5rem, var(--cc-container));
	margin-inline: auto;
}

.cc-container--smal { max-width: var(--cc-container-smal); }

.cc-sektion { padding-block: var(--cc-sektion); }

.cc-sektion--navy { background: var(--cc-navy); }
.cc-sektion--blaa { background: var(--cc-blaa); }
.cc-sektion--graa { background: var(--cc-graa); }

/* To spalter, der falder sammen til én på smalle skærme. */
.cc-spalter {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.cc-spalter { grid-template-columns: 1fr 1fr; }
	.cc-spalter--40-60 { grid-template-columns: 4fr 6fr; }
	.cc-spalter--60-40 { grid-template-columns: 6fr 4fr; }
	.cc-spalter--start { align-items: start; }
}

/* 5. SIDEHOVED OG MENU
   ========================================================================== */
.cc-top {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--cc-navy);
	color: var(--cc-hvid);
}

.cc-top__indre {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--cc-tophoejde);
	padding-block: .6rem;
}

.cc-top__logo {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--cc-hvid);
	margin-right: auto;
	transition: opacity .15s ease;
}

.cc-top__logo:hover,
.cc-top__logo:focus-visible { color: var(--cc-hvid); opacity: .8; }

.cc-logo {
	width: 148px;
	height: auto;
	display: block;
}

.cc-logo__navn {
	font-family: var(--cc-skrift-overskrift);
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -.4px;
}

/* Menu */
.cc-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(.75rem, 1.6vw, 1.6rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-menu__link,
.cc-menu a {
	display: inline-block;
	padding: .35rem 0;
	color: var(--cc-hvid);
	text-decoration: none;
	font-size: .95rem;
	border-bottom: 2px solid transparent;
}

.cc-menu a:hover,
.cc-menu a:focus-visible { border-bottom-color: var(--cc-hvid); color: var(--cc-hvid); }

.cc-menu .current-menu-item > a,
.cc-menu .current_page_item > a { border-bottom-color: var(--cc-blaa-lys); font-weight: 600; }

.cc-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
}

.cc-nav__kontakt {
	display: flex;
	align-items: center;
	gap: .5rem;
}

/* Runde kontaktknapper i toppen. */
.cc-rundknap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--cc-hvid);
	color: var(--cc-navy);
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.cc-rundknap:hover,
.cc-rundknap:focus-visible { background: var(--cc-blaa-lys); color: var(--cc-hvid); }

.cc-rundknap .cc-ikon { width: 20px; height: 20px; }

.cc-rundknap__tekst { display: none; }

/* Burgerknap – kun synlig på smalle skærme. */
.cc-burger {
	display: none;
	align-items: center;
	gap: .4rem;
	padding: .55rem .8rem;
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	color: var(--cc-hvid);
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .45);
	border-radius: var(--cc-radius);
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.cc-burger .cc-ikon { width: 22px; height: 22px; }
.cc-burger__luk { display: none; }
.cc-burger[aria-expanded="true"] .cc-burger__aaben { display: none; }
.cc-burger[aria-expanded="true"] .cc-burger__luk { display: block; }

@media (max-width: 979px) {
	.cc-burger { display: inline-flex; }

	.cc-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: .5rem 1.25rem 1.25rem;
		background: var(--cc-navy);
		border-top: 1px solid rgba(255, 255, 255, .18);
		box-shadow: var(--cc-skygge-stor);
	}

	.cc-nav.er-aaben { display: flex; }

	.cc-menu { flex-direction: column; align-items: stretch; gap: 0; }

	.cc-menu a {
		display: block;
		padding: .85rem .25rem;
		border-bottom: 1px solid rgba(255, 255, 255, .14);
		font-size: 1.05rem;
	}

	.cc-menu a:hover,
	.cc-menu a:focus-visible { border-bottom-color: rgba(255, 255, 255, .14); }

	.cc-nav__kontakt { flex-direction: column; align-items: stretch; gap: .5rem; margin-top: 1rem; }

	.cc-rundknap {
		width: auto;
		height: auto;
		gap: .55rem;
		padding: .8rem 1rem;
		border-radius: var(--cc-radius);
		font-weight: 600;
	}

	.cc-rundknap__tekst { display: inline; }
}

/* 6. SIDEFOD
   ========================================================================== */
.cc-footer {
	background: var(--cc-navy-dyb);
	color: rgba(255, 255, 255, .82);
	font-size: .95rem;
	/* Plads til den faste ringbar på mobil. */
	padding-bottom: env(safe-area-inset-bottom);
}

.cc-footer__indre {
	display: grid;
	gap: 2rem clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

@media (min-width: 620px) { .cc-footer__indre { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .cc-footer__indre { grid-template-columns: repeat(4, 1fr); } }

.cc-footer__titel {
	font-size: 1rem;
	font-weight: 700;
	color: var(--cc-hvid);
	margin-bottom: .8rem;
}

.cc-footer__adresse { font-style: normal; }

.cc-footer__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .1rem;
}

/* Lodret luft omkring hvert link, så det bliver mindst 24 px højt at ramme. */
.cc-footer__liste a {
	display: inline-block;
	padding-block: .32rem;
}

.cc-footer a { color: var(--cc-hvid); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.cc-footer a:hover,
.cc-footer a:focus-visible { border-bottom-color: var(--cc-hvid); }

.cc-footer__cvr { color: rgba(255, 255, 255, .62); }

.cc-footer__bund {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-block: 1.1rem;
	font-size: .85rem;
	color: rgba(255, 255, 255, .6);
}

.cc-footer__bund p { margin: 0; }

/* 7. RINGBAR (MOBIL)
   Fast bjælke i bunden på telefoner. Opkald er den vigtigste handling
   for en rengøringsvirksomhed, så den skal altid være inden for rækkevidde.
   ========================================================================== */
.cc-ringbar { display: none; }

@media (max-width: 767px) {
	.cc-ringbar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 60;
		background: var(--cc-navy-dyb);
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 -4px 16px rgba(19, 40, 57, .28);
	}

	.cc-ringbar__knap {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .45rem;
		padding: .9rem .5rem;
		color: var(--cc-hvid);
		background: var(--cc-navy);
		font-size: .92rem;
		font-weight: 600;
		text-decoration: none;
	}

	.cc-ringbar__knap--primaer { background: var(--cc-blaa); }
	.cc-ringbar__knap .cc-ikon { width: 18px; height: 18px; }

	/* Så bunden af siden ikke gemmer sig bag bjælken. */
	body { padding-bottom: 60px; }
}

/* 8. KNAPPER OG FÆLLES DELE
   ========================================================================== */
.cc-knap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .85rem 1.6rem;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	color: var(--cc-hvid);
	background: var(--cc-blaa);
	border: 2px solid var(--cc-blaa);
	border-radius: var(--cc-radius);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.cc-knap:hover,
.cc-knap:focus-visible {
	background: var(--cc-blaa-moerk);
	border-color: var(--cc-blaa-moerk);
	color: var(--cc-hvid);
}

.cc-knap--kant {
	background: transparent;
	border-color: var(--cc-hvid);
	color: var(--cc-hvid);
}

.cc-knap--kant:hover,
.cc-knap--kant:focus-visible { background: var(--cc-hvid); color: var(--cc-navy); border-color: var(--cc-hvid); }

/* Når headerfotoet er lyst, skal den hvide telefonknap stadig kunne læses. */
@media (min-width: 768px) {
	.cc-hero--billede .cc-knap--kant { background: rgba(19, 40, 57, .78); }
	.cc-hero--billede .cc-knap--kant:hover,
	.cc-hero--billede .cc-knap--kant:focus-visible { background: var(--cc-hvid); }
}

.cc-knap .cc-ikon { width: 19px; height: 19px; }

.cc-ikon {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	vertical-align: middle;
}

/* 9. HERO
   ========================================================================== */
.cc-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(150deg, #24506f 0%, var(--cc-navy) 45%, var(--cc-navy-dyb) 100%);
	color: var(--cc-hvid);
}

/* Fotoet ligger som et rigtigt billede bagest, ikke som CSS-baggrund.
   Så vælger browseren selv den rette størrelse til skærmen. */
.cc-hero__foto,
.cc-cta__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Neutralt mørkt lag, så den hvide tekst kan læses. */
.cc-hero--billede::before,
.cc-cta--billede::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Udgangspunkt for billedbåndene, plus et ekstra lag nedefra bag teksten. */
	background:
		linear-gradient(to top, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 65%),
		rgba(0, 0, 0, .42);
}

/* Headerfotos må stå lidt lysere end billedbåndene. */
.cc-hero--billede::before {
	background:
		linear-gradient(to top, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, 0) 65%),
		rgba(0, 0, 0, .10);
}

.cc-hero--billede { background: var(--cc-navy-dyb); }

/* Hele bredden bevares på computer, mens højden beskæres omkring bygningerne. */
.cc-hero--fuld-bredde .cc-hero__foto {
	object-position: center 28%;
}

/* Bygningsfotoet har samme lette lag; den særskilte regel gør det nemt
   at justere det uafhængigt af de øvrige headerfotos senere. */
.cc-hero--fuld-bredde::before {
	background:
		linear-gradient(to top, rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, 0) 65%),
		rgba(0, 0, 0, .10);
}

.cc-hero__skyline {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: clamp(90px, 16vw, 190px);
	color: #7fb4d8;
	pointer-events: none;
}

.cc-hero__indre {
	position: relative;
	z-index: 2;
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

@media (min-width: 900px) {
	.cc-hero__indre { grid-template-columns: 1fr minmax(360px, 420px); }
}

.cc-hero__titel { margin-bottom: .5em; }

.cc-hero__tekst .cc-manchet {
	color: var(--cc-hvid);
	font-weight: 600;
}

.cc-hero__handlinger {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.75rem;
}

/* Kontaktkort i heroen
   ========================================================================== */
.cc-tilbud {
	background: var(--cc-navy-dyb);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--cc-radius-stor);
	padding: clamp(1.5rem, 3vw, 2rem);
	box-shadow: var(--cc-skygge-stor);
	color: var(--cc-hvid);
}

.cc-tilbud__titel { color: var(--cc-hvid); font-size: 1.4rem; margin-bottom: .4em; }

.cc-tilbud__tekst {
	color: rgba(255, 255, 255, .85);
	font-size: .95rem;
	margin-bottom: 1.25rem;
}

/* Midlertidig visning af formularfelterne. */
.cc-tilbud__attrap { display: grid; gap: .7rem; }

.cc-felt-raekke { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

.cc-felt {
	display: block;
	padding: .7rem .8rem;
	background: rgba(255, 255, 255, .93);
	border-radius: var(--cc-radius);
	color: #6a7783;
	font-size: .92rem;
}

.cc-felt--stor { padding-bottom: 3.2rem; }

.cc-knap--fuld { width: 100%; margin-top: .3rem; }

.cc-tilbud__note {
	margin: .4rem 0 0;
	font-size: .82rem;
	color: rgba(255, 255, 255, .7);
}

.cc-tilbud__telefon { color: #cfe3f1; }

/* 10. USP-BÅND
   ========================================================================== */
.cc-usp__titel { margin-bottom: 0; }

.cc-usp__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.75rem;
}

.cc-usp__punkt p { color: rgba(255, 255, 255, .92); margin-bottom: 0; }

.cc-usp__overskrift {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-bottom: .35em;
}

.cc-usp__overskrift .cc-ikon { width: 22px; height: 22px; }

/* 11. FÆLLES
   ========================================================================== */
.cc-midt { text-align: center; margin-bottom: 1.6em; }

/* 12. HANDLINGSBÅND
   ========================================================================== */
.cc-cta__titel { margin-bottom: 0; }

.cc-cta__tekst p { color: rgba(255, 255, 255, .92); }

.cc-cta__handling { margin-top: 1.5rem; }

.cc-cta__handling .cc-knap { background: var(--cc-blaa); border-color: var(--cc-blaa); }

.cc-cta__handling .cc-knap:hover,
.cc-cta__handling .cc-knap:focus-visible { background: var(--cc-hvid); color: var(--cc-navy); border-color: var(--cc-hvid); }

/* 13. ANBEFALINGER
   ========================================================================== */
.cc-anbefalinger__gitter {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cc-anbefaling {
	margin: 0;
	padding: 1.6rem;
	background: var(--cc-graa);
	border-radius: var(--cc-radius-stor);
	border-top: 4px solid var(--cc-blaa);
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

/* Kort uden logo skal fylde det samme i toppen, så rækken står lige. */
.cc-anbefaling__kunde {
	display: flex;
	align-items: center;
	min-height: 48px;
	margin: 0;
	font-weight: 700;
	color: var(--cc-navy);
}

.cc-anbefaling__citat { margin: 0; }

.cc-anbefaling__citat p {
	margin: 0;
	font-size: .97rem;
	color: var(--cc-tekst);
}

.cc-anbefaling__citat p::before { content: "\201D"; }
.cc-anbefaling__citat p::after { content: "\201D"; }

.cc-anbefaling__person {
	margin-top: auto;
	font-size: .88rem;
	color: var(--cc-tekst-daempet);
}

/* 14. BRØDTEKST FRA WORDPRESS-EDITOREN
   ========================================================================== */
.cc-brodtekst > * + * { margin-top: 1.15em; }

.cc-brodtekst h2 { margin-top: 1.8em; }
.cc-brodtekst h3 { margin-top: 1.6em; }
.cc-brodtekst h4 { margin-top: 1.4em; }

.cc-brodtekst > :first-child { margin-top: 0; }

.cc-brodtekst ul,
.cc-brodtekst ol { padding-left: 1.3em; }

.cc-brodtekst li + li { margin-top: .35em; }

.cc-brodtekst a { text-underline-offset: 2px; }

/* 15. FINPUDSNING TIL SMÅ SKÆRME
   ========================================================================== */
@media (max-width: 599px) {
	/* Manchetten i heroen fylder ellers hele første skærmbillede, så
	   knapperne først dukker op, når man scroller. */
	.cc-hero .cc-manchet {
		font-size: .98rem;
		line-height: 1.55;
	}

	.cc-hero__handlinger { margin-top: 1.4rem; }
	.cc-hero__handlinger .cc-knap { width: 100%; }

	/* To felter ved siden af hinanden bliver for smalle på en telefon. */
	.cc-felt-raekke { grid-template-columns: 1fr; }
}

/* 16. BÅND MED ØVRIGE YDELSER
   ========================================================================== */
.cc-ydelser {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.cc-ydelse { display: flex; }

.cc-ydelse__link {
	display: block;
	width: 100%;
	padding: 1.4rem 1.5rem;
	background: var(--cc-hvid);
	border-radius: var(--cc-radius-stor);
	border: 1px solid var(--cc-graa-kant);
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.cc-ydelse__link:hover,
.cc-ydelse__link:focus-visible {
	border-color: var(--cc-blaa);
	box-shadow: var(--cc-skygge);
	transform: translateY(-2px);
}

.cc-ydelse__titel {
	display: flex;
	align-items: center;
	gap: .35rem;
	font-size: 1.15rem;
	margin-bottom: .35em;
	color: var(--cc-navy);
}

.cc-ydelse__titel .cc-ikon {
	width: 18px;
	height: 18px;
	color: var(--cc-blaa);
	transition: transform .15s ease;
}

.cc-ydelse__link:hover .cc-ydelse__titel .cc-ikon { transform: translateX(3px); }

.cc-ydelse__tekst {
	margin: 0;
	font-size: .93rem;
	color: var(--cc-tekst-daempet);
}

/* 17. KONTAKTSIDEN
   ========================================================================== */
.cc-kontakt-top { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.cc-kontakt-top h1 { margin-bottom: .35em; }

.cc-kontaktkort__navn { font-size: 1.5rem; margin-bottom: 1.2rem; }

.cc-kontaktliste {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 1.4rem;
}

.cc-kontaktliste__punkt address,
.cc-kontaktliste__punkt p { font-style: normal; margin: 0; }

.cc-kontaktliste__navn {
	display: block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cc-tekst-daempet);
	margin-bottom: .3rem;
}

.cc-kontaktliste__stor {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: 1.15rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--cc-blaa-moerk);
}

.cc-kontaktliste__stor:hover,
.cc-kontaktliste__stor:focus-visible { text-decoration: underline; }

.cc-kontaktliste__stor .cc-ikon { width: 20px; height: 20px; color: var(--cc-blaa); }

.cc-kontaktliste__link {
	display: inline-block;
	margin-top: .35rem;
	font-size: .92rem;
}

/* Tak-siden
   ========================================================================== */
.cc-hero--tak { text-align: center; }

.cc-hero__indre--midt { display: block; }

.cc-hero--tak .cc-hero__tekst { max-width: 640px; margin-inline: auto; }

.cc-hero--tak .cc-brodtekst p { color: rgba(255, 255, 255, .92); }

.cc-hero--tak .cc-hero__handlinger { justify-content: center; }

/* 18. KONTAKTFORMULAR (WPForms i det mørke kort)
   Pluginet leverer kun grundlæggende opsætning; udseendet styres her,
   så formularen ser ud som resten af sitet.
   ========================================================================== */
.cc-tilbud .wpforms-container { margin: 0; }

/* Felterne placeres i et grid i stedet for WPForms' flydende kolonner.
   Floats fik felterne til at lappe ind over hinanden på smalle skærme,
   så man ikke kunne ramme dem med fingeren. */
.cc-tilbud .wpforms-form .wpforms-field-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.cc-tilbud .wpforms-form .wpforms-field {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin: 0;
	padding: 0 0 .8rem;
	clear: none;
}

/* To felter ved siden af hinanden – kun når der er plads nok. */
@media (min-width: 600px) {
	.cc-tilbud .wpforms-form .wpforms-field-container {
		grid-template-columns: 1fr 1fr;
		column-gap: .7rem;
	}

	.cc-tilbud .wpforms-form .cc-halv { grid-column: span 1; }
}

.cc-tilbud .wpforms-form .wpforms-field-label,
.cc-tilbud .wpforms-form .wpforms-field-sublabel {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .85);
	margin: 0 0 .3rem;
}

.cc-tilbud .wpforms-form .wpforms-required-label { color: #ffb4a8; }

.cc-tilbud .wpforms-form input[type="text"],
.cc-tilbud .wpforms-form input[type="email"],
.cc-tilbud .wpforms-form input[type="tel"],
.cc-tilbud .wpforms-form textarea,
.cc-tilbud .wpforms-form select {
	width: 100%;
	max-width: 100%;
	padding: .65rem .8rem;
	font-family: inherit;
	font-size: .95rem;
	color: var(--cc-tekst);
	background: var(--cc-hvid);
	border: 1px solid transparent;
	border-radius: var(--cc-radius);
	box-shadow: none;
}

.cc-tilbud .wpforms-form textarea { min-height: 110px; resize: vertical; }

.cc-tilbud .wpforms-form input:focus,
.cc-tilbud .wpforms-form textarea:focus {
	border-color: var(--cc-blaa-lys);
	outline: 3px solid var(--cc-blaa-lys);
	outline-offset: 1px;
}

.cc-tilbud .wpforms-form ::placeholder { color: #8a949d; opacity: 1; }

/* Samtykkefeltet.
   WPForms lægger afkrydsningsfelt og tekst som søskende inde i et <li>,
   så det er punktet – ikke etiketten – der skal være flex-beholder. */
.cc-tilbud .wpforms-form .wpforms-field-gdpr-checkbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-tilbud .wpforms-form .wpforms-field-gdpr-checkbox li {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
}

.cc-tilbud .wpforms-form .wpforms-label-hide { display: none; }

.cc-tilbud .wpforms-form .wpforms-field-label-inline {
	margin: 0;
	font-size: .82rem;
	font-weight: 400;
	line-height: 1.45;
	color: rgba(255, 255, 255, .85);
	cursor: pointer;
}

/* 24x24 er WCAG's mindstemål for noget, man skal ramme med en finger. */
.cc-tilbud .wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"] {
	margin: 0;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	accent-color: var(--cc-blaa-lys);
	cursor: pointer;
}

/* Knappen */
.cc-tilbud .wpforms-form .wpforms-submit-container { padding: .4rem 0 0; }

.cc-tilbud .wpforms-form button[type="submit"] {
	width: 100%;
	padding: .85rem 1.6rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: var(--cc-hvid);
	background: var(--cc-blaa);
	border: 2px solid var(--cc-blaa);
	border-radius: var(--cc-radius);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.cc-tilbud .wpforms-form button[type="submit"]:hover,
.cc-tilbud .wpforms-form button[type="submit"]:focus-visible {
	background: var(--cc-hvid);
	border-color: var(--cc-hvid);
	color: var(--cc-navy);
}

/* Fejlbeskeder skal kunne læses på mørk baggrund. */
.cc-tilbud .wpforms-form label.wpforms-error,
.cc-tilbud .wpforms-form em.wpforms-error {
	display: block;
	margin-top: .3rem;
	font-size: .82rem;
	font-weight: 600;
	color: #ffb4a8;
}

.cc-tilbud .wpforms-form input.wpforms-error,
.cc-tilbud .wpforms-form textarea.wpforms-error { border-color: #ffb4a8; }

.cc-tilbud .wpforms-confirmation-container-full {
	margin: 0;
	padding: 1rem;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--cc-radius);
	color: var(--cc-hvid);
}



/* Kundelogoer i anbefalingerne.
   Logoerne har vidt forskellige proportioner, så de får en fælles ramme
   at passe ind i – ellers kommer kortene til at se rodede ud. */
.cc-anbefaling__logo {
	width: 100%;
	max-width: 200px;
	height: 48px;
	object-fit: contain;
	object-position: left center;
}

/* 20. DE TRE CIRKLER
   ========================================================================== */
/* Cirklerne har brug for luft til det grå bånd ovenover. */
.cc-cirkler { padding-block: clamp(2.75rem, 6vw, 4.5rem); }

.cc-cirkler__raekke {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.25rem, 4vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	justify-items: center;
}

.cc-cirkel { width: 100%; max-width: 320px; }

.cc-cirkel__link {
	display: block;
	text-decoration: none;
	color: var(--cc-navy);
	text-align: center;
}

.cc-cirkel__billede {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	background: var(--cc-graa);
	box-shadow: var(--cc-skygge);
}

.cc-cirkel__billede img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

/* Mørkt slør, der lægger sig over billedet, når man peger på det. */
.cc-cirkel__billede::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--cc-navy);
	opacity: 0;
	transition: opacity .3s ease;
}

.cc-cirkel__link:hover .cc-cirkel__billede img,
.cc-cirkel__link:focus-visible .cc-cirkel__billede img { transform: scale(1.06); }

.cc-cirkel__link:hover .cc-cirkel__billede::after,
.cc-cirkel__link:focus-visible .cc-cirkel__billede::after { opacity: .35; }

/* Navnet står altid – ikke kun når musen er henover.
   På en telefon findes "musen henover" ikke. */
.cc-cirkel__navn {
	display: block;
	margin-top: 1rem;
	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.3;
}

.cc-cirkel__link:hover .cc-cirkel__navn,
.cc-cirkel__link:focus-visible .cc-cirkel__navn { text-decoration: underline; text-underline-offset: 3px; }

/* 21. INDGLIDNING
   Elementer glider blidt op på plads, når de kommer til syne.
   Starttilstanden sættes af JavaScript, så indholdet altid er synligt,
   hvis scriptet ikke kører.
   ========================================================================== */
.cc-ind {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s ease-out, transform .5s ease-out;
	transition-delay: var(--cc-forsink, 0ms);
	will-change: opacity, transform;
}

.cc-ind--vist {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Respekterer systemvalget om reduceret bevægelse. */
@media (prefers-reduced-motion: reduce) {
	.cc-ind {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* 22. HERO UDEN FORMULAR (servicesiderne)
   ========================================================================== */
.cc-hero--midt .cc-hero__indre {
	grid-template-columns: 1fr;
	text-align: center;
	min-height: clamp(300px, 38vw, 460px);
	align-content: center;
}

.cc-hero--midt .cc-hero__tekst { max-width: 760px; margin-inline: auto; }

.cc-hero--midt .cc-manchet { margin-inline: auto; }

.cc-hero--midt .cc-hero__handlinger { justify-content: center; }

/* 23. HANDLINGSBÅND MED FOTO
   ========================================================================== */
.cc-cta { position: relative; overflow: hidden; }

.cc-cta__indre { position: relative; z-index: 2; }

.cc-cta--billede { background: var(--cc-navy-dyb); }

/* Menneskene i billederne skal kunne ses ved siden af tekstfeltet. */
.cc-cta--billede:not(.cc-cta--institution) .cc-cta__foto {
	left: -10%;
	width: 110%;
	object-position: center 20%;
}

.cc-cta--institution .cc-cta__foto { object-position: center top; }

/* En smule ekstra mørke bag tekstspalten, så den altid kan læses –
   uanset hvor lyst fotoet er netop dér. */
.cc-cta--billede .cc-cta__tekst {
	background: rgba(19, 40, 57, .55);
	padding: 1.5rem;
	border-radius: var(--cc-radius-stor);
	backdrop-filter: blur(2px);
}

/* På en smal skærm er et bredt foto bag tekst næsten kun beskæring.
   Vis hele motivet først og læg teksten på ensfarvet navy nedenunder. */
@media (max-width: 767px) {
	.cc-cta--billede { padding-top: 0; }
	.cc-cta--billede .cc-cta__indre { padding-top: 2.5rem; }

	.cc-hero--billede .cc-hero__foto,
	.cc-cta--billede .cc-cta__foto {
		position: relative;
		inset: auto;
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain;
		object-position: center;
		transform: none !important;
		mask-image: none;
	}

	/* Prøvefotoet har en ubrugt hvid kant helt ude til højre. */
	.cc-cta--billede:not(.cc-cta--institution) .cc-cta__foto {
		left: 0;
		width: 130%;
		max-width: none;
	}

	.cc-hero--billede::before,
	.cc-cta--billede::before { display: none; }

	.cc-cta--billede .cc-cta__tekst {
		background: none;
		padding: 0;
		backdrop-filter: none;
	}
}

/* De brede skærme i kundens eksempler giver ellers ekstremt flade udsnit.
   Lad fotoet få sin egen halvdel, så ansigter og rengøringspersonale kan ses. */
@media (min-width: 1200px) {
	.cc-hero--institution .cc-hero__foto {
		width: 50%;
		max-width: none;
		object-position: center top;
	}

	.cc-hero--institution::before,
	.cc-cta--billede::before { display: none; }

	.cc-hero--institution .cc-hero__indre,
	.cc-cta--billede .cc-cta__indre {
		width: 50%;
		max-width: none;
		margin-left: 50%;
		margin-right: 0;
		padding-inline: clamp(2.5rem, 5vw, 7rem);
	}

	.cc-cta--billede { padding-block: 0; }
	.cc-cta--billede .cc-cta__foto {
		left: 0;
		width: 50%;
		max-width: none;
		object-position: center 25%;
	}

	.cc-cta--billede:not(.cc-cta--institution) .cc-cta__foto {
		left: 0;
		width: 60%;
		object-position: center 35%;
		clip-path: inset(0 16.667% 0 0);
	}

	.cc-cta--billede .cc-cta__indre {
		display: block;
		padding-block: clamp(3rem, 5vw, 5.5rem);
	}

	.cc-cta--billede .cc-cta__titel { margin-bottom: 1rem; }
	.cc-cta--billede .cc-cta__tekst {
		background: none;
		padding: 0;
		backdrop-filter: none;
	}
}

/* 24. "VI TILBYDER …" – BLÅ BOKSE
   ========================================================================== */
.cc-tilbyder__titel {
	font-size: 1.3rem;
	margin-bottom: .9em;
}

.cc-tilbyder__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .75rem;
}

.cc-tilbyder__punkt {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: 1rem 1.15rem;
	background: var(--cc-blaa);
	color: var(--cc-hvid);
	border-radius: var(--cc-radius);
	font-weight: 600;
	line-height: 1.45;
}

.cc-tilbyder__punkt .cc-ikon {
	width: 21px;
	height: 21px;
	margin-top: .12em;
}

/* 25. FAST KONTAKTSØJLE I HØJRE SIDE
   ========================================================================== */
.cc-soejle {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 45;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	box-shadow: var(--cc-skygge-stor);
	border-radius: var(--cc-radius) 0 0 var(--cc-radius);
	overflow: hidden;
}

.cc-soejle__knap {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .95rem 1rem;
	background: var(--cc-hvid);
	color: var(--cc-navy);
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.cc-soejle__knap + .cc-soejle__knap { border-top: 1px solid var(--cc-graa-kant); }

.cc-soejle__knap:hover,
.cc-soejle__knap:focus-visible { background: var(--cc-blaa); color: var(--cc-hvid); }

.cc-soejle__knap .cc-ikon { width: 22px; height: 22px; }

/* Teksten folder sig ud, når man peger på knappen. Den står i koden hele
   tiden, så skærmlæsere og tastaturbrugere kan få fat i den. */
.cc-soejle__tekst {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: .92rem;
	font-weight: 600;
	transition: max-width .25s ease;
}

.cc-soejle__knap:hover .cc-soejle__tekst,
.cc-soejle__knap:focus-visible .cc-soejle__tekst { max-width: 190px; }

/* På telefoner gør ringbaren i bunden det samme, og den er nemmere at
   ramme med tommelfingeren. */
@media (max-width: 767px) {
	.cc-soejle { display: none; }
}

/* Læsbarhed på fotoet. Headerlagene er 10 % sorte, så tekstskyggen
   hjælper den hvide tekst på fotoets lyseste partier. */
.cc-hero--billede .cc-hero__titel,
.cc-hero--billede .cc-manchet,
.cc-cta--billede .cc-cta__titel {
	text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 2px 18px rgba(0, 0, 0, .5);
}

/* 26. YDELSESLISTE MED SBA-MÆRKE (højre spalte på forsiden)
   ========================================================================== */
.cc-ydelsesliste__maerkelink {
	display: inline-block;
	border-radius: var(--cc-radius);
}

.cc-ydelsesliste__maerkelink:hover .cc-ydelsesliste__maerke,
.cc-ydelsesliste__maerkelink:focus-visible .cc-ydelsesliste__maerke { opacity: .8; }

.cc-ydelsesliste__maerke {
	transition: opacity .15s ease;
	width: 220px;
	max-width: 100%;
	height: auto;
	margin-bottom: 1.75rem;
}

.cc-ydelsesliste__titel {
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

.cc-ydelsesliste__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .55rem;
}

.cc-ydelsesliste__punkt {
	display: flex;
	align-items: center;
	gap: .65rem;
	line-height: 1.4;
}

.cc-ydelsesliste__punkt .cc-ikon {
	width: 21px;
	height: 21px;
	color: var(--cc-navy);
}

/* 27. FREMHÆVNING AF KONTAKTKORTET
   Når man klikker "Få et uforpligtende tilbud", er kortet ofte synligt i
   forvejen. Uden en tydelig reaktion virker knappen død – derfor blinker
   kortet kort og markøren sættes i det første felt.
   ========================================================================== */
.cc-tilbud { transition: box-shadow .3s ease, transform .3s ease; }

.cc-tilbud--fremhaevet {
	animation: cc-puls 2.6s ease-out;
}

/* Ringen står tydeligt det meste af tiden og toner først ud til sidst –
   en ring, der straks forsvinder, når man ikke at se. */
@keyframes cc-puls {
	0%   { box-shadow: var(--cc-skygge-stor), 0 0 0 0 rgba(120, 180, 220, .95); transform: scale(1); }
	6%   { box-shadow: var(--cc-skygge-stor), 0 0 0 7px rgba(120, 180, 220, .95); transform: scale(1.02); }
	20%  { box-shadow: var(--cc-skygge-stor), 0 0 0 7px rgba(120, 180, 220, .35); transform: scale(1); }
	34%  { box-shadow: var(--cc-skygge-stor), 0 0 0 7px rgba(120, 180, 220, .95); transform: scale(1.012); }
	48%  { box-shadow: var(--cc-skygge-stor), 0 0 0 7px rgba(120, 180, 220, .35); transform: scale(1); }
	62%  { box-shadow: var(--cc-skygge-stor), 0 0 0 7px rgba(120, 180, 220, .95); transform: scale(1.012); }
	85%  { box-shadow: var(--cc-skygge-stor), 0 0 0 7px rgba(120, 180, 220, .8); transform: scale(1); }
	100% { box-shadow: var(--cc-skygge-stor), 0 0 0 18px rgba(120, 180, 220, 0); transform: scale(1); }
}

/* Markøren sættes i første felt. Et musetryk giver normalt ingen synlig
   markering, så her tvinger vi den frem, mens fremhævningen står på. */
.cc-tilbud--fremhaevet .wpforms-form input:focus,
.cc-tilbud--fremhaevet .wpforms-form textarea:focus {
	outline: 3px solid var(--cc-blaa-lys);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cc-tilbud--fremhaevet {
		animation: none;
		outline: 3px solid var(--cc-blaa-lys);
		outline-offset: 4px;
	}
}

/* 28. ALMINDELIGE SIDER (privatlivspolitik og lignende)
   Lange tekstsider læses bedre med mere afdæmpede mellemoverskrifter
   end forsidens store bånd-overskrifter.
   ========================================================================== */
.cc-artikel h2 {
	font-size: clamp(1.3rem, 1.12rem + .7vw, 1.65rem);
	margin-top: 2em;
}

.cc-artikel h3 { font-size: 1.15rem; }

.cc-artikel > h1 { margin-bottom: .8em; }

/* 29. KUNDELOGOER
   ========================================================================== */
.cc-kundelogoer {
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
	background: var(--cc-hvid);
	border-bottom: 1px solid var(--cc-graa-kant);
}

.cc-kundelogoer__titel {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cc-tekst-daempet);
	text-align: center;
	margin-bottom: 1.25rem;
}

.cc-kundelogoer__raekke {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.75rem, 5vw, 4rem);
}

.cc-kundelogoer__raekke img {
	width: auto;
	max-width: 170px;
	height: 34px;
	object-fit: contain;
	/* Dæmpet, så logoerne ikke stjæler opmærksomheden fra heroen. */
	opacity: .55;
	filter: grayscale(1);
	transition: opacity .2s ease, filter .2s ease;
}

.cc-kundelogoer__raekke li:hover img { opacity: 1; filter: none; }

/* 30. NØGLETAL
   ========================================================================== */
.cc-noegletal { padding-block: clamp(2.5rem, 5vw, 4rem); }

.cc-noegletal__raekke {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	text-align: center;
}

.cc-noegletal__tal {
	margin: 0 0 .1em;
	font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem);
	font-weight: 800;
	line-height: 1;
	color: var(--cc-blaa);
	/* Tallene må ikke skifte bredde, mens de tælles op. */
	font-variant-numeric: tabular-nums;
}

.cc-noegletal__navn {
	margin: 0 0 .35em;
	font-weight: 700;
	color: var(--cc-navy);
}

.cc-noegletal__note {
	margin: 0;
	font-size: .9rem;
	color: var(--cc-tekst-daempet);
	max-width: 26ch;
	margin-inline: auto;
}

/* 31. SÅDAN KOMMER I I GANG
   ========================================================================== */
.cc-trin__raekke {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	counter-reset: trin;
}

.cc-trin__punkt {
	position: relative;
	padding: 1.75rem 1.5rem 1.5rem;
	background: var(--cc-hvid);
	border-radius: var(--cc-radius-stor);
	border: 1px solid var(--cc-graa-kant);
}

.cc-trin__nummer {
	position: absolute;
	top: -18px;
	left: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--cc-blaa);
	color: var(--cc-hvid);
	font-weight: 800;
}

.cc-trin__titel { font-size: 1.12rem; margin-bottom: .4em; }
.cc-trin__tekst { margin: 0; font-size: .95rem; color: var(--cc-tekst-daempet); }
.cc-trin__handling { text-align: center; margin: 2.25rem 0 0; }

/* 32. "VI HAR ÅBENT NU"
   ========================================================================== */
.cc-tilbud__telefonlinje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .9rem;
	margin: 0 0 1.25rem;
}

.cc-tilbud__ring {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--cc-hvid);
	text-decoration: none;
}

.cc-tilbud__ring:hover,
.cc-tilbud__ring:focus-visible { color: var(--cc-hvid); text-decoration: underline; }

.cc-tilbud__ring .cc-ikon { width: 19px; height: 19px; }

.cc-aabent {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .82rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .85);
}

.cc-aabent__prik {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6ec98a;
	box-shadow: 0 0 0 3px rgba(110, 201, 138, .25);
}

/* Ringen breder sig ud og forsvinder — som et lys, der er tændt. */
.cc-aabent__prik::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #6ec98a;
	animation: cc-lys 2s ease-out infinite;
}

@keyframes cc-lys {
	0%   { transform: scale(1);   opacity: .7; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}

/* Uden for åbningstid står lyset stille — der er ikke noget at gøre opmærksom på. */
.cc-aabent--lukket .cc-aabent__prik::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
	.cc-aabent__prik::after { animation: none; }
}

.cc-aabent--lukket .cc-aabent__prik {
	background: #d8a24a;
	box-shadow: 0 0 0 3px rgba(216, 162, 74, .25);
}

/* På hvid baggrund (kontaktsiden) */
.cc-kontaktliste .cc-aabent { color: var(--cc-tekst-daempet); }

/* 33. FLUEBEN, DER TEGNES IND
   ========================================================================== */
.cc-ikon--flueben-streg .cc-hak {
	stroke-dasharray: 14;
	stroke-dashoffset: 0;
}

/* Kun når punktet glider ind, tegnes hakket. */
.cc-ind .cc-ikon--flueben-streg .cc-hak { stroke-dashoffset: 14; }

.cc-ind--vist .cc-ikon--flueben-streg .cc-hak {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset .5s ease-out .25s;
}

@media (prefers-reduced-motion: reduce) {
	.cc-ikon--flueben-streg .cc-hak,
	.cc-ind .cc-ikon--flueben-streg .cc-hak { stroke-dashoffset: 0; transition: none; }
}

/* 34. "TIL TOPPEN"
   ========================================================================== */
.cc-toppen {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 46;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cc-navy);
	color: var(--cc-hvid);
	cursor: pointer;
	box-shadow: var(--cc-skygge-stor);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, background .15s ease;
}

.cc-toppen[hidden] { display: none; }

.cc-toppen--vist { opacity: 1; transform: none; }

.cc-toppen:hover,
.cc-toppen:focus-visible { background: var(--cc-blaa); }

.cc-toppen .cc-ikon { width: 22px; height: 22px; }

/* Ringbaren fylder bunden på telefoner — flyt knappen op over den. */
@media (max-width: 767px) {
	.cc-toppen { bottom: calc(64px + env(safe-area-inset-bottom)); width: 42px; height: 42px; }
}

/* 35. FOOTERENS SKYLINE
   ========================================================================== */
.cc-footer { position: relative; overflow: hidden; }

.cc-footer .cc-hero__skyline {
	top: 0;
	bottom: auto;
	height: clamp(60px, 9vw, 110px);
	color: #6f9fc4;
	transform: scaleY(-1);
	opacity: .55;
}

.cc-footer__indre,
.cc-footer__bund { position: relative; z-index: 1; }

.cc-footer__indre { padding-top: clamp(3.5rem, 8vw, 5rem); }

/* 36. LØFT PÅ ANBEFALINGSKORT
   ========================================================================== */
.cc-anbefaling {
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.cc-anbefaling:hover {
	transform: translateY(-3px);
	box-shadow: var(--cc-skygge);
}

.cc-anbefaling__kunder {
	list-style: none;
	margin: 0;
	padding: 0;
	min-height: 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-weight: 700;
	font-size: .93rem;
	line-height: 1.35;
	color: var(--cc-navy);
}

/* 37. TILBUDSKNAP I KONTAKTSØJLEN
   ========================================================================== */
.cc-soejle__knap--fremhaevet {
	background: var(--cc-blaa);
	color: var(--cc-hvid);
}

.cc-soejle__knap--fremhaevet:hover,
.cc-soejle__knap--fremhaevet:focus-visible { background: var(--cc-navy); color: var(--cc-hvid); }

.cc-soejle__knap--fremhaevet .cc-ikon { transform: rotate(-90deg); }

/* ==========================================================================
   Cookie-samtykke
   Banneret er modalt: sløret spærrer for musen, og samtykke.js holder
   tastaturet inde i boksen. Derfor må intet her gøre det svært at se,
   hvor fokus står.
   ========================================================================== */

.cc-samtykke__sloer {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(19, 40, 57, .55);
	opacity: 0;
	transition: opacity .22s ease;
}

.cc-samtykke__sloer.er-aaben { opacity: 1; }

/*
 * Selve laget fylder skærmen og centrerer kortet. Det tager ikke imod
 * klik, så sløret nedenunder stadig kan mærke dem.
 */
.cc-samtykke {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity .22s ease;
}

/* display: flex må ikke overstyre HTML's hidden-attribut efter lukning. */
.cc-samtykke[hidden] { display: none; }

.cc-samtykke.er-aaben { opacity: 1; }

/* Foldes valgene ud, må kortet kunne rulle på en lav skærm. */
.cc-samtykke__indre {
	pointer-events: auto;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: 1.5rem;
	background: var(--cc-hvid);
	color: var(--cc-tekst);
	border-radius: var(--cc-radius-stor);
	box-shadow: var(--cc-skygge-stor);
	transform: translateY(12px) scale(.98);
	transition: transform .22s ease;
}

.cc-samtykke.er-aaben .cc-samtykke__indre { transform: none; }

/*
 * Boksen får kun fokus fra script og kan ikke nås med Tab, så den skal
 * ikke tegne en fokusring. Knapperne indeni har deres egen.
 */
.cc-samtykke__indre:focus { outline: none; }

.cc-samtykke__titel {
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--cc-navy);
}

.cc-samtykke__tekst {
	margin: 0 0 1.25rem;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--cc-tekst-daempet);
}

.cc-samtykke__tekst a {
	color: var(--cc-blaa);
	text-underline-offset: 2px;
}

/* ---------- de enkelte valg ---------- */

.cc-samtykke__valg {
	margin: 0 0 1.25rem;
	border-top: 1px solid var(--cc-graa-kant);
}

.cc-samtykke__linje {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: .9rem 0;
	border-bottom: 1px solid var(--cc-graa-kant);
	cursor: pointer;
}

.cc-samtykke__linje--laast { cursor: default; }

.cc-samtykke__info {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	flex: 1;
}

.cc-samtykke__navn {
	font-weight: 600;
	font-size: .95rem;
	color: var(--cc-navy);
}

.cc-samtykke__hjaelp {
	font-size: .82rem;
	line-height: 1.5;
	color: var(--cc-tekst-daempet);
}

/*
 * Afkrydsningsfeltet gemmes for øjet, men bliver liggende for skærmlæsere
 * og tastatur. Kontakten ved siden af er ren pynt (aria-hidden), og den
 * tegner fokusringen, når feltet har fokus.
 */
.cc-samtykke__linje input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.cc-samtykke__switch {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 24px;
	margin-top: .1rem;
	border-radius: 999px;
	background: var(--cc-graa-kant);
	transition: background .18s ease;
}

.cc-samtykke__switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--cc-hvid);
	box-shadow: var(--cc-skygge);
	transition: transform .18s ease;
}

.cc-samtykke__linje input:checked ~ .cc-samtykke__switch { background: var(--cc-blaa); }
.cc-samtykke__linje input:checked ~ .cc-samtykke__switch::after { transform: translateX(20px); }
.cc-samtykke__linje input:disabled ~ .cc-samtykke__switch { opacity: .55; }

.cc-samtykke__linje input:focus-visible ~ .cc-samtykke__switch {
	outline: 3px solid var(--cc-blaa);
	outline-offset: 3px;
}

/* ---------- knapperne ---------- */

.cc-samtykke__knapper {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
}

.cc-samtykke__knap {
	padding: .7rem 1.2rem;
	font-family: var(--cc-skrift);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--cc-radius);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.cc-samtykke__knap:focus-visible {
	outline: 3px solid var(--cc-blaa);
	outline-offset: 2px;
}

.cc-samtykke__knap--ja {
	background: var(--cc-blaa);
	border-color: var(--cc-blaa);
	color: var(--cc-hvid);
	margin-left: auto;
}

.cc-samtykke__knap--ja:hover {
	background: var(--cc-blaa-moerk);
	border-color: var(--cc-blaa-moerk);
}

.cc-samtykke__knap--afvis {
	background: transparent;
	border-color: var(--cc-graa-kant);
	color: var(--cc-navy);
}

.cc-samtykke__knap--afvis:hover { border-color: var(--cc-navy); }

.cc-samtykke__knap--gem {
	background: var(--cc-navy);
	border-color: var(--cc-navy);
	color: var(--cc-hvid);
}

.cc-samtykke__knap--gem:hover { background: var(--cc-navy-dyb); border-color: var(--cc-navy-dyb); }

.cc-samtykke__knap--tekst {
	background: none;
	color: var(--cc-tekst-daempet);
	padding-inline: .35rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cc-samtykke__knap--tekst:hover { color: var(--cc-navy); }

/*
 * På en smal skærm får knapperne hver sin linje. "Accepter alle" står
 * øverst, fordi den er den mest brugte, men "Afvis alle" er lige så
 * synlig og lige så let at ramme. Et reelt valg kræver, at de to
 * muligheder vejer lige meget.
 */
@media (max-width: 480px) {
	.cc-samtykke__knapper {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.cc-samtykke__knap--ja { margin-left: 0; }
	.cc-samtykke__knap--tekst { order: 1; }
}

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

/* ==========================================================================
   "Sender ..." mens konverteringen er undervejs
   Vises fra det øjeblik WPForms har svaret, til vi skifter side. Uden den
   ser formularen færdig ud, mens vi stadig venter, og så trykker folk igen.
   ========================================================================== */

.wpforms-container.cc-sender-aktiv { position: relative; }

/* Formularen bag ved må ikke kunne røres imens. */
.wpforms-container.cc-sender-aktiv form { pointer-events: none; }

.cc-sender {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	font-weight: 600;
	color: var(--cc-hvid);
	background: rgba(19, 40, 57, .78);
	border-radius: var(--cc-radius-stor);
	backdrop-filter: blur(1px);
}

.cc-sender__hjul {
	width: 22px;
	height: 22px;
	border: 3px solid rgba(255, 255, 255, .35);
	border-top-color: var(--cc-hvid);
	border-radius: 50%;
	animation: cc-snurr .7s linear infinite;
}

@keyframes cc-snurr {
	to { transform: rotate(360deg); }
}

/*
 * Ved reduceret bevægelse står hjulet stille. Teksten "Sender ..." bærer
 * beskeden alene, og den er også den, en skærmlæser får.
 */
@media (prefers-reduced-motion: reduce) {
	.cc-sender__hjul { animation: none; }
}

/* ==========================================================================
   Tak-siden
   ========================================================================== */

.cc-tak__maerke {
	margin: 0 0 1rem;
	line-height: 0;
}

.cc-tak__flueben {
	width: 56px;
	height: 56px;
	color: var(--cc-hvid);
	/* Fluebenet er hvidt på et mørkt foto, så det får sin egen lille skygge
	   for at holde formen, også over en lys del af billedet. */
	filter: drop-shadow(0 2px 6px rgba(19, 40, 57, .45));
}

.cc-tak__haster {
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
	text-align: center;
	font-size: 1.05rem;
	color: var(--cc-tekst-daempet);
}

.cc-tak__telefon {
	font-weight: 700;
	color: var(--cc-blaa);
	white-space: nowrap;
}

.cc-tak__telefon:hover,
.cc-tak__telefon:focus-visible { color: var(--cc-blaa-moerk); }