/* =======================================================================
   KOMPOZICE — Kominictví Matějček (2. kolo)
   Skladba konkrétního webu. Bez hexu: barvy jen přes proměnné z vrstvy.
   Motiv webu: soustředné kruhy — pohled do nerezové vložky z klientových
   fotek. Vrací se v heru (tunel), na knoflíku, v pásu a v mapě dojezdu.
   ======================================================================= */

.ikona {
	width: 24px;
	height: 24px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.tlacitko { gap: 8px; }

.preskocit {
	position: absolute;
	left: var(--okraj);
	top: 8px;
	z-index: 100;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: 24px;
	background-color: var(--akcent);
	color: var(--akcent-text);
	font-weight: 700;
	transform: translateY(-200%);
}
.preskocit:focus-visible { transform: none; }
main:focus { outline: none; }

/* Číslice v celém webu: úzké industriální písmo. */
.pocitadlo, .krok-cislo, .vysledek-cislo, .sluzba-cislo, .rez-stitek {
	font-family: var(--pismo-cisla);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* ============ HLAVIČKA — N02 magnetická lišta ============ */

.hlavicka {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	height: var(--hlavicka);
	color: var(--text);
}

/* Lišta je vždy v barvě plochy (.na-plose z kostry) — tmavě zelená nad
   herem i nad světlými sekcemi (na přání Tomáše). Po sjetí z hera přibude
   jen spodní linie. Mění se jen stín, žádný rozměr (pravidlo 15). */
.hlavicka.na-plose { background-color: var(--plocha); transition: box-shadow var(--prechod-kratky) var(--krivka); }
.hlavicka.odjeto { box-shadow: 0 1px 0 color-mix(in srgb, var(--plocha-text) 14%, transparent), 0 8px 24px color-mix(in srgb, var(--saze) 25%, transparent); }

.hlavicka-vnitrek {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 8px;
	height: 100%;
	max-width: var(--blok);
	margin-inline: auto;
	padding-inline: var(--okraj);
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	color: var(--text);
	text-decoration: none;
	justify-self: start;
}
.logo:hover { color: var(--text); }
.logo-znak,
.logo-nazev,
.vizitka-znak,
.vizitka-nazev {
	display: block;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--maska) center / contain no-repeat;
	mask: var(--maska) center / contain no-repeat;
}
.logo-znak { --maska: url(../obrazky/logo/znak.webp); width: 48px; height: 48px; }
.logo-nazev { --maska: url(../obrazky/logo/nazev.webp); width: 190px; height: 16px; }
/* na mobilu je název ve dvou řádcích, na jednom řádku byl moc dlouhý */
@media (max-width: 767px) {
	.logo-nazev { --maska: url(../obrazky/logo/nazev-2r.webp); width: 88px; height: 36px; }
}

.hlavicka-telefon { padding-inline: 12px; }
.hlavicka-telefon span {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

.menu-prepinac {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid color-mix(in srgb, currentColor 50%, transparent);
	border-radius: 24px;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	transition: border-color var(--prechod-kratky) var(--krivka);
}
.menu-prepinac:hover { border-color: var(--akcent); }
.menu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.menu-car, .menu-car::before, .menu-car::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background-color: currentColor;
	transition: transform var(--prechod-kratky) var(--krivka), opacity var(--prechod-kratky) var(--krivka);
}
.menu-car { position: relative; }
.menu-car::before, .menu-car::after { content: ""; position: absolute; left: 0; }
.menu-car::before { transform: translateY(-6px); }
.menu-car::after { transform: translateY(6px); }
.otevreno .menu-car { background-color: transparent; }
.otevreno .menu-car::before { transform: rotate(45deg); }
.otevreno .menu-car::after { transform: rotate(-45deg); }

.shluk { list-style: none; margin: 0; padding: 0; max-width: none; }
.shluk a {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: 48px;
	font-weight: 700;
	line-height: var(--lh-navigace);
	color: var(--text);
	text-decoration: none;
	transition: color var(--prechod-kratky) var(--krivka);
}

/* --- mobil: celoobrazovkové menu (N04 — jen jako mobilní menu) --- */
@media (max-width: 767px) {
	html.js .navigace {
		position: fixed;
		inset: 0;
		z-index: -1;
		padding: calc(var(--hlavicka) + 32px) var(--okraj) 32px;
		overflow-y: auto;
		background-color: var(--plocha);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--prechod-kratky) var(--krivka), visibility 0s linear var(--prechod-kratky);
	}
	html.js .otevreno .navigace {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--prechod-kratky) var(--krivka), visibility 0s;
	}
	.shluk a {
		font-family: var(--pismo-nadpis);
		font-weight: var(--vaha-nadpis);
		font-size: var(--fs-h2);
		line-height: var(--lh-h2);
		padding-block: 12px;
		border-bottom: 1px solid color-mix(in srgb, var(--plocha-text) 18%, transparent);
	}
	html.js .shluk li {
		opacity: 0;
		transform: translateY(var(--odkryti-posun));
		transition: opacity var(--prechod-dlouhy) var(--krivka), transform var(--prechod-dlouhy) var(--krivka);
	}
	html.js .otevreno .shluk li { opacity: 1; transform: none; }
	.otevreno .shluk li:nth-child(3) { transition-delay: 80ms; }
	.otevreno .shluk li:nth-child(4) { transition-delay: 160ms; }
	.otevreno .shluk li:nth-child(5) { transition-delay: 240ms; }
	.otevreno .shluk li:nth-child(6) { transition-delay: 320ms; }
	.pilulka { display: none; }

	html:not(.js) .hlavicka { position: relative; height: auto; }
	html:not(.js) .hlavicka-vnitrek { grid-template-columns: 1fr auto; padding-block: 8px; }
	html:not(.js) .navigace { grid-column: 1 / -1; }
	html:not(.js) .shluk a { font-size: var(--fs-h3); }
	html:not(.js) .menu-prepinac { display: none; }
}

@media (min-width: 768px) {
	.menu-prepinac { display: none; }
	.hlavicka-telefon { padding-inline: var(--tl-pad-x); }
	.hlavicka-telefon span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }

	.shluk { position: relative; display: flex; transition: transform var(--prechod-dlouhy) var(--krivka); }
	.shluk a { padding-inline: 16px; }

	/* Pilulka: dvě čepičky a střed; střed má pevnou šířku 100 px a škáluje
	   se, čepičky se posouvají — jen transform (pravidlo 15). */
	.pilulka { position: absolute; left: 0; top: 0; width: 0; height: 48px; pointer-events: none; opacity: 0; transition: opacity var(--prechod-kratky) var(--krivka); }
	.shluk.pripraveno .pilulka.vidi { opacity: 1; }
	.pilulka span {
		position: absolute;
		top: 0;
		left: 0;
		height: 48px;
		background-color: var(--akcent);
		transition: transform 450ms var(--krivka), background-color var(--prechod-kratky) var(--krivka);
	}
	.pilulka-l, .pilulka-p { width: 48px; border-radius: 50%; }
	.pilulka-l { transform: translateX(var(--x-l, 0)); }
	.pilulka-p { transform: translateX(var(--x-p, 0)); }
	.pilulka-s { width: 100px; transform-origin: 0 0; transform: translateX(var(--x-s, 24px)) scaleX(var(--sx, 0)); }
	.shluk a.pod-pilulkou { color: var(--akcent-text); }
}

@media (min-width: 768px) and (max-width: 1279px) {
	.hlavicka-vnitrek { grid-template-columns: 1fr auto; grid-template-rows: 64px 56px; }
	.navigace { grid-column: 1 / -1; grid-row: 2; align-self: start; }
	.shluk { margin-inline: -16px; }
}
@media (min-width: 1280px) {
	.hlavicka-vnitrek { grid-template-columns: 1fr auto 1fr; gap: 24px; }
	.hlavicka-telefon { justify-self: end; }
}

/* ============ HERO — H10: baterka a slova mění pohled do komína ============ */

.hero { position: relative; overflow: hidden; padding-top: calc(var(--hlavicka) + 40px); padding-bottom: var(--sekce); }
.hero-mrizka { display: grid; gap: 56px; align-items: center; }
.hero-text > * + * { margin-top: var(--mezera); }
.hero-text > .popisek + h1 { margin-top: var(--pod-popiskem); }
.hero-text > h1 + * { margin-top: var(--pod-nadpisem); }
/* H1 se láme záměrně před podpisem; podpis pak začíná řádek, takže optická
   mezera by se četla jako odsazení — na H1 odpadá. */
.hero h1 .podpis { margin-inline-start: 0; }

.hero-obraz { display: grid; justify-items: center; gap: 16px; }

.tunel { position: relative; margin: 0; width: 100%; max-width: 520px; }
.tunel-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
/* Ve výchozím stavu jde po komíně jezdit prstem (baterka); stránka se pak
   posouvá tažením mimo komín. Po výběru režimu se komín zase scrolluje. */
.tunel[data-rezim="vychozi"] .tunel-svg { touch-action: none; }

/* Baterka: na zařízení s myší se kurzor nad komínem schová a místo něj
   jede kreslená baterka; na dotyku se ukáže, dokud prst leží na komíně. */
.baterka {
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: auto;
	pointer-events: none;
	opacity: 0;
	transform-origin: 50% 3%;
	transition: opacity var(--prechod-kratky) var(--krivka);
	filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--saze) 60%, transparent));
}
.tunel.svitim[data-rezim="vychozi"] .baterka { opacity: 1; }
.tunel.svitim[data-rezim="vychozi"] .tunel-svg { cursor: none; }

/* ---------- keramická vložka (Schiedel UNI) zespodu ----------
   Trubka, saze a obloha jsou předem vykreslené obrázky (obrazky/komin/),
   vyrenderované z vektorové kresby. Prohlížeč je jen skládá — žádné
   šumové filtry ani stovky cest při každém snímku. */
/* Čistý světlý šamot: základ pro vložkování, frézování a revizi; při
   čištění se rozjasní, až ježek jede zpátky nahoru. */
.vrstva-cista { opacity: 0; }
.tunel:is([data-rezim="vlozkovani"], [data-rezim="frezovani"], [data-rezim="revize"]) .vrstva-cista { opacity: 1; }
.tunel[data-rezim="cisteni"] .vrstva-cista { animation: rozjasni 6000ms both; }
@keyframes rozjasni { 0%, 55% { opacity: 0; } 95%, 100% { opacity: 1; } }
.tunel-komin { transform-box: fill-box; transform-origin: center; transition: transform 1800ms var(--krivka); }
.obloha-obr { transform-box: fill-box; transform-origin: center; }

/* saze: maska „vyčištěno“ roste spolu s ježkem. U vložkování a frézování
   se saze neukazují — vložka je čistý nerez, frézování má vlastní krustu. */
.vrstva-saze { transition: opacity 400ms var(--krivka); }
.tunel:is([data-rezim="vlozkovani"], [data-rezim="frezovani"]) .vrstva-saze { opacity: 0; }
.freza-popisky { opacity: 0; transition: opacity 400ms var(--krivka); }
.vycisteno { transform-box: fill-box; transform-origin: center; transform: scale(0); }

/* tma a kužel baterky: HTML vrstva nad kresbou, stejný tvar a zaoblení
   jako kresba (okraj 10/600, poloměr 28/600). Světlo je velký radiální
   přechod, který se jen posouvá (transform) — kresbu to nepřekresluje.
   Kruh s oblohou je z tmy vyříznutý maskou, nebe zůstává čisté. */
.tma {
	position: absolute;
	inset: 1.667%;
	border-radius: 50%;
	overflow: hidden;
	pointer-events: none;
	transition: opacity var(--prechod-dlouhy) var(--krivka);
	/* kruh s oblohou (poloměr 64 z 290) je z tmy vyříznutý */
	-webkit-mask: radial-gradient(circle closest-side, transparent 22%, #000 22.4%);
	mask: radial-gradient(circle closest-side, transparent 22%, #000 22.4%);
}
.tma-svetlo {
	position: absolute;
	left: -100%;
	top: -100%;
	width: 300%;
	height: 300%;
	will-change: transform;
	transform: translate(var(--svetlo-x, 12%), var(--svetlo-y, -9%));
	background:
		radial-gradient(circle closest-side, rgba(255, 233, 194, 0.45) 0, rgba(255, 233, 194, 0.14) 12%, rgba(255, 233, 194, 0) 21.8%),
		radial-gradient(circle closest-side, rgba(6, 8, 7, 0) 0, rgba(6, 8, 7, 0) 10.3%, rgba(6, 8, 7, 0.8) 17.2%);
}
.tunel:not([data-rezim="vychozi"]) .tma { opacity: 0; }

.tunel-obruba { fill: none; stroke: var(--plocha-text); stroke-opacity: 0.25; stroke-width: 2; }
.tunel-lem { fill: none; stroke: var(--ocel-4); stroke-width: 10; }

.tunel-jezek, .tunel-freza, .tunel-kamera, .tunel-vlozka { opacity: 0; pointer-events: none; }

/* ---------- čištění ----------
   Kominík shora spustí ježka na laně: nejdřív je proti obloze vidět jen
   silueta, pak projede průduchem až k divákovi (štětiny se opírají
   o stěny, proto roste s průduchem) a vytáhne se zpátky. Saze mizí
   postupně, jak ježek projíždí. Zrychlení a zpomalení odpovídá
   perspektivě — blízko diváka se hýbe rychleji. 6 s, jednou. */
.tunel[data-rezim="cisteni"] .tunel-jezek { opacity: 1; }
.jezek { transform-box: fill-box; transform-origin: center; opacity: 0; }
.tunel[data-rezim="cisteni"] .jezek { animation: jezek-lano 6000ms both; }
/* Při čištění je průduch na začátku celý černý od sazí (plná vrstva);
   mizí pod maskou „vyčištěno“, jak ježek projíždí dolů. */
.vrstva-saze--navic { opacity: 0; }
.tunel[data-rezim="cisteni"] .vrstva-saze--navic { opacity: 1; transition: none; }
/* Padající saze: tři pootočené kopie obrázku vloček se od hloubky
   „přiblíží“ k divákovi (scale) a zmizí — jen transform a opacity. */
.padajici-saze { opacity: 0; pointer-events: none; }
.tunel[data-rezim="cisteni"] .padajici-saze { opacity: 1; }
.vlocky { transform-box: fill-box; transform-origin: center; opacity: 0; }
.tunel[data-rezim="cisteni"] .vlocky { animation: vlocky-pad 1400ms cubic-bezier(0.5, 0, 0.9, 0.5) both; }
.tunel[data-rezim="cisteni"] .vlocky--1 { animation-delay: 500ms; animation-iteration-count: 2; }
.tunel[data-rezim="cisteni"] .vlocky--2 { animation-delay: 950ms; animation-iteration-count: 2; }
.tunel[data-rezim="cisteni"] .vlocky--3 { animation-delay: 1400ms; }
@keyframes vlocky-pad {
	0% { opacity: 0; transform: scale(0.35); }
	25% { opacity: 1; }
	100% { opacity: 0; transform: scale(2.4); }
}
@keyframes jezek-lano {
	0% { opacity: 0; transform: scale(0.82) rotate(0); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45); }
	5% { opacity: 1; }
	46% { transform: scale(3.3) rotate(24deg); animation-timing-function: linear; }
	54% { transform: scale(3.3) rotate(26deg); animation-timing-function: cubic-bezier(0.1, 0.55, 0.45, 1); }
	95% { opacity: 1; transform: scale(0.82) rotate(44deg); }
	100% { opacity: 0; transform: scale(0.78) rotate(46deg); }
}
/* vyčištěná plocha roste s ježkem (stejné tempo) a zůstane */
.tunel[data-rezim="cisteni"] .vycisteno { animation: vycisteni 6000ms both; }
@keyframes vycisteni {
	0% { transform: scale(0.6); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45); }
	46%, 100% { transform: scale(4.2); }
}

/* ---------- revize ----------
   Obraz z revizní kamery tak, jak ho kominík vidí na monitoru: kamera
   na kabelu sjíždí komínem a míří zblízka na zeď. Cihly ubíhají nahoru,
   kamera se natáčí doleva a doprava, zaměřuje spáry a cihly a odškrtává
   nálezy. Hloubku v metrech vypisuje skript. 6,5 s. */
.tunel[data-rezim="revize"] .tunel-kamera { opacity: 1; transition: opacity 400ms var(--krivka); }
.kamera-pozadi { fill: var(--saze); }
.kamera-pohled { transform-box: fill-box; transform-origin: center; }
.kamera-zed { transform-box: view-box; }
.tunel[data-rezim="revize"] .kamera-zed { animation: kamera-zed 6500ms cubic-bezier(0.45, 0, 0.55, 1) both; }
@keyframes kamera-zed {
	0% { transform: translate(0, 0); }
	26% { transform: translate(-46px, -200px); }
	52% { transform: translate(44px, -400px); }
	78% { transform: translate(-30px, -620px); }
	100% { transform: translate(0, -760px); }
}
.nalez { opacity: 0; }
.nalez rect { fill: none; stroke: var(--ocel-1); stroke-width: 3; stroke-dasharray: 10 6; }
.nalez text { fill: var(--ocel-1); stroke: var(--saze); stroke-width: 5; paint-order: stroke; font-family: var(--pismo-cisla); font-weight: 800; font-size: 22px; }
.tunel[data-rezim="revize"] .nalez { animation: objev 400ms var(--krivka) calc(1500ms + var(--z) * 1700ms) both; }
.kamera-roh, .kamera-kriz { fill: none; stroke: var(--ocel-1); stroke-width: 3; stroke-linecap: round; }
.kamera-rec { fill: var(--cihla-5); }
.tunel[data-rezim="revize"] .kamera-rec { animation: blik 1000ms steps(2, jump-none) 6; }
.kamera-text { fill: var(--ocel-1); stroke: var(--saze); stroke-width: 7; stroke-linejoin: round; paint-order: stroke; font-family: var(--pismo-cisla); font-weight: 800; font-size: 28px; letter-spacing: 0.02em; }
.kamera-hloubka { font-size: 40px; }
.kamera-stav { font-family: var(--pismo-text); font-weight: 700; font-size: 22px; letter-spacing: 0; }
@keyframes blik { 50% { opacity: 0; } }

/* ---------- vložkování ----------
   Nerezovou vložku kreslí skript: trubka se shora spouští průduchem,
   její spodní okraj se blíží k divákovi. Uvnitř je vidět kovová stěna
   se spoji a na konci kulatý kus oblohy; kolem trubky zůstávají cihly. */
.tunel[data-rezim="vlozkovani"] .tunel-vlozka { opacity: 1; }
.vlozka-stin { fill: none; stroke: var(--saze); stroke-opacity: 0.5; stroke-width: 26; filter: url(#tunel-rozmaz); }
.vlozka-pruhy { fill: none; stroke-width: 2.2; }
.vlozka-pruhy--svetle { stroke: var(--ocel-1); stroke-opacity: 0.16; }
.vlozka-pruhy--tmave { stroke: var(--saze); stroke-opacity: 0.12; }
.vlozka-spoje { fill: none; stroke: var(--ocel-4); stroke-width: 3; stroke-opacity: 0.8; }
.vlozka-okraj { fill: none; stroke: var(--ocel-1); stroke-width: 7; }
.vlozka-lesk { filter: url(#tunel-rozmaz); opacity: 0.8; }

/* ---------- frézování ----------
   Řetězová fréza na hřídeli: tři řetězy s tvrdokovovými hlavami se
   odstředivou silou rozevřou, fréza sjede průduchem dolů a zpátky,
   stěny se obrousí (světlejší cihla, bez sazí) a průduch se rozšíří.
   Rozmazání pohybu dělají dvě slabší kopie řetězů za sebou. 7 s. */
.tunel[data-rezim="frezovani"] .tunel-freza { opacity: 1; }
.freza-pohyb { transform-box: fill-box; transform-origin: center; opacity: 0; }
.freza-kolo { transform-box: fill-box; transform-origin: center; }
.clanek { fill: none; stroke: var(--ocel-2); stroke-width: 2.4; }
.clanek--hrana { fill: var(--ocel-2); stroke: var(--ocel-4); stroke-width: 1; }
.retez-hlava { fill: var(--ocel-3); stroke: var(--saze); stroke-width: 1.5; }
.retez-zuby { fill: none; stroke: var(--ocel-1); stroke-width: 1.2; }
.freza-naboj { fill: var(--ocel-3); stroke: var(--ocel-1); stroke-width: 2.5; }
.freza-hridel { fill: var(--saze); }
.freza-prach ellipse { fill: var(--cihla-5); }
.freza-prach { opacity: 0; }
.tunel[data-rezim="frezovani"] .freza-pohyb { animation: freza-jizda 7000ms both; }
.tunel[data-rezim="frezovani"] .freza-kolo { animation: freza-toceni 7000ms linear both; }
.tunel[data-rezim="frezovani"] .freza-prach { animation: freza-prach 7000ms both; }
@keyframes freza-jizda {
	0% { opacity: 0; transform: scale(0.8); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45); }
	6% { opacity: 1; }
	46% { transform: scale(2.9); animation-timing-function: linear; }
	54% { transform: scale(2.9); animation-timing-function: cubic-bezier(0.1, 0.55, 0.45, 1); }
	94% { opacity: 1; transform: scale(0.8); }
	100% { opacity: 0; transform: scale(0.75); }
}
@keyframes freza-toceni { to { transform: rotate(2520deg); } }
@keyframes freza-prach {
	0%, 10% { opacity: 0; }
	40% { opacity: 0.45; }
	70% { opacity: 0.3; }
	100% { opacity: 0; }
}
.tunel[data-rezim="frezovani"] .tunel-komin { transform: scale(1.22); transition-delay: 3200ms; }
/* před: úsečka ukazuje původní průměr; fréza projede, průduch se
   rozšíří (i obloha na konci) a úsečka i štítek přepnou na „po“ */
.tunel[data-rezim="frezovani"] .freza-popisky { opacity: 1; }
.freza-po { opacity: 0; }
.tunel[data-rezim="frezovani"] .freza-pred { animation: zmiz 400ms var(--krivka) 4200ms both; }
.tunel[data-rezim="frezovani"] .freza-po { animation: ukaz 500ms var(--krivka) 4400ms both; }
@keyframes ukaz { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes zmiz { to { opacity: 0; } }
.kota { fill: none; stroke: var(--ocel-1); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 1px 2px var(--saze)); }

/* režimy a popisek pod nimi */
.rezimy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 520px; }
.rezimy .rezim { justify-content: center; }
.rezim {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: var(--tl-pad-y) 20px;
	border: 2px solid color-mix(in srgb, var(--text) 50%, transparent);
	border-radius: var(--tl-radius);
	background-color: transparent;
	color: var(--text);
	font-family: var(--pismo-text);
	font-size: var(--fs-text);
	line-height: var(--tl-lh);
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--prechod-kratky) var(--krivka), color var(--prechod-kratky) var(--krivka), border-color var(--prechod-kratky) var(--krivka), transform var(--prechod-kratky) var(--krivka);
}
/* Tlačítka režimů jsou v tyrkysové (světlý akcent) — obrys, jemná výplň
   a ikona, aby bylo hned vidět, že se na ně kliká. Vybraný je plný. */
.rezim { gap: 8px; border-color: var(--akcent); background-color: color-mix(in srgb, var(--akcent) 14%, transparent); }
.rezim .ikona { width: 20px; height: 20px; color: var(--akcent); transition: color var(--prechod-kratky) var(--krivka); }
.rezim:hover { background-color: color-mix(in srgb, var(--akcent) 28%, transparent); }
.rezim[aria-pressed="true"] { background-color: var(--akcent); border-color: var(--akcent); color: var(--akcent-text); }
.rezim[aria-pressed="true"] .ikona { color: var(--akcent-text); }
.rezim:active { transform: scale(var(--stisk)); }

/* Popisek stojí pod tlačítky na vlastní ploše — na tmavém heru se dřív
   ztrácel. Má pevnou výšku dvou řádků, aby stránka při přepnutí neposkočila. */
.tunel-popis {
	width: 100%;
	max-width: 520px;
	min-height: calc(2 * 28px + 32px);
	padding: 16px 20px;
	border-radius: var(--karta-radius);
	background-color: color-mix(in srgb, var(--plocha-text) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--plocha-text) 18%, transparent);
	text-align: center;
	color: var(--text);
}
.tunel-popis strong { color: var(--zvyrazneni); }
.popis-prst { display: none; }
@media (hover: none), (pointer: coarse) {
	.popis-mys { display: none; }
	.popis-prst { display: inline; }
}

html.js .hero-nastup {
	animation: nastup var(--prechod-dlouhy) var(--krivka) both;
	animation-delay: calc(120ms + var(--n, 0) * var(--stagger));
}
@keyframes nastup { from { opacity: 0; transform: translateY(var(--odkryti-posun)); } }

@media (min-width: 768px) { .hero { padding-top: calc(var(--hlavicka) + 56px); } }
@media (min-width: 1280px) {
	.hero { min-height: min(100svh, 980px); display: grid; align-items: center; padding-top: calc(var(--hlavicka) + 48px); padding-bottom: 80px; }
	.hero-mrizka { grid-template-columns: 7fr 5fr; gap: 64px; }
	.hero-obraz { justify-items: stretch; }
	.tunel-popis, .rezimy { max-width: none; }
	/* Komín se vejde i s tlačítky a popiskem na výšku okna (nižší notebooky). */
	.tunel { width: min(100%, max(320px, calc(100svh - 400px))); max-width: none; justify-self: center; }
}

/* ============ O MNĚ + knoflík pro štěstí ============ */

.o-mne { display: grid; gap: 48px; align-items: center; }
.zasady { list-style: none; padding: 0; max-width: none; display: grid; gap: 16px; }
/* Na přání větší než běžný text: úvod i zásady 18 px.
   Vědomá odchylka od kostry (běžný text 16 px). */
.o-mne-text > p:not(.popisek) { font-size: 18px; line-height: 32px; }
.zasady li, .zasady li.odkryti { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; line-height: 28px; }
.zasady .ikona { width: 24px; height: 24px; color: var(--akcent); margin-top: 2px; }

.stesti {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 16px;
	padding: 40px 24px;
	border-radius: 24px;
	text-align: center;
	overflow: hidden;
}
.stesti > * { margin: 0; }
.stesti-vyzva {
	font-family: var(--pismo-nadpis);
	font-weight: var(--vaha-nadpis);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
}
.stesti-uvod { max-width: 380px; color: var(--text-tlumeny); }
.stesti-scena { position: relative; display: grid; place-items: center; width: 100%; padding-block: 16px; }

.knoflik {
	position: relative;
	width: 176px;
	height: 176px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: transform var(--prechod-kratky) var(--krivka);
}
.knoflik:focus-visible { outline-offset: 8px; }
.knoflik-kresba { display: block; width: 100%; height: 100%; }
.knoflik:hover { transform: rotate(-12deg) scale(1.04); }
.knoflik:active { transform: scale(0.94); }
.knoflik.toci .knoflik-kresba { animation: knoflik-toc 900ms var(--krivka); }
@keyframes knoflik-toc {
	0% { transform: rotate(0) scale(1); }
	40% { transform: rotate(200deg) scale(1.14); }
	100% { transform: rotate(360deg) scale(1); }
}
.knoflik::after {
	content: "";
	position: absolute;
	inset: -12px;
	border-radius: 50%;
	border: 3px solid var(--mosaz-1);
	opacity: 0;
	pointer-events: none;
}
.knoflik.toci::after { animation: knoflik-kruh 900ms var(--krivka); }
@keyframes knoflik-kruh {
	0% { opacity: 1; transform: scale(0.85); }
	100% { opacity: 0; transform: scale(1.5); }
}
.kn-stin { fill: var(--saze); opacity: 0.45; transform: translate(4px, 6px); }
.kn-drazka { fill: none; stroke: var(--mosaz-4); stroke-width: 2; opacity: 0.45; }
.kn-napis { fill: var(--mosaz-4); font-family: var(--pismo-text); font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; opacity: 0.7; }
.kn-dirka { fill: var(--mosaz-4); stroke: var(--mosaz-3); stroke-width: 2; }
.kn-nit { fill: none; stroke: var(--plocha); stroke-width: 7; stroke-linecap: round; opacity: 0.35; }
.kn-nit--vrch { opacity: 0.95; stroke-width: 5; }
.kn-odlesk { fill: none; stroke: var(--karta-vyrazna); stroke-width: 6; stroke-linecap: round; opacity: 0.55; }

.stesti-sipka {
	position: absolute;
	top: 0;
	left: calc(50% - 170px);
	width: 90px;
	fill: none;
	stroke: var(--plocha-zvyrazneni);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: opacity var(--prechod-dlouhy) var(--krivka);
}
.sipka-cara { stroke-dasharray: 2 9; }
html.js .stesti.viditelny .stesti-sipka { animation: sipka 600ms ease-in-out 800ms 7 alternate both; }
@keyframes sipka { to { transform: translate(8px, 6px); } }
.stesti.zkuseno .stesti-sipka { opacity: 0; }

.ctyrlistky { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ctyrlistky svg { grid-area: 1 / 1; width: 32px; height: 32px; fill: var(--mosaz-2); stroke: var(--mosaz-4); stroke-width: 0.8; opacity: 0; }
.ctyrlistky svg:nth-child(even) { fill: var(--mosaz-1); width: 24px; height: 24px; }
.ctyrlistky.vybuch svg { animation: listek 1200ms var(--krivka) both; }
@keyframes listek {
	0% { opacity: 0; transform: rotate(var(--u)) translateY(0) scale(0.3); }
	15% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--u)) translateY(-150px) rotate(200deg) scale(1.2); }
}

.knoflik-hlaska {
	min-height: calc(2 * var(--lh-veta) * var(--fs-veta));
	max-width: 400px;
	font-family: var(--pismo-nadpis);
	font-weight: var(--vaha-veta);
	font-size: var(--fs-veta);
	line-height: var(--lh-veta);
}
.knoflik-hlaska.nova { animation: objev 500ms var(--krivka); }

@media (min-width: 1280px) {
	.o-mne { grid-template-columns: 7fr 5fr; gap: 64px; }
	.knoflik { width: 208px; height: 208px; }
	.stesti-sipka { left: calc(50% - 196px); width: 110px; }
}

/* --- čísla: tři stejné sloupce, vše na střed --- */
.cisla-rada {
	list-style: none;
	margin: 80px 0 0;
	padding: 48px 0 0;
	max-width: none;
	display: grid;
	gap: 40px;
	border-top: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
}
.cisla-rada li { display: grid; justify-items: center; gap: 8px; text-align: center; }
.cislo { display: flex; align-items: baseline; justify-content: center; gap: 0.2em; }
.cislo .pocitadlo { font-size: var(--fs-cena); line-height: 1; min-width: 0; text-align: center; }
.cislo-jednotka {
	font-family: var(--pismo-nadpis);
	font-weight: var(--vaha-nadpis);
	font-style: italic;
	font-size: var(--fs-h2);
	line-height: 1;
	color: var(--zvyrazneni);
}
.cislo-popis { color: var(--text-tlumeny); max-width: 280px; }
/* Mobil: tři čísla vedle sebe v jedné řadě, jednotka pod číslem,
   popis menší — jinak by se každé číslo roztáhlo přes celou obrazovku. */
@media (max-width: 767px) {
	.cisla-rada { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 56px; padding-top: 32px; }
	.cisla-rada li { padding-inline: 6px; gap: 6px; }
	.cisla-rada li + li { border-left: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }
	.cislo { flex-direction: column; align-items: center; gap: 2px; }
	.cislo .pocitadlo { font-size: 48px; }
	.cislo-jednotka { font-size: 20px; line-height: 1.2; }
	.cislo-popis { font-size: 13px; line-height: 18px; }
}
@media (min-width: 768px) {
	.cisla-rada { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
	.cisla-rada li { padding-inline: 24px; }
	.cisla-rada li + li { border-left: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }
}

/* ============ SLUŽBY — stejné karty s ilustrací ============ */

.sluzby { list-style: none; padding: 0; max-width: none; display: grid; gap: var(--gap); }
.stoh > .sluzby { margin-top: 48px; }
.sluzba-obal { display: grid; min-width: 0; }
.sluzba { display: flex; flex-direction: column; height: 100%; padding: 8px; }
.sluzba > * + * { margin-top: 0; }
.sluzba-obr {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	background-color: var(--plocha);
	overflow: hidden;
}
.sluzba-obr svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.sluzba-cislo {
	position: absolute;
	top: 10px;
	left: 16px;
	font-size: 28px;
	line-height: 1;
	color: var(--plocha-zvyrazneni);
}
.sluzba-telo { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 16px; }
.sluzba-telo > * { margin: 0; }
.sluzba-kdy {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto !important;
	padding-top: 16px;
	border-top: 1px solid var(--karta-obrys);
	font-weight: 700;
}
.sluzba-kdy::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background-color: var(--mosaz-2); }

/* kresba */
.il { fill: none; stroke: var(--plocha-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.il--tenka { stroke-width: 1.5; stroke-opacity: 0.6; }
.il--silna { stroke-width: 6; }
.il--mosaz { stroke: var(--plocha-zvyrazneni); stroke-opacity: 1; }
.il--vypln { fill: color-mix(in srgb, var(--plocha-text) 9%, var(--plocha)); }
.il--sklo { fill: color-mix(in srgb, var(--plocha-text) 14%, transparent); }
.il--kour { stroke: var(--ocel-2); stroke-width: 2; }
.il--trubka { stroke-width: 14; }
.il--trubka-vnitrek { stroke: var(--plocha); stroke-width: 8; }
.il--carkovana { stroke: var(--plocha-zvyrazneni); stroke-dasharray: 4 5; stroke-width: 2; }
.il--obrys { stroke: var(--plocha-zvyrazneni); stroke-width: 3; stroke-linecap: round; }
.il-plna { fill: var(--plocha-zvyrazneni); }
.il-drazka { stroke: var(--ocel-3); stroke-width: 1.5; fill: none; }

.il-jezek, .il-kour, .il-lupa, .il-vlozka, .il-sipka, .il-freza, .il-jiskry, .il-plamen, .il-cihla, .il-lzice, .il-fajfka {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 900ms var(--krivka), opacity var(--prechod-dlouhy) var(--krivka);
}
.il-kour { opacity: 0.5; }
.il-jiskry { opacity: 0; }
.il-plamen { transform-origin: 50% 100%; }
.il-cihla { transform: translate(-6px, -64px) rotate(-16deg); }

/* Najetí myší (nebo na dotykovém zařízení karta uprostřed okna — třídu
   .hraje přidá skript): kresba ukáže, co se dělá. Pohyb potvrzuje akci. */
:is(.sluzba:hover, .sluzba.hraje) .il-jezek { transform: translateY(46px); }
:is(.sluzba:hover, .sluzba.hraje) .il-kour { opacity: 1; transform: translateY(-12px) scale(1.2); }
:is(.sluzba:hover, .sluzba.hraje) .il-fajfka { animation: fajfka 500ms var(--krivka) calc(var(--i) * 260ms) both; }
:is(.sluzba:hover, .sluzba.hraje) .il-lupa { transform: translate(-30px, -8px) rotate(-8deg); }
:is(.sluzba:hover, .sluzba.hraje) .il-vlozka { transform: translateY(70px); }
:is(.sluzba:hover, .sluzba.hraje) .il-sipka { opacity: 0; transform: translateY(20px); }
:is(.sluzba:hover, .sluzba.hraje) .il-freza { transform: rotate(540deg); transition-duration: 1400ms; }
:is(.sluzba:hover, .sluzba.hraje) .il-jiskry { animation: jiskra 200ms steps(2, jump-none) 7; }
:is(.sluzba:hover, .sluzba.hraje) .il-plamen { transform: scale(1.35); }
:is(.sluzba:hover, .sluzba.hraje) .il-cihla { transform: none; }
:is(.sluzba:hover, .sluzba.hraje) .il-lzice { transform: translate(-14px, 12px) rotate(-12deg); }
@keyframes fajfka { from { opacity: 0; transform: scale(0.2); } }

@media (min-width: 768px) { .sluzby { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .sluzby { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ============ ODDĚLOVAČ V POHYBU — tmavě zelený ============ */

/* Jako u Viktorina: kurzíva písma nadpisů, světlá na ploše, velké mezery
   mezi službami. Skript obsah naklonuje tolikrát, aby pás vždy pokryl
   celou šířku okna a běžel dokola bez prázdného místa. */
.pas-pohyb { overflow: hidden; padding-block: 20px; }
.pas-pohyb-drah { display: flex; width: max-content; will-change: transform; }
.pas-pohyb-obsah { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.pas-pohyb span {
	font-family: var(--pismo-nadpis);
	font-weight: var(--vaha-nadpis);
	font-style: italic;
	font-size: var(--fs-obsah);
	line-height: var(--lh-obsah);
	white-space: nowrap;
	color: var(--plocha-text);
}
.pas-pohyb i {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--zvyrazneni);
}
@media (min-width: 1280px) {
	.pas-pohyb-obsah { gap: 96px; padding-right: 96px; }
}

/* ============ Z PRAXE — řez komínem a kolej postupu ============ */

.praxe { display: grid; gap: 48px; }
.praxe-obraz { min-width: 0; }
.rez {
	position: relative;
	margin: 0;
	padding: 24px;
	border-radius: var(--karta-radius);
	background-color: var(--karta);
	border: 1px solid var(--karta-obrys);
}
.rez svg { display: block; width: 100%; max-width: 440px; height: auto; margin-inline: auto; overflow: visible; }
.rez-stitek {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
	margin: 0;
	padding: 4px 14px;
	border-radius: 999px;
	background-color: var(--plocha);
	color: var(--plocha-text);
	font-size: 20px;
	line-height: 28px;
	letter-spacing: 0.02em;
}
.rez-stitek-cislo { color: var(--plocha-zvyrazneni); }

.rez-strecha { fill: var(--ocel-3); }
.rez-vnitrek { fill: var(--karta); }
.rez-stare rect {
	fill: color-mix(in srgb, var(--text) 16%, var(--karta));
	stroke: var(--text-tlumeny);
	stroke-width: 0.8;
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 900ms cubic-bezier(0.5, 0, 0.9, 0.6), opacity 900ms var(--krivka);
	transition-delay: calc(var(--r) * 14ms);
}
.rez-text-stary { fill: var(--text-tlumeny); font-family: var(--pismo-text); font-size: 15px; font-weight: 700; transition: opacity var(--prechod-kratky) var(--krivka); }
.rez-nove rect {
	fill: var(--mosaz-1);
	stroke: var(--mosaz-3);
	stroke-width: 0.8;
	opacity: 0;
	transform: translateY(-36px);
	transition: transform 500ms var(--krivka), opacity 500ms var(--krivka);
	transition-delay: calc(700ms + var(--r) * 24ms);
}
.rez-izolace rect {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	transform: scaleY(0);
	transition: transform 1100ms var(--krivka);
}
.rez-vlozka { transform: translateY(-560px); transition: transform 1400ms var(--krivka); }
.rez-drazky { stroke: var(--ocel-3); stroke-width: 1.5; fill: none; }
.rez-hlava { fill: var(--ocel-4); }
.rez-kotel-skupina { opacity: 0; transform: translateY(24px); transition: transform var(--prechod-dlouhy) var(--krivka), opacity var(--prechod-dlouhy) var(--krivka); }
.rez-kotel { fill: var(--ocel-4); }
.rez-dvirka { fill: var(--mosaz-3); }
.rez-plamen { fill: var(--mosaz-1); }
.rez-kourovod { fill: none; stroke: var(--ocel-2); stroke-width: 12; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--krivka) 500ms; }
.rez-kourovod--vnejsi { stroke: var(--ocel-4); stroke-width: 20; }
.rez-kour circle { fill: var(--ocel-2); opacity: 0; transform-box: fill-box; transform-origin: center; }
.rez-puls { fill: none; stroke: var(--mosaz-2); stroke-width: 5; opacity: 0; }
.rez-popisek { opacity: 0; transform: translateX(12px); transition: opacity 500ms var(--krivka), transform 500ms var(--krivka); transition-delay: 900ms; }
.rez-vodic { fill: none; stroke: var(--text); stroke-width: 1.5; }
.rez-text { fill: var(--text); stroke: var(--karta); stroke-width: 5; stroke-linejoin: round; paint-order: stroke; font-family: var(--pismo-text); font-size: 16px; font-weight: 700; }

/* krok 1 a víc: staré cihly spadnou, nové se vyzdí odspodu */
.rez:is([data-krok="1"], [data-krok="2"], [data-krok="3"], [data-krok="4"]) .rez-stare rect { opacity: 0; transform: translate(-18px, 140px) rotate(-34deg); }
.rez:is([data-krok="1"], [data-krok="2"], [data-krok="3"], [data-krok="4"]) .rez-stare rect:nth-child(odd) { transform: translate(22px, 160px) rotate(40deg); }
.rez:is([data-krok="1"], [data-krok="2"], [data-krok="3"], [data-krok="4"]) .rez-text-stary { opacity: 0; }
.rez:is([data-krok="1"], [data-krok="2"], [data-krok="3"], [data-krok="4"]) .rez-nove rect { opacity: 1; transform: none; }
/* krok 2: vložka sjede shora */
.rez:is([data-krok="2"], [data-krok="3"], [data-krok="4"]) .rez-vlozka { transform: none; }
/* krok 3: izolace naroste odspodu */
.rez:is([data-krok="3"], [data-krok="4"]) .rez-izolace rect { transform: scaleY(1); }
/* krok 4: kotel, kouřovod se nakreslí, z komína jde kouř */
.rez[data-krok="4"] .rez-kotel-skupina { opacity: 1; transform: none; }
.rez[data-krok="4"] .rez-kourovod { stroke-dashoffset: 0; }
.rez[data-krok="4"] .rez-kour circle { animation: kour 2200ms ease-out 1400ms 2 both; }
.rez[data-krok="4"] .rez-kour circle:nth-child(2) { animation-delay: 1700ms; }
.rez[data-krok="4"] .rez-kour circle:nth-child(3) { animation-delay: 2000ms; }
@keyframes kour {
	0% { opacity: 0; transform: translateY(20px) scale(0.6); }
	30% { opacity: 0.8; }
	100% { opacity: 0; transform: translateY(-30px) scale(1.6); }
}
/* puls kolem vrstvy, která právě přibyla */
.rez[data-krok="1"] .rez-puls[data-k="1"],
.rez[data-krok="2"] .rez-puls[data-k="2"],
.rez[data-krok="3"] .rez-puls[data-k="3"],
.rez[data-krok="4"] .rez-puls[data-k="4"] { animation: puls 1100ms var(--krivka) 900ms 2; }
@keyframes puls { 30% { opacity: 1; } }
/* popisky */
.rez:is([data-krok="1"], [data-krok="2"], [data-krok="3"], [data-krok="4"]) [data-od="1"],
.rez:is([data-krok="2"], [data-krok="3"], [data-krok="4"]) [data-od="2"],
.rez:is([data-krok="3"], [data-krok="4"]) [data-od="3"],
.rez[data-krok="4"] [data-od="4"] { opacity: 1; transform: none; }

/* kolej postupu vlevo od kroků */
.kroky-obal { position: relative; }
.kroky-kolej {
	position: absolute;
	left: 22px;
	top: 56px;
	bottom: 88px;
	width: 4px;
	border-radius: 2px;
	background-color: color-mix(in srgb, var(--text) 12%, transparent);
	overflow: hidden;
}
.kroky-napln {
	display: block;
	height: 100%;
	background-color: var(--akcent);
	transform-origin: 50% 0;
	transform: scaleY(var(--postup, 0));
}
.kroky { list-style: none; padding: 0; margin: 0; max-width: none; }
.krok {
	display: grid;
	grid-template-columns: 48px 1fr;
	column-gap: 24px;
	row-gap: 8px;
	padding-block: 32px;
}
.krok > :not(.krok-cislo) { grid-column: 2; }
.krok-cislo {
	position: relative;
	z-index: 1;
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 3px solid color-mix(in srgb, var(--text) 30%, var(--podklad));
	background-color: var(--podklad);
	color: var(--text-tlumeny);
	font-size: 26px;
	line-height: 1;
	transition: background-color var(--prechod-dlouhy) var(--krivka), color var(--prechod-dlouhy) var(--krivka), border-color var(--prechod-dlouhy) var(--krivka), transform var(--prechod-dlouhy) var(--krivka);
}
.krok h3 { transition: color var(--prechod-dlouhy) var(--krivka); }
.krok.hotovo .krok-cislo { background-color: var(--akcent); border-color: var(--akcent); color: var(--akcent-text); }
.krok.aktivni .krok-cislo { background-color: var(--mosaz-2); border-color: var(--mosaz-3); color: var(--plocha); transform: scale(1.18); }
.krok.aktivni .krok-cislo::after {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 2px solid var(--mosaz-2);
	animation: knoflik-kruh 1200ms var(--krivka) 2;
}
.krok.aktivni h3 { color: var(--akcent); }
.krok .veta { font-family: var(--pismo-nadpis); font-weight: var(--vaha-veta); max-width: 560px; }

@media (min-width: 1280px) {
	.praxe {
		grid-template-columns: 6fr 5fr;
		grid-template-areas: "uvod obraz" "kroky obraz";
		column-gap: 64px;
		row-gap: 32px;
	}
	.praxe-uvod { grid-area: uvod; }
	.kroky-obal { grid-area: kroky; }
	.praxe-obraz { grid-area: obraz; }
	.rez { position: sticky; top: calc(var(--hlavicka) + 32px); }
	/* Řez musí být vidět celý i na nižším monitoru. */
	.rez svg { width: auto; max-width: 100%; height: min(600px, calc(100vh - var(--hlavicka) - 120px)); }
	.krok { min-height: 40vh; align-content: center; }
	/* Za posledním krokem zůstane místo, aby řez zůstal přišpendlený
	   i po dojetí na krok 4 a hotový komín šel v klidu prohlédnout. */
	.kroky-obal { padding-bottom: 35vh; }
	.kroky-kolej { top: calc(20vh - 16px); bottom: calc(20vh - 16px + 35vh); }
}

/* --- mobil a tablet: komín přišpendlený nahoře, pod ním se mění text ---
   Seznam kroků níž slouží jako dráha pro scroll (a pro čtečku); vidět je
   jen panel pod komínem, který skript plní textem aktivního kroku. */
.rez-panel { display: none; }
@media (max-width: 1279px) {
	.praxe-obraz {
		position: sticky;
		top: var(--hlavicka);
		z-index: 2;
		margin-inline: calc(var(--okraj) * -1);
		padding: 12px var(--okraj) 16px;
		background-color: var(--podklad);
	}
	.rez { padding: 12px; }
	.rez svg { width: auto; max-width: 100%; height: max(220px, calc(100svh - var(--hlavicka) - 290px)); }
	.rez-stitek { top: 12px; left: 12px; font-size: 18px; line-height: 24px; }
	.rez-panel { display: grid; gap: 12px; margin-top: 12px; }
	.rez-body { list-style: none; margin: 0; padding: 0; max-width: none; display: flex; gap: 8px; }
	.rez-body li { flex: 1; display: grid; gap: 4px; }
	.rez-body span { font-family: var(--pismo-cisla); font-weight: 800; font-size: 18px; line-height: 1; color: var(--text-tlumeny); transition: color var(--prechod-kratky) var(--krivka); }
	.rez-body li::after {
		content: "";
		height: 6px;
		border-radius: 3px;
		background-color: color-mix(in srgb, var(--text) 14%, transparent);
		transition: background-color var(--prechod-dlouhy) var(--krivka);
	}
	.rez-body li.hotovo::after { background-color: var(--akcent); }
	.rez-body li.hotovo span { color: var(--akcent); }
	.rez-body li.aktivni::after { background-color: var(--mosaz-2); }
	.rez-body li.aktivni span { color: var(--text); }
	.rez-panel-text { min-height: calc(var(--lh-h3) * var(--fs-h3) + 3 * var(--lh-veta) * var(--fs-veta) + 8px); }
	.rez-panel-text > * { margin: 0; }
	.rez-panel-nadpis { font-family: var(--pismo-nadpis); font-weight: var(--vaha-nadpis); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--akcent); }
	.rez-panel-veta { margin-top: 8px !important; font-family: var(--pismo-nadpis); font-weight: var(--vaha-veta); font-size: var(--fs-veta); line-height: var(--lh-veta); }
	.rez-panel-text.nova { animation: objev 500ms var(--krivka); }

	.kroky-kolej { display: none; }
	.krok { display: block; min-height: 80vh; padding: 0; }
	.krok > * {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
		overflow: hidden; clip-path: inset(50%); white-space: nowrap;
	}
}
@media (max-width: 1279px) and (prefers-reduced-motion: reduce) {
	.rez-panel-text.nova { animation: none; }
}
/* Nízké okno (telefon na šířku): přišpendlení by zabralo celou výšku,
   komín proto stojí normálně a kroky jsou obyčejný seznam. */
@media (max-width: 1279px) and (max-height: 560px) {
	.praxe-obraz { position: static; }
	.rez-panel { display: none; }
	.kroky-obal { margin-top: 0; }
	.krok { display: grid; min-height: 0; padding-block: 24px; }
	.krok > * { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
	.krok > :not(.krok-cislo) { grid-column: 2; }
}

/* ============ LHŮTY ============ */

.lhuty { display: grid; gap: 48px; }
.lhuty-zdroj { font-size: var(--fs-text); }

/* Kalkulačka: dva očíslované kroky a výsledek jako třetí krok v tmavém
   panelu. Paliva jsou karty s ikonou, provoz je dvoudílný přepínač. */
.kalkulacka {
	display: grid;
	gap: 32px;
	padding: 32px 24px;
	border-radius: 20px;
	background-color: var(--karta);
	border: 1px solid var(--karta-obrys);
}
.kalk-krok { display: grid; gap: 16px; }
.kalk-otazka {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--pismo-nadpis);
	font-weight: var(--vaha-nadpis);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}
.kalk-cislo {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--akcent);
	color: var(--akcent-text);
	font-family: var(--pismo-cisla);
	font-weight: 800;
	font-size: 18px;
	line-height: 1;
}
.kalk-cislo--svetle { background-color: var(--mosaz-2); color: var(--plocha); }

.paliva, .segment { margin: 0; padding: 0; border: 0; min-width: 0; }
.paliva { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.palivo { position: relative; display: grid; }
.palivo input, .segment input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.palivo-karta {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 8px;
	min-height: 120px;
	padding: 16px 8px;
	border-radius: 16px;
	border: 2px solid color-mix(in srgb, var(--text) 30%, var(--karta));
	background-color: var(--karta-vyrazna);
	text-align: center;
	pointer-events: none;
	transition: border-color var(--prechod-kratky) var(--krivka), background-color var(--prechod-kratky) var(--krivka), transform var(--prechod-kratky) var(--krivka);
}
.palivo-ikona { width: 40px; height: 40px; fill: none; stroke: var(--text-tlumeny); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--prechod-kratky) var(--krivka); }
.palivo-nazev { font-weight: 700; line-height: 20px; }
.palivo input:hover + .palivo-karta { border-color: var(--akcent); }
.palivo input:checked + .palivo-karta {
	border-color: var(--akcent);
	background-color: color-mix(in srgb, var(--akcent) 10%, var(--karta-vyrazna));
	box-shadow: inset 0 0 0 1px var(--akcent);
}
.palivo input:checked + .palivo-karta .palivo-ikona { stroke: var(--akcent); }
.palivo input:focus-visible + .palivo-karta, .segment input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }

.segment {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	border-radius: 28px;
	background-color: color-mix(in srgb, var(--text) 8%, var(--karta));
}
.segment label { position: relative; display: grid; }
.segment span {
	display: grid;
	place-items: center;
	min-height: 48px;
	padding: 8px 12px;
	border-radius: 24px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	pointer-events: none;
	transition: background-color var(--prechod-kratky) var(--krivka), color var(--prechod-kratky) var(--krivka);
}
.segment input:hover + span { background-color: color-mix(in srgb, var(--akcent) 12%, transparent); }
.segment input:checked + span { background-color: var(--akcent); color: var(--akcent-text); }

/* Výsledek ve stejném stylu jako kroky 1 a 2: nadpis s číslem kroku
   a dvě bílé dlaždice s rámečkem jako karty paliv. */
.vysledek { display: grid; gap: 16px; }
.vysledek-hlava {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--pismo-nadpis);
	font-weight: var(--vaha-nadpis);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}
.vysledek-sloupce { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vysledek-polozka {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 8px;
	min-height: 150px;
	padding: 20px 12px;
	border-radius: 16px;
	background-color: var(--plocha);
	text-align: center;
}
.vysledek-polozka .vysledek-cislo, .vysledek-polozka .vysledek-co { color: var(--plocha-text); }
.vysledek-cislo { font-size: var(--fs-cena); line-height: 1; color: var(--akcent); }
.vysledek-cislo.zmena { animation: zmena var(--prechod-dlouhy) var(--krivka); }
@keyframes zmena { from { opacity: 0; transform: translateY(calc(var(--odkryti-posun) * -1)); } }
.vysledek-co { font-weight: 700; line-height: 20px; color: var(--text); }
.vysledek-pozn { color: var(--text-tlumeny); }

@media (max-width: 389px) {
	.paliva { grid-template-columns: 1fr; }
	.palivo-karta { grid-auto-flow: column; justify-content: start; min-height: 64px; padding-inline: 16px; }
}
@media (min-width: 768px) {
	.kalkulacka { padding: 40px; }
}
@media (min-width: 1280px) {
	.lhuty { grid-template-columns: 5fr 7fr; column-gap: 64px; align-items: start; }
}

/* ============ PÁS — výzva s komiksovým kominíkem ============ */

.vyzva { position: relative; overflow: hidden; }
.vyzva-mrizka { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; }
.vyzva-kruhy {
	position: absolute;
	top: 50%;
	left: 72%;
	width: 1100px;
	height: 1100px;
	transform: translate(-50%, -50%);
	fill: none;
	stroke: var(--plocha-text);
	stroke-opacity: 0.08;
	stroke-width: 1.5;
	pointer-events: none;
}
.kominik { margin: 0; justify-self: center; width: 100%; max-width: 480px; }
.kominik svg { display: block; width: 100%; height: auto; overflow: visible; }

.km-tasky { fill: none; stroke: var(--plocha-text); stroke-opacity: 0.14; stroke-width: 2; }
.km-hreben { stroke: var(--plocha-text); stroke-opacity: 0.35; stroke-width: 3; }
.km-spary { fill: none; stroke: var(--saze); stroke-opacity: 0.55; stroke-width: 2; }
.km-hlava { fill: var(--ocel-3); }
.km-hlava-lesk { fill: var(--ocel-2); }
.km-kour circle { fill: var(--ocel-2); }
.km-oblak { opacity: 0.4; transform-box: fill-box; transform-origin: center; }
.km-zebrik { fill: none; stroke: var(--ocel-2); stroke-width: 5; stroke-linecap: round; }
.km-zebrik--pricka { stroke-width: 4; stroke: var(--ocel-3); }
.km-bota { fill: var(--saze); }
.km-rukav { fill: none; stroke: var(--saze); stroke-width: 18; stroke-linecap: round; }
.km-dlan, .km-krk { fill: var(--plocha-text); }
.km-sev { stroke: var(--ocel-4); stroke-width: 2; }
.km-limec { fill: var(--ocel-4); }
.km-pasek { fill: var(--ocel-4); }
.km-prezka { fill: none; stroke: var(--mosaz-2); stroke-width: 2.5; }
.km-lano { fill: none; stroke: var(--mosaz-3); stroke-width: 3.5; }
.km-lano-visi { fill: none; stroke: var(--mosaz-3); stroke-width: 3; }
.km-zavazi { fill: var(--ocel-3); }
.km-stetiny { fill: none; stroke: var(--ocel-2); stroke-width: 2.5; stroke-linecap: round; }
.km-jezek-stred { fill: var(--mosaz-2); }
.km-oko { fill: var(--saze); }
.km-oci { transform-box: fill-box; transform-origin: center; }
.km-usmev { fill: none; stroke: var(--saze); stroke-width: 3; stroke-linecap: round; }
.km-stuha { fill: var(--mosaz-2); }
.km-krempa { fill: var(--saze); }
.km-krempa-lesk { fill: none; stroke: var(--ocel-3); stroke-width: 1.5; }
.km-manzeta { fill: var(--ocel-4); }
.km-bublina-tvar { fill: var(--plocha-text); }
.km-bublina-text { fill: var(--plocha); font-family: var(--pismo-nadpis); font-weight: var(--vaha-nadpis); font-size: 25px; }
.km-bublina-text--kurziva { font-style: italic; fill: var(--mosaz-3); }

/* Pohyb: kominík mává, ježek na laně se rozhoupe, mrkne, z komína jde kouř.
   Všechno doběhne a zastaví se (nejdéle ~6 s); najetí myší to zopakuje. */
.km-mavani { transform-box: view-box; transform-origin: 200px 166px; }
.km-houpani { transform-box: view-box; transform-origin: 121px 250px; }
.km-cylindr { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 400ms var(--krivka); }
.km-bublina { transform-box: fill-box; transform-origin: 60% 100%; }
html.js .kominik.viditelny .km-mavani { animation: mavani 520ms ease-in-out 500ms 6 alternate both; }
html.js .kominik.viditelny .km-houpani { animation: houpani 900ms ease-in-out 700ms 4 alternate both; }
html.js .kominik.viditelny .km-oci { animation: mrk 2600ms 1200ms 2; }
html.js .kominik.viditelny .km-bublina { animation: bublina 600ms var(--krivka) 200ms both; }
html.js .kominik.viditelny .km-oblak { animation: oblak 2400ms ease-out calc(var(--i) * 500ms + 600ms) 2 both; }
.kominik:hover .km-mavani { animation: mavani 420ms ease-in-out 4 alternate; }
.kominik:hover .km-houpani { animation: houpani 700ms ease-in-out 3 alternate; }
.kominik:hover .km-cylindr { transform: translateY(-12px) rotate(-10deg); }
@keyframes mavani { from { transform: rotate(10deg); } to { transform: rotate(-24deg); } }
@keyframes houpani { from { transform: rotate(8deg); } to { transform: rotate(-8deg); } }
@keyframes mrk { 0%, 44%, 50%, 100% { transform: none; } 47% { transform: scaleY(0.1); } }
@keyframes bublina { from { opacity: 0; transform: scale(0.5); } }
@keyframes oblak {
	0% { opacity: 0; transform: translate(-8px, 30px) scale(0.5); }
	30% { opacity: 0.5; }
	100% { opacity: 0; transform: translate(10px, -30px) scale(1.4); }
}

@media (min-width: 1280px) {
	.vyzva-mrizka { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* ============ OTÁZKY ============ */

.otazky { display: grid; gap: 48px; }
.otazky-seznam { border-bottom: 1px solid color-mix(in srgb, var(--text) 22%, transparent); }
.otazka { border-top: 1px solid color-mix(in srgb, var(--text) 22%, transparent); }
.otazka summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 48px;
	padding-block: 24px;
	cursor: pointer;
	list-style: none;
	font-family: var(--pismo-nadpis);
	font-weight: var(--vaha-veta);
	font-size: var(--fs-veta);
	line-height: var(--lh-veta);
}
.otazka summary::-webkit-details-marker { display: none; }
.otazka summary i {
	position: relative;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--akcent);
	transition: transform var(--prechod-kratky) var(--krivka), background-color var(--prechod-kratky) var(--krivka);
}
.otazka summary i::before, .otazka summary i::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 2px;
	margin: -1px 0 0 -7px;
	background-color: var(--akcent);
	transition: background-color var(--prechod-kratky) var(--krivka);
}
.otazka summary i::after { transform: rotate(90deg); }
.otazka summary:hover i { background-color: var(--akcent); }
.otazka summary:hover i::before, .otazka summary:hover i::after { background-color: var(--akcent-text); }
.otazka[open] summary i { transform: rotate(45deg); }
.otazka-odpoved { padding-bottom: 24px; }
.otazka[open] .otazka-odpoved { animation: nastup var(--prechod-dlouhy) var(--krivka); }

@media (min-width: 1280px) {
	.otazky { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
	.otazky-uvod { position: sticky; top: calc(var(--hlavicka) + 32px); }
}

/* ============ KONTAKT — vizitka, poptávka, mapa ============ */

.kontakt { display: grid; gap: 48px; }
.kontakt-mrizka { display: grid; gap: var(--gap); align-items: stretch; }
.kontakt-mrizka > * { min-width: 0; }

/* Vizitka a poptávka jsou dvě stejné karty: stejné zaoblení, odsazení
   i skladba (popisek → nadpis → obsah). Vizitka stojí na ploše,
   poptávka na světlé kartě. */
.karta-kontakt {
	display: grid;
	align-content: start;
	gap: 16px;
	padding: 32px 24px;
	border-radius: 20px;
}
.karta-kontakt > * { margin: 0; }
.poptavka { background-color: var(--karta); border: 1px solid var(--karta-obrys); }

.vizitka-hlava { display: flex; align-items: center; gap: 12px; }
.vizitka-znak { --maska: url(../obrazky/logo/znak.webp); width: 64px; height: 64px; color: var(--text); }
.vizitka-nazev { --maska: url(../obrazky/logo/nazev.webp); width: 260px; height: 22px; color: var(--text); }
/* na mobilu ve dvou řádcích jako v hlavičce */
@media (max-width: 767px) {
	.vizitka-nazev { --maska: url(../obrazky/logo/nazev-2r.webp); width: 112px; height: 46px; }
}
.vizitka-jmeno, .poptavka-nadpis { font-family: var(--pismo-nadpis); font-weight: var(--vaha-nadpis); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.vizitka-obor, .poptavka-uvod { color: var(--text-tlumeny); margin-top: -8px !important; }
/* Vizitka: záhlaví, pod ním tři stejné dlaždice přes zbytek výšky karty
   (telefon, e-mail, Facebook — obsah na střed), dole tlačítko. */
.vizitka { grid-template-rows: auto auto auto 1fr auto; align-content: stretch; }

.vizitka-dlazdice {
	list-style: none;
	margin: 8px 0 0 !important;
	padding: 0;
	max-width: none;
	display: grid;
	grid-auto-rows: 1fr;
	gap: 12px;
}
.vizitka-dlazdice a {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 4px;
	height: 100%;
	min-height: 120px;
	padding: 20px 16px;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
	background-color: color-mix(in srgb, var(--text) 5%, transparent);
	color: var(--text);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--prechod-kratky) var(--krivka), border-color var(--prechod-kratky) var(--krivka), transform var(--prechod-kratky) var(--krivka);
}
.vizitka-dlazdice a:hover { background-color: color-mix(in srgb, var(--text) 10%, transparent); border-color: var(--akcent); transform: scale(var(--zvetseni)); }
/* Ikonka větší a s odstupem nad popiskem — sedí v horní části dlaždice. */
.vizitka-dlazdice .ikona { width: 36px; height: 36px; margin-bottom: 8px; stroke-width: 1.75; color: var(--akcent); }
.vizitka-stitek { font-size: var(--fs-popisek); line-height: var(--lh-popisek); letter-spacing: var(--ls-popisek); text-transform: uppercase; font-weight: 700; color: var(--akcent); }
.vizitka-hodnota { font-weight: 700; font-size: var(--fs-veta); line-height: var(--lh-veta); text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.vizitka-hodnota--velka { white-space: nowrap; font-family: var(--pismo-nadpis); font-weight: var(--vaha-nadpis); font-size: var(--fs-obsah); line-height: var(--lh-obsah); text-decoration: none; }
.vizitka-volat { justify-self: stretch; margin-top: 4px; }

/* štítky pro výběr služeb v poptávce */
.prepinac { margin: 0; padding: 0; border: 0; min-width: 0; }
.prepinac-legenda { padding: 0; margin-bottom: 8px; font-weight: 700; }
.prepinac-volby { display: flex; flex-wrap: wrap; gap: 8px; }
.prepinac-volby label { position: relative; display: inline-flex; }
.prepinac-volby input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.prepinac-volby span {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 20px;
	border: 2px solid color-mix(in srgb, var(--text) 60%, var(--karta));
	border-radius: var(--tl-radius);
	font-weight: 700;
	line-height: var(--tl-lh);
	pointer-events: none;
	transition: background-color var(--prechod-kratky) var(--krivka), color var(--prechod-kratky) var(--krivka), border-color var(--prechod-kratky) var(--krivka);
}
.prepinac-volby input:hover + span { border-color: var(--akcent); }
.prepinac-volby input:checked + span { background-color: var(--akcent); border-color: var(--akcent); color: var(--akcent-text); }
.prepinac-volby input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.poptavka .prepinac-volby span { border-color: color-mix(in srgb, var(--text) 60%, var(--karta)); gap: 8px; }
.poptavka .prepinac-volby input[type="checkbox"]:checked + span::before {
	content: "";
	width: 10px;
	height: 6px;
	margin-top: -4px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}
.poptavka-stav:empty { display: none; }
.poptavka-stav { padding: 12px 16px; border-radius: 12px; background-color: var(--podklad-odliseny); font-weight: 700; }
.poptavka.odeslano .poptavka-stav { background-color: var(--akcent); color: var(--akcent-text); }
.pole-rada { display: grid; gap: 16px; }
.pole { display: grid; gap: 8px; min-width: 0; }
.pole label { font-weight: 700; }
.pole input, .pole textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 2px solid color-mix(in srgb, var(--text) 60%, var(--karta));
	border-radius: 12px;
	background-color: var(--karta-vyrazna);
	color: var(--text);
	font: inherit;
	line-height: 20px;
	transition: border-color var(--prechod-kratky) var(--krivka);
}
.pole textarea { line-height: var(--lh-text); resize: vertical; }
.pole input:hover, .pole textarea:hover { border-color: var(--akcent); }
.pole ::placeholder { color: var(--text-tlumeny); }
.poptavka-pata { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.poptavka-pozn { font-size: var(--fs-text); max-width: 320px; }

.mapa {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--karta-obrys);
	background-color: var(--karta);
}
.mapa svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.mapa figcaption { padding: 12px 20px; color: var(--text-tlumeny); font-size: var(--fs-text); }
.mapa-tonovani { fill: var(--podklad-odliseny); mix-blend-mode: multiply; opacity: 0.1; }
.mapa-kruh { fill: none; stroke: var(--plocha); stroke-opacity: 0.55; stroke-width: 3; stroke-dasharray: 10 12; }
.mapa-km { fill: var(--plocha); stroke: var(--podklad); stroke-width: 6; stroke-linejoin: round; paint-order: stroke; font-family: var(--pismo-text); font-size: 20px; font-weight: 700; }
.mapa-obce circle { fill: var(--mosaz-2); stroke: var(--plocha); stroke-width: 3; }
.mapa-obce text { fill: var(--text); stroke: var(--podklad); stroke-width: 7; stroke-linejoin: round; paint-order: stroke; font-family: var(--pismo-text); font-size: 24px; font-weight: 700; }
.mapa-spendlik { fill: var(--plocha); stroke: var(--mosaz-1); stroke-width: 3; }
.mapa-spendlik-oko { fill: var(--mosaz-2); }
.mapa-stred text { fill: var(--plocha); stroke: var(--podklad); stroke-width: 8; stroke-linejoin: round; paint-order: stroke; font-family: var(--pismo-nadpis); font-weight: var(--vaha-nadpis); font-size: 32px; }

@media (min-width: 768px) {
	.karta-kontakt { padding: 40px; }
	.pole-rada { grid-template-columns: 1fr 1fr; }
	.mapa svg { aspect-ratio: 4 / 3; }
}
@media (min-width: 1280px) {
	.kontakt-mrizka { grid-template-columns: 5fr 7fr; }
	.mapa svg { aspect-ratio: 21 / 9; }
}

/* ============ PATIČKA ============ */

.paticka { padding-block: 48px; }
.paticka-mrizka { display: grid; gap: 24px; }
.paticka-jmeno { font-family: var(--pismo-nadpis); font-weight: var(--vaha-nadpis); font-size: var(--fs-obsah); line-height: var(--lh-obsah); }
.paticka-znacka > * + * { margin-top: 8px; }
.paticka-kontakt { display: grid; justify-items: start; }
.paticka-odkaz { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
.paticka-pravni { font-size: var(--fs-text); }
@media (min-width: 1280px) {
	.paticka-mrizka { grid-template-columns: 5fr 3fr 4fr; align-items: start; gap: 64px; }
}

/* ============ KLIDOVÁ VĚTEV (pravidlo 14) ============
   Prvky se vykreslí v koncovém stavu: tunel rozsvícený podle režimu bez
   letu, řez bez padání cihel, kominík nemává, knoflík se netočí. */

/* ======================= COOKIES — lišta se souhlasem =======================
   Hero je tmavý, takže lišta stojí na světlém béžovém podkladu webu
   (protiklad hera, sablona/cookies-lista.md) se znakem z loga. */
.cookies-lista {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 90;
	max-width: 920px;
	margin-inline: auto;
	padding: 20px;
	border-radius: var(--karta-radius);
	background-color: var(--podklad-odliseny);
	color: var(--text);
	box-shadow: 0 24px 64px color-mix(in srgb, var(--plocha) 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--zvyrazneni) 45%, transparent);
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 300ms var(--krivka), transform 300ms var(--krivka);
}
.cookies-lista[hidden] { display: none; }
.cookies-lista.vidi { opacity: 1; transform: none; }
.cookies-vnitrek { display: grid; gap: 16px; align-items: center; }
.cookies-hlava { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.cookies-znak { flex: none; width: 48px; height: 48px; background: currentColor; -webkit-mask: url(../obrazky/logo/znak.webp) center / contain no-repeat; mask: url(../obrazky/logo/znak.webp) center / contain no-repeat; }
.cookies-nadpis { margin: 0; max-width: none; font-family: var(--pismo-nadpis); font-weight: var(--vaha-nadpis); font-size: var(--fs-veta); line-height: 1.33; }
.cookies-text { margin: 0; max-width: none; color: var(--text-tlumeny); font-size: 15px; line-height: 1.6; }
.cookies-tlacitka { display: flex; flex-wrap: wrap; gap: 12px; }
.cookies-tlacitka .tlacitko { flex: 1 1 140px; }
.paticka-cookies { margin: 0; }
.cookies-odkaz { display: inline-flex; align-items: center; min-height: 48px; margin-left: -4px; padding: 0 4px; border: 0; background: none; color: var(--akcent); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; transition: color var(--prechod-kratky) var(--krivka); }
.cookies-odkaz:hover { color: var(--akcent-tmavy); }
@media (min-width: 600px) {
	.cookies-lista { left: 24px; right: 24px; bottom: 24px; padding: 24px 28px; }
	.cookies-vnitrek { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; }
	.cookies-tlacitka { flex-wrap: nowrap; }
	.cookies-tlacitka .tlacitko { flex: none; min-width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
	html.js .hero-nastup { animation: none; }
	.tunel *, .rez *, .kroky *, .krok-cislo, .kominik *, .sluzba-obr *, .knoflik, .knoflik *, .ctyrlistky *, .stesti-sipka, 	.rezim, .shluk, .pilulka, .pilulka span, .hlavicka, .menu-car, .menu-car::before, .menu-car::after, .prepinac-volby span, .otazka summary i, .palivo-karta, .segment span {
		transition: none !important;
		transition-delay: 0s !important;
		animation: none !important;
	}
	.tunel-jezek, .tunel-freza, .padajici-saze { display: none; }
	.tunel[data-rezim="cisteni"] .vycisteno { transform: scale(4.2); }
	.tunel[data-rezim="cisteni"] .vrstva-cista { opacity: 1; }
	.tunel[data-rezim="frezovani"] .freza-pred { opacity: 0; }
	.tunel[data-rezim="frezovani"] .freza-po { opacity: 1; }
	.nalez { opacity: 1; }
	.tunel-scena, .tunel-komin { transform: none !important; }
	.knoflik:hover, .knoflik:active, .rezim:active { transform: none; }
	.knoflik.toci::after, .ctyrlistky.vybuch svg, .vysledek-cislo.zmena, .otazka[open] .otazka-odpoved, .knoflik-hlaska.nova, .krok.aktivni .krok-cislo::after { animation: none; }
	html.js .shluk li, html.js .navigace { transition: none; }
	.il-cihla { transform: none; }
	.cookies-lista { transition: none; }
}