@charset "UTF-8";

/* =========================================================================
   tepovanie-poprad.sk — 2026
   Hand-written, no build step. This file IS the source; there is no LESS.
   Organised with @layer; the banner comments are the navigation.
   ========================================================================= */

@layer tokens, base, components, chrome, sections, utilities;

/* ============================== tokens ================================== */
@layer tokens {
	:root {
		/* Contrast against --snow is measured, not estimated:
		   ink 15.4:1 · ink-soft 6.7:1 · water 5.4:1 · fresh 4.95:1 (white on it).
		   --spray (2.3:1) and --sun (~1.3:1) are DECORATIVE ONLY and must never
		   carry text on a light background. */
		--ink: #0A2540;
		--ink-soft: #445E75;
		--water: #0B6FA4;
		--water-deep: #08557D;
		--spray: #4FB3E8;
		--mist: #E8F2FA;
		--mist-2: #D6E8F7;
		--line: #CFE2F2;
		--snow: #FCFDFF;
		--sun: #FFDC01;
		--fresh: #1A7F4E;

		--font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
		--font-body: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

		--r-sm: 12px;
		--r-md: 18px;
		--r-lg: 28px;
		--r-pill: 999px;

		--shadow: 0 18px 50px -22px rgba(10, 37, 64, .42);
		--shadow-sm: 0 8px 24px -14px rgba(10, 37, 64, .35);

		--s1: 4px;
		--s2: 8px;
		--s3: 12px;
		--s4: 16px;
		--s5: 24px;
		--s6: 32px;
		--s7: 48px;
		--s8: 64px;
		--s9: 88px;

		--container: 1180px;
		--header-h: 74px;
	}
}

/* =============================== base =================================== */
@layer base {
	/* One variable file per family covers every weight used. latin and
	   latin-ext are combined rather than split by unicode-range: Slovak needs
	   both, so splitting would only ever mean two requests instead of one. */
	@font-face {
		font-family: "Bricolage Grotesque";
		src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
		font-weight: 700 800;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: Figtree;
		src: url("../fonts/figtree.woff2") format("woff2");
		font-weight: 400 700;
		font-style: normal;
		font-display: swap;
	}

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

	html {
		-webkit-text-size-adjust: 100%;
		/* The closed mobile nav sheet sits translated off-screen to the right
		   and would otherwise extend the scrollable area. It has to be clipped
		   here rather than on <body>: the sheet is position:fixed, so its
		   containing block is the viewport and body's overflow does not apply
		   to it. `clip` rather than `hidden`, because hidden would make this a
		   scroll container and silently break position:sticky on the header. */
		overflow-x: clip;
	}

	body {
		margin: 0;
		background: var(--snow);
		color: var(--ink);
		font-family: var(--font-body);
		font-size: 1.02rem;
		line-height: 1.6;
		-webkit-font-smoothing: antialiased;
	}

	h1,
	h2,
	h3,
	h4 {
		margin: 0 0 var(--s4);
		font-family: var(--font-display);
		font-weight: 800;
		line-height: 1.05;
		letter-spacing: -.02em;
		color: var(--ink);
		text-wrap: balance;
	}

	h1 {
		font-size: clamp(2.3rem, 5.2vw, 3.9rem);
	}

	h2 {
		font-size: clamp(1.85rem, 3.6vw, 2.6rem);
	}

	h3 {
		font-size: 1.18rem;
		font-weight: 700;
	}

	h4 {
		font-size: 1.05rem;
		font-weight: 700;
	}

	p {
		margin: 0 0 var(--s4);
	}

	a {
		color: var(--water);
		text-decoration-thickness: 1px;
		text-underline-offset: 2px;
	}

	a:hover {
		color: var(--water-deep);
	}

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

	/* The site had no focus styles at all. Non-negotiable. */
	:focus-visible {
		outline: 3px solid var(--spray);
		outline-offset: 2px;
		border-radius: 2px;
	}

	@media (prefers-reduced-motion: reduce) {

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

/* ============================ components ================================ */
@layer components {
	/* Deliberately NOT called .container. Bootstrap 3 gives .container a
	   ::before/::after clearfix, and those pseudo-elements become real grid and
	   flex items in a modern layout — they pushed the hero copy into the second
	   column and stopped the header logo sitting flush left. Overriding is not
	   possible for a pseudo-element the framework created, so the name is
	   avoided entirely. */
	.wrap {
		width: 100%;
		max-width: var(--container);
		margin-inline: auto;
		padding-inline: var(--s5);
	}

	.skip-link {
		position: absolute;
		top: -100px;
		left: var(--s5);
		z-index: 200;
		padding: var(--s3) var(--s5);
		border-radius: 0 0 var(--r-sm) var(--r-sm);
		background: var(--ink);
		color: #fff;
		text-decoration: none;
		transition: top .15s ease;
	}

	.skip-link:focus {
		top: 0;
		color: #fff;
	}

	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--s2);
		padding: var(--s3) var(--s5);
		border: 1px solid transparent;
		border-radius: var(--r-pill);
		font-family: inherit;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		cursor: pointer;
		transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
	}

	.btn:hover {
		transform: translateY(-2px);
	}

	.btn--primary {
		background: var(--water);
		color: #fff;
		box-shadow: var(--shadow-sm);
	}

	.btn--primary:hover {
		background: var(--water-deep);
		color: #fff;
	}

	.btn--ghost {
		border-color: var(--line);
		background: transparent;
		color: var(--ink);
	}

	.btn--ghost:hover {
		border-color: var(--water);
		color: var(--water);
	}

	.btn--dark {
		background: var(--ink);
		color: #fff;
	}

	.btn--dark:hover {
		background: #06192C;
		color: #fff;
	}

	.eyebrow {
		display: flex;
		align-items: center;
		gap: var(--s2);
		margin: 0 0 var(--s3);
		font-size: .78rem;
		font-weight: 600;
		letter-spacing: .18em;
		text-transform: uppercase;
		color: var(--water);
	}

	.eyebrow::before {
		content: "";
		width: 28px;
		height: 3px;
		border-radius: var(--r-pill);
		background: var(--spray);
	}

	/* Replaces new1.png, which was positioned absolutely at left:190px and so
	   could not survive a font or width change. */
	.badge {
		display: inline-block;
		margin-left: var(--s2);
		padding: 2px var(--s2);
		border-radius: var(--r-pill);
		background: var(--fresh);
		color: #fff;
		font-size: .68rem;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
		vertical-align: middle;
	}

	.card {
		padding: var(--s5);
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		background: #fff;
		box-shadow: var(--shadow-sm);
	}
}

/* ============================== chrome ================================== */
@layer chrome {
	.site-header {
		position: sticky;
		top: 0;
		z-index: 100;
		height: var(--header-h);
		border-bottom: 1px solid var(--line);
	}

	/* The blur lives on a pseudo-element, not on .site-header itself. A
	   backdrop-filter makes an element a containing block for its
	   position:fixed descendants — with it on the header, the mobile nav sheet
	   was being clipped to the 74px header box instead of filling the screen.
	   Same trap as transform and filter. */
	.site-header::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: rgba(252, 253, 255, .82);
		backdrop-filter: blur(12px);
	}

	/* Translucency is an enhancement; with no blur support the bar must be
	   opaque or the page shows through it. */
	@supports not (backdrop-filter: blur(1px)) {
		.site-header::before {
			background: var(--snow);
		}
	}

	.site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--s5);
		height: 100%;
	}

	.site-header__logo {
		display: flex;
		flex: none;
		align-items: center;
	}

	.site-header__logo img {
		display: block;
		width: auto;
		height: 46px;
	}

	.site-header__right {
		display: flex;
		align-items: center;
		gap: var(--s5);
	}

	.header-phone {
		display: inline-flex;
		align-items: center;
		gap: var(--s2);
		padding: var(--s2) var(--s4);
		border-radius: var(--r-pill);
		background: var(--water);
		color: #fff;
		font-weight: 700;
		white-space: nowrap;
		text-decoration: none;
		transition: background-color .18s ease, transform .18s ease;
	}

	.header-phone:hover {
		background: var(--water-deep);
		color: #fff;
		transform: translateY(-2px);
	}

	.header-phone svg {
		width: 16px;
		height: 16px;
		fill: currentColor;
	}

	/* ---- nav ---- */
	.nav__list {
		display: flex;
		align-items: center;
		gap: var(--s1);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.nav__item {
		position: relative;
	}

	.nav__link,
	.nav__toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--s1);
		padding: var(--s2) var(--s3);
		border: 0;
		border-radius: var(--r-sm);
		background: transparent;
		color: var(--ink);
		font-family: inherit;
		font-size: .98rem;
		font-weight: 500;
		line-height: 1.2;
		white-space: nowrap;
		text-decoration: none;
		cursor: pointer;
	}

	.nav__link:hover,
	.nav__toggle:hover {
		background: var(--mist);
		color: var(--water);
	}

	.nav__link[aria-current="page"] {
		background: var(--mist);
		color: var(--water);
		font-weight: 700;
	}

	/* Marks the group holding the current page, so the active item is not
	   invisible while its panel is closed. */
	.nav__item--current > .nav__toggle {
		color: var(--water);
		font-weight: 700;
	}

	.nav__toggle::after {
		content: "";
		width: 7px;
		height: 7px;
		margin-left: 2px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform .18s ease;
	}

	.nav__toggle[aria-expanded="true"]::after {
		transform: translateY(1px) rotate(-135deg);
	}

	.nav__panel {
		display: none;
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		min-width: 260px;
		/* Grow to the longest item rather than wrapping it. */
		width: max-content;
		margin: 0;
		padding: var(--s2);
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		background: #fff;
		box-shadow: var(--shadow);
		list-style: none;
	}

	/* General sibling, not adjacent: .nav__group-label sits between the toggle
	   and the panel (it is the visible heading in the mobile sheet, where the
	   toggle is hidden), so "+" would never match. */
	.nav__toggle[aria-expanded="true"] ~ .nav__panel {
		display: block;
	}

	.nav__panel a {
		/* Flex keeps the "nové" badge on the label's line. As display:block, a
		   longer label plus badge overflowed the 260px panel and the badge
		   dropped to its own line, while a shorter one kept it alongside. */
		display: flex;
		align-items: center;
		gap: var(--s2);
		padding: var(--s2) var(--s3);
		border-radius: var(--r-sm);
		color: var(--ink);
		font-size: .96rem;
		text-decoration: none;
	}

	.nav__panel a:hover {
		background: var(--mist);
		color: var(--water);
	}

	.nav__panel a .badge {
		flex: none;
		margin-left: 0;
	}

	.nav__panel a[aria-current="page"] {
		color: var(--water);
		font-weight: 700;
	}

	.nav__burger {
		display: none;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0 10px;
		border: 1px solid var(--line);
		border-radius: var(--r-sm);
		background: #fff;
		cursor: pointer;
	}

	.nav__burger span {
		display: block;
		height: 2px;
		border-radius: 2px;
		background: var(--ink);
	}

	@media (max-width: 900px) {
		.nav__burger {
			display: flex;
		}

		.site-header__nav {
			position: fixed;
			inset: var(--header-h) 0 0 auto;
			width: min(360px, 88vw);
			padding: var(--s5);
			overflow-y: auto;
			border-left: 1px solid var(--line);
			background: #fff;
			box-shadow: var(--shadow);
			transform: translateX(100%);
			visibility: hidden;
			/* visibility flips instantly on open and only after the slide on
			   close. Transitioning it symmetrically would leave the sheet
			   invisible for 220ms after opening — long enough that moving focus
			   into it silently fails, because you cannot focus a hidden node. */
			transition: transform .22s ease, visibility 0s linear .22s;
		}

		.site-header__nav[data-open="true"] {
			transform: translateX(0);
			visibility: visible;
			transition: transform .22s ease, visibility 0s;
		}

		.nav__list {
			flex-direction: column;
			align-items: stretch;
			gap: var(--s1);
		}

		/* Both groups are open in the sheet: on a phone, a second tap to reveal
		   links is friction with no benefit. */
		.nav__toggle {
			display: none;
		}

		.nav__panel {
			display: block;
			position: static;
			min-width: 0;
			/* The desktop max-content width must not carry into the sheet, where
			   a long label has to wrap instead of overflowing it. */
			width: auto;
			padding: 0 0 var(--s3);
			border: 0;
			box-shadow: none;
		}

		.nav__link,
		.nav__panel a {
			padding: var(--s3);
			font-size: 1.02rem;
		}

		.nav__group-label {
			display: block;
			padding: var(--s4) var(--s3) var(--s1);
			font-size: .74rem;
			font-weight: 700;
			letter-spacing: .16em;
			text-transform: uppercase;
			color: var(--ink-soft);
		}

		body[data-nav-open="true"] {
			overflow: hidden;
		}
	}

	@media (min-width: 901px) {
		.nav__group-label {
			display: none;
		}
	}

	@media (max-width: 560px) {
		.header-phone__label {
			display: none;
		}
	}

	/* ---- footer ---- */
	.site-footer {
		margin-top: var(--s9);
		padding: var(--s8) 0 var(--s5);
		background: var(--ink);
		color: #C9D8E6;
	}

	.site-footer a {
		color: #fff;
		text-decoration: none;
	}

	.site-footer a:hover {
		color: var(--sun);
		text-decoration: underline;
	}

	.site-footer h2 {
		margin-bottom: var(--s3);
		color: #fff;
		font-size: .8rem;
		font-weight: 700;
		letter-spacing: .16em;
		text-transform: uppercase;
	}

	.site-footer ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-footer li + li {
		margin-top: var(--s2);
	}

	.site-footer__cols {
		display: grid;
		grid-template-columns: 1.4fr 1fr 1.2fr;
		gap: var(--s7);
	}

	.site-footer__claim {
		max-width: 34ch;
	}

	.site-footer__logo {
		width: auto;
		height: 44px;
		margin-bottom: var(--s3);
	}

	.social {
		display: flex;
		gap: var(--s2);
		margin-top: var(--s4);
	}

	.social a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border-radius: var(--r-sm);
		background: rgba(255, 255, 255, .09);
	}

	.social a:hover {
		background: var(--water);
	}

	.social svg {
		width: 20px;
		height: 20px;
		fill: #fff;
	}

	.partners {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--s5);
		margin-top: var(--s7);
		padding-top: var(--s5);
		border-top: 1px solid rgba(255, 255, 255, .12);
	}

	.partners__label {
		font-size: .74rem;
		font-weight: 700;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: #8FA6BC;
	}

	.partners img {
		width: auto;
		height: 40px;
		padding: 4px 8px;
		border-radius: 6px;
		background: #fff;
	}

	.site-footer__legal {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--s3);
		margin-top: var(--s5);
		padding-top: var(--s5);
		border-top: 1px solid rgba(255, 255, 255, .12);
		font-size: .86rem;
		color: #8FA6BC;
	}

	.site-footer__links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s2) var(--s4);
	}

	@media (max-width: 980px) {
		.site-footer__cols {
			grid-template-columns: 1fr 1fr;
			gap: var(--s6);
		}
	}

	@media (max-width: 560px) {
		.site-footer__cols {
			grid-template-columns: 1fr;
		}
	}
}

/* ============================== sections ================================ */
@layer sections {
	.page-main {
		display: block;
		min-height: 40vh;
	}

	.section {
		padding: var(--s9) 0;
	}

	.section--tight {
		padding-top: 0;
	}

	/* ---- content page header ---- */
	.page-hero {
		padding: var(--s8) 0 var(--s6);
		background:
			radial-gradient(800px 320px at 80% -20%, var(--mist) 0%, transparent 65%),
			var(--snow);
	}

	.page-hero h1 {
		max-width: 20ch;
	}

	.page-hero__lead {
		max-width: 62ch;
		margin-bottom: 0;
	}

	.price-notes {
		margin: var(--s5) 0 0;
		padding: 0;
		list-style: none;
		font-size: .92rem;
		color: var(--ink-soft);
	}

	.price-notes li {
		position: relative;
		padding-left: var(--s5);
	}

	.price-notes li + li {
		margin-top: var(--s2);
	}

	.price-notes li::before {
		content: "";
		position: absolute;
		top: .62em;
		left: 0;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--spray);
	}

	.price-aside .btn {
		width: 100%;
		margin-top: var(--s4);
	}

	.section__head {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--s4);
		margin-bottom: var(--s6);
	}

	.section__head h2 {
		margin-bottom: 0;
	}

	.link-more {
		font-weight: 600;
		text-decoration: none;
		white-space: nowrap;
	}

	.link-more:hover {
		text-decoration: underline;
	}

	.note {
		margin-top: var(--s5);
		color: var(--ink-soft);
	}

	/* ---- hero ---- */
	.hero {
		padding: var(--s8) 0 var(--s7);
		background:
			radial-gradient(1000px 400px at 85% -10%, var(--mist) 0%, transparent 60%),
			var(--snow);
	}

	.hero__inner {
		display: grid;
		grid-template-columns: 1.05fr 1fr;
		align-items: center;
		gap: var(--s8);
	}

	.hero h1 {
		margin-bottom: var(--s5);
	}

	/* The highlight sits behind the word rather than around it, so a line break
	   inside the phrase cannot leave a floating box. */
	/* Highlighter stroke under the last word (spec 6.1). A band across the
	   lower part of the letters, like a marker; a solid block from 62% down to
	   the bottom of the line box read as accidentally selected text. clone
	   repeats the band on each line if the word wraps. */
	.hero .hl {
		background: linear-gradient(transparent 66%, var(--spray) 66%, var(--spray) 88%, transparent 88%);
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
		padding-inline: .06em;
	}

	.hero__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s3);
		margin-bottom: var(--s6);
	}

	.trust {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s3) var(--s5);
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: .95rem;
		color: var(--ink-soft);
	}

	.trust strong {
		color: var(--ink);
	}

	.trust li + li {
		position: relative;
		padding-left: var(--s5);
	}

	.trust li + li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--spray);
		transform: translateY(-50%);
	}

	/* ---- before/after ---- */
	.ba__frame {
		position: relative;
		overflow: hidden;
		border-radius: var(--r-lg);
		box-shadow: var(--shadow);
		/* Only the frame, so the page still scrolls normally on touch. */
		touch-action: none;
		cursor: ew-resize;
		/* Dragging must not select the images or labels, nor start a native
		   image drag. */
		user-select: none;
		-webkit-user-select: none;
		-webkit-touch-callout: none;
		aspect-ratio: 3 / 2;
	}

	.ba__img {
		-webkit-user-drag: none;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ba__img--pred {
		position: absolute;
		inset: 0;
		/* Default 0% hides the "pred" layer entirely, so with no JS the clean
		   "po" photo shows as an ordinary image. before-after.js sets the real
		   value and adds .ba--ready. */
		clip-path: inset(0 calc(100% - var(--ba-pos, 0%)) 0 0);
	}

	.ba__tag {
		position: absolute;
		top: var(--s4);
		padding: 4px var(--s3);
		border-radius: var(--r-pill);
		background: rgba(10, 37, 64, .78);
		color: #fff;
		font-size: .74rem;
		font-weight: 700;
		letter-spacing: .1em;
		text-transform: uppercase;
	}

	.ba__tag--pred {
		left: var(--s4);
		opacity: 0;
	}

	.ba--ready .ba__tag--pred {
		opacity: 1;
	}

	.ba__tag--po {
		right: var(--s4);
	}

	.ba__handle {
		display: none;
		position: absolute;
		top: 0;
		bottom: 0;
		left: var(--ba-pos, 50%);
		width: 3px;
		margin-left: -1.5px;
		background: #fff;
		box-shadow: 0 0 0 1px rgba(10, 37, 64, .18);
	}

	.ba--ready .ba__handle {
		display: block;
	}

	.ba__handle::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 42px;
		height: 42px;
		border-radius: 50%;
		background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%230A2540' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-4 6 4 6M15 6l4 6-4 6'/%3E%3C/svg%3E") center/22px no-repeat;
		box-shadow: var(--shadow-sm);
		transform: translate(-50%, -50%);
	}

	/* Visually hidden but still focusable and operable — the range is the
	   actual control, which is what makes the slider keyboard accessible. */
	.ba__range {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.ba__range:focus-visible ~ .ba__hint {
		outline: 3px solid var(--spray);
		outline-offset: 2px;
		border-radius: var(--r-sm);
	}

	.ba__hint {
		display: none;
		margin: var(--s3) 0 0;
		text-align: center;
		font-size: .88rem;
		color: var(--ink-soft);
	}

	.ba--ready .ba__hint {
		display: block;
	}

	/* ---- service cards ---- */
	.cards {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--s4);
	}

	.card--service {
		display: block;
		color: inherit;
		text-decoration: none;
		transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	}

	.card--service:hover {
		border-color: var(--spray);
		color: inherit;
		transform: translateY(-3px);
		box-shadow: var(--shadow);
	}

	.card--service h3 {
		margin-bottom: var(--s2);
	}

	.card--service p {
		margin: 0;
		font-size: .94rem;
		color: var(--ink-soft);
	}

	.card__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		margin-bottom: var(--s4);
		border-radius: var(--r-sm);
		background: var(--mist);
		color: var(--water);
	}

	.card__icon svg {
		width: 24px;
		height: 24px;
	}

	/* ---- Prečo TePP panel ---- */
	.panel {
		position: relative;
		overflow: hidden;
		padding: var(--s8);
		border-radius: var(--r-lg);
		background: var(--ink);
		color: #C9D8E6;
	}

	.panel::before {
		content: "";
		position: absolute;
		top: -140px;
		right: -80px;
		width: 460px;
		height: 460px;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(79, 179, 232, .34) 0%, transparent 70%);
		pointer-events: none;
	}

	.panel h2,
	.panel h3 {
		color: #fff;
	}

	.eyebrow--light {
		color: var(--spray);
	}

	.panel__lead {
		max-width: 72ch;
		margin-bottom: var(--s7);
	}

	.reasons {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--s5);
		margin: 0;
		padding: 0;
		list-style: none;
		counter-reset: reason;
	}

	.reasons li {
		counter-increment: reason;
	}

	.reasons li::before {
		content: counter(reason, decimal-leading-zero);
		display: block;
		margin-bottom: var(--s3);
		font-family: var(--font-display);
		font-size: 1.5rem;
		font-weight: 800;
		color: var(--spray);
	}

	.reasons h3 {
		margin-bottom: var(--s2);
	}

	.reasons p {
		margin: 0;
		font-size: .94rem;
	}

	/* ---- gallery grid ---- */
	.gallery-grid {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: var(--s3);
	}

	.gallery-grid__item {
		display: block;
		overflow: hidden;
		padding: 0;
		border: 0;
		border-radius: var(--r-sm);
		background: var(--mist);
		cursor: pointer;
		aspect-ratio: 3 / 2;
	}

	.gallery-grid__item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform .3s ease;
	}

	.gallery-grid__item:hover img {
		transform: scale(1.06);
	}

	.ba-static {
		margin: var(--s5) 0 0;
		text-align: center;
	}

	.ba-static img {
		max-width: 700px;
		width: 100%;
		border-radius: var(--r-md);
		box-shadow: var(--shadow-sm);
	}

	.ba-static figcaption {
		margin-top: var(--s2);
		font-size: .88rem;
		color: var(--ink-soft);
	}

	/* ---- prose (the content pages) ---- */
	/* Replaces text-align:justify + font-weight:bold + font-size:1.2em, which
	   the old pages applied to every paragraph. Justified text with no
	   hyphenation opens rivers of whitespace at narrow widths, and body copy
	   set entirely in bold has no way left to emphasise anything. */
	.prose {
		max-width: 68ch;
	}

	/* A 200px float inside a 68ch column leaves a ribbon of text too narrow to
	   read comfortably, so pages that actually contain one get the width back.
	   Browsers without :has() simply keep the narrower column — still fine,
	   just tighter. */
	@media (min-width: 701px) {
		.prose:has(.fig) {
			max-width: calc(68ch + 224px);
		}
	}

	.prose > p,
	.prose > ul,
	.prose > ol {
		margin-bottom: var(--s5);
	}

	.prose h2 {
		margin-top: var(--s8);
		font-size: clamp(1.5rem, 2.6vw, 1.95rem);
	}

	.prose h3,
	.prose h4 {
		margin-top: var(--s6);
		margin-bottom: var(--s2);
		font-size: 1.12rem;
	}

	.prose ul,
	.prose ol {
		padding-left: 0;
		list-style: none;
	}

	.prose li {
		position: relative;
		margin-bottom: var(--s3);
		padding-left: var(--s5);
	}

	.prose ul > li::before {
		content: "";
		position: absolute;
		top: .62em;
		left: 0;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--water);
	}

	.prose li img {
		display: block;
		margin-top: var(--s3);
		border-radius: var(--r-sm);
	}

	.prose a {
		font-weight: 600;
	}

	/* Floated illustrations. Below 700px they stop floating — a 200px image
	   floated inside a ~40ch column leaves an unreadable ribbon of text. */
	.fig {
		width: 200px;
		max-width: 45%;
		margin: 0 0 var(--s4);
		border-radius: var(--r-md);
		box-shadow: var(--shadow-sm);
	}

	.fig--left {
		float: left;
		margin-right: var(--s5);
	}

	.fig--right {
		float: right;
		margin-left: var(--s5);
	}

	@media (max-width: 700px) {

		.fig--left,
		.fig--right {
			float: none;
			width: 100%;
			max-width: 320px;
			margin-inline: 0 0;
		}
	}

	.admonition {
		padding: var(--s4) var(--s5);
		border-left: 4px solid var(--sun);
		border-radius: var(--r-sm);
		background: var(--mist);
	}

	/* Keeps a float from spilling out of its section into the next heading. */
	.prose::after {
		content: "";
		display: block;
		clear: both;
	}

	/* ---- contact ---- */
	.contact {
		display: grid;
		grid-template-columns: 1fr 1.2fr;
		align-items: start;
		gap: var(--s5);
	}

	.contact__info {
		display: grid;
		gap: var(--s4);
	}

	.contact-card h2,
	.contact__form h2 {
		margin-bottom: var(--s3);
		font-size: 1.05rem;
	}

	.contact-card p {
		margin-bottom: var(--s2);
		font-size: .94rem;
		color: var(--ink-soft);
	}

	.contact-card p:last-child {
		margin-bottom: 0;
	}

	.contact-card__big {
		display: inline-block;
		margin-bottom: var(--s3);
		font-family: var(--font-display);
		font-size: 1.6rem;
		font-weight: 800;
		text-decoration: none;
	}

	.field {
		margin-bottom: var(--s4);
	}

	.field label {
		display: block;
		margin-bottom: var(--s2);
		font-weight: 600;
		font-size: .94rem;
	}

	.field__req {
		font-weight: 400;
		color: var(--ink-soft);
	}

	.field input,
	.field textarea {
		width: 100%;
		padding: var(--s3) var(--s4);
		border: 1px solid var(--line);
		border-radius: var(--r-sm);
		background: var(--snow);
		color: var(--ink);
		font-family: inherit;
		font-size: 1rem;
		line-height: 1.5;
	}

	.field textarea {
		resize: vertical;
	}

	.field input:hover,
	.field textarea:hover {
		border-color: var(--spray);
	}

	.form-result {
		margin-bottom: var(--s5);
		padding: var(--s3) var(--s4);
		border-left: 4px solid;
		border-radius: var(--r-sm);
		font-weight: 600;
	}

	.form-result--ok {
		border-color: var(--fresh);
		background: #E8F6EE;
		color: #12603B;
	}

	.form-result--warn {
		border-color: var(--water);
		background: var(--mist);
		color: var(--ink);
	}

	.contact__intro {
		margin-bottom: var(--s5);
		color: var(--ink-soft);
	}

	.form-note {
		margin: var(--s4) 0 0;
		font-size: .84rem;
		color: var(--ink-soft);
	}

	/* Google allows hiding the badge when the form names reCAPTCHA and links its
	   terms, which .form-note does. visibility, not display: display:none stops
	   reCAPTCHA from working. */
	.grecaptcha-badge {
		visibility: hidden;
	}

	.prose > .price-table__scroll {
		margin-bottom: var(--s5);
	}

	/* ---- price table ---- */
	/* Grid and flex children default to min-width:auto, which refuses to shrink
	   below the content's min-content width. Without this the price table's
	   longest cell widened the whole page instead of scrolling inside its own
	   container, and the internal scrollbar never engaged at all. */
	.price-preview > *,
	.contact > *,
	.hero__inner > *,
	.regions > *,
	.section__head > * {
		min-width: 0;
	}

	.price-table__scroll {
		overflow-x: auto;
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		background: #fff;
	}

	.price-table {
		width: 100%;
		border-collapse: collapse;
	}

	.price-table th,
	.price-table td {
		padding: var(--s3) var(--s5);
		text-align: left;
	}

	.price-table thead th {
		border-bottom: 1px solid var(--line);
		font-size: .78rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--ink-soft);
	}

	.price-table__group th {
		padding-top: var(--s5);
		font-family: var(--font-display);
		font-size: 1.05rem;
		font-weight: 800;
		color: var(--ink);
	}

	.price-table tbody tr + tr td {
		border-top: 1px solid var(--mist);
	}

	/* The price column shrinks to its widest amount and the item names get the
	   rest. Only the amount refuses to wrap; a qualifier note goes underneath
	   and may wrap, so a long note can no longer widen the whole column. */
	.price-table th:last-child,
	.price-table__price {
		width: 1%;
	}

	.price-table__amount {
		display: block;
		white-space: nowrap;
		font-weight: 600;
	}

	.price-table__note {
		display: block;
		min-width: 12ch;
		font-size: .84rem;
		color: var(--ink-soft);
	}

	.price-table td:first-child {
		text-wrap: pretty;
	}

	/* On a phone the 24px side padding of every cell ate 96px of a 340px
	   table, more than a quarter of it. */
	@media (max-width: 560px) {

		.price-table th,
		.price-table td {
			padding-inline: var(--s3);
		}
	}

	/* At 320px the widest amount ("2 € - 2,50 € / m²") plus the longest word
	   of a name still overran the column by ~8px. */
	@media (max-width: 360px) {

		.price-table th,
		.price-table td {
			padding-inline: var(--s2);
		}
	}

	/* Three text columns (the cookie table) do not fit a phone at the default
	   24px cell padding, so the compact variant trades padding and size for no
	   sideways scrolling. The two-column price tables keep the roomier default. */
	@media (max-width: 560px) {
		.price-table--compact {
			font-size: .9rem;
		}

		.price-table--compact th,
		.price-table--compact td {
			padding: var(--s2);
		}
	}

	@media (max-width: 360px) {
		.price-table--compact th,
		.price-table--compact td {
			padding: var(--s2) var(--s1);
		}
	}

	.price-preview {
		display: grid;
		grid-template-columns: 1.6fr 1fr;
		align-items: start;
		gap: var(--s5);
	}

	.price-aside {
		position: sticky;
		top: calc(var(--header-h) + var(--s5));
		background: var(--mist);
		border-color: var(--mist-2);
		box-shadow: none;
	}

	.price-aside p {
		margin-bottom: var(--s3);
		font-size: .92rem;
		color: var(--ink-soft);
	}

	.price-aside p:last-child {
		margin-bottom: 0;
	}

	/* ---- quotes ---- */
	.quotes {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--s4);
	}

	.quote {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 0;
	}

	.quote blockquote {
		margin: 0 0 var(--s4);
	}

	.quote blockquote p {
		margin: 0;
	}

	.quote blockquote p::before {
		content: "„";
	}

	.quote blockquote p::after {
		content: "“";
	}

	.quote figcaption {
		font-size: .88rem;
		font-weight: 600;
		color: var(--ink-soft);
	}

	.quote--fb {
		align-items: flex-start;
		justify-content: center;
		gap: var(--s2);
		background: var(--ink);
		border-color: var(--ink);
		color: #fff;
		text-decoration: none;
	}

	.quote--fb:hover {
		color: #fff;
		box-shadow: var(--shadow);
	}

	.quote--fb svg {
		width: 28px;
		height: 28px;
		fill: var(--spray);
	}

	.quote--fb strong {
		font-family: var(--font-display);
		font-size: 1.3rem;
	}

	.quote--fb span {
		font-size: .9rem;
		color: #C9D8E6;
	}

	/* ---- regions ---- */
	.regions {
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		align-items: center;
		gap: var(--s7);
	}

	.chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.chips li {
		padding: var(--s2) var(--s4);
		border-radius: var(--r-pill);
		background: var(--mist);
		font-weight: 600;
		color: var(--ink);
	}

	.chips__more {
		background: transparent;
		color: var(--ink-soft);
		font-weight: 400;
	}

	.call-card {
		background: var(--mist);
		border-color: var(--mist-2);
	}

	.call-card p {
		color: var(--ink-soft);
	}

	/* ---- closing CTA ---- */
	.cta-band {
		padding: var(--s8) 0;
		background: linear-gradient(120deg, var(--ink) 0%, var(--water-deep) 100%);
		color: #DCEBF7;
	}

	.cta-band__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--s5);
	}

	.cta-band h2 {
		max-width: 22ch;
		margin-bottom: var(--s2);
		color: #fff;
	}

	.cta-band p {
		margin: 0;
	}

	.cta-band__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s3);
	}

	.btn--sun {
		background: var(--sun);
		color: var(--ink);
	}

	.btn--sun:hover {
		background: #FFE84D;
		color: var(--ink);
	}

	.btn--sun svg {
		width: 16px;
		height: 16px;
		fill: currentColor;
	}

	.btn--ghost-light {
		border-color: rgba(255, 255, 255, .45);
		color: #fff;
	}

	.btn--ghost-light:hover {
		border-color: #fff;
		background: rgba(255, 255, 255, .1);
		color: #fff;
	}

	/* ---- responsive ---- */
	@media (max-width: 980px) {
		.hero__inner,
		.regions,
		.price-preview {
			grid-template-columns: 1fr;
			gap: var(--s6);
		}

		.price-aside {
			position: static;
		}

		.cards,
		.reasons {
			grid-template-columns: repeat(2, 1fr);
		}

		.contact {
			grid-template-columns: 1fr;
		}

		.quotes {
			grid-template-columns: repeat(2, 1fr);
		}

		.gallery-grid {
			grid-template-columns: repeat(3, 1fr);
		}

		.panel {
			padding: var(--s6);
		}
	}

	@media (max-width: 700px) {
		.section {
			padding: var(--s8) 0;
		}

		.quotes {
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 560px) {

		.cards,
		.reasons {
			grid-template-columns: 1fr;
		}

		.gallery-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.hero__actions .btn {
			flex: 1 1 100%;
		}
	}

	/* Reveal-on-scroll. The initial hidden state is applied by reveal.js, not
	   here, so the content stays visible when JS does not run. */
	.is-revealable {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity .5s ease, transform .5s ease;
	}

	.is-revealed {
		opacity: 1;
		transform: none;
	}
}

/* ============================= utilities ================================ */
@layer utilities {
	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.lead {
		font-size: 1.15rem;
		color: var(--ink-soft);
	}
}

/* ===================== cookie banner (unlayered) ======================== */
/* cookieconsent.css is not in a layer, and unlayered rules beat every layer,
   so these overrides must stay outside @layer too — they win by coming after
   it in the cascade (main.css is linked second). */
#cc-main {
	--cc-font-family: var(--font-body);
	--cc-primary-color: var(--ink);
	--cc-secondary-color: var(--ink-soft);
	--cc-btn-primary-bg: var(--water);
	--cc-btn-primary-border-color: var(--water);
	--cc-btn-primary-hover-bg: var(--water-deep);
	--cc-btn-primary-hover-border-color: var(--water-deep);
	--cc-toggle-on-bg: var(--water);
	--cc-modal-border-radius: var(--r-md);
	--cc-btn-border-radius: var(--r-pill);
}