/* ============================================================
   BEHANDLER-CV · zency-behandler-page.php
   ------------------------------------------------------------
   Live på alle 125 behandlersider siden 20-08-2026.

   Alle klasser er .zcv-* (siden) eller .zch- og .zch__ (heroen). Udkast-
   navnene fra kladde-sporet — .zcva-* (udkast A), .zcvb (udkast B) og
   .zch--3 + .zch3__ (hero 3) — er omdøbt væk 21-08-2026 sammen med den døde
   CSS fra de forkastede udkast. Der er kun ét CV nu; hvis du støder på et
   navn der peger på "et af udkastene", er det en rest der skal rettes.

   Bygger på designsystemets tokens og .zb-*-møblerne fra behandling.css
   (wrap, crumbs, eyebrow, trust-strip) — de er allerede afprøvet i produktion.
   Bredden er .zb-wrap (1200px) som resten af sitet; kun brødtekst holdes
   smallere, fordi et 1200px langt tekstafsnit ikke kan læses.
   ============================================================ */

.zcv { background: var(--color-cream); }

/* Brødtekst skal have et læsbart spaltemål selv i en bred sektion. */
.zcv-prose { max-width: 72ch; }

/* ---- Delt: portræt m. RAB-mærke ----------------------------------------
   Live lægger RAB-logoet oven på profilfotoet. Mærket hører til ansigtet:
   det er dér øjet er, når man afgør om man har fat i en rigtig behandler. */
.zcv-portrait { position: relative; display: inline-block; flex: none; line-height: 0; }
.zcv-portrait--rab { padding-top: 0.4rem; padding-right: 0.4rem; }
.zcv-portrait__rab {
	position: absolute;
	top: 0;
	right: 0;
	width: 34%;
	max-width: 4.2rem;
	min-width: 2.1rem;
	height: auto;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 8px rgba(20, 48, 42, 0.25);
}

/* ---- Delt: fakta-liste -------------------------------------------------
   To kolonner fra medium og op: listen er vokset til 6-7 punkter, og som én
   søjle skubber den alt under sig unødigt langt ned. */

.zcv-facts__ic {
	flex: none;
	width: 2.1rem;
	height: 2.1rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--color-sage-200);
	color: var(--color-sage-600);
}
.zcv-facts__ic svg { width: 1.05rem; height: 1.05rem; }
/* iOS' data-detectors injicerer <a> omkring adresser; span-wrap + neutralizer
   holder flex-layoutet intakt (se reference_ios_data_detectors_address). */
.zcv-facts__txt {
	font-family: var(--font-source);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-ink-soft);
	min-width: 0;
}
.zcv-facts__txt a { color: var(--color-sage-700); text-decoration: underline; text-underline-offset: 2px; }
.zcv-facts__txt a:hover { color: var(--color-olive); }

/* ---- Delt: næste ledige tid -------------------------------------------
   Chippen står lige over CTA'en og skal kunne bære sin egen vægt dér —
   den var for sammenpresset til at læses som en knap. */
.zcv-slot__dot {
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--color-sage-500);
	box-shadow: 0 0 0 4px rgba(89, 115, 110, 0.16);
}

/* ---- Delt: behandlerens egen vurdering --------------------------------- */
.zcv-rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.6rem 0 0;
	font-family: var(--font-source);
	font-size: 0.95rem;
	color: var(--color-ink-soft);
}
.zcv-rating__stars { color: #00b67a; letter-spacing: 1px; }

/* ---- Delt: Zency-garantierne (det mørke panel) -------------------------
   Brians valg 29-07-2026: panelet kommunikerer punkterne bedre end en flad
   linje med flueben, så begge udkast bruger det nu. .z-panel-forest er den
   FLADE mørkegrønne — gradienten dumper WCAG AA på lille tekst. */

/* Vandret variant: punkterne på linje i fuld bredde. Bruges hvor panelet ligger
   under indholdet frem for ved siden af — så konkurrerer det ikke med fakta om
   den lodrette opmærksomhed, men lukker kortet med ét samlet argument. */


/* ---- Delt: priser ------------------------------------------------------
   Ren information, ikke et valg: varigheden vælges som første skridt inde i
   GHL-funnelen, så et klik her ville betyde at man valgte det samme to gange. */
.zcv-prices { margin: 0 0 1.4rem; }
.zcv-prices--center { margin: 0 auto 1.8rem; max-width: 46rem; text-align: center; }
.zcv-prices--center .zcv-prices__row { justify-content: center; }
.zcv-prices__from {
	font-family: var(--font-merriweather);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-forest);
	margin: 0;
}
.zcv-prices__row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.zcv-price {
	flex: 1 1 8rem;
	min-width: 7.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.7rem 1rem;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-xl);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.zcv-price:hover { border-color: var(--color-sage-400); }
.zcv-price[aria-pressed="true"] { border-color: var(--color-olive); box-shadow: inset 0 0 0 1px var(--color-olive); }
.zcv-prices--center .zcv-price { text-align: center; align-items: center; flex: 0 1 9rem; }
.zcv-price__dur {
	font-family: var(--font-source);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
}
.zcv-price__amt {
	font-family: var(--font-merriweather);
	font-weight: 700;
	font-size: 1.12rem;
	color: var(--color-forest);
}
.zcv-prices__note {
	margin: 0.75rem 0 0;
	font-family: var(--font-source);
	font-size: 0.9rem;
	color: var(--color-ink-soft);
}

/* ---- Delt: booking -----------------------------------------------------
   Baggrunden er den fra det første udkast (--color-cream-2): den varme tone
   løfter kalenderen frem som sidens omdrejningspunkt, hvor hvid lod den flyde
   sammen med sektionerne omkring. */
.zcv-booking { background: var(--color-cream-2); padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; scroll-margin-top: var(--zk-header-h, 120px); }
/* Bredden følger HVAD der står i sektionen.

   Vores eget booking-flow er en del af siden og skal flugte med den: samme
   1200px som Praktisk, anmeldelserne og resten. Uden det står bookingen — hele
   sidens destination — 80px smallere inde end alt andet, og det læser som en
   fejl. Flowets egen --zbf-max (1120px) er sat til en side hvor den står alene.

   Falder vi tilbage til den gamle GHL-funnel i en iframe, gælder live's 1245px
   stadig: funnelen er DESIGNET til den bredde, og presses den ned i en smallere
   spalte, ombryder dens eget grid til noget andet end det designede. */
.zcv-embed--flow .zbf { --zbf-max: 100%; }
.zcv-booking:has(.zcv-embed:not(.zcv-embed--flow)) .zb-wrap { max-width: calc(1245px + 2.5rem); }
@media (min-width: 768px) {
	.zcv-booking:has(.zcv-embed:not(.zcv-embed--flow)) .zb-wrap { max-width: calc(1245px + 4rem); }
}
.zcv-tabs { display: flex; gap: 0.5rem; justify-content: center; margin: 0 0 1.2rem; }
.zcv-tabs button {
	font-family: var(--font-source);
	font-size: 0.97rem;
	padding: 0.55rem 1.3rem;
	border-radius: 9999px;
	border: 1px solid var(--color-sage-200);
	background: #fff;
	color: var(--color-ink-soft);
	cursor: pointer;
}
.zcv-tabs button[aria-selected="true"] {
	background: var(--color-forest);
	border-color: var(--color-forest);
	color: #fff;
}
.zcv-embed {
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-2xl);
	overflow: hidden;
}
.zcv-embed iframe { width: 100%; border: 0; display: block; height: 1180px; }
@media (max-width: 980px) { .zcv-embed iframe { height: 1740px; } }

/* Booking-flowet (zency-booking-flow) bærer sin EGEN ramme: hvide paneler med
   top-accent på en dæmpet bund, og et mørkt id-kort øverst. Lægger vi det ned i
   .zcv-embeds hvide kasse, får man to rammer uden på hinanden og et hvidt felt
   bag et hvidt felt.

   overflow: visible er ikke kosmetik — flowets topbar er `position: sticky`, og
   en forfæder med overflow: hidden slår sticky ihjel uden en fejlmeddelelse. */
.zcv-embed--flow {
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

/* ---- Delt: behandlinger og symptomer -----------------------------------
   To lister frem for to poser piller: med 15 behandlinger og 12 symptomer
   giver piller et tekstfelt uden struktur, fordi hvert element starter et
   tilfældigt sted. En liste har én lodret kant at løbe ned ad.
   Panelerne strækkes til samme højde (designprincippet om lige høje kasser). */
.zcv-skills__grid {
	display: grid;
	gap: clamp(1rem, 0.8rem + 1vw, 1.6rem);
	grid-template-columns: 1fr;
	align-items: stretch;
}
@media (min-width: 860px) { .zcv-skills__grid { grid-template-columns: 1fr 1fr; } }
.zcv-skills__panel {
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-2xl);
	padding: clamp(1.1rem, 0.9rem + 1vw, 1.7rem);
}
.zcv-skills__panel--soft { background: var(--color-cream-2); border-color: var(--color-sand); }

.zcv-linklist { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 1080px) { .zcv-linklist { grid-template-columns: 1fr 1fr; column-gap: clamp(1rem, 2vw, 2rem); } }
.zcv-linklist li { border-bottom: 1px solid var(--color-line); }
.zcv-skills__panel--soft .zcv-linklist li { border-bottom-color: var(--color-sand); }
.zcv-linklist a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.62rem 0.2rem;
	font-family: var(--font-source);
	font-size: 0.98rem;
	line-height: 1.35;
	color: var(--color-forest);
	text-decoration: none;
}
.zcv-linklist a:hover { color: var(--color-olive); }
.zcv-linklist__ch { flex: none; width: 1rem; height: 1rem; color: var(--color-sage-400); transition: transform 0.15s ease; }
.zcv-linklist a:hover .zcv-linklist__ch { transform: translateX(2px); color: var(--color-olive); }
/* Ingen streg må hænge i luften nederst i en kolonne.
   I ét gitter med TO kolonner er de sidste to elementer altid de nederste i hver
   sin kolonne — uanset om antallet er lige (de deler sidste række) eller ulige
   (det næstsidste er sidst i højre kolonne, det sidste alene i venstre). Derfor
   holder :nth-last-child(-n+2) for begge tilfælde. På én kolonne er det kun det
   allersidste der skal af med stregen. */
.zcv-linklist li:last-child { border-bottom: 0; }
@media (min-width: 1080px) { .zcv-linklist li:nth-last-child(-n+2) { border-bottom: 0; } }

/* ---- Delt: om + uddannelse --------------------------------------------
   Brødteksten skal holdes på ~72 tegn for at kunne læses, så i en 1200px-sektion
   stod hele højre side tom. Uddannelserne fyldte samtidig en hel sektion for
   fire linjer. Sammen udfylder de hinanden. */
.zcv-about__grid {
	display: grid;
	gap: clamp(1.6rem, 1.2rem + 2vw, 3rem);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 940px) {
	.zcv-about__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
	.zcv-about__grid--single { grid-template-columns: 1fr; }
}
.zcv-about__body .z-section-h2 { margin-top: 0; }
.zcv-about__aside {
	background: var(--color-cream-2);
	border: 1px solid var(--color-sand);
	border-radius: var(--radius-2xl);
	padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
}
.zcv-about__aside .z-section-h2 { margin-top: 0; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }

/* ---- Delt: uddannelse -------------------------------------------------- */
.zcv-edu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.zcv-about__aside .zcv-edu li { border-bottom-color: var(--color-sand); }
.zcv-edu li {
	display: grid;
	grid-template-columns: 4.2rem 1fr;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--color-line);
}
.zcv-edu__year { font-family: var(--font-dosis); font-weight: 700; color: var(--color-sage-600); }
.zcv-edu__name { display: block; font-family: var(--font-source); font-weight: 600; color: var(--color-forest); }
.zcv-edu__name a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.zcv-edu__place { display: block; font-family: var(--font-source); font-size: 0.92rem; color: var(--color-ink-soft); }

/* ---- Delt: praktisk + kort ---------------------------------------------
   align-items sættes IKKE til start: kasserne skal være lige høje. */
.zcv-practical { background: var(--color-cream); padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; }
.zcv-practical__grid { display: grid; gap: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .zcv-practical__grid { grid-template-columns: 0.85fr 1.15fr; } }
.zcv-practical__grid--single { grid-template-columns: 1fr !important; }
.zcv-panel {
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-2xl);
	padding: clamp(1.3rem, 1rem + 1.2vw, 2rem);
	display: flex;
	flex-direction: column;
}
.zcv-panel .z-section-h2 { margin-top: 0; }
.zcv-panel__note { font-family: var(--font-source); font-size: 0.92rem; color: var(--color-ink-soft); margin: 1rem 0 0; }
.zcv-panel__note--lead { margin-top: 0; margin-bottom: 1rem; }
.zcv-panel__note a { color: var(--color-sage-700); text-decoration: underline; text-underline-offset: 2px; }
.zcv-panel__note a:hover { color: var(--color-olive); }
/* Adressen og kortet er én enhed — de svarer på det samme spørgsmål.
   Var 1rem, altså samme 16px som op til overskriften, så alle tre lå som
   løse ting. Samme greb som Praktisk-panelet ovenfor. */
.zcv-panel__addr { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.5rem; }
/* Kortet æder den plads der bliver til overs, så begge kasser slutter i bund. */
.zcv-panel--map .zcv-map { flex: 1 1 auto; min-height: 320px; }

.zcv-hours { margin: 0.5rem 0 0; }
.zcv-hours > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.42rem 0;
	border-bottom: 1px solid var(--color-line);
	font-family: var(--font-source);
	font-size: 0.96rem;
}
.zcv-hours > div:last-child { border-bottom: 0; }
.zcv-hours dt { color: var(--color-ink-soft); margin: 0; }
.zcv-hours dd { margin: 0; font-weight: 600; color: var(--color-forest); }
.zcv-hours--closed dd { font-weight: 400; color: var(--color-ink-soft); }

.zcv-info { margin: 1.4rem 0 0; display: grid; gap: 0.7rem; }
.zcv-info > div { display: grid; gap: 0.15rem; }
.zcv-info dt {
	font-family: var(--font-source);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-sage-600);
	margin: 0;
}
.zcv-info dd { margin: 0; font-family: var(--font-source); color: var(--color-ink); }

.zcv-map { border-radius: var(--radius-xl); overflow: hidden; }
/* Maps V2 sætter selv z-index:0 på wrapperen; isolér så kortet ikke lægger sig
   over den klæbende bookingbjælke (se reference_zmap_stacking_context). */
.zcv-map { isolation: isolate; position: relative; z-index: 0; }
/* Radius-kortet bygges af cv.js og har ingen indre højde af sig selv. */
.zcv-map[data-zcv-radius] { min-height: 360px; background: var(--color-sage-50); }
.zcv-map[data-zcv-radius] .leaflet-container { height: 100%; min-height: 360px; }

/* ---- Delt: vejen videre ------------------------------------------------ */
.zcv-other { background: var(--color-cream-2); padding: clamp(2.5rem, 2rem + 3vw, 4rem) 0; text-align: center; }
.zcv-other__sub {
	font-family: var(--font-source);
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--color-ink-soft);
	max-width: 52ch;
	margin: 0.9rem auto 1.6rem;
	text-wrap: pretty;
}

/* ---- Delt: bookingkortet -----------------------------------------------
   Kortet fra det første udkast. Ét kort, tre steder: i beslutningspanelets
   handlingskolonne, som klæbende kort på desktop og som klæbende bjælke på
   mobil. Prisen, den næste ledige tid og CTA-sproget findes derfor kun ét sted. */
.zcv-card {
	background: var(--color-cream);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-xl);
	padding: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 18px 40px -26px rgba(68, 103, 91, 0.35);
}
.zcv-card__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.2rem; }
.zcv-card__img { width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; flex: none; }
.zcv-card__name {
	font-family: var(--font-merriweather);
	font-size: 1.1rem;
	color: var(--color-forest);
	margin: 0;
	line-height: 1.25;
}
.zcv-card .zcv-rating { margin-top: 0.15rem; font-size: 0.9rem; }
.zcv-card__lbl { margin: 0 0 0.5rem; }

.zcv-durations { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.45rem; }
.zcv-durations a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: 0.85rem;
	padding: 0.65rem 0.95rem;
	font-family: var(--font-source);
	font-size: 0.95rem;
	color: var(--color-forest);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.zcv-durations a:hover { border-color: var(--color-sage-400); }
.zcv-durations a[aria-pressed="true"] { border-color: var(--color-olive); box-shadow: inset 0 0 0 1px var(--color-olive); }
.zcv-durations__p { font-family: var(--font-merriweather); font-weight: 700; }

/* Næste ledige tid er en knap, ikke en oplysning — den er det stærkeste
   argument på kortet, så den skal kunne trykkes. */
.zcv-card__slot {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.7rem;
	padding: 0.6rem 0.95rem;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: 0.85rem;
	font-family: var(--font-source);
	font-size: 0.93rem;
	color: var(--color-ink-soft);
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.zcv-card__slot:hover { border-color: var(--color-sage-400); }
.zcv-card__slot strong { color: var(--color-forest); margin-left: auto; }
.zcv-card__slot-lbl { white-space: nowrap; }
.zcv-card__cta { width: 100%; }
.zcv-card__foot { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--color-line); display: grid; gap: 0.55rem; }
.zcv-card__foot > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.zcv-card__foot dt {
	font-family: var(--font-dosis);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-sage-500);
	margin: 0;
}
.zcv-card__foot dd {
	font-family: var(--font-source);
	font-size: 0.9rem;
	color: var(--color-ink-soft);
	margin: 0;
	text-align: right;
}

/* ---- Delt: klæbende booking-adgang -------------------------------------
   zency-cro #28 (ICE 7,0). Samme kort, to former: nederst til højre på desktop,
   og foldet sammen til en bjælke på mobil, hvor et helt kort ville dække
   halvdelen af skærmen. JS viser den kun når hverken hero-CTA'en eller
   kalenderen er i billedet — ellers ville den dække den kalender den forsøger
   at sende folk hen til. */
.zcv-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	transform: translateY(110%);
	transition: transform 0.22s ease;
}
.zcv-dock[hidden] { display: block; }        /* [hidden] styrer kun tilstand, ikke visning */
.zcv-dock--in { transform: translateY(0); }

/* Mobil: kortet foldes til en bjælke — foto, navn og knap. */
@media (max-width: 999px) {
	/* Tre spalter: foto · navn med tiden UNDER sig · knap. Før stod navn og tid
	   ved siden af hinanden, og på en 390px-skærm betød det at "Kim N." brød over
	   to linjer og knappens tekst blev klippet. `display: contents` på __head
	   løfter foto og navneblok op i gitteret, så de kan placeres hver for sig —
	   markup'en er den samme som på desktop. */
	.zcv-card--dock {
		border-radius: 0;
		border: 0;
		border-top: 1px solid var(--color-line);
		background: #fff;
		box-shadow: 0 -8px 28px -18px rgba(20, 48, 42, 0.55);
		padding: 0.55rem clamp(0.8rem, 3.5vw, 1.4rem);
		padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 0.7rem;
	}
	.zcv-card--dock .zcv-card__head { display: contents; }
	.zcv-card--dock .zcv-card__img { grid-column: 1; }
	.zcv-card--dock .zcv-card__head > div { grid-column: 2; min-width: 0; }
	.zcv-card--dock .zcv-card__cta { grid-column: 3; }
	.zcv-card--dock .zcv-card__name { font-size: 1rem; white-space: nowrap; }
	/* Tiden som diskret underlinje — ingen kant, ingen flade, ingen egen højde.
	   nowrap + ellipsis frem for ombrydning: bjælken må aldrig blive to rækker
	   høj, og en afkortet tid er bedre end en bjælke der vælter layoutet. */
	.zcv-card--dock .zcv-card__slot {
		grid-column: 2;
		grid-row: 2;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		font-size: 0.76rem;
		gap: 0.35rem;
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
	}
	.zcv-card--dock .zcv-card__slot strong { margin-left: 0; }
	/* Tiden er UDE af bjælken på mobil.
	   Målt: mellemspalten er 135px, mens prik + "Næste ledige tid" + tidspunkt
	   kræver 271px. Uden etiketten passer tidspunktet — men et nøgent
	   "I morgen kl. 10:15" ved siden af "Book min tid" kan læses som om man
	   booker netop den tid ved at trykke (Brian, 20-08-2026). Et misforstået
	   løfte er værre end en manglende oplysning, og tiden står i forvejen i
	   heroen med sin etiket. Bjælken er dermed: foto · navn · knap. */
	.zcv-card--dock .zcv-card__slot { display: none; }
	.zcv-card--dock .zcv-card__lbl,
	.zcv-card--dock .zcv-durations,
	.zcv-card--dock .zcv-card__foot { display: none; }
	.zcv-card--dock .zcv-card__head { margin: 0; }
	.zcv-card--dock .zcv-card__img { width: 2.7rem; height: 2.7rem; }
	.zcv-card--dock .zcv-card__cta { width: auto; white-space: nowrap; }
	.zcv-card--dock .zcv-rating { display: none; }
	/* Fra-prisen bæres af selve knappen på mobil; en ekstra linje ville presse
	   bjælken over to rækker på små skærme. */
	.zcv-card--dock .zcv-prices__from { display: none; }
}

@media (min-width: 1000px) {
	.zcv-dock {
		left: auto;
		right: clamp(1rem, 2vw, 2.2rem);
		bottom: clamp(1rem, 2vw, 2.2rem);
		width: 21rem;
		transform: translateY(calc(100% + 4rem));
	}
	.zcv-dock--in { transform: translateY(0); }
	.zcv-card--dock { background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 26px 52px -28px rgba(20, 48, 42, 0.55); }
	/* Kortet må ikke blive højere end skærmen når alle tre varigheder er med. */
	.zcv-card--dock .zcv-card__foot { display: none; }
}

/* ============================================================
   UDKAST A · "Profil"
   ============================================================ */


/* Portrættet holdes lille MED VILJE: 117 af 121 kilder er kvadratiske og
   typisk 300×300 px, så alt over ~220px begynder at se blødt ud. */


.zcv-about { background: #fff; padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; }
.zcv-skills { background: var(--color-cream); padding: clamp(2.2rem, 1.8rem + 2.4vw, 3.6rem) 0; }
.zcv-skills__intro { font-family: var(--font-source); color: var(--color-ink-soft); margin: 0 0 1.4rem; max-width: 62ch; }
.zcv-reviews { background: var(--color-cream); padding: clamp(2.2rem, 1.8rem + 2.4vw, 3.6rem) 0; }

/* ============================================================
   UDKAST B · "Booking først"
   ============================================================ */

/* Rollelinjen skal have plads nok til at bynavnet ikke ender alene på en
   linje for sig; text-wrap: pretty rydder resten af enkeltord-orphans op. */

/* Handlingskolonnen er nu bare bookingkortet — al styling bor i .zcv-card. */

/* Tryghedsrækken lukker kortet i fuld bredde. */


/* B lader kalenderen komme først; sektionerne under den skifter derfor tone,
   så to ens baggrunde ikke støder op mod hinanden. */
.zcv .zcv-about { background: #fff; }
.zcv .zcv-skills { background: var(--color-cream); }
.zcv .zcv-reviews { background: var(--color-cream); }

/* ============================================================
   HERO-FORSLAG (?hero=1|2|3) · .zch-*
   ------------------------------------------------------------
   Tre nye heroes til udkast B. Fælles greb — det er dem der løser
   "pladsen udnyttes ikke, og der er ikke balance":

     · Foto/navn/rating står ÉN gang. Før stod de to gange inden for
       700px (intro + bookingkortets hoved), og det åd netop den
       plads der nu er til rådighed.
     · Ingen hvid kasse inde i en hvid kasse. Hver hero har ÉT plan,
       og dybden kommer fra farve (mørkt bånd) eller en hårfin streg
       — ikke fra to næsten ens hvide flader oven på hinanden.
     · Faktalisten skal se bevidst ud ved 2 fakta og ved 7. Chips der
       flyder (hero 1) eller en kolonne der får lov at være kort
       (hero 2 og 3) gør det; en to-kolonne-liste midt i et bredt
       kort gør det ikke.

   Breakpoints følger husets skala (600/768/900/1024/1200).
   ============================================================ */

.zch { background: var(--color-cream); }
.zch__wrap { position: relative; }

.zch__eyebrow { margin: 0 0 0.55rem; }
.zch__h1 {
	color: var(--color-forest);
	margin: 0;
	text-wrap: balance;
}
.zch__role {
	font-family: var(--font-source);
	color: var(--color-deep);
	margin: 0.6rem 0 0;
	max-width: 52ch;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
	line-height: 1.55;
	text-wrap: pretty;
}
.zch__img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

/* Rating: stjernerne i brandets guld, tallet i forest. */
.zch-rating {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0.75rem 0 0;
	font-family: var(--font-source);
}
.zch-rating__stars { color: var(--color-gold); letter-spacing: 2px; font-size: 1.05rem; }
.zch-rating__val { color: var(--color-forest); font-weight: 600; }

/* ---- Næste ledige tid --------------------------------------------------
   Den grønne prik er et tilstands-signal (der ER en tid), ikke pynt — derfor
   samme sage som resten af navigationen. Oliven er knappen, og kun den. */
.zch-slot {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
	padding: 0.35rem 0;
	border-radius: 9999px;
}
.zch-slot__dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--color-sage-400);
	box-shadow: 0 0 0 4px rgba(126, 157, 147, 0.22);
	flex: none;
}
.zch-slot__body { display: flex; flex-direction: column; line-height: 1.25; }
.zch-slot__lbl {
	font-family: var(--font-dosis);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-sage-500);
}
.zch-slot__val { font-family: var(--font-source); color: var(--color-forest); font-weight: 600; }
.zch-slot:hover .zch-slot__val,
.zch-slot:focus-visible .zch-slot__val { text-decoration: underline; }

/* ---- Fakta som chips ---------------------------------------------------
   Piller der flyder. Ved tre fakta fylder de én linje, ved syv to — begge
   dele ser tilsigtet ud, og der opstår aldrig et hul i en kolonne. */

/* ---- Fakta som liste ---------------------------------------------------- */
.zch-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.zch-facts li { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-source); line-height: 1.4; }
.zch-facts__ic { width: 1.4rem; height: 1.4rem; flex: none; color: var(--color-sage-400); }
.zch-facts__ic svg { width: 100%; height: 100%; display: block; }
/* Ingen understregning i hvile: adressen og "Firmamassage" er links, men i en
   faktaliste skal alle punkter ligne hinanden (Brian, 20-08-2026). Understregning
   ved hover/tastaturfokus bliver — ellers kan man ikke se hvad der kan klikkes. */
.zch-facts__txt a { color: inherit; text-decoration: none; }
.zch-facts__txt a:hover,
.zch-facts__txt a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Tryghedslinje ------------------------------------------------------ */

/* ---- Handlingsrække ----------------------------------------------------- */
.zch-act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(0.9rem, 0.7rem + 1vw, 1.6rem);
	margin-top: clamp(1.3rem, 1rem + 1.2vw, 2rem);
	padding-top: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);
	border-top: 1px solid var(--color-line);
}
.zch-act__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.6rem; }
.zch-price {
	margin: 0;
	font-family: var(--font-merriweather);
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
	color: var(--color-forest);
}
.zch-act__note {
	margin: 0;
	font-family: var(--font-source);
	font-size: 0.92rem;
	color: var(--color-ink-soft);
}
.zch-act__btn { margin-left: auto; }
/* Knappen skal FYLDE mere — bredere, ikke højere (Brian, 20-08-2026). Kun
   vandret polstring plus en min-bredde; højden er designsystemets og røres
   ikke. Mobil er undtaget: der deler knappen række med prisen og skal kunne
   krympe. */
@media (min-width: 768px) {
	.zch .zch-act__btn {
		padding-inline: clamp(2.6rem, 1.6rem + 4vw, 4.5rem);
		min-width: clamp(13rem, 10rem + 8vw, 17rem);
	}
}
@media (max-width: 600px) {
	.zch-act { gap: 1rem; }
	.zch-act__facts { width: 100%; justify-content: space-between; }
	.zch-act__btn { margin-left: 0; width: 100%; }
}

/* ============================================================
   HERO 1 · "Nærvær"
   ------------------------------------------------------------
   Portrættet får ~200px (kilderne er 300-413px kvadratiske; mere ville
   skalere op), og ringen omkring det er heroens ene signatur: to bløde
   sage-ringe der giver ansigtet en plads at stå på uden en kasse.
   ============================================================ */

/* De to ringe: den inderste er kanten, den yderste er luften omkring den.
   Rene box-shadows, så de hverken påvirker layoutet eller RAB-mærkets plads. */

/* Mobil: portræt og navn på samme linje, resten under. `display: contents`
   løfter body-børnene op i hero-grid'et, så de kan placeres frit. */


/* ============================================================
   HERO 2 · "Mødet"
   ------------------------------------------------------------
   Mørkt bånd = kontekst (hvem), hvidt kort = valg (hvad og hvornår) —
   præcis det hierarki booking-flowet selv bruger 200px længere nede.
   Kortet hænger ud over båndets underkant, så de to flader læses som
   én komposition frem for to bokse ved siden af hinanden.
   ============================================================ */


/* min-width: 0 er ikke pynt: uden den nægter en flex-boks at lade sit
   indhold ombryde, og et langt bynavn i rollelinjen skubber portrættet ud. */


/* ============================================================
   HERO 3 · "Beviset"
   ------------------------------------------------------------
   Identiteten øverst i fuld bredde, derefter to spalter: fakta til
   venstre, en rigtig anmeldelse til højre. Citationstegnet er sat i
   Merriweather — brandets serif-accent, og heroens signatur.
   Højre spalte er aldrig tom: uden anmeldelser træder garantierne ind.
   ============================================================ */
/* ---- Højden: header + brødkrumme + hero ≈ 98 % af første skærm -----------
   Brians mål (20-08-2026): heroen skal fylde pladsen ud, men efterlade en
   stribe af næste sektion, så man kan SE at siden fortsætter under
   tryghedsbaren.

   Chrome'en over heroen er målt på produktionen: header 122px (top-bar 76 +
   nav-bar 46) + brødkrumme 48px = 170px. På mellembredder skifter headeren til
   mobil-udgaven (116px); vi regner med de 170, så fejlen går i den ufarlige
   retning — lidt UNDER 98 % frem for at skubbe barens kant ud over skærmen.

   Loftet på 900px er der, fordi 98 % af en meget høj skærm (1440px+) ville
   give et hero-felt med et par hundrede px luft over og under indholdet. Det
   ligner ikke rundhåndethed, det ligner en fejl.

   Kun fra 900px: derunder stables indholdet, og heroen er allerede højere end
   skærmen — en min-height ville ikke gøre andet end at lægge luft til noget
   der i forvejen skal scrolles. */
@media (min-width: 900px) {
	.zch {
		display: flex;
		flex-direction: column;
		min-height: min(calc(98vh - 170px), 900px);
		min-height: min(calc(98svh - 170px), 900px);
	}
	/* Wrappen tager den ekstra plads og centrerer sine rækker i den, så luften
	   fordeler sig omkring indholdet i stedet for at samle sig i ét hul over
	   tryghedsbaren. Baren bliver liggende som sidste element. */
	.zch .zch__wrap { flex: 1 1 auto; align-content: center; }
}

/* BASIS = den stramme rytme. Den gælder mobil og lave skærme, hvor hver px
   tæller for at få tryghedsbaren med over folden. På høje skærme skiftes der
   til den rummelige rytme længere nede — se @media (min-height: 861px). */
.zch .zch__wrap {
	display: grid;
	gap: clamp(0.85rem, 0.72rem + 0.7vw, 1.15rem);
	padding-top: clamp(0.9rem, 0.78rem + 0.7vw, 1.3rem);
	padding-bottom: clamp(0.9rem, 0.78rem + 0.7vw, 1.3rem);
}
.zch__head { display: flex; align-items: center; gap: clamp(1rem, 0.8rem + 1.4vw, 2rem); }
/* Identitetsblokken er heroens højeste enkeltdel når rollelinjen bryder til to
   linjer (fx Lene K.). De to marginer herunder er skåret ned, så den ikke skubber
   tryghedsbaren under folden. */
.zch .zch__role { margin-top: 0.4rem; }
.zch .zch-rating { margin-top: 0.5rem; }
.zch__ident { min-width: 0; }
.zch .zcv-portrait { flex: none; width: clamp(5.5rem, 11vw, 9.5rem); }
.zch .zch__img {
	box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--color-sage-200), 0 16px 32px -22px rgba(20, 48, 42, 0.5);
}
.zch__grid { display: grid; gap: clamp(1rem, 0.8rem + 1vw, 1.6rem); align-items: stretch; }
@media (min-width: 900px) {
	.zch__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.zch__facts {
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-xl);
	padding: clamp(0.85rem, 0.75rem + 0.5vw, 1.15rem);
	display: flex;
	align-items: center;
}
/* Fem faktalinjer + fire mellemrum er det der afgør hvor højt gitteret bliver. */
.zch__facts .zch-facts { gap: 0.55rem; }
.zch__facts .zch-facts { width: 100%; }

.zch__quote {
	position: relative;
	margin: 0;
	background: var(--color-cream-2);
	border-radius: var(--radius-xl);
	padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
	padding-left: clamp(2.4rem, 1.9rem + 2.1vw, 3.2rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.9rem;
}
/* Citationstegnet: Merriweather, sage, stort nok til at være en accent —
   men lettere i vægt end teksten, så det ikke stjæler læsningen. */
.zch__quote::before {
	content: "\201D";
	position: absolute;
	left: clamp(0.7rem, 0.4rem + 1vw, 1.2rem);
	top: clamp(0.1rem, 0rem + 0.6vw, 0.5rem);
	font-family: var(--font-merriweather);
	font-size: clamp(3.4rem, 2.6rem + 3vw, 5rem);
	line-height: 1;
	color: var(--color-sage-300);
}
.zch__quote blockquote { margin: 0; }
.zch__quote blockquote p {
	margin: 0;
	font-family: var(--font-merriweather);
	font-weight: 300;
	font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.16rem);
	line-height: 1.55;
	color: var(--color-forest);
	text-wrap: pretty;
}
.zch__quote figcaption {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-source);
	font-size: 0.92rem;
	color: var(--color-ink-soft);
}
.zch__quote-stars { color: var(--color-gold); letter-spacing: 1px; }
.zch__quote-by { font-style: italic; }

/* ---- "Det lover vi dig" — højre spalte når der ikke er en dansk anmeldelse.
   Gælder 55 af 125 profiler, så den skal bære lige så godt som citatet: samme
   højde, samme vægt, andet budskab (hvad du er lovet — ikke hvem hun er). */
.zch__promise {
	border-radius: var(--radius-xl);
	padding: clamp(1.1rem, 0.9rem + 1vw, 1.65rem);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.1rem;
}
.zch__promise-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.8rem;
	font-family: var(--font-source);
	font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
	color: var(--color-mint-soft);
}
.zch__promise-list li { display: flex; align-items: center; gap: 0.7rem; }
.zch__promise-ic { width: 1.15rem; height: 1.15rem; flex: none; color: var(--color-mint); }
.zch__promise-ic svg { width: 100%; height: 100%; display: block; }

/* Handlingsrækken beholder sin hårfine streg — den skiller pris/tid/knap fra
   panelerne ovenover. Marginen er nul, fordi wrappens gap allerede giver luft. */
.zch__act {
	margin-top: 0;
	padding-top: clamp(0.85rem, 0.7rem + 0.6vw, 1.15rem);
}

/* ---- Rummelig rytme, men KUN hvor der er højde til den --------------------
   min-height'en ovenfor garanterer at heroen fylder ~98 % af første skærm. På
   en høj skærm ville den plads blive til ren luft omkring et lille indhold —
   Brians pointe (20-08-2026) var at pladsen skal UDNYTTES. Derfor vokser
   portræt, polstring og gab her, så det er indholdet der fylder.

   Grænsen går ved 861px viewport-højde, fordi den højeste profil (Lene K.:
   to-linjers rollelinje, fem fakta, tre-linjers citat) fylder 644px i den
   rummelige udgave — plus 170px chrome er det 814px. Under den grænse ville
   tryghedsbaren blive skubbet under folden, og så er den stramme rytme (605px
   for samme profil) den rigtige. */
@media (min-width: 900px) and (min-height: 861px) {
	.zch .zch__wrap {
		gap: clamp(0.9rem, 0.75rem + 0.9vw, 1.5rem);
		padding-top: clamp(1rem, 0.85rem + 0.9vw, 1.6rem);
		padding-bottom: clamp(1rem, 0.85rem + 0.9vw, 1.6rem);
	}
	.zch .zcv-portrait { width: clamp(5.5rem, 12.5vw, 10.5rem); }
	.zch__facts { padding: clamp(0.95rem, 0.8rem + 0.7vw, 1.4rem); }
	.zch__facts .zch-facts { gap: 0.7rem; }
	.zch__quote {
		padding: clamp(1.2rem, 1rem + 1.1vw, 1.9rem);
		padding-left: clamp(2.5rem, 2rem + 2.2vw, 3.4rem);
	}
	.zch__promise { padding: clamp(1.2rem, 1rem + 1.1vw, 1.9rem); }
}

/* ---- Mobil: knappen står i heroen, på linje med fra-prisen ---------------
   Første forsøg skjulte hero-knappen og lod den klæbende bjælke være eneste
   CTA over folden. Det holdt ikke i praksis (Brian, 20-08-2026): behandlerens
   foto stod så to gange på samme skærm, og bjælken forsvandt igen efter et
   par centimeters scroll, fordi booking-sektionen kom i billedet — og den
   skjuler bjælken med vilje, så den ikke dækker den kalender den peger på.

   Løsningen er enklere: pris og knap deler ÉN række nederst i heroen. Basis-
   reglen for små skærme stabler dem (knap i fuld bredde), hvilket koster ~60px
   — nok til at skubbe knappen under folden. Her står de side om side i stedet,
   med "næste ledige tid" som en linje under prisen. */
@media (max-width: 767.98px) {
	.zch .zch-act {
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.8rem;
	}
	.zch .zch-act__facts {
		width: auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.15rem;
		min-width: 0;
	}
	.zch .zch-act__btn {
		width: auto;
		margin-left: auto;
		flex: none;
		padding-inline: 1.4rem;
	}
	.zch .zch-act .zch-slot { padding-block: 0; }
}

/* ============================================================
   HERO 4 · "Beviset" med baggrund (?hero=4)
   ------------------------------------------------------------
   Samme hero som 3 — kun fladen bag den er ny. CV-siden er beige hele vejen
   ned, og heroen må gerne løfte sig fra resten frem for at flyde sammen med
   det hele.

   TO LAG, i den rækkefølge de står:
     1. En forest-gradient der er tættest til venstre, hvor navn og rollelinje
        står, og letter mod højre, hvor de to lyse paneler alligevel dækker
        billedet. Så er der kontrast præcis hvor teksten er, og stemning
        tilbage hvor der er plads til den.
     2. Selve billedet (assets/hero-bg.webp, 68 KB).

   Typografien vendes om til lyst-på-mørkt; panelerne forbliver lyse, så de
   løfter sig fra baggrunden i stedet for at synke ned i den. Tryghedsbaren er
   hvid i forvejen og lukker det mørke felt af nedadtil.
   ============================================================ */
/* Billedet ligger i to bredder. En telefon på 390 px skal ikke hente 2400 px
   — den ser under 15 % af pixlene og betaler for dem alle. Kun URL'en skifter;
   gradienten står ét sted, så de to breakpoints ikke kan drive fra hinanden.
   Preloades fra inc/zency-cv.php med samme media-grænse: uden det opdages en
   CSS-baggrund først NÅR stylesheetet er parset, og her er den LCP-elementet. */
.zch--bg {
	--zch-bg: url("behandler-hero-bg-1200.webp");
	background-image:
		linear-gradient(100deg,
			rgba(20, 48, 42, 0.95) 0%,
			rgba(20, 48, 42, 0.88) 38%,
			rgba(20, 48, 42, 0.72) 70%,
			rgba(20, 48, 42, 0.62) 100%),
		var(--zch-bg);
	background-size: cover;
	background-position: center 38%;
	background-repeat: no-repeat;
}
@media (min-width: 900px) {
	.zch--bg { --zch-bg: url("behandler-hero-bg.webp"); }
}
.zch--bg .zch__h1 { color: #fff; }
.zch--bg .zch__role { color: var(--color-mint-soft); }
.zch--bg .zch__eyebrow { color: var(--color-mint); }
.zch--bg .zch-rating__val { color: #fff; }
.zch--bg .zch-price { color: #fff; }
.zch--bg .zch-act { border-top-color: rgba(255, 255, 255, 0.22); }
.zch--bg .zch-act__note { color: var(--color-mint-soft); }
.zch--bg .zch-slot__lbl { color: var(--color-mint); }
.zch--bg .zch-slot__val { color: #fff; }
.zch--bg .zch-slot__dot {
	background: var(--color-mint);
	box-shadow: 0 0 0 4px rgba(178, 221, 195, 0.25);
}
/* Portrættets ring er creme på hero 3 (samme farve som fladen bagved). På det
   mørke felt skal den være lys, ellers står der en beige cirkel og flyder. */
.zch--bg .zch__img {
	box-shadow:
		0 0 0 5px rgba(255, 255, 255, 0.9),
		0 0 0 6px rgba(255, 255, 255, 0.25),
		0 18px 34px -20px rgba(0, 0, 0, 0.6);
}
/* Panelerne løftes med en skygge, så de lægger sig OVEN PÅ billedet frem for
   at ligge i samme plan som det. */
.zch--bg .zch__facts,
.zch--bg .zch__quote { box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.75); }
.zch--bg .zch__facts { border-color: transparent; }
/* Løfte-panelet er mørkt på hero 3, hvor fladen bagved er creme. På det mørke
   felt her ville det synke ned i baggrunden — og værre: heroen ville se
   strukturelt forskellig ud afhængigt af om behandleren har en dansk
   anmeldelse (hvidt + creme) eller ej (hvidt + mørkt). Derfor bliver panelet
   lyst her, så de to felter altid er et par. */
.zch--bg .zch__promise {
	background: var(--color-cream-2);
	box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.75);
}
.zch--bg .zch__promise .z-eyebrow { color: var(--color-sage-500); }
.zch--bg .zch__promise-list { color: var(--color-ink-soft); }
.zch--bg .zch__promise-ic { color: var(--color-sage-500); }

/* ---- Tryghedsbaren (sitets .zb-trust, med behandlerens egne godkendelser) ----
   Chrome'en (hvid flade, skygge, afrundet badge under 768px) kommer fra
   behandling.css, som alle kodede templates i forvejen loader. Her justeres kun
   det der følger af at baren står INDE i heroen frem for mellem to sektioner:

   · Lavere end sitets bar. Den er bygget til at stå alene mellem to sektioner
     med 1,5–2,5rem luft over og under; her er den ét led i en hero der skal
     nå over folden, så højden er skruet ned til omtrent det halve.
   · Sitets bar har `margin-top: -2.25rem` på mobil for at overlappe sektionen
     ovenover. Vores ligger allerede inde i heroen — uden nulstillingen ville
     den spise indholdet.
   · Barens grid er `repeat(3, 1fr)`, og en RAB-godkendt behandler har FIRE
     punkter. Flex med wrap holder dem centreret uanset antal. */
@media (min-width: 768px) {
	/* Eneste desktop-justering: sitets mobil-overlap nulstilles. Alt andet —
	   højde, gab, skriftstørrelse, ikon ved siden af etiket — kommer fra
	   behandling.css uændret, så baren er identisk med den på behandlings-,
	   symptom- og by-siderne (Brian, 20-08-2026). Vi ejer indholdet, ikke formen. */
	.zch-trustbar { margin-top: 0; }
}
/* Stregikoner, ét pr. punkt — se zk_cvh_trust_icon(). Ingen fyldt cirkel:
   tre mørke klatter på stribe blev det tungeste element i en ellers luftig bar,
   og tre ens flueben fortalte i øvrigt ikke hvad de tre punkter handler om. */
/* Ikon-spanden er selv en <span> inde i .zch-trustbar__item, så etiket-reglen
   nedenfor (0,2,0) ville male ikonet blækfarvet. Derfor samme vægt her. */
/* STØRRELSEN kommer fra sitets egen `.zb-trust__icon` (markup'en bærer begge
   klasser). Her sættes kun farven — og den skal have (0,2,0) for at slå
   etiket-reglen nedenfor, som ellers ville male ikonet blækfarvet. */
.zch-trustbar__item .zch-trustbar__ic { color: var(--color-sage-700); }
.zch-trustbar__ic svg { width: 100%; height: 100%; display: block; }
.zch-trustbar__item span { color: var(--color-ink); }
.zch-trustbar__item a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* MOBIL: sitets egen behandling, uændret — punkterne på én vandret række med
   ikonet over etiketten, og baren som et afrundet hvidt kort der ligger hen
   over kanten mellem hero og næste sektion. Sådan ser den ud på resten af
   sitet (Brian, 20-08-2026), og det er hele pointen med at genbruge
   .zb-trust: den skal se ens ud alle steder.

   Vi arver derfor gridet, kort-fladen og `margin-top: -2.25rem` fra
   behandling.css og tilføjer kun to ting:
     · en negativ bundmargin, så kortet også rager NED i sektionen under —
       sitets bar står mellem to sektioner og får det gratis; vores er sidste
       element i heroen og skal selv trække næste sektion op.
     · to spalter når der er FIRE punkter (RAB-godkendte behandlere).
       repeat(3, 1fr) ville efterlade det fjerde alene på en række. */
@media (max-width: 767.98px) {
	/* Sitets bar har `margin-top: -2.25rem` for at overlappe sektionen foran.
	   Her lå den næsten oven i handlingsrækken, så den trækkes ned igen og får
	   rigtig luft over sig — mest over, mindre under, så kortet stadig rager ned
	   i sektionen under og læses som et badge på kanten. */
	.zch-trustbar { margin-top: clamp(1.8rem, 6vw, 2.8rem); margin-bottom: -2.4rem; }
	.zch-trustbar .zb-trust__inner:has(> :nth-child(4)) {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 1rem;
	}
	/* Sektionen under skal have luft nok til at kortets underkant ikke lander
	   oven i dens overskrift. */
	.zcv .zcv-booking { padding-top: clamp(3.6rem, 3rem + 4vw, 5rem); }
}


/* ---- Praktisk-panelets lodrette rytme (sat 2026-08-20) ----------------
   Panelet var 16 / 22 / 22: etiketten "Faste åbningstider" stod 16px fra
   sektionsoverskriften og 22px fra den liste den navngiver — altså tættere
   på noget den ikke hører til end på sit eget indhold. Og skiftet til næste
   gruppe ("Betalingsmuligheder") var OGSÅ 22px, så de to datagrupper skilte
   sig ikke fra hinanden.

   Nu 16 / 8 / 32: etiketten lægger sig på sin liste, og grupperne skiller.

   Panelet er flex, så marginer kollapser IKKE: de 22px var etikettens 14,4
   + listens 8 lagt sammen. Etikettens bundmargin nulstilles, så de 8px er
   ét tal ét sted — .zcv-hours' egen margin-top.

   NB: børne-selektoren er vigtig. Der er to .zb-eyebrow i panelet, men kun
   "Faste åbningstider" er direkte barn; "Book nu, betal bagefter" ligger
   inde i .zcv-info og har sin egen margin, som ikke må røres. */
.zcv-panel > .zb-eyebrow { margin-bottom: 0; }   /* var 0.9rem = 14,4px */
.zcv-panel .zcv-info     { margin-top: 2rem; }   /* var 1.4rem = 22,4px */