/* =======================================================================
   KOMPOZICE — Instalatérství Loupanec
   Pořadí pozadí: kámen (hero) → cihlová zeď kotelny (služby) →
   béžová s peletami (postup) → kámen (kontakt) → tma (patička).
   ======================================================================= */

:root { --hlavicka: 80px; }
body { font-size: 18px; }
h1, h2, h3 { text-wrap: balance; }

/* ======================= HLAVIČKA ======================= */
.hlavicka { position: sticky; top: 0; z-index: 50; background: var(--podklad-odliseny); box-shadow: 0 1px 0 rgba(33, 25, 16, .08); transition: box-shadow var(--prechod-kratky) var(--krivka); }
/* béžová s rozsypanými peletami (jako sekce Jak to probíhá), jemně, ať je menu čitelné */
.hlavicka::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url(../obrazky/rost.svg) 0 0 / 200px auto; opacity: .16; }
.hlavicka-vnitrek { position: relative; }
.hlavicka.posunuto { box-shadow: 0 1px 0 rgba(33, 25, 16, .08), 0 12px 28px -18px rgba(33, 25, 16, .35); }
.hlavicka-vnitrek { display: flex; align-items: center; gap: 32px; height: 80px; }
.logo { display: flex; align-items: baseline; gap: 10px; color: var(--text); text-decoration: none; }
.logo:hover { color: var(--text); }
.logo b { font-family: var(--pismo-nadpis); font-size: 30px; line-height: 1; }
.logo small { font-size: 14px; font-weight: 700; color: var(--text-tlumeny); white-space: nowrap; }
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; font-weight: 800; font-size: 16px; white-space: nowrap; color: var(--text); text-decoration: none; }
/* ukazatel: čárka z pelet za sebou pod celým slovem; nasype se zleva, zapálí se a vychladne */
.menu a::before, .menu a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 7px; border-radius: 4px; pointer-events: none; }
.menu a::after { background: #B3261A; transform-origin: left; transform: scaleX(0); transition: transform 450ms var(--krivka); }
.menu a::before { z-index: 1; background: linear-gradient(90deg, #ffd27a, #ff9a2e 30%, #e2560f 55%, #ff9a2e 80%, #ffd27a); box-shadow: 0 0 10px 2px rgba(255, 140, 40, .65); mix-blend-mode: screen; opacity: 0; }
.menu a.aktivni::after, .menu a:hover::after { transform: scaleX(1); }
.menu a.aktivni::before, .menu a:hover::before { animation: menuZapal 1.5s .15s ease-out both; }
@keyframes menuZapal { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 18% { opacity: 1; } 35% { clip-path: inset(0 0 0 0); opacity: .9; } 55% { opacity: 1; } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
.hlavicka-tel { gap: 10px; padding-inline: 20px; font-size: 17px; }
/* ikona se nesmí smrsknout na nulu (zůstala by po ní mezera a číslo by nebylo na středu) */
.hlavicka-tel svg { flex: none; }
.hlavicka-tel span { white-space: nowrap; }
.menu-prepinac { display: none; }

/* ======================= HERO ======================= */
.hero { position: relative; padding-top: 40px; overflow: hidden; background: var(--podklad); scroll-margin-top: var(--hlavicka); }
/* světlé pozadí: jemný technický rastr kolem scény */
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6;
	background: linear-gradient(rgba(33, 25, 16, .045) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(33, 25, 16, .045) 1px, transparent 1px) 0 0 / 48px 48px;
	-webkit-mask: radial-gradient(ellipse 50% 70% at 28% 52%, #000, transparent 75%); mask: radial-gradient(ellipse 50% 70% at 28% 52%, #000, transparent 75%); }
.hero-mrizka { position: relative; display: grid; grid-template-columns: 1.12fr 1fr; gap: 40px; align-items: center; }
.hero-text { order: 2; padding-block: 24px; }
.hero h1 { font-size: 74px; line-height: 1.06; letter-spacing: -.012em; }
.hero-veta { margin-top: 28px; font-size: 21px; line-height: 1.55; color: #3d352c; max-width: 540px; }
.hero-veta b { display: block; margin-bottom: 4px; font-family: var(--pismo-nadpis); font-weight: 700; font-size: 26px; line-height: 1.2; color: var(--text); }
.hero-veta.hero-dalsi { margin-top: 14px; }
.hero-dalsi b { margin-bottom: 0; }
.hero-kdo { display: flex; align-items: center; gap: 12px; margin-top: 18px; max-width: 540px; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--text-tlumeny); }
/* stejný plamínek z pelet jako logo v menu */
.hero-kdo::before { content: ""; flex: none; width: 24px; height: 28px; background: url(../obrazky/logo-znak.svg) center / contain no-repeat; filter: drop-shadow(0 2px 4px rgba(226, 86, 15, .3)); animation: plaminek 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes plaminek { 0%, 100% { transform: scale(1, 1) skewX(0); } 35% { transform: scale(.96, 1.06) skewX(-3deg); } 70% { transform: scale(1.03, .96) skewX(2deg); } }
@media (prefers-reduced-motion: reduce) { .hero-kdo::before { animation: none; } }
/* dvě tlačítka stejné výšky a stavby: ikona, malý popisek, velký text */
.hero-akce { display: flex; align-items: stretch; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.volat, .dal { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 26px 12px 20px; border-radius: 18px; text-decoration: none; transition: background-color var(--prechod-kratky) var(--krivka), border-color var(--prechod-kratky) var(--krivka), transform var(--prechod-kratky) var(--krivka); }
.volat > span, .dal > span { display: flex; flex-direction: column; }
.volat small, .dal small { font-size: 14px; font-weight: 700; line-height: 1.2; }
.volat { background: var(--akcent); color: #fff; box-shadow: 0 18px 30px -18px rgba(134, 19, 12, .7); }
.volat:hover { background: var(--akcent-tmavy); color: #fff; }
.volat svg { flex: none; width: 28px; height: 28px; }
.volat small { opacity: .88; }
.volat b { font-family: var(--pismo-cisla); font-weight: 700; font-size: 25px; letter-spacing: -.02em; line-height: 1.25; }
.dal { padding: 12px 20px 12px 24px; border: 2px solid rgba(33, 25, 16, .16); background: #FFFCF8; color: var(--text); }
.dal:hover { color: var(--text); border-color: var(--akcent); }
.dal small { color: var(--text-tlumeny); }
.dal b { font-size: 20px; font-weight: 800; line-height: 1.3; }
.dal svg { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: rgba(33, 25, 16, .07); transition: transform 300ms var(--krivka), background-color 300ms; }
.dal:hover svg { transform: translateY(3px); background: var(--jantar); }
.volat:active, .dal:active { transform: scale(var(--stisk)); }

/* přechod: skleněná trubka se šnekem jako v heru (navrhy/snek-pas.html, dlaždice = 4 rozteče). Zadní stěna a sklo
   stojí, šroub posouvá a pelety kreslí js/skript.js: v každém závitu se přesýpají samy, nejedou jako jeden pás. */
.snek-pas { --h: 56px; position: relative; height: calc(var(--h) + 16px); margin-top: 24px; background: linear-gradient(var(--podklad) 50%, var(--plocha) 50%); }
.snek-pas .trubka { position: absolute; left: 0; right: 0; top: 8px; height: var(--h); overflow: hidden; background: url(../obrazky/snek-pas-zadni.webp) 0 0 / auto var(--h) repeat-x; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .4)); }
.snek-pas .trubka::after { content: ""; position: absolute; inset: 0; background: url(../obrazky/snek-pas-sklo.webp) 0 0 / auto var(--h) repeat-x; }
.snek-pas .sp-pelety { position: absolute; inset: 0; width: 100%; height: 100%; }
.snek-pas .zavity { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + var(--h) * 3.84); background: url(../obrazky/snek-pas-sroub.webp) 0 0 / auto var(--h) repeat-x; will-change: transform; }
@media (max-width: 599px) { .snek-pas { --h: 40px; margin-top: 16px; } }

/* ======================= SLUŽBY — cihlová zeď kotelny ======================= */
.sluzby { position: relative; padding: 96px 0 96px; overflow: clip; scroll-margin-top: var(--hlavicka); background: var(--plocha); }
.sluzby::before, .sluzby::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.sluzby::before { opacity: .9; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' opacity='.7'%3E%3Cpath d='M0 20 H58 M64 20 H140 M146 20 H220 M0 50 H30 M36 50 H110 M116 50 H200 M206 50 H220 M0 80 H80 M86 80 H160 M166 80 H220 M0 110 H44 M50 110 H126 M132 110 H220'/%3E%3Cpath d='M61 20 V50 M143 20 V50 M33 50 V80 M113 50 V80 M203 50 V80 M83 80 V110 M163 80 V110 M47 110 V120 M129 110 V120 M61 0 V20 M143 0 V20'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='.05'%3E%3Cpath d='M0 23 H58 M64 23 H140 M146 23 H220 M0 53 H30 M36 53 H110 M116 53 H200 M0 83 H80 M86 83 H160 M166 83 H220 M0 113 H44 M50 113 H126 M132 113 H220'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 330px 180px;
	-webkit-mask: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .6) 100%); mask: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .6) 100%); }
.sluzby::after { background: radial-gradient(ellipse 30% 22% at 12% 92%, rgba(255, 120, 40, .18), transparent 70%), radial-gradient(ellipse 18% 12% at 90% 30%, rgba(255, 120, 40, .10), transparent 70%); }
.sluzby .blok { position: relative; z-index: 1; }
.hlava-sekce { max-width: 760px; margin: 0 auto; text-align: center; }
.hlava-sekce h2 { font-size: 64px; line-height: 1.05; }
.hlava-sekce p { margin: 28px auto 0; max-width: 600px; color: var(--plocha-tlumeny); font-size: 21px; line-height: 1.55; }

/* ======================= JAK TO PROBÍHÁ — béžová, celá z pelet =======================
   Čtyři kroky vedle sebe na kartách, číslo z pelet se zapálí; pod nimi lišta s telefonem. */
.postup { position: relative; overflow: clip; background: var(--podklad-odliseny); }
.postup::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url(../obrazky/rost.svg) 0 0 / 220px auto; opacity: .32; }
.postup .blok { position: relative; }
.kroky-postup { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: none; margin: 48px 0 0; padding: 0; counter-reset: k; }
.krok { position: relative; display: flex; flex-direction: column; padding: 24px 24px 28px; border-radius: 22px; background: #FFFCF8; box-shadow: 0 1px 0 rgba(33, 25, 16, .06), 0 28px 50px -34px rgba(33, 25, 16, .55); }
.krok-vrch { display: flex; align-items: flex-start; justify-content: space-between; }
.krok-cislo { display: block; width: fit-content; font-family: var(--pismo-nadpis); font-weight: 700; font-size: 92px; line-height: .85; }
.krok-ikona { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #F3EEE7; color: var(--zvyrazneni); }
.krok-ikona svg { width: 24px; height: 24px; }
.krok h3 { margin-top: 22px; font-size: 25px; line-height: 1.15; }
.krok p { margin-top: 10px; font-size: 17px; line-height: 1.55; color: #4b4237; }
/* animace: kroky se postupně rozsvěcují dokola (1 → 4), u rozsvíceného se pohne ikona */
.krok { transition: box-shadow .5s var(--krivka), transform .5s var(--krivka); }
.krok.ted { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--jantar), 0 30px 50px -30px rgba(33, 25, 16, .6); }
.krok.ted .krok-ikona { background: var(--jantar); color: #211910; }
.krok:nth-child(1).ted .krok-ikona svg { animation: zvoni .5s ease-in-out 3; }
.krok:nth-child(2).ted .krok-ikona svg { animation: jede 1.2s ease-in-out; }
.krok:nth-child(3).ted .krok-ikona svg { animation: pocita .4s ease-in-out 3; }
.krok:nth-child(4).ted .fajfka { stroke-dasharray: 24; animation: fajfka .8s ease-out; }
@keyframes zvoni { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes jede { 0% { transform: translateX(-10px); opacity: 0; } 40% { opacity: 1; } 100% { transform: none; } }
@keyframes pocita { 50% { transform: scale(1.15); } }
@keyframes fajfka { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.krok:last-child .krok-ikona { background: #F3EEE7; color: var(--zvyrazneni); }
@media (prefers-reduced-motion: reduce) { .krok, .krok .krok-ikona svg, .krok .fajfka { transition: none; animation: none !important; } .krok.ted { transform: none; } }
.krok:not(:last-child)::after { content: ""; position: absolute; z-index: 1; right: -15px; top: 52px; width: 12px; height: 12px; border-top: 3px solid var(--zvyrazneni); border-right: 3px solid var(--zvyrazneni); transform: rotate(45deg); opacity: .6; }
.postup-start { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-top: 22px; padding: 20px 24px; border-radius: 22px; background: #211910; color: #fff; box-shadow: 0 28px 50px -30px rgba(33, 25, 16, .7); }
.postup-start p { font-size: 18px; line-height: 1.5; color: var(--plocha-tlumeny); }
.postup-start b { color: #fff; }
.postup-tlacitka { display: flex; flex-wrap: wrap; gap: 10px; }
.postup-tl { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 22px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .22); color: #fff; font: 800 17px var(--pismo-text); text-decoration: none; transition: background-color var(--prechod-kratky) var(--krivka), border-color var(--prechod-kratky) var(--krivka); }
.postup-tl svg { width: 22px; height: 22px; }
.postup-tl:hover { color: #fff; border-color: var(--jantar); }
.postup-tl--tel { border-color: var(--jantar); background: var(--jantar); color: #211910; font-family: var(--pismo-cisla); font-size: 19px; }
.postup-tl--tel:hover { color: #211910; filter: brightness(1.07); }
@media (max-width: 1099px) { .kroky-postup { grid-template-columns: repeat(2, 1fr); } .krok:nth-child(2)::after { display: none; } }
@media (max-width: 599px) {
	.kroky-postup { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
	.krok { padding: 18px 18px 20px; }
	.krok::after { display: none; }
	.krok-cislo { font-size: 68px; }
	.krok h3 { margin-top: 14px; font-size: 22px; }
	.postup-start { padding: 18px; }
	.postup-tl { flex: 1 1 100%; }
}

/* ======================= KONTAKT ======================= */
.kontakt { background: var(--podklad); }
.kontakt-mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.kontakt-text h2 { font-size: 58px; line-height: 1.05; }
.kontakt-text p { margin-top: 24px; font-size: 20px; line-height: 1.6; color: #3d352c; }
/* vizitka: hlavička s logem na tmavé cihle, pod ní tabulka kontaktů */
.vizitka { --text: #211910; overflow: hidden; border-radius: 26px; background: #FFFCF8; box-shadow: 0 2px 0 rgba(33, 25, 16, .05), 0 40px 80px -44px rgba(33, 25, 16, .6); }
.vizitka-hlava { position: relative; display: flex; align-items: center; gap: 18px; padding: 28px 28px 34px; background: var(--plocha); color: #fff; }
.vizitka-hlava::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: url(../obrazky/litina.svg) 0 0 / 40px auto; }
.vizitka-hlava .logo-znak { width: 72px; height: 72px; flex: none; }
.vizitka-hlava div { display: flex; flex-direction: column; }
.vizitka-hlava b { font-family: var(--pismo-nadpis); font-size: 42px; line-height: 1; }
.vizitka-hlava span { margin-top: 6px; font-weight: 800; font-size: 17px; }
.vizitka-hlava small { margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--plocha-tlumeny); }
.vizitka .logo-zar { animation: none; }
.vizitka.videt .logo-zar { animation: logoZapal 1.8s .2s ease-out both; }
.vizitka:hover .logo-zar { animation: logoHori 1.1s ease-in-out infinite alternate; }
.vizitka-tabulka { width: 100%; border-collapse: collapse; }
/* řádek: ikona | popisek nad hodnotou | tlačítko (všechna tlačítka stejně široká) */
.vizitka-tabulka th, .vizitka-tabulka td { padding: 14px 24px; border-bottom: 1px solid rgba(33, 25, 16, .1); text-align: left; vertical-align: middle; }
.vizitka-tabulka th { width: 1%; padding-right: 0; color: var(--zvyrazneni); }
.vizitka-tabulka th svg { display: block; width: 24px; height: 24px; }
.vizitka-tabulka td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-left: 16px; }
.viz-obsah { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.viz-obsah small { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tlumeny); }
.viz-hodnota { font-size: 19px; font-weight: 800; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vizitka-tabulka .viz-hlavni { font-family: var(--pismo-nadpis); font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: .01em; color: var(--akcent); }
.vizitka-tabulka tr:nth-child(even) { background: rgba(230, 218, 199, .25); }
.vizitka-tabulka td .viz-akce { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 140px; min-height: 44px; border-radius: 12px; border: 2px solid rgba(0, 85, 92, .25); color: var(--akcent); font-size: 15px; font-weight: 800; text-decoration: none; background: none; transition: background-color .25s, color .25s, border-color .25s; }
.vizitka-tabulka td .viz-akce svg { width: 16px; height: 16px; }
.vizitka-tabulka td .viz-akce:hover { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.vizitka-akce { display: flex; gap: 10px; padding: 20px 28px 26px; }
.viz-tl { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; border-radius: 16px; border: 2px solid rgba(33, 25, 16, .16); color: var(--text); font: 800 18px var(--pismo-text); text-decoration: none; transition: background-color var(--prechod-kratky) var(--krivka), border-color var(--prechod-kratky) var(--krivka); }
.viz-tl svg { width: 22px; height: 22px; }
.viz-tl:hover { color: var(--text); border-color: var(--akcent); }
.viz-tl--tel { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.viz-tl--tel:hover { background: var(--akcent-tmavy); color: #fff; }
@media (max-width: 599px) {
	.vizitka { border-radius: 20px; }
	.vizitka-hlava { padding: 20px 18px 26px; gap: 14px; }
	.vizitka-hlava .logo-znak { width: 56px; height: 56px; }
	.vizitka-hlava b { font-size: 32px; }
	.vizitka-hlava span { font-size: 15px; }
	.vizitka-tabulka th, .vizitka-tabulka td { padding: 12px 16px; }
	.vizitka-tabulka th { padding-right: 0; }
	.vizitka-tabulka td { padding-left: 12px; gap: 10px; }
	/* řádky jako flex: dlouhý e-mail tabulku neroztáhne, tlačítka zůstanou uvnitř vizitky */
	.vizitka-tabulka, .vizitka-tabulka tbody { display: block; }
	.vizitka-tabulka tr { display: flex; }
	.vizitka-tabulka th { flex: none; display: flex; align-items: center; width: 40px; }
	.vizitka-tabulka td { flex: 1 1 0; min-width: 0; }
	.viz-obsah { flex: 1 1 0; }
	.viz-hodnota { font-size: 16px; white-space: normal; overflow-wrap: anywhere; }
	.vizitka-tabulka .viz-hlavni { font-size: 26px; white-space: nowrap; }
	.vizitka-tabulka td .viz-akce { width: 98px; min-height: 40px; padding: 0 6px; font-size: 13px; }
	.vizitka-tabulka td .viz-akce svg { display: none; }
	.vizitka-akce { padding: 16px 18px 20px; }
}

/* ======================= PATIČKA ======================= */
.paticka { background: #2E2219; color: var(--plocha-tlumeny); padding: 56px 0 0; font-size: 16px; }
/* patička: značka s větou | kontakt | odkazy na sekce; právní odkazy pod značkou, zarovnané se spodkem sloupců */
.paticka-vnitrek { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "znacka kontakt mapa" "pravni kontakt mapa"; gap: 24px 40px; }
.pata-udaje { grid-area: znacka; display: flex; flex-direction: column; gap: 2px; }
.pata-veta { max-width: 32ch; margin: 0; line-height: 1.55; }
.pata-kontakt { grid-area: kontakt; } .pata-mapa { grid-area: mapa; }
.pata-nadpis { margin: 0 0 6px; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--jantar); }
.pata-sloupec ul { margin: 0; padding: 0; list-style: none; }
.pata-sloupec li { padding: 8px 0; line-height: 1.4; }
.pata-sloupec li:has(a) { padding: 0; }
.pata-sloupec a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 700; text-decoration: none; text-underline-offset: 4px; }
.pata-sloupec a:hover { color: #fff; text-decoration: underline; }
.pata-odkazy { grid-area: pravni; align-self: end; }
@media (max-width: 767px) {
	.paticka-vnitrek { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "znacka znacka" "kontakt mapa" "pravni pravni"; gap: 28px 20px; }
}
@media (max-width: 379px) { .pata-sloupec { font-size: 15px; } }
.pata-logo { font-family: var(--pismo-nadpis); font-size: 32px; line-height: 1.1; color: #fff; margin-bottom: 8px; }
.pata-odkazy { display: flex; flex-wrap: wrap; gap: 12px; }
.cookies-odkaz { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px; background: none; color: #fff; font: 700 15px var(--pismo-text); text-decoration: none; cursor: pointer; transition: border-color var(--prechod-kratky) var(--krivka); }
.cookies-odkaz:hover { color: #fff; border-color: rgba(255, 255, 255, .7); }
.autor { position: relative; max-width: var(--blok); margin: 36px auto 0; padding: 24px var(--okraj) 28px; text-align: center; font: 500 16px var(--pismo-text); color: var(--plocha-tlumeny); }
.autor::before { content: ""; position: absolute; left: var(--okraj); right: var(--okraj); top: 0; height: 1px; background: rgba(255, 255, 255, .14); }
.autor a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.autor a:hover { color: #fff; }

/* ======================= COOKIE LIŠTA ======================= */
.cookies-lista { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 920px; margin-inline: auto; padding: 24px; border-radius: var(--karta-radius); background-color: var(--plocha);
	background-image: url(../obrazky/litina.svg); background-size: 100% 6px, 60px auto; background-repeat: repeat-x; background-position: 0 0;
	box-shadow: 0 24px 48px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(24px); transition: opacity 300ms var(--krivka), transform 300ms var(--krivka); }
.cookies-lista.vidi { opacity: 1; transform: none; }
.cookies-vnitrek { display: flex; align-items: center; gap: 24px; padding-top: 8px; }
.cookies-logo { width: 56px; height: 56px; flex: none; }
.cookies-lista .logo-zar { animation: none; }
.cookies-lista.vidi .logo-zar { animation: logoZapal 1.6s .3s ease-out both; }
.cookies-nadpis b { font-family: var(--pismo-nadpis); font-size: 22px; font-weight: 700; }
.cookies-nadpis { font-weight: 800; font-size: 18px; }
.cookies-text { font-size: 15px; line-height: 1.5; color: var(--plocha-tlumeny); margin-top: 4px; }
.cookies-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cookies-tlacitka { display: flex; gap: 8px; flex: none; }
.cookies-lista .tlacitko--primarni { background: #fff; color: var(--plocha); border-color: #fff; }
.cookies-lista .tlacitko--sekundarni { color: #fff; border-color: #fff; }
.cookies-lista .tlacitko--sekundarni:hover { background: #fff; color: var(--plocha); }

/* ======================= OCHRANA ÚDAJŮ ======================= */
.pravni-text { max-width: 720px; }
.pravni-text h1 { font-size: 48px; }
.pravni-text h2 { font-size: 28px; margin-top: 40px; }
.pravni-text ul { padding-left: 20px; }
.pravni-text li + li { margin-top: 12px; }
.pravni-karta { padding: 24px; border-radius: var(--karta-radius); background: var(--karta); border: 1px solid rgba(33, 25, 16, .12); }
.pravni-text .cookies-odkaz { color: var(--text); border-color: rgba(33, 25, 16, .3); min-height: 40px; }

/* ======================= ZLOMY ======================= */
@media (max-width: 1279px) {
	.hlavicka-vnitrek { gap: 20px; }
	.menu a { padding: 0 12px; }
	.menu a::before, .menu a::after { left: 12px; right: 12px; }
	.logo small { display: none; }
	.hero h1 { font-size: 62px; }
	.hlava-sekce h2 { font-size: 56px; }
}
/* nízký notebook: hero se vejde na výšku */
@media (min-width: 900px) and (max-height: 760px) {
	.hero { padding-top: 16px; }
	.hero h1 { font-size: 58px; }
	.hero-veta { margin-top: 20px; font-size: 18px; }
	.hero-akce { margin-top: 24px; }
}
@media (max-width: 1099px) {
	.hlavicka-vnitrek { gap: 16px; }
	.menu a { padding: 0 8px; font-size: 15px; }
	.menu a::before, .menu a::after { left: 8px; right: 8px; }
	.hero h1 { font-size: 52px; }
	.hero-veta { font-size: 18px; }
	.kontakt-mrizka { gap: 40px; }
}
/* tablet nastojato a mobil: vše pod sebou */
@media (max-width: 899px) {
	.menu-prepinac { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 48px; height: 48px; padding: 0 12px; margin-left: 4px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
	.menu-prepinac span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform 300ms var(--krivka), opacity 300ms; }
	.hlavicka.otevreno .menu-prepinac span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.hlavicka.otevreno .menu-prepinac span:nth-child(2) { opacity: 0; }
	.hlavicka.otevreno .menu-prepinac span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.menu { position: fixed; left: 0; right: 0; top: 80px; bottom: 0; flex-direction: column; gap: 0; margin: 0; padding: 16px var(--okraj) 32px; background: var(--podklad-odliseny); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 300ms var(--krivka), transform 300ms var(--krivka), visibility 0s 300ms; }
	.hlavicka.otevreno .menu { opacity: 1; transform: none; visibility: visible; transition: opacity 300ms var(--krivka), transform 300ms var(--krivka); }
	.menu a { min-height: 64px; padding: 0; font-size: 24px; font-family: var(--pismo-nadpis); border-bottom: 1px solid rgba(33, 25, 16, .12); }
	.menu a::before, .menu a::after { left: 0; right: auto; width: 72px; bottom: 10px; }
	.hlavicka-tel { margin-left: auto; }
	.hero { padding-top: 24px; }
	.hero-mrizka { grid-template-columns: 1fr; gap: 8px; }
	.hero-text { order: 1; padding-block: 8px; }
	.hero h1 { font-size: 52px; }
	.hlava-sekce h2 { font-size: 48px; }
	.hlava-sekce p { font-size: 19px; }
	.kontakt-mrizka { grid-template-columns: 1fr; gap: 40px; }
	.kontakt-text h2 { font-size: 46px; }
	/* služby: trubka vlevo, stanice pod sebou */
}
@media (max-width: 599px) {
	body { font-size: 17px; }
	.hlavicka-vnitrek { height: 72px; }
	:root { --hlavicka: 72px; }
	.menu { top: 72px; }
	.logo b { font-size: 26px; }
	/* na telefonu se ikona s číslem nevejde: jen číslo, se stejným okrajem vlevo i vpravo */
	.hlavicka-vnitrek { gap: 10px; }
	.menu-prepinac { flex: none; }
	.hlavicka-tel { flex: none; gap: 0; padding-inline: 12px; font-size: 15px; }
	.hlavicka-tel svg { display: none; }
	.hero h1 { font-size: 40px; }
	.hero-veta { font-size: 18px; margin-top: 16px; }
	.hero-akce { margin-top: 24px; gap: 12px 20px; }
	.volat, .dal { min-height: 66px; padding: 10px 16px; flex: 1 1 220px; }
	.volat b { font-size: 22px; }
	.dal b { font-size: 18px; }
	.dal { justify-content: space-between; }
	.hero-veta b { font-size: 22px; }
	.hero-kdo { font-size: 15px; }
	.sluzby { padding: 72px 0 96px; }
	.hlava-sekce h2 { font-size: 38px; }
	.hlava-sekce p { font-size: 18px; margin-top: 20px; }
	.kontakt-text h2 { font-size: 38px; }
	.kontakt-text p { font-size: 18px; }
	.pravni-text h1 { font-size: 36px; }
	.cookies-vnitrek { flex-wrap: wrap; align-items: center; gap: 14px 16px; }
	.cookies-logo { width: 44px; height: 44px; }
	.cookies-obsah { flex: 1 1 200px; }
	.cookies-tlacitka { flex: 1 1 100%; }
	.cookies-tlacitka > * { flex: 1; }
}

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



/* u čísel kroků jen pelety a žár v písmu, bez záře pod nimi a jisker */
.krok-cislo .jiskry { display: none; }

/* nejužší telefony (do 379 px): v hlavičce jen ikona telefonu, v krocích čísla + aktuální krok */
@media (max-width: 379px) {
	.hlavicka-tel span { display: none; }
	.hlavicka-tel svg { display: block; }
	.hlavicka-tel { gap: 0; padding-inline: 0; width: 48px; }
}

html, body { overflow-x: clip; }


/* ======================= PŘIKLÁDAT, NEBO AUTOMAT — den v kotelně =======================
   Den proběhne sám (30 s): digitální hodiny, vlevo ruční kotel, ke kterému chodí panáček
   s kbelíkem (otevře dvířka, nasype, zavře), stav v bublině; vpravo automat z vrstev hera
   se šnekem, který pořád podává sám. */
.srovnani { position: relative; background: var(--podklad); }
.srovnani::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.srovnani .blok { position: relative; }
.den2 { max-width: 1040px; margin: 36px auto 0; }
.den2-hodiny { display: flex; align-items: center; justify-content: center; gap: 12px; width: fit-content; margin: 0 auto; padding: 10px 22px; border-radius: 16px; background: #0d0f10; box-shadow: inset 0 0 0 2px #2a2f32, 0 16px 30px -18px rgba(0, 0, 0, .9); }
.den2-hodiny b { min-width: 5ch; font: 700 40px/1 var(--pismo-cisla); color: var(--jantar); text-shadow: 0 0 12px rgba(242, 169, 59, .6); text-align: center; }
.den2-hodiny svg { width: 26px; height: 26px; color: var(--jantar); }
.den2-hodiny .mesic { display: none; color: #9fc3d9; }
.den2-hodiny.noc .slunce { display: none; } .den2-hodiny.noc .mesic { display: block; }
.den2-dvojice { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.strana { --text: #211910; --text-tlumeny: #5E554A; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #FFFCF8; color: var(--text); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.strana--automat { box-shadow: 0 0 0 3px #F2B35E, 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 60px -10px rgba(242, 169, 59, .25); }
.strana-hlava { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; padding: 18px 22px 0; }
.strana-hlava b { font-family: var(--pismo-nadpis); font-weight: 700; font-size: 26px; line-height: 1.1; }
.strana-hlava span { font-weight: 800; font-size: 15px; color: var(--text-tlumeny); }
.strana--automat .strana-hlava span { color: #B3261A; }
.strana-obr { position: relative; aspect-ratio: 16 / 11; overflow: hidden; margin: 10px 14px 0; border-radius: 16px; background: linear-gradient(180deg, #F1EAE0, #E6DAC7); }
/* rámec = celý rám vrstev 1260×1200, posunutý a zvětšený tak, aby kotel seděl v okně */
.ramec { position: absolute; aspect-ratio: 1260 / 1200; }
.ramec > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.strana-obr--rucni .ramec { width: 94.6%; left: -12%; top: -12.8%; }
.strana-obr--automat .ramec { width: 112%; left: -2.6%; top: -29%; }
/* ruční kotel: dvířka pořád otevřená, oheň podle --f (0–1): rozsvícená komora se prolíná přes dohořelou, plameny rostou a slábnou */
.ru-otevreny { opacity: var(--f, 0); transition: opacity .3s; }
/* živý plamen v komoře (js/plamen.js), stejně umístěný jako v heru: ruční kotel podle síly ohně, automat pořád */
.komora-plamen { position: absolute; left: 72.45%; top: 50.2%; width: 10.95%; height: 7.2%; mix-blend-mode: screen; clip-path: polygon(1.6% 1%, 99.5% 6.9%, 97.7% 99.4%, .4% 92.6%); pointer-events: none; }
.strana-ohen { position: absolute; left: 66%; top: 74%; width: 26%; height: 14%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 130, 40, .55), transparent 70%); opacity: var(--f, 0); transition: opacity .4s; pointer-events: none; }
.au-svetlo { animation: svetlo 1.4s ease-in-out infinite alternate; }
@keyframes svetlo { 0% { opacity: .75; } 45% { opacity: 1; } 70% { opacity: .85; } 100% { opacity: .95; } }
/* panáček s kbelíkem: přijde zleva, nasype pelety do dvířek a odejde */
.panacek { position: absolute; z-index: 2; left: 51%; top: 25%; width: 26%; aspect-ratio: 1 / 2; transform: translateX(-260%); opacity: 0; pointer-events: none; }
.panacek svg { display: block; width: 100%; height: 100%; overflow: visible; }
.strana-obr.prisel .panacek { animation: panacek 3s linear both; }
@keyframes panacek { 0% { transform: translateX(-260%); opacity: 1; } 22%, 78% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-260%); opacity: 1; } }
.pa-noha { transform-box: fill-box; transform-origin: 50% 0; }
.strana-obr.prisel .pa-noha.z { animation: krok .35s ease-in-out 0s 2 alternate, krok .35s ease-in-out 2.35s 2 alternate; }
.strana-obr.prisel .pa-noha.p { animation: krok .35s ease-in-out .0s 2 alternate-reverse, krok .35s ease-in-out 2.35s 2 alternate-reverse; }
@keyframes krok { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.pa-ruka { transform-box: view-box; transform-origin: 37px 40px; }
.strana-obr.prisel .pa-ruka { animation: sype 3s ease-in-out both; }
@keyframes sype { 0%, 32% { transform: rotate(0); } 42%, 64% { transform: rotate(-78deg); } 74%, 100% { transform: rotate(0); } }
.pa-pel { position: absolute; left: 80%; top: 44%; width: 8%; height: 2.2%; border-radius: 3px; background: linear-gradient(180deg, #d9a865, #8a5a26); opacity: 0; }
.strana-obr.prisel .pa-pel { animation: paPel .55s cubic-bezier(.5, 0, 1, .6) infinite; animation-delay: calc(1.3s + var(--d, 0s)); animation-iteration-count: 2; }
.pa-pel:nth-child(3) { --d: .09s; } .pa-pel:nth-child(4) { --d: .18s; } .pa-pel:nth-child(5) { --d: .27s; } .pa-pel:nth-child(6) { --d: .36s; } .pa-pel:nth-child(7) { --d: .45s; }
@keyframes paPel { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(110%, 520%) rotate(140deg); } }
@keyframes bublinaNova { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* štítek u šneku automatu */
/* přilepený ke spodní hraně okna (spodek okna je 16,9 % výšky rámce nad jeho spodkem), menší, ať nezakrývá kotle */
.au-stitek { position: absolute; left: 48%; bottom: 18.4%; z-index: 2; width: max-content; max-width: 44%; margin: 0; padding: 7px 11px; border-radius: 10px; background: #B3261A; color: #fff; font-size: 13px; font-weight: 800; line-height: 1.3; text-align: center; transform: translateX(-50%); box-shadow: 0 0 0 3px rgba(103, 197, 207, .45), 0 12px 24px -10px rgba(0, 0, 0, .5); }
.au-stitek::after { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; background: #B3261A; transform: rotate(45deg); }
/* malé údaje dole */
.strana-cisla { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px 18px; font-size: 15px; font-weight: 800; color: var(--text-tlumeny); }
.strana-cisla p { margin: 0; }
.strana-cisla b { font: 700 20px var(--pismo-cisla); color: var(--text); }
/* teplota doma výrazně: štítek, teplá oranžová, při zimě modrá */
.strana-teplota { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 14px 6px; border-radius: 12px; background: #FBE9D6; color: #7A3A12; transition: background-color .4s, color .4s; }
.strana-teplota b { font-size: 32px; line-height: 1; color: #C2461C; transition: color .4s; }
.strana-teplota.zima { background: #E1EEF5; color: #2F5B73; }
.strana-teplota.zima b { color: #2F6F93; }
.strana--rucni .strana-cesty b { color: #B4410E; }
.strana--automat .strana-cesty b { color: #B3261A; }
.strana-cesty b.cuk { display: inline-block; animation: cuk .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cuk { from { transform: scale(1.6); } to { transform: scale(1); } }
/* souhrn se ukáže až na konci dne, s tlačítkem Přehrát znovu */
/* souhrn na konci dne: překryje obě karty, pod ním tlačítko Pustit znovu */
.den2-dvojice { position: relative; }
.den2-konec { position: absolute; inset: -8px; z-index: 5; display: none; align-items: center; justify-content: center; padding: 20px; border-radius: 28px; background: rgba(13, 15, 16, .72); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.den2-konec.ukaz { display: flex; animation: konecPrekryv .5s ease both; }
.den2-konec.ukaz .konec-karta { animation: bublinaNova .6s .15s var(--krivka) both; }
@keyframes konecPrekryv { from { opacity: 0; } }
.konec-karta { width: min(100%, 560px); padding: 30px 32px 32px; border-radius: 24px; background: #FFFCF8; color: #211910; text-align: center; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 169, 59, .5); }
.konec-nadpis { margin: 0; font: 700 30px/1.1 var(--pismo-nadpis); }
.konec-cisla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 16px; }
.konec-cisla p { margin: 0; padding: 16px 10px 14px; border-radius: 16px; background: #F3ECE2; font-size: 16px; line-height: 1.35; color: #5E554A; }
.konec-cisla b { display: block; margin-bottom: 4px; font: 700 52px/1 var(--pismo-cisla); }
.konec-cisla .rucni b { color: #C2461C; }
.konec-cisla .automat { background: #E4F3F4; } .konec-cisla .automat b { color: #B3261A; }
.konec-veta { margin: 0 auto 22px; max-width: 420px; font-size: 18px; line-height: 1.5; color: #5E554A; }
.den2-znovu { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border: 0; border-radius: 16px; background: var(--jantar); color: #211910; font: 800 18px var(--pismo-text); cursor: pointer; box-shadow: 0 10px 24px -12px rgba(194, 70, 28, .7); transition: transform .15s, box-shadow .15s; }
.den2-znovu svg { width: 22px; height: 22px; }
.den2-znovu:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(194, 70, 28, .8); }
.den2-znovu:focus-visible { outline: 3px solid #211910; outline-offset: 3px; }
.srovnani-pozn { margin: 12px auto 0; text-align: center; font-size: 15px; color: #B3AA9E; }
@media (max-width: 899px) {
	.den2-dvojice { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; gap: 14px; }
	/* karty pod sebou: souhrn drží na očích, ať je člověk u které chce */
	.den2-konec { align-items: flex-start; }
	.konec-karta { position: sticky; top: max(16px, calc(50vh - 190px)); }
	/* karty pod sebou nižší, ať jsou na telefonu vidět obě najednou (rámy přepočtené na 16:9) */
	.strana-obr { aspect-ratio: 16 / 9; }
	.strana-obr--rucni .ramec { width: 88%; left: -6.9%; top: -31.3%; }
	.strana-obr--automat .ramec { width: 96%; left: 3.9%; top: -36.1%; }
	/* na nižší scéně: bublina přilepená ke spodní hraně okna, šipkou míří na šnek a nezakrývá ho */
	.au-stitek { bottom: 18%; max-width: 76%; }
}
@media (max-width: 599px) {
	.den2 { margin-top: 24px; }
	.den2-hodiny { padding: 6px 16px; gap: 8px; }
	.den2-hodiny b { font-size: 28px; }
	.den2-hodiny svg { width: 20px; height: 20px; }
	.den2-dvojice { gap: 10px; margin-top: 12px; }
	.strana-hlava { padding: 10px 14px 0; }
	.strana-hlava b { font-size: 20px; }
	.strana-hlava span { font-size: 13px; }
	.strana-obr { margin: 6px 10px 0; border-radius: 12px; }
	.au-stitek { font-size: 12px; padding: 7px 9px; }
	.strana-cisla { padding: 6px 14px 10px; font-size: 14px; }
	.strana-cisla b { font-size: 18px; }
	.strana-teplota { padding: 3px 10px 4px; }
	.strana-teplota b { font-size: 26px; }
	.konec-karta { padding: 22px 18px 22px; }
	.konec-nadpis { font-size: 24px; }
	.konec-cisla b { font-size: 40px; }
	.konec-cisla p, .konec-veta { font-size: 15px; }
}
@media (max-width: 379px) { .au-stitek { bottom: 17%; max-width: 92%; padding: 5px 8px; font-size: 11px; line-height: 1.2; } }
@media (prefers-reduced-motion: reduce) { .strana-obr.prisel .panacek, .strana-obr.prisel .pa-ruka, .strana-obr.prisel .pa-noha, .strana-obr.prisel .pa-pel, .au-svetlo, .strana-cesty b.cuk, .den2-konec.ukaz, .den2-konec.ukaz .konec-karta { animation: none !important; } }

/* ======================= MAPA v kontaktu ======================= */
.mapa { margin: 40px 0 0; max-width: 520px; }
.mapa svg { display: block; width: 100%; height: auto; overflow: visible; }
.mapa figcaption { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--text-tlumeny); }
.mapa-hranice { stroke-dasharray: 1700; stroke-dashoffset: 1700; transform-origin: 300px 300px; transform: rotate(-90deg); transition: stroke-dashoffset 2.2s cubic-bezier(.5, 0, .2, 1); }
.mapa.videt .mapa-hranice { stroke-dashoffset: 0; }
.mapa-vlna { transform-origin: 300px 300px; transform: scale(.05); opacity: 0; }
.mapa.videt .mapa-vlna { animation: vlna 4s 2.2s ease-out infinite; }
@keyframes vlna { 0% { transform: scale(.05); opacity: .8; } 100% { transform: scale(1); opacity: 0; } }
.mapa-obce g { opacity: 0; transform: translateY(6px); transition: opacity 500ms, transform 500ms var(--krivka); }
.mapa.videt .mapa-obce g { opacity: 1; transform: none; }
.mapa-obce circle { fill: #8C5700; transform-box: fill-box; transform-origin: center; }
.mapa-obce .mapa-km-obec { font-size: 13px; font-weight: 700; fill: #5E554A; }
.mapa-plocha { position: relative; }
/* radar: světelný klín obíhá kolem Rapotína, obce blikají, když je mine */
.mapa-radar { position: absolute; left: 5%; top: 5%; width: 90%; height: 90%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 1s 2s;
	background: conic-gradient(from 0deg, rgba(242, 169, 59, 0) 0deg, rgba(242, 169, 59, 0) 290deg, rgba(242, 169, 59, .22) 352deg, rgba(242, 169, 59, .55) 360deg); }
.mapa.videt .mapa-radar { opacity: 1; animation: radar 6s linear 2.2s infinite; }
@keyframes radar { to { transform: rotate(360deg); } }
.mapa.videt .mapa-obce circle { animation: ping 6s var(--zp, 0s) infinite; animation-delay: calc(2.2s + var(--zp, 0s)); }
@keyframes ping { 0% { transform: scale(2.1); fill: #F2A93B; } 14% { transform: scale(1); fill: #8C5700; } 100% { transform: scale(1); fill: #8C5700; } }

@media (max-width: 899px) {
	.mapa { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.mapa.videt .mapa-radar, .mapa.videt .mapa-obce circle { animation: none; }
	.mapa-hranice { stroke-dashoffset: 0; transition: none; }
	.mapa-obce g { opacity: 1; transform: none; }
}

/* ======================= HERO 2 — scéna z vyrenderovaných vrstev =======================
   Vrstvy mají stejný rám 1260×1200 (navrhy/render.js), souřadnice v % rámu:
   okno zásobníku 11.4–24.2 % × 34–54.4 %, otvor nahoře ~ 8.5–26.3 % @ 27.4 %,
   komora kotle 72.5–83.3 % × 50.3–57.4 %, displej 72–79.8 % × 31.1–34.7 %,
   šnek (sklo) 38.7–56.4 % × 60–65 %, kotel 67.2–88.2 % (střed 77.7 %), dole 79.6 %. */
.scena-obal { display: flex; flex-direction: column; align-items: center; gap: 10px; --tx: 50%; --ty: 50%; }
.scena-ram { position: relative; width: 100%; }
.scena { position: relative; width: 100%; height: auto; min-height: 0; aspect-ratio: 1260 / 1200; container-type: inline-size; }
.scena .v { position: absolute; inset: 0; transition: transform 1.4s cubic-bezier(.6, 0, .25, 1), opacity .8s; }
.scena .v img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* podlaha kotelny pod oběma kotli (stejná kamera jako vrstvy), k okrajům se ztrácí do stránky; stojí, kotle se po ní posouvají */
.v-podlaha img { -webkit-mask-image: radial-gradient(ellipse 58% 27% at 48% 72%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 58% 27% at 48% 72%, #000 45%, transparent 100%); }
/* krok 1: jen starý kotel, větší a uprostřed; při přestavbě se zmenší a odjede doprava */
.v-kotel, .v-regulator { transform-origin: 77.7% 79.6%; }
.scena[data-krok="1"] .v-kotel { transform: translateX(-27.7%) scale(1.3); }
.scena[data-krok="1"] .v-zasobnik { transform: translateX(-75%); opacity: 0; }
.scena[data-krok="1"] .v-regulator { transform: translate(-27.7%, -20%) scale(1.3); opacity: 0; }
.v-zasobnik { transition-delay: .45s; }
.v-regulator { transition: transform .9s cubic-bezier(.3, 1.3, .5, 1) 1.5s, opacity .5s 1.5s; }
.scena[data-krok="1"] .v-kotel { cursor: pointer; }
/* kotel: zavřený → přestavěný (příruba hořáku) → otevřený → rozsvícený ohněm */
.k-prestaveny, .k-otevreny, .k-svetlo { opacity: 0; transition: opacity .7s; }
.scena.prestaveno .k-prestaveny, .scena.dvirka .k-otevreny { opacity: 1; }
.scena.prestaveno .k-zavreny { opacity: 0; transition: opacity .7s .2s; }
.k-svetlo { transition: none; }
/* oheň: živý plamen v komoře (WebGL), přes otevřený kotel jako světlo */
.plamen { position: absolute; left: 72.45%; top: 50.2%; width: 10.95%; height: 7.2%; mix-blend-mode: screen; clip-path: polygon(1.6% 1%, 99.5% 6.9%, 97.7% 99.4%, .4% 92.6%); pointer-events: none; opacity: 0; transition: opacity .6s; }
.scena.hori .plamen { opacity: 1; }
/* zásobník: prázdný (víko otevřené) → hromada pelet se kreslí na plátno → zavřené víko, plno */
.z-plny { visibility: hidden; }
.z-zavreny { opacity: 0; transition: opacity .7s; }
.scena.plny .z-zavreny { opacity: 1; }
.scena.plny .z-prazdny { opacity: 0; transition: opacity .7s .15s; }
.sypani { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .7s .1s; }
.scena.plny .sypani { opacity: 0; }
/* šnek: šroub (a pelety) jako pás, který se plynule posouvá o rozteč závitu; pelety se
   při rozjezdu objeví postupně od zásobníku ke kotli */
.snek-pas2 { position: absolute; left: 35.38%; top: 59.42%; width: 25.82%; height: 6.17%; overflow: hidden; }
.snek-pas2::after { content: ""; position: absolute; inset: 8% 0 auto; height: 30%; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); }
/* třída navíc: přebije .scena .v img i max-width z kostry, jinak je pás užší a při posunu se odkryje mezera */
.snek-pas2 img.sn-sroub, .snek-pas2 img.sn-pelety { position: absolute; inset: auto; left: -29.43%; top: 0; width: 137.7%; max-width: none; height: 100%; animation: snekJede .9s linear infinite paused; }
.snek-bezi .snek-pas2 img.sn-sroub, .snek-bezi .snek-pas2 img.sn-pelety { animation-play-state: running; }
/* čárka se štítkem pod šnekem: ukáže se, když šnek jede */
.snek-stitek { position: absolute; left: 48.3%; top: 65.2%; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -6px); opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none; }
.snek-stitek::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #B3261A; box-shadow: 0 0 0 3px rgba(103, 197, 207, .55); }
.snek-stitek i { width: 2px; height: clamp(16px, 5cqw, 34px); background: #B3261A; }
.snek-stitek span { padding: 5px 10px; border-radius: 8px; background: #B3261A; color: #fff; font: 800 clamp(11px, 1.9cqw, 14px)/1.2 var(--pismo-text); white-space: nowrap; box-shadow: 0 0 0 2px rgba(103, 197, 207, .45), 0 8px 16px -8px rgba(0, 0, 0, .45); }
.scena.snek-bezi .snek-stitek { opacity: 1; transform: translate(-50%, 0); }
@keyframes snekJede { to { transform: translateX(8.58%); } }
.sn-plne { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); }
.snek .sn-plne { clip-path: inset(0 0 0 0); }
.scena.snek .sn-plne { transition: clip-path 2.6s linear; }
.scena.bez-prechodu *, .scena.bez-prechodu { transition: none !important; }
/* pytel: táhne se myší nebo prstem, nad otvorem se nakloní a sype */
.pytel { position: absolute; z-index: 4; left: var(--px, 41%); top: var(--py, 42%); width: var(--pw); height: auto; transform: translate(-50%, -50%) rotate(var(--pr, 0deg)); transform-origin: 50% 50%; opacity: 0; visibility: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 12px 14px rgba(33, 25, 16, .35)); transition: opacity .5s, visibility 0s .5s; }
.scena.pytel-ven .pytel { opacity: 1; visibility: visible; transition: opacity .5s; }
.pytel.leti { transition: left .7s cubic-bezier(.4, 0, .2, 1), top .7s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1), opacity .5s; }
.pytel.drzim { cursor: grabbing; filter: drop-shadow(0 22px 22px rgba(33, 25, 16, .4)); }
/* nápověda: ruka ukazuje tah od pytle k otvoru zásobníku */
.ruka { position: absolute; z-index: 5; left: var(--rx0); top: var(--ry0); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; opacity: 0; transition: opacity .4s; }
.ruka svg { width: clamp(34px, 7cqw, 48px); height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.ruka span { padding: 5px 10px; border-radius: 8px; background: #211910; color: #fff; font: 800 13px var(--pismo-text); }
.scena.napoveda .ruka { opacity: 1; animation: ruka 2.8s cubic-bezier(.45, 0, .3, 1) infinite; }
@keyframes ruka { 0%, 12% { left: var(--rx0); top: var(--ry0); } 55%, 70% { left: var(--rx1); top: var(--ry1); } 100% { left: var(--rx0); top: var(--ry0); } }
/* displej regulátoru (text v HTML, ostrý) */
.displej { position: absolute; left: 72.01%; top: 31.1%; width: 7.83%; height: 3.64%; display: flex; align-items: center; justify-content: space-between; padding: 0 .5cqw; font-family: var(--pismo-cisla); color: #F2A93B; opacity: 0; transition: opacity .8s; }
.displej b { font-size: 2.3cqw; line-height: 1; font-weight: 800; text-shadow: 0 0 .6cqw rgba(242, 169, 59, .8); }
.displej small { align-self: flex-start; margin-top: .25cqw; font-size: .75cqw; font-weight: 700; color: #bfa98a; }
.scena.zapnuto .displej { opacity: 1; }

/* popisová karta nad scénou: krok, co udělat (velké), proč (menší); ukazovátko míří na věc */
.popis { position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 88px; padding: 14px 18px; border-radius: 18px; background: #FFFCF8; box-shadow: 0 1px 0 rgba(33, 25, 16, .06), 0 22px 40px -26px rgba(33, 25, 16, .55); }
.popis-krok { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--jantar); color: #211910; font: 800 21px var(--pismo-cisla); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14); }
.popis-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.popis-text b { font-family: var(--pismo-nadpis); font-weight: 700; font-size: 23px; line-height: 1.15; color: var(--text); }
.popis-text span { font-size: 16px; line-height: 1.4; font-weight: 600; color: #4b4237; }
.popis.nove .popis-text { animation: popisNovy .45s var(--krivka); }
@keyframes popisNovy { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* teplota v kartě: velká − hodnota + */
.regulace { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 6px; border-radius: 16px; background: #211910; }
.regulace[hidden] { display: none; }
.tl-pm { flex: none; width: 52px; height: 52px; border: 0; border-radius: 12px; background: #3a2f25; color: #fff; font: 800 28px/1 var(--pismo-text); cursor: pointer; transition: background-color var(--prechod-kratky) var(--krivka), transform var(--prechod-kratky) var(--krivka); }
.tl-pm:hover { background: var(--jantar); color: #211910; }
.tl-pm:active { transform: scale(.94); }
.tl-pm:disabled { opacity: .35; cursor: default; }
.teplota-hodnota { min-width: 4.2ch; font: 800 26px var(--pismo-cisla); color: var(--jantar); text-align: center; text-shadow: 0 0 10px rgba(242, 169, 59, .5); }

/* ovládání pod scénou: čtyři samostatná tlačítka kroků, vždy klikací */
.ovladani { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin-top: -18px; }
.krok-tl { position: relative; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px; border: 2px solid rgba(33, 25, 16, .14); border-radius: 16px; background: #FFFCF8; color: var(--text); font: 800 15px/1.2 var(--pismo-text); text-align: left; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s, transform var(--prechod-kratky) var(--krivka); }
.krok-tl b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(33, 25, 16, .08); font: 800 14px var(--pismo-cisla); }
.krok-tl:hover { border-color: var(--akcent); }
.krok-tl:active { transform: scale(.97); }
/* hotový krok: celý zelený s bílou fajfkou */
.krok-tl.hotovo { border-color: var(--akcent); background: var(--akcent); color: #fff; }
.krok-tl.hotovo b { background: #fff; color: transparent; position: relative; }
.krok-tl.hotovo b::before { content: ""; position: absolute; left: 11px; top: 7px; width: 7px; height: 12px; border: solid var(--akcent); border-width: 0 3px 3px 0; transform: rotate(45deg); }
/* krok, na který se má kliknout: zelený obrys a jemná záře (svítí, dokud na něj člověk neklikne) */
.krok-tl.ted { border-color: var(--akcent); background: #FFFCF8; color: var(--text); box-shadow: 0 0 0 3px rgba(103, 197, 207, .35), 0 0 18px 2px rgba(103, 197, 207, .4); }
.krok-tl.ted b { background: var(--akcent); color: #fff; }
.krok-tl.vyzva { animation: krokSviti 1.6s ease-in-out infinite; }
@keyframes krokSviti { 50% { box-shadow: 0 0 0 5px rgba(103, 197, 207, .55), 0 0 28px 8px rgba(103, 197, 207, .6); } }
.tl-znovu { min-height: 44px; margin-top: 2px; padding: 0 14px; border: 0; background: none; color: var(--text); font: 800 15px var(--pismo-text); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.tl-znovu[hidden] { display: none; }
.tl-znovu:hover { color: var(--akcent); }
@media (min-width: 900px) { .scena-obal { width: min(100%, 640px, calc((100svh - 330px) * 1.05)); justify-self: center; } }
@media (max-width: 899px) {
	.scena-obal { order: 2; width: min(100%, 560px); margin: 8px auto 0; }
	.ovladani { margin-top: -10px; }
}
@media (max-width: 599px) {
	.popis { min-height: 76px; gap: 10px; padding: 12px; border-radius: 16px; }
	.popis-krok { width: 36px; height: 36px; font-size: 17px; }
	.popis-text b { font-size: 19px; }
	.popis-text span { font-size: 14px; }
	.popis:has(.regulace:not([hidden])) { flex-wrap: wrap; }
	.regulace { margin: 0 auto; }
	.ovladani { gap: 5px; }
	.krok-tl { flex-direction: column; justify-content: center; gap: 4px; min-height: 66px; padding: 6px 4px; font-size: 12.5px; text-align: center; border-radius: 13px; }
	.krok-tl b { width: 24px; height: 24px; font-size: 12px; }
	.krok-tl.hotovo b::before { left: 8px; top: 5px; width: 6px; height: 10px; }
	.ruka span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.scena .v, .k-prestaveny, .k-otevreny, .z-zavreny, .pytel.leti { transition: none !important; }
	.krok-tl.vyzva, .scena.napoveda .ruka, .popis.nove .popis-text, .snek-pas2 img { animation: none !important; }
}

/* ======================= SLUŽBY — obrázek vlevo, text vpravo, překlikávání =======================
   Vyrenderované scény (navrhy/render.js ?vrstva=sluzba-1…5) s jemným živým detailem:
   oheň v kotli, okénko nového kotle, lesk litiny, teplo nad radiátorem, voda z baterie. */
.sluzby-panel { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; max-width: 1180px; margin: 48px auto 0; }
.sluzby-obrazy { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 28px; background: radial-gradient(ellipse 80% 70% at 50% 38%, #fbf7f1 0%, #ece3d6 55%, #d6c8b4 100%); box-shadow: inset 0 -60px 80px -60px rgba(120, 90, 50, .25), 0 40px 80px -40px rgba(0, 0, 0, .8); }
.sluzby-obrazy::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(214, 200, 180, 0), rgba(201, 185, 162, .35)); pointer-events: none; }
.sluzba-obraz { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateX(-28px) scale(.97); transition: opacity .55s var(--krivka), transform .8s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.sluzba-obraz.pred { transform: translateX(28px) scale(.97); }
.sluzba-obraz.aktivni { opacity: 1; transform: none; }
.sluzba-obraz img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }
/* živé detaily (polohy v % obrázku) */
.ef { position: absolute; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1s .4s; }
.sluzba-obraz.zapnuto .ef { opacity: 1; }
.ef-ohen { left: 76%; top: 9%; width: 11%; height: 13%; border-radius: 40%; background: radial-gradient(ellipse at 50% 60%, rgba(255, 190, 90, .9), rgba(255, 110, 30, .45) 45%, transparent 72%); mix-blend-mode: screen; animation: mihot 1.3s ease-in-out infinite alternate; }
.ef-zar { left: 66%; top: 70%; width: 30%; height: 14%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 130, 40, .35), transparent 70%); mix-blend-mode: screen; animation: mihot 1.9s ease-in-out infinite alternate-reverse; }
.ef-okno { left: 45.5%; top: 54%; width: 10%; height: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 120, .95), rgba(255, 120, 30, .5) 45%, transparent 70%); mix-blend-mode: screen; animation: mihot 1.1s ease-in-out infinite alternate; }
@keyframes mihot { 0% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(1.06, .97); filter: brightness(1.25); } 70% { transform: scale(.97, 1.04); filter: brightness(.9); } 100% { transform: scale(1.03); filter: brightness(1.15); } }
.ef-lesk { inset: 8% 20% 30% 22%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%) -150% 0 / 250% 100% no-repeat; mix-blend-mode: screen; animation: lesk 4.5s ease-in-out infinite; -webkit-mask: linear-gradient(#000, #000); }
@keyframes lesk { 0%, 25% { background-position: -150% 0; } 75%, 100% { background-position: 150% 0; } }
.ef-teplo { left: 12%; top: -6%; width: 62%; height: 24%; background: repeating-linear-gradient(90deg, rgba(255, 220, 190, 0) 0 14px, rgba(255, 220, 190, .12) 18px, rgba(255, 220, 190, 0) 24px); -webkit-mask: linear-gradient(0deg, #000, transparent); mask: linear-gradient(0deg, #000, transparent); filter: blur(3px); animation: teplo 3.2s linear infinite; }
.ef-teplo.b { animation-duration: 4.4s; animation-delay: -1.6s; opacity: .7; }
@keyframes teplo { 0% { transform: translateY(18%) skewX(-4deg); } 50% { transform: translateY(-6%) skewX(4deg); } 100% { transform: translateY(-30%) skewX(-4deg); opacity: 0; } }
.ef-voda { left: 49.9%; top: 12.6%; width: .9%; height: 13%; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, rgba(190, 230, 255, .35), rgba(255, 255, 255, .85) 45%, rgba(170, 215, 245, .4)); background-size: 100% 300%; animation: tece .5s linear infinite; }
@keyframes tece { to { background-position: 0 100%; } }
.ef-kapky { left: 47.4%; top: 24.5%; width: 6%; height: 2.6%; border-radius: 50%; background: radial-gradient(ellipse, rgba(220, 240, 255, .7), transparent 70%); animation: mihot .7s ease-in-out infinite alternate; }
/* voda v trubkách: světlé proužky tečou nahoru k ventilům, v odpadu dolů */
.tok { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .5) 12px, rgba(255, 255, 255, 0) 24px, rgba(255, 255, 255, 0) 28px); border-radius: 4px; mix-blend-mode: screen; filter: blur(.6px); }
.tok-studena { left: 47.75%; top: 46%; width: 1.1%; height: 36%; animation: tokNahoru .8s linear infinite; }
.tok-tepla { left: 60.3%; top: 47%; width: 1.1%; height: 36%; animation: tokNahoru .8s linear infinite; }
.tok-odpad { left: 38.4%; top: 50.5%; width: 1.8%; height: 30%; mix-blend-mode: multiply; background: repeating-linear-gradient(180deg, rgba(60, 70, 75, 0) 0, rgba(60, 70, 75, .3) 12px, rgba(60, 70, 75, 0) 24px, rgba(60, 70, 75, 0) 28px); filter: blur(.6px); animation: tokDolu .9s linear infinite; }
.tok-vodorovne { left: 39.2%; top: 48.2%; width: 15.3%; height: 2.2%; mix-blend-mode: multiply; background: repeating-linear-gradient(90deg, rgba(60, 70, 75, 0) 0, rgba(60, 70, 75, .3) 12px, rgba(60, 70, 75, 0) 24px, rgba(60, 70, 75, 0) 28px); filter: blur(.6px); animation: tokDoleva .9s linear infinite; }
@keyframes tokNahoru { to { background-position: 0 -28px; } }
@keyframes tokDolu { to { background-position: 0 28px; } }
@keyframes tokDoleva { to { background-position: -28px 0; } }
.sluzby-pravy { display: flex; flex-direction: column; gap: 32px; }
.sluzby-texty { position: relative; display: grid; }
.sluzba-text { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .4s var(--krivka), transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s .4s; }
.sluzba-text.aktivni { opacity: 1; visibility: visible; transform: none; transition-delay: .1s, .1s, 0s; }
.sluzba-cislo { display: block; margin-bottom: 14px; font: 700 40px/1 var(--pismo-cisla); color: var(--jantar); letter-spacing: -.02em; }
.sluzba-cislo small { font-size: 18px; color: var(--plocha-tlumeny); }
.sluzba-text h3 { font-size: 48px; line-height: 1.05; }
.sluzba-text p { margin-top: 18px; font-size: 21px; line-height: 1.55; color: var(--plocha-tlumeny); max-width: 470px; }
.sluzby-ovladani { display: flex; align-items: center; gap: 16px; }
.sluzba-sipka { display: grid; place-items: center; width: 60px; height: 60px; border: 2px solid rgba(255, 255, 255, .25); border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: border-color .3s, background-color .3s, color .3s; }
.sluzba-sipka svg { width: 24px; height: 24px; }
.sluzba-sipka:hover { border-color: #fff; background: #fff; color: #211910; }
.sluzba-sipka:active { transform: scale(.96); }
.sluzby-tecky { display: flex; gap: 4px; }
.sluzby-tecky button { position: relative; width: 30px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.sluzby-tecky button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 5px; background: rgba(255, 255, 255, .3); transition: width .3s var(--krivka), margin .3s var(--krivka), background-color .3s; }
.sluzby-tecky button.aktivni::before { width: 26px; margin-left: -13px; background: var(--jantar); }
.sluzby-tecky button:hover::before { background: rgba(255, 255, 255, .7); }
@media (max-width: 1099px) {
	.sluzby-panel { gap: 32px; }
	.sluzba-text h3 { font-size: 38px; }
	.sluzba-text p { font-size: 19px; }
}
@media (max-width: 899px) {
	.sluzby-panel { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
	.sluzby-pravy { gap: 22px; }
	.sluzba-cislo { font-size: 32px; margin-bottom: 8px; }
	.sluzba-text h3 { font-size: 32px; }
	.sluzba-text p { font-size: 17px; margin-top: 10px; }
}
@media (max-width: 599px) {
	.sluzba-sipka { width: 52px; height: 52px; }
	.sluzby-obrazy { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.sluzba-obraz, .sluzba-text { transition: none; }
	.ef { animation: none !important; }
}

/* ======================= LOGO — plamen z pelet =======================
   Při načtení se pelety rozhoří (jako slovo z pelet) a pak zůstanou normální;
   po najetí myší se zapálí znovu. */
.logo { align-items: center; gap: 10px; }
.logo > span { display: flex; align-items: baseline; gap: 10px; }
.logo-znak { position: relative; top: -3px; flex: none; width: 40px; height: 40px; overflow: visible; }
.logo-znak { transition: filter .4s var(--krivka), transform .4s var(--krivka); }
.logo-zar { opacity: 0; mix-blend-mode: screen; animation: logoZapal 1.5s .3s ease-out both; }
@keyframes logoZapal { 0% { opacity: 0; } 25% { opacity: 1; } 45% { opacity: .85; } 100% { opacity: 0; } }
/* po najetí se rozhoří víc: plná záře, plápolá a kolem se rozsvítí */
.logo:hover .logo-zar, .logo:focus-visible .logo-zar { animation: logoHori 1.1s ease-in-out infinite alternate; }
.logo:hover .logo-znak, .logo:focus-visible .logo-znak { filter: drop-shadow(0 3px 6px rgba(134, 19, 12, .35)); transform: scale(1.06) translateY(-1px); }
@keyframes logoHori { 0% { opacity: .75; } 35% { opacity: 1; } 60% { opacity: .85; } 100% { opacity: 1; } }
.pata-znacka { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pata-znacka .logo-znak { width: 52px; height: 52px; }
.pata-znacka .pata-logo { margin: 0; }
@media (max-width: 599px) { .logo-znak { width: 34px; height: 34px; } .logo > span small { display: none; } }
@media (prefers-reduced-motion: reduce) { .logo-zar, .menu a::before { animation: none !important; } }

/* ======================= UKÁZKY PRÁCE — bílé pozadí, překlikávání fotek =======================
   Čtvercová fotka (sedí na výšku i na šířku, bez prázdných pruhů) s plynulým přechodem,
   vpravo popis a mřížka náhledů. */
.galerie { background: #FFFFFF; scroll-margin-top: var(--hlavicka); }
.galerie-hlava { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.galerie-hlava h2 { font-size: 58px; line-height: 1.05; }
.galerie-hlava p { font-size: 20px; line-height: 1.55; color: var(--text-tlumeny); }
.galerie-mrizka { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 48px; }
.gal-podium { position: relative; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; background: #ECE6DD; box-shadow: 0 2px 0 rgba(33, 25, 16, .04), 0 40px 70px -40px rgba(33, 25, 16, .55); touch-action: pan-y; user-select: none; }
.gal-foto { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateX(var(--od, 5%)) scale(1.02); transition: opacity .55s var(--krivka), transform .8s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.gal-foto.aktivni { opacity: 1; transform: none; pointer-events: auto; }
.gal-foto.odchazi { opacity: 0; transform: translateX(calc(var(--od, 5%) * -1)) scale(.99); }
.gal-hlavni { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.gal-foto figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.gal-sipka { position: absolute; top: 50%; z-index: 2; width: 56px; height: 56px; margin-top: -28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #211910; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); transition: transform var(--prechod-kratky) var(--krivka), background-color var(--prechod-kratky) var(--krivka); }
.gal-sipka:hover { background: var(--jantar); }
.gal-sipka:active { transform: scale(.94); }
.gal-sipka svg { width: 24px; height: 24px; }
.gal-sipka--zpet { left: 16px; } .gal-sipka--dal { right: 16px; }
.gal-prubeh { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 2; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .55); overflow: hidden; }
.gal-prubeh i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--g, .0667)); background: url(../obrazky/litina.svg) 0 0 / 26px auto; transition: transform .6s var(--krivka); }
.gal-panel { padding-top: 8px; }
.gal-pocet { font-family: var(--pismo-cisla); font-weight: 800; color: var(--text-tlumeny); font-size: 18px; }
.gal-pocet b { font-size: 56px; line-height: 1; color: var(--text); letter-spacing: -.03em; }
.gal-popis { margin-top: 16px; min-height: 3.6em; font-family: var(--pismo-nadpis); font-weight: 700; font-size: 30px; line-height: 1.2; text-wrap: balance; }
/* náhledy v jedné řadě, posouvají se; vidět je pět, aktivní se sám dojede doprostřed */
.gal-nahledy { --mez: 10px; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * var(--mez)) / 5); gap: var(--mez); margin: 22px -8px 0; padding: 6px 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 8px; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 40px), transparent); }
.gal-nahledy::-webkit-scrollbar { display: none; }
.gal-nahledy.na-konci { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 8px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 8px), transparent); }
.gal-nahledy.uprostred { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.gal-nahled { position: relative; aspect-ratio: 1 / 1; scroll-snap-align: start; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #ECE6DD; cursor: pointer; opacity: .62; transition: opacity var(--prechod-kratky) var(--krivka), transform var(--prechod-kratky) var(--krivka); }
.gal-nahled img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .gal-nahled:hover { opacity: 1; transform: scale(1.04); } }
.gal-nahled.aktivni { opacity: 1; box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--jantar); }
@media (max-width: 1099px) {
	.galerie-mrizka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
	.gal-popis { font-size: 26px; }
}
@media (max-width: 899px) {
	.galerie-hlava { grid-template-columns: 1fr; gap: 16px; }
	.galerie-hlava h2 { font-size: 46px; }
	.galerie-mrizka { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
	.gal-podium { width: min(100%, 480px); margin-inline: auto; }
	.gal-panel { width: min(100%, 480px); margin-inline: auto; padding-top: 0; }
	.gal-pocet b { font-size: 40px; }
	.gal-popis { font-size: 22px; min-height: 2.5em; margin-top: 8px; }
	.gal-nahledy { --mez: 8px; margin-top: 12px; }
}
@media (max-width: 599px) {
	.galerie-hlava h2 { font-size: 38px; }
	.galerie-hlava p { font-size: 18px; }
	.gal-sipka { width: 48px; height: 48px; margin-top: -24px; }
	.gal-sipka--zpet { left: 10px; } .gal-sipka--dal { right: 10px; }
	.gal-podium { border-radius: 18px; }
	.gal-nahled { border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) { .gal-foto, .gal-prubeh i { transition: none; } }

/* přikládat, nebo automat na tmavé cihlové zdi (sousedí s bílou galerií) */
.srovnani.na-plose { background: var(--plocha); }
.srovnani.na-plose::before { opacity: .9; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' opacity='.7'%3E%3Cpath d='M0 20 H58 M64 20 H140 M146 20 H220 M0 50 H30 M36 50 H110 M116 50 H200 M206 50 H220 M0 80 H80 M86 80 H160 M166 80 H220 M0 110 H44 M50 110 H126 M132 110 H220'/%3E%3Cpath d='M61 20 V50 M143 20 V50 M33 50 V80 M113 50 V80 M203 50 V80 M83 80 V110 M163 80 V110 M47 110 V120 M129 110 V120 M61 0 V20 M143 0 V20'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 330px 180px; -webkit-mask: linear-gradient(80deg, #000, rgba(0, 0, 0, .35) 60%); mask: linear-gradient(80deg, #000, rgba(0, 0, 0, .35) 60%); }
/* velká fotka se vejde na výšku okna */
@media (min-width: 900px) { .gal-podium { width: min(100%, calc(100svh - 190px)); justify-self: end; } }