/* ============================================================
   UDKAST · Byside- og nicheside-template (.zby-*)
   ------------------------------------------------------------
   Bygger oven på behandling.css (.zb-*-møblerne: hero, wrap, crumbs, cardgrid,
   testimonials, faq, garanti, meta-linje) og designsystemets tokens. Kun det
   der er NYT på en byside står her.

   Gennemgående princip: alt der står side om side i et gitter har SAMME HØJDE.
   Kort med hver sin højde læser som en fejl, ikke som variation — derfor
   align-items: stretch (grid-standarden) og indhold der pinnes med margin-top:
   auto i stedet for at gøre kassen kortere.
   ============================================================ */

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

/* Brødkrummen står tættere på bysiderne end i behandling.css' fælles komponent:
   0.5rem i stedet for 0.8rem over og under. Bjælken går fra 47,5px til ~38px
   (8px + 21px tekstlinje + 8px + hårlinjen). 0.5rem holder sig på 8px-skalaen.

   KUN `padding-block` — brug ALDRIG `padding`-shorthanden her. Den vandrette
   padding i behandling.css er sat til at flugte præcis med zh-headerens logo og
   Trustpilot-stjerner (16px på mobil, 40px fra 1025px, centreret i 2360px over
   2400px), og en shorthand ville nulstille det og skubbe krummen ud af flugt.

   Scopet til .zby (0,2,1 slår komponentens 0,1,1) fordi behandlingssiderne
   bruger samme .zb-crumbs og ikke er blevet bedt om at ændre sig. */
.zby .zb-crumbs ol { padding-block: 0.5rem; }

/* Temaets behandling.js enqueues her for at få hero-video og videoanmeldelses-
   slideren. Den sætter .is-awaiting-location på .zb-grid, fordi BEHANDLINGS-
   sidens grid først viser kort når brugeren har valgt en lokation. Bysidens
   grid har allerede sin lokation — byen — så den regel skal ikke gælde her. */
.zby .zb-grid.is-awaiting-location .z-section-h2,
.zby .zb-grid.is-awaiting-location .zb-grid__sub,
.zby .zb-grid.is-awaiting-location .zb-grid__plugin { display: revert; }

/* Sektions-rytme: skiftende creme/hvid, så siden falder i tydelige bånd. */
.zby-reviews,
.zby-find,
.zby-treatments,
.zby-prices,
.zby-nearby,
.zby-article,
.zby-contact { padding: clamp(2.75rem, 2rem + 3vw, 5rem) 0; }

.zby-reviews    { background: #fff; }
.zby-find       { background: var(--color-cream); }
.zby-treatments { background: #fff; }
.zby-prices     { background: var(--color-cream-2); }
.zby-nearby     { background: #fff; }
.zby-article    { background: var(--color-cream); }
.zby-contact    { background: #fff; }

/* ---- Genbrugt panel (åbningstider, kontakt) ---------------------------- */
.zby-panel {
	display: flex;
	flex-direction: column;
	background: var(--color-sage-50);
	border: 1px solid var(--color-sage-200);
	border-radius: var(--radius-xl);
	padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem);
}
.zby-panel__lead,
.zby-panel__note {
	font-family: var(--font-source);
	line-height: 1.7;
	color: var(--color-ink-soft);
	text-wrap: pretty;
}
.zby-panel__lead { font-size: 1.01rem; margin: 0.8rem 0 1.4rem; }
.zby-panel__note { font-size: 0.92rem; margin: 1.1rem 0 0; }

/* ---- Knapper -----------------------------------------------------------
   Hello-temaets reset.css maler ALLE <button> med #c36-ramme og -tekst, og
   .z-cta er kun en typografiklasse — den giver ingen knapflade. Knapperne
   bruger derfor .z-btn (designsystemets oliven-pille) og får her det
   appearance-reset, en <button> ellers ikke får. */
.zby button.z-btn { appearance: none; -webkit-appearance: none; }
.zby .z-btn svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* behandling.css neutraliserer reset.css' lilla knap-hover med
   `.zb :where(button,…):hover { background-color: transparent }`. Den regel
   vejer (0,2,0) og loades EFTER designsystemet, så den slog også `.z-btn:hover`
   (0,1,0) ud — derfor blev vores CTA'er gennemsigtige ved hover i stedet for
   mørkere. Her genindsættes hover-farven med (0,3,0), så den vinder. */
.zby button.z-btn:hover,
.zby button.z-btn:focus,
.zby button.z-btn:active,
.zby a.z-btn:hover,
.zby a.z-btn:focus {
	background-color: var(--color-olive-dark);
	border-color: var(--color-olive-dark);
	color: #fff;
}
.zby button.z-btn--outline:hover,
.zby button.z-btn--outline:focus,
.zby button.z-btn--outline:active {
	background-color: var(--color-olive);
	border-color: var(--color-olive);
	color: #fff;
}

/* ---- 2 · Hero-CTA + heroens lodrette rytme ---------------------------- */
.zby-hero__btn { font-size: 1.06rem; padding: 1rem 2.2rem; }

/* Heroens fire elementer læses som TO par: overskrift + underoverskrift
   (hvad er det her), og CTA + anmeldelser (gør det — og her er beviset).
   Afstanden inde i et par skal derfor være markant mindre end afstanden
   mellem parrene. Målt på den gamle rytme (32 / 57,6 / 29 px) var springet
   mellem parrene kun 1,8x større end springet inde i dem — for lidt til at
   øjet aflæser to par, så de fire elementer lå som løse enheder.

   Rytmen er 8-punkts: 16 / 48 / 16 på desktop, 12 / 36 / 12 på mobil
   (forhold 3:1). Den skalerer med skærmen — de gamle tal var identiske i px
   på 390px og 1440px, selvom h1 går fra 52px til 33px.

   Alle afstande styres som margin-top på det EFTERFØLGENDE element, og
   margin-bottom nulstilles. Heroen er flex, så marginer kollapser IKKE:
   intro'ens margin-bottom (32px) blev lagt oven i CTA'ens margin-top
   (25,6px) = de 57,6px. Én retning betyder ét tal pr. afstand.

   h1 får margin: 0 — den arvede 8px foroven / 16px forneden fra temaets
   reset og skubbede blokken skævt i en boks der er lodret centreret.

   NB: #n-hero-cta-sentinel (1px høj, armer header-CTA'en) ligger i flowet
   mellem knappen og anmeldelserne og tæller med i afstanden. Derfor er
   .zb-trustpilot sat 1px lavere end måltallet: 11 + 1 = 12, 15 + 1 = 16. */
.zby .zb-hero__h1 { margin: 0; }
.zby .zb-hero__intro { margin: 12px 0 0; }
.zby .zb-hero__cta { margin: 36px 0 0; }
.zby .zb-trustpilot { margin-top: 11px; }

@media (min-width: 768px) {
	.zby .zb-hero__intro { margin-top: 16px; }
	.zby .zb-hero__cta { margin-top: 48px; }
	.zby .zb-trustpilot { margin-top: 15px; }
}

/* ---- 5 · Anmeldelser --------------------------------------------------- */
.zby-reviews zency-reviews { display: block; margin-top: 1.8rem; }

/* ---- 6 · Kort + åbningstider ------------------------------------------ */
.zby-find__grid {
	display: grid;
	gap: clamp(1.2rem, 1rem + 1.5vw, 2rem);
	grid-template-columns: 1fr;
	align-items: stretch;
}
/* Kortet er sidens visuelle tyngdepunkt her og får derfor mest plads. */
@media (min-width: 940px) { .zby-find__grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); } }

.zby-find__map { display: flex; flex-direction: column; }
.zby-find__map .zb-map { margin-top: 1.2rem; }

/* Kortets højde er FAST pr. brudpunkt — bevidst, og det er vigtigere end det
   ser ud til.

   Leaflet måler containeren ÉN gang, når kortet initialiseres (ved scroll), og
   zoomer så det rammer alle markører. Ændrer containeren størrelse bagefter,
   bliver den beregning stående — og så kan markører ryge uden for billedet.
   Første udkast lod kortet være `flex: 1` og fylde kolonnen ud, hvilket
   koblede dets højde til NABOKOLONNEN: bliver åbningstids-panelet en linje
   højere (webfont skifter, bynavn er langt), skifter kortet størrelse efter
   Leaflet har målt. Det er præcis den slags væddeløb der giver et kort der
   "er zoomet forkert ind" i ny og næ.

   Nu afhænger højden kun af brudpunktet. Maps V2 skriver 450px som inline
   style, som kun kan slås af et !important. Kolonnerne flugter stadig: kortet
   er den højeste af de to, så panelet strækkes til det (grid stretch). */
.zby-find__map .zb-map .zency-map-cache { height: 380px !important; }
@media (min-width: 940px) {
	.zby-find__map .zb-map .zency-map-cache { height: 560px !important; }
}

/* Bundmargen ligger på listen, ikke på knappen: knappen bruger margin-top:auto
   til at falde ned i bunden af panelet, og `auto` giver nul luft, når panelet
   er præcis så højt som indholdet. Så stod knappen klods op ad søndag. */
.zby-hours { margin: 0 0 1.75rem; display: grid; gap: 0.5rem; }
.zby-hours > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--color-sage-200);
}
.zby-hours dt { font-family: var(--font-source); font-size: 1rem; color: var(--color-ink-soft); margin: 0; }
/* Klokkeslættene skal IKKE stå fede — på nogen skærmbredde (Mortens beslutning
   2026-07-31). Vægten står bevidst kun her, uden media query: der er ingen grund
   til at veje tallene forskelligt på mobil og desktop, og en override i en
   media-blok ville bare gøre den faktiske vægt svær at læse ud af filen.
   Dosis beholdes — den er brandets tal-/CTA-font — og tiden læses stadig som
   værdien frem for ugedagen, fordi dd er --color-forest mod dt's --color-ink-soft. */
.zby-hours dd { font-family: var(--font-dosis); font-weight: 400; font-size: 1rem; color: var(--color-forest); margin: 0; }
/* Knappen sidder i bunden af panelet, så de to kolonner flugter forneden. */
.zby-find__hours .z-btn { align-self: flex-start; margin-top: auto; }

/* ---- 7 · Behandlinger i byen ------------------------------------------ */
/* Kortene er temaets .zb-card/.zb-cardgrid — ét kortsprog på tværs af sitet.
   Her justeres kun afstanden til overskriften. */
.zby-treatments__sub {
	font-family: var(--font-source);
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--color-ink-soft);
	max-width: 68ch;
	margin: 0.9rem 0 0;
	text-wrap: pretty;
}
.zby-treatments .zb-cardgrid { margin-top: 1.8rem; }

/* To kort pr. række på mobil. Temaets .zb-cardgrid starter på 1 kolonne og går
   til 2 ved 640px; her rykker vi 2-kolonne-punktet helt ned, så gitteret har
   samme rytme hele vejen. Antallet af kort er et multiplum af 6 (se
   zk_by_treatments), så både 2- og 3-kolonne-visningen får hele rækker.
   BEMÆRK: scoped til .zby — behandlings- og symptomsiderne bruger samme
   klasse, og de skal først skifte når vi har set det virke her. */
/* grid-auto-rows: 1fr gør ALLE rækker lige høje, ikke bare kortene inden for
   hver række — så bliver blokken en ren matrix i stedet for tre trin. */
.zby .zb-cardgrid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 0.7rem; }
@media (min-width: 640px)  { .zby .zb-cardgrid { gap: 1.1rem; } }
@media (min-width: 1000px) { .zby .zb-cardgrid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

/* Danske behandlingsnavne er ét langt sammensat ord ("Bindevævsmassage",
   "Afspændingsmassage"), og .zb-card har overflow: hidden — uden en
   brydningsregel bliver titlen KLIPPET af kortkanten på to kolonner. */
.zby .zb-card__title { overflow-wrap: break-word; }

/* Under ~560px er kortet kun ~165px bredt — titel og linktekst skal skaleres
   ned, ellers bliver kortet en tekstmur. */
@media (max-width: 560px) {
	.zby .zb-card__body { padding: 0.8rem 0.85rem 0.95rem; }
	.zby .zb-card__title { font-size: 0.88rem; line-height: 1.3; }
	.zby .zb-card__more { font-size: 0.74rem; padding-top: 0.6rem; gap: 0.25rem; }
	.zby .zb-card__more svg { width: 0.8rem; height: 0.8rem; }
}

/* ---- 8 · Priser ------------------------------------------------------- */
.zby-prices__sub {
	font-family: var(--font-source);
	font-size: 1.02rem;
	line-height: 1.7;
	color: var(--color-ink-soft);
	text-align: center;
	max-width: 62ch;
	margin: 0.9rem auto 0;
	text-wrap: pretty;
}
/* Det hårde linjeskift gælder kun, hvor der er plads til begge sætninger på
   hver sin linje. På smalle skærme brydes teksten alligevel flere steder, og
   et fastlåst skift ville give en enlig kort linje. */
@media (max-width: 559px) {
	.zby-prices__sub br { display: none; }
}
/* Mobil bruger kortdækket (.zb-mprice, temaets komponent); desktop bruger de
   tre kort side om side. Kun ét af dem er synligt ad gangen — skiftet ligger
   ved 1024px, samme sted som behandlingssiden skifter. */
.zby-prices__grid { display: none; }
@media (min-width: 1024px) {
	.zby-prices__grid {
		display: grid;
		gap: clamp(1rem, 0.7rem + 1.2vw, 1.6rem);
		grid-template-columns: repeat(3, 1fr);
		margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
		align-items: stretch; /* tre priskort i samme højde */
	}
}
.zby-prices .zb-mprice { margin-top: clamp(1.4rem, 1rem + 1.5vw, 2rem); }

.zby-price {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-xl);
	padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 14px 34px -22px rgba(68, 103, 91, 0.3);
}
/* Favoritten er det ene mørke kort — samme greb som prisboksen på behandlingssiden. */
/* `overflow: hidden` bærer hjørnebåndet (.zby-price__badge længere nede): det klipper
   båndets to ender langs kortets afrundede kant. Skal badgen nogensinde tilbage til en
   pille der stikker OP over kortkanten, skal overflow væk igen — ellers klippes den helt
   væk. Skyggen ligger uden for boksen og påvirkes ikke. */
.zby-price--fav {
	background: linear-gradient(160deg, #5b746f 0%, #2f3b39 100%);
	border-color: transparent;
	color: var(--color-mint-soft);
	overflow: hidden;
}
/* Favoritten stikker en smule ud over de to andre — 12px op og 12px ned. Kun fra
   1024px, hvor de tre kort står side om side; under det viser kortdækket
   (.zb-mprice) priserne, og der er favoritten fremhævet ved at ligge forrest.

   Negativ margin-block frem for transform/scale: grid'et har `align-items:
   stretch` (se .zby-prices__grid), så et strakt kort med negativ blok-margin
   bliver reelt HØJERE — rækkehøjde + 2x12px — i stedet for bare at blive flyttet.
   En scale ville forstørre tekst og skygge med og gøre kanterne uskarpe.
   Fjernes `align-items: stretch` nogensinde, holder dette greb op med at virke.

   `.zby-price__cta` har `margin-top: auto`, så de ekstra 24px lægger sig OVER
   knappen: knappen falder ned i bunden af det højere kort. Det er netop
   "lidt længere i bunden".

   Badgen sidder på kortet (top: -0.7rem) og løftes derfor med. Der er plads —
   grid'ets margin-top er ~40px ved 1024px mod badgens 12px løft + 11px offset. */
@media (min-width: 1024px) {
	.zby-prices__grid .zby-price--fav { margin-block: -0.75rem; }
}

.zby-price--fav .zby-price__label { color: var(--color-mint); }
.zby-price--fav .zby-price__dur,
.zby-price--fav .zby-price__amount { color: #fff; }
.zby-price--fav .zby-price__bulhead { color: var(--color-mint); }
.zby-price--fav .zby-price__bullets li { color: var(--color-mint-soft); }
.zby-price--fav .zby-price__bullets li::before { background: var(--color-mint); }

/* "Mest populær" er et skråt bånd over kortets øverste HØJRE hjørne (2026-08-02).
   Før dette var det en gul pille (--color-gold) centreret på kortets overkant, som
   skar den afrundede kant over og trak øjet væk fra CTA'en; guld er desuden
   rating-stjernernes farve, ikke en handlingsfarve.

   Geometri: spannet er 200px bredt og roteres 45° om sit centrum. Målt fra kortets
   højre kant skærer båndets ydre kant ~63px fra hjørnet og den indre ~100px. Begge
   ender stikker uden for kortet og klippes af `overflow: hidden` på .zby-price--fav.

   HØJRE hjørne, ikke venstre: alt indhold i kortet er venstrestillet, og det bredeste
   element øverst ("60 minutter", ~145px) når ikke i nærheden af de ~100px fra højre
   kant som båndet optager. I venstre hjørne lander båndet oven i .zby-price__label og
   .zby-price__dur og tvinger en padding-top på 78px — dvs. 48px højere kort og en
   højere række, fordi grid'et er `align-items: stretch`. Højre hjørne koster intet.

   Hvid på --color-olive er 5,2:1 (samme forhold som .zby-price__cta's tekst). Selve
   fladen har derimod kun 1,03:1 mod kortets gradient — oliven og mørkegrøn har næsten
   samme lyshed, så båndet skiller sig ud på varm-mod-kold, ikke på lys-mod-mørk. Det
   er tilsigtet og bevidst dæmpet; skal fladen frem, er en lysere 1px-kant nok. */
.zby-price__badge {
	position: absolute;
	top: 26px;
	right: -58px;
	width: 200px;
	transform: rotate(45deg);
	padding: 0.42rem 0;
	text-align: center;
	font-family: var(--font-dosis);
	font-weight: 700;
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--color-olive);
	white-space: nowrap;
}
.zby-price__label { margin: 0 0 0.35rem; }
.zby-price__dur {
	font-family: var(--font-merriweather);
	font-size: 1.4118rem;
	font-weight: 300;
	letter-spacing: 0.6px;
	color: var(--color-forest);
	margin: 0;
}
.zby-price__amount {
	font-family: var(--font-dosis);
	font-weight: 700;
	font-size: 1.7rem;
	line-height: 1.2;
	color: var(--color-forest);
	margin: 0.35rem 0 1.1rem;
}
.zby-price__bulhead { margin: 0 0 0.6rem; }
.zby-price__bullets { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.45rem; }
.zby-price__bullets li {
	position: relative;
	padding-left: 1.4rem;
	font-family: var(--font-source);
	font-size: 0.97rem;
	line-height: 1.5;
	color: var(--color-ink-soft);
}
.zby-price__bullets li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: var(--color-sage-500);
}

.zby-price__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	appearance: none;
	font-family: var(--font-dosis);
	font-weight: 400; /* alle knapper 400 (Brian, 14-08-2026) */
	font-size: 1rem;
	letter-spacing: 0.5px;
	text-transform: none;
	color: #fff;
	background: var(--color-olive);
	border: 1px solid var(--color-olive);
	border-radius: 9999px;
	padding: 0.8rem 1.5rem;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}
.zby-price__cta:focus,
.zby-price__cta:active { background: var(--color-olive); color: #fff; } /* neutralizer-guard, jf. .zby-form__submit */
.zby-price__cta:hover,
.zby-price__cta:focus-visible {
	background: var(--color-olive-dark);
	border-color: var(--color-olive-dark);
	color: #fff;
}

/* ---- 10 · Andre lokationer -------------------------------------------- */
/* Samme kortdesign som live: billede med afstands-pille øverst, hvid krop
   med bynavn og "Se massører". Billederne er de seks generiske klinikfotos
   (by-poster har ingen featured image), så de roterer pr. kort. */
.zby-nearby__grid {
	display: grid;
	gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
	grid-template-columns: 1fr;
	margin-top: 1.8rem;
	align-items: stretch;
}
@media (min-width: 620px)  { .zby-nearby__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .zby-nearby__grid { grid-template-columns: repeat(3, 1fr); } }

.zby-loc {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-xl);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.3s var(--ease-out-soft), box-shadow 0.3s var(--ease-out-soft), border-color 0.2s;
}
.zby-loc:hover {
	transform: translateY(-5px);
	border-color: var(--color-sage-300);
	box-shadow: 0 22px 44px -24px rgba(20, 48, 42, 0.4);
}
.zby-loc__media {
	position: relative;
	display: block;
	min-height: 220px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--color-sage-50);
}
.zby-loc__km {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	font-family: var(--font-source);
	font-size: 0.85rem;
	color: #fff;
	background: var(--color-sage-700);
	border-radius: 9999px;
	padding: 0.3rem 0.85rem;
	white-space: nowrap;
}
.zby-loc__body {
	display: flex;
	flex: 1;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.3rem 1.4rem;
}
.zby-loc__city {
	font-family: var(--font-merriweather);
	font-weight: 400;
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem);
	line-height: 1.25;
	letter-spacing: 0.4px;
	color: var(--color-forest);
	text-wrap: balance;
}
.zby-loc__more {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--font-source);
	font-size: 0.92rem;
	color: var(--color-ink-soft);
	white-space: nowrap;
}
.zby-loc__more svg { width: 1.35rem; height: 1.35rem; color: var(--color-sage-500); transition: transform 0.2s var(--ease-out-soft); }
.zby-loc:hover .zby-loc__more svg { transform: translateX(3px); }
.zby-loc:hover .zby-loc__city { color: var(--color-sage-600); }

/* ---- 11 · Artikel + nøgletal ------------------------------------------- */
.zby-stat {
	margin-top: 2.5rem;
	border-radius: var(--radius-2xl);
	padding: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	text-align: center;
	color: var(--color-mint-soft);
}
/* Tallet er fokalt og står alene på sin egen linje; sætningen og halen
   nedenunder. CTA'en bor INDE i panelet — den handling hører til den påstand
   panelet gør, ikke til en løs knap under det. */
.zby-stat__num {
	font-family: var(--font-dosis);
	font-weight: 700;
	font-size: clamp(2.6rem, 1.9rem + 3vw, 4rem);
	line-height: 1;
	color: #fff;
	margin: 0;
}
.zby-stat__label {
	font-family: var(--font-source);
	font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.25rem);
	line-height: 1.5;
	margin: 0.5rem auto 0;
	max-width: 42ch;
	text-wrap: balance;
}
.zby-stat__tag {
	font-family: var(--font-merriweather);
	font-weight: 300;
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
	letter-spacing: 0.4px;
	color: #fff;
	margin: 0.35rem 0 0;
}
.zby-stat__cta { margin-top: 1.8rem; }

.zby-article__cta { margin: 2.2rem 0 0; text-align: center; }
.zby-article__cta .z-btn { display: inline-flex; align-items: center; gap: 0.55rem; }

/* ---- 12 · Kontakt ------------------------------------------------------ */
.zby-contact__grid {
	display: grid;
	gap: clamp(1.2rem, 1rem + 1.5vw, 2rem);
	grid-template-columns: 1fr;
	align-items: stretch; /* de to kasser har samme højde */
}
@media (min-width: 880px) { .zby-contact__grid { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); } }

.zby-contact__form-panel { background: #fff; border-color: var(--color-line); }

.zby-form { display: grid; gap: 0.9rem; }
.zby-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zby-form__row { display: grid; gap: 0.9rem; }
@media (min-width: 520px) { .zby-form__row--split { grid-template-columns: 1fr 1fr; } }

.zby-field { display: grid; gap: 0.35rem; }
.zby-field__label {
	font-family: var(--font-dosis);
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-sage-600);
}
.zby-field input,
.zby-field textarea {
	width: 100%;
	font-family: var(--font-source);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--color-ink);
	background: var(--color-cream);
	border: 1px solid var(--color-line);
	border-radius: 12px; /* --radius-md findes ikke i designsystemet; fallbacken var den reelle værdi */
	padding: 0.7rem 0.9rem;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.zby-field textarea { resize: vertical; min-height: 6.5rem; }
.zby-field input:focus,
.zby-field textarea:focus {
	outline: none;
	border-color: var(--color-sage-500);
	box-shadow: 0 0 0 3px rgba(135, 160, 148, 0.25);
}
.zby-field input:user-invalid { border-color: #b3443b; }

.zby-form__submit {
	justify-self: start;
	appearance: none;
	cursor: pointer;
	font-family: var(--font-dosis);
	font-weight: 400; /* alle knapper 400 (Brian, 14-08-2026) */
	font-size: 1rem;
	letter-spacing: 0.5px;
	color: #fff;
	background: var(--color-olive);
	border: 1px solid var(--color-olive);
	border-radius: 9999px;
	padding: 0.8rem 1.8rem;
	transition: background-color 0.2s, border-color 0.2s;
}
/* Hover/focus/active skal gen-deklarere BÅDE baggrund og farve: behandling.css'
   button-neutralizer (.zb :where(button…):hover/:focus/:active) sætter ellers
   background:transparent + color:inherit — dvs. mørk tekst på hover og tabt
   baggrund på fokus. */
.zby-form__submit:hover:not([disabled]) { background: var(--color-olive-dark); border-color: var(--color-olive-dark); color: #fff; }
.zby-form__submit:focus,
.zby-form__submit:active { background: var(--color-olive); color: #fff; }
.zby-form__submit:focus-visible { outline: 2px solid var(--color-olive-dark); outline-offset: 2px; }
.zby-form__submit[disabled] { opacity: 0.6; cursor: default; }

.zby-form__note { font-family: var(--font-source); font-size: 0.88rem; color: var(--color-ink-soft); margin: 0; }
.zby-form__status {
	font-family: var(--font-source);
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0;
	min-height: 0;
}
.zby-form__status:empty { display: none; }
.zby-form[data-state="ok"] .zby-form__status { color: var(--color-sage-700); }
.zby-form[data-state="error"] .zby-form__status { color: #b3443b; }

.zby-contact__list { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.zby-contact__list li { display: flex; align-items: center; gap: 0.9rem; }
.zby-contact__ic {
	flex: none;
	width: 2.6rem;
	height: 2.6rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--color-sage-200);
	color: var(--color-sage-600);
}
.zby-contact__ic svg { width: 1.2rem; height: 1.2rem; }
.zby-contact__lbl {
	display: block;
	font-family: var(--font-dosis);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-sage-500);
}
.zby-contact__list a {
	font-family: var(--font-source);
	font-size: 1.06rem;
	font-weight: 600;
	color: var(--color-forest);
	text-decoration: none;
}
.zby-contact__list a:hover { color: var(--color-sage-600); text-decoration: underline; }
.zby-contact__list li > span:last-child { display: grid; gap: 0.05rem; }
.zby-contact__hours {
	font-family: var(--font-source);
	font-size: 0.88rem;
	line-height: 1.4;
	color: var(--color-ink-soft);
	margin-top: 0.15rem;
}

/* ---- Aske i panelets nederste hjoerne (2026-08-03) --------------------
   Den fritlagte PNG staar paa panelets underkant og udfylder luften der
   opstaar fordi formularpanelet til venstre bestemmer raekkehoejden
   (.zby-contact__grid har align-items: stretch).
   FAELDE 1: figuren afhaenger af overflow:hidden paa panelet - uden den
   haenger den ud over det afrundede hjoerne i stedet for at blive klippet.
   FAELDE 2: KUN .zby-panel__note faar hoejre-padding. Listen ligger over
   hans hoved, og giver man ogsaa den padding, braekker "kl. 8-17" og
   mail-labelen til to linjer. */
.zby-contact__direct--stand { position: relative; overflow: hidden; }
.zby-contact__stand {
	position: absolute;
	right: -10px;
	bottom: 0;
	width: 196px;
	height: 262px;
	object-fit: contain;
	object-position: bottom center;
	pointer-events: none;
}
.zby-contact__chip {
	position: absolute;
	/* Chippen sad 176px inde og 42px oppe - altsaa MIDT i noten. Den daekkede
	   tekst i hele spaendet 560-1150px (maalt 137px overlap ved 700px, en hel
	   linje ved 1000px); kun paa bred desktop gik den fri. Nu sidder den som et
	   navneskilt paa Aske selv, hvor den pr. konstruktion ikke kan ramme teksten:
	   noten holder 150px fri i hoejre side, chippen bruger kun de yderste ~162px.
	   z-index fordi <img> ligger EFTER chippen i DOM og ellers maler hen over den. */
	right: 20px;
	bottom: 16px;
	z-index: 2;
	font-family: var(--font-dosis);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	color: var(--color-forest);
	background: #fff;
	border: 1px solid var(--color-sage-200);
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
	white-space: nowrap;
	box-shadow: 0 3px 10px rgba(20, 48, 42, 0.10);
}
.zby-contact__direct--stand .zby-panel__note { padding-right: 150px; }
@media (max-width: 559px) {
	.zby-contact__stand { width: 128px; height: 172px; right: -6px; }
	.zby-contact__chip { display: none; }
	.zby-contact__direct--stand .zby-panel__note { padding-right: 104px; }
}

/* ---- Mobil: mindre centreret tekst (brand §13) ------------------------- */
@media (max-width: 600px) {
	.zby-reviews .z-section-h2--center,
	.zby-prices .z-section-h2--center,
	.zby-nearby .z-section-h2--center { text-align: left; }
	.zby-reviews .z-section-h2--center::after,
	.zby-prices .z-section-h2--center::after,
	.zby-nearby .z-section-h2--center::after { left: 0; transform: none; }
	.zby-prices__sub { text-align: left; margin-left: 0; }
	.zby-article__cta { text-align: left; }
	/* Tallet er fokalt og bliver centreret. */
	.zby-stat { text-align: center; }
	.zby-loc__body { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ── Mobil: luften under brødteksten matcher luften over den ─────────────────
   `.zb-grid__plugin` arver `margin-top: 2.5rem` (40px) fra behandling.css, og
   det var for meget: teksten stod tæt på overskriften og langt fra det der
   fulgte. Nu spejler den `.zb-grid__sub`'s egen `margin-top: 1.1rem` (17,6px),
   altså præcis den afstand der er fra den grønne streg under overskriften ned
   til brødteksten. Samme luft over og under teksten.
   (Bruger man `1rem` bliver det 16px og dermed 1,6px for lidt — forskellen er
   knap synlig, men så er de to gab beviseligt ens i stedet for næsten ens.)

   Kun bysider (`.zby`) og kun mobil — behandlings- og symptomsiderne deler
   reglen i behandling.css og beholder deres 40px.

   Gælder også de bysider der IKKE har switcheren (fx Aarhus, hvor der ingen
   udekørende er); dér lander teksten så 16px over filteret. Det er den samme
   rytme, og en betinget regel med :has() ville være værre: knapperne indsættes
   af grid.js EFTER load, så reglen ville skifte midt i indlæsningen og koste
   layout-skift. */
@media (max-width: 767px) {
	.zby .zb-grid__plugin {
		margin-top: 1.1rem;
	}
}

/* ============================================================
   Lokationskort — bynavnet er motivet (2026-08-02)
   ------------------------------------------------------------
   Klinikfotoet ligger bag et slør og bærer ikke længere information;
   bynavnet gør. Derfor er bynavnet også ude af bundlinjen — det stod
   før både på kortet og under det.

   Billedet vælges nu af zk_city_card_slot(), som blander de seks
   klinikbilleder efter SIDENS by. Hver byside får sin egen rækkefølge,
   og de seks kort på en side er stadig garanteret forskellige.
   ============================================================ */

.zby-loc__media {
	min-height: 240px;
}

/* Sløret: mørkest i top og bund, hvor teksten står. Fotoet ånder i midten. */
.zby-loc__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgb(16 40 35 / .66) 0%,
		rgb(16 40 35 / .30) 42%,
		rgb(16 40 35 / .34) 62%,
		rgb(16 40 35 / .80) 100%
	);
}

.zby-loc__km {
	z-index: 4;
	background: rgb(61 79 75 / .9);
}

.zby-loc__head {
	position: absolute;
	left: 1.4rem;
	right: 1.4rem;
	top: 3.4rem;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.zby-loc__name {
	font-family: var(--font-merriweather);
	font-weight: 400;
	color: #fff;
	font-size: clamp(1.55rem, 1.15rem + 1.7vw, 1.75rem);
	line-height: 1.04;
	letter-spacing: .2px;
	text-wrap: balance;
	text-shadow: 0 2px 18px rgb(0 0 0 / .42);
}

/* Samme 56×3 px streg som under sidens H2'er — her i den lyse oliven,
   fordi CTA-oliven mod det mørke slør ikke læses som et bevidst element. */
.zby-loc__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin-top: .95rem;
	border-radius: 2px;
	background: #c9b47c;
}

.zby-loc__team {
	position: absolute;
	left: 1.4rem;
	right: 1.4rem;
	bottom: 1.05rem;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .7rem;
}

.zby-loc__faces {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.zby-loc__faces img {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: var(--color-sage-100);
	border: 2px solid rgb(255 255 255 / .95);
	margin-left: -11px;
}

.zby-loc__faces img:first-child {
	margin-left: 0;
}

.zby-loc__rest {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	margin-left: -11px;
	font-family: var(--font-dosis);
	font-weight: 700;
	font-size: .8rem;
	color: #fff;
	background: rgb(255 255 255 / .22);
	border: 2px solid rgb(255 255 255 / .95);
	backdrop-filter: blur(2px);
}

.zby-loc__count {
	font-family: var(--font-dosis);
	font-weight: 700;
	font-size: .98rem;
	letter-spacing: .4px;
	color: #fff;
	text-shadow: 0 1px 8px rgb(0 0 0 / .4);
}

/* Bundlinjen bærer nu kun handlingen. */
.zby-loc__body--solo {
	justify-content: flex-start;
	padding: 1rem 1.4rem 1.05rem;
}

.zby-loc__body--solo .zby-loc__more {
	font-family: var(--font-dosis);
	font-weight: 600;
	letter-spacing: .6px;
	color: var(--color-forest);
}

.zby-loc:hover .zby-loc__body--solo .zby-loc__more {
	color: var(--color-sage-600);
}

@media (max-width: 560px) {
	.zby-loc__head {
		top: 3.1rem;
	}
	.zby-loc__name {
		font-size: clamp(1.45rem, 1.1rem + 2.6vw, 1.65rem);
	}
}