/* Instalatér Sifon – ukázkový web FORMA (smyšlený podnik, generuje vizitka/tools/ukazka-sifon.py). */
@font-face{font-family:'Dela Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dela-gothic-one-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Dela Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dela-gothic-one-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --med:#e26a24;--svetla:#fbefe0;--cerna:#1a110b;--bila:#fff;--tmava-nad:#2e1e13;
  --kamen:#c9b8a5;--pisek:#eedcc4;
  --trubka-svisle:linear-gradient(90deg,#7e3f17 0,#ffdcb8 26%,#d07a3c 52%,#7e3f17 100%);
  --trubka-vodorovne:linear-gradient(180deg,#ffdcb8 0,#d07a3c 50%,#7e3f17 100%);
  --spojka:radial-gradient(circle at 35% 30%,#fff1dc,#d99a55 50%,#7a4a1e);
  --rub:clamp(16px,4vw,56px);
  --nadpis:'Dela Gothic One','Arial Black','Helvetica Neue',Arial,sans-serif;
  --text:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --lista-v:0px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-color:var(--cerna) var(--med);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:12px;scroll-padding-bottom:calc(var(--lista-v) + 28px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--cerna);color:var(--cerna);font:400 17px/1.5 var(--text);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
svg{display:block}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
::selection{background:var(--cerna);color:var(--med)}
:focus-visible{outline:4px solid var(--fokus,var(--cerna));outline-offset:3px}
main:focus{outline:none}
.vizualne-skryty{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.preskocit{position:absolute;left:8px;top:-90px;z-index:100;background:var(--cerna);color:var(--med);padding:12px 18px;font-weight:700;text-decoration:none}
.preskocit:focus{top:8px;outline:4px solid var(--bila)}
.velky{font:400 clamp(3rem,12.6vw,11.5rem)/.9 var(--nadpis);letter-spacing:-.015em}

/* ---------- hlavička ---------- */
.hlava{position:absolute;z-index:20;inset:0 0 auto 0;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:8px var(--rub)}
.znacka{display:inline-flex;align-items:center;gap:.6em;min-height:44px;text-decoration:none;color:var(--cerna)}
.znacka__nazev{font:400 clamp(20px,2.2vw,26px)/1 var(--nadpis)}
.znacka__misto{font:700 17px/1 var(--text)}
.hlava__nav{display:none}
@media (min-width:900px){
  .hlava__nav{display:flex;align-items:center;gap:6px}
  .hlava__nav a,.hlava__nav button{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font-weight:700;text-decoration:none}
  .hlava__nav a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
  .hlava__nav .hlava__volat{appearance:none;border:0;border-radius:0;cursor:pointer;background:var(--cerna);color:var(--med);font-family:var(--nadpis);font-weight:400;font-size:19px}
  .hlava__nav .hlava__volat:hover{background:var(--bila);color:var(--cerna);text-decoration:none}
}

/* ---------- úvod ---------- */
.uvod{--fokus:var(--cerna);--cta-h:100px;--theta:-6deg;position:relative;isolation:isolate;overflow:clip;background:var(--med);color:var(--cerna);min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(14px,3svh,36px);padding:calc(64px + clamp(4px,2svh,28px)) var(--rub) clamp(18px,4svh,44px)}
.uvod__nadpis{font:400 min(15.9vw,10.6svh)/1.14 var(--nadpis);letter-spacing:-.012em;margin-left:-.03em;padding-bottom:.16em}
.l{display:contents}
.r{display:block}
.uvod__pod{margin-top:2px;font-weight:700;font-size:clamp(17px,1.9vw,26px);line-height:1.3;max-width:22em}
.uvod__akce{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.uvod__dal{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration-thickness:3px;text-underline-offset:5px}
.uvod__dal::after{content:'';width:.55em;height:.55em;margin:-.2em 0 0 .6em;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg)}
.uvod__razitko{display:none}
@media (max-height:640px) and (max-width:899px){.uvod__dal{display:none}}
@media (min-width:900px){
  .uvod{--cta-h:clamp(100px,8.2vw,124px);--klic-k:.7}
  .uvod__nadpis{font-size:min(9.2vw,15.2svh)}
  .uvod__dal{display:none}
  .l1{display:block}.l1 .r{display:inline}
  .l2{display:contents}.l2 .r{display:block}
}
@media (min-width:1100px) and (min-height:801px){
  .uvod__razitko{display:block;position:absolute;right:calc(var(--rub) + 10px);top:clamp(84px,14svh,130px);width:clamp(210px,16vw,250px);z-index:1;transform:rotate(-9deg)}
  .uvod__razitko svg{width:100%;height:auto}
}
@media (min-width:900px) and (max-height:800px){
  .uvod__nadpis{font-size:min(8.6vw,16svh)}
  .l2{display:block}.l2 .r{display:inline}
}

/* ---------- tlačítko Zavolat ---------- */
.volat{appearance:none;border:0;border-radius:0;cursor:pointer;font:inherit;text-align:left;position:relative;display:flex;align-items:center;gap:16px;min-height:64px;padding:10px 22px;background:var(--cerna);color:var(--bila);text-decoration:none}
.volat__text{display:flex;flex-direction:column;gap:6px;min-width:0}
.volat__stitek{font:700 17px/1.1 var(--text);color:var(--med)}
.volat__cislo{font:400 clamp(26px,7.6vw,34px)/1 var(--nadpis);white-space:nowrap}
.volat:hover{background:var(--tmava-nad)}
.volat:active{background:#000}
.volat--velke{--s:calc(var(--cta-h) * var(--klic-k,.58) / 84);width:calc(100% - 40px);max-width:760px;min-height:var(--cta-h);padding:0 clamp(18px,2.2vw,34px) 0 calc(var(--s) * var(--pr,114))}
.volat--velke .volat__cislo{font-size:clamp(18px,6.4vw,34px)}
@media (min-width:900px){
  .volat--velke{width:100%}
  .volat--velke .volat__cislo{font-size:clamp(40px,4.6vw,60px)}
  .volat--velke .volat__stitek{font-size:clamp(17px,1.5vw,21px)}
}
.volat__zaklad{position:absolute;left:calc(var(--s) * var(--nx,40));top:calc(50% + var(--s) * var(--ny,0));width:0;height:0;pointer-events:none}
.k-st,.m-st{position:absolute;left:0;top:0;width:0;height:0;transform:scaleX(-1) rotate(var(--theta))}
.k-ofs{position:absolute;left:0;top:0;width:0;height:0;transform:translate(calc(var(--s) * -17),calc(var(--s) * 23));mix-blend-mode:multiply}
.k-rot,.m-rot,.k-pos{display:block;position:absolute;left:0;top:0;width:0;height:0}
.matice{position:absolute;left:calc(var(--s) * -58);top:calc(var(--s) * -58);width:calc(var(--s) * 116);height:calc(var(--s) * 116)}
.klic,.klic-stin{position:absolute;left:calc(var(--s) * -96.0);top:calc(var(--s) * -299.2);width:calc(var(--s) * 884.6);height:calc(var(--s) * 475.2);overflow:visible}
@media (prefers-reduced-motion:no-preference){
  .k-pos{animation:k-vstup .38s cubic-bezier(.18,.7,.22,1) .04s backwards}
  .celist{animation:celist-zavri .24s cubic-bezier(.4,0,.2,1) .4s backwards}
  .zebra{animation:zebra-toc .24s linear .4s backwards}
  .volat--velke .k-rot,.volat--velke .m-rot{animation:utahni .28s cubic-bezier(.4,0,.2,1) .64s backwards}
}
@keyframes k-vstup{from{transform:translateX(calc(var(--s) * 210));opacity:0}22%{opacity:1}to{transform:none;opacity:1}}
@keyframes celist-zavri{from{transform:translateY(22px)}to{transform:none}}
@keyframes zebra-toc{from{transform:translateX(0)}to{transform:translateX(14px)}}
@keyframes utahni{from{transform:rotate(12deg)}to{transform:none}}

/* vysoké telefony (390×844 a víc): klíč stojí strměji, rukojeť vede nahoru doleva a podtitulku se vyhne; nad čísla se čelisti nedostanou, matice sedí o kus výš */
@media (min-width:350px) and (max-width:440px) and (min-height:800px){
  .uvod{--theta:-34deg}
  .uvod .volat--velke{--s:calc(min(100vw,400px) * .0021);--nx:48;--ny:-62;width:calc(100% - 52px)}
}

@media (max-width:340px){.uvod .volat--velke{--klic-k:.5;width:calc(100% - 28px)}}
@media (max-width:300px){.uvod .volat--velke{--klic-k:.4}}

/* ---------- Co se děje? ---------- */
.problemy{--fokus:var(--med);background:var(--cerna);color:var(--bila);padding:clamp(56px,9vw,120px) var(--rub) clamp(48px,8vw,110px)}
.problemy__hlava{display:grid;gap:18px 48px;margin-bottom:clamp(28px,5vw,64px)}
.problemy__uvod{font-size:clamp(17px,1.7vw,24px);line-height:1.4;color:var(--pisek);max-width:26em;font-weight:500}
@media (min-width:900px){.problemy__hlava{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end}}
.problem{border-top:3px solid var(--bila)}
.problem:last-child{border-bottom:3px solid var(--bila)}
.problem__radek{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:20px;row-gap:4px;min-height:92px;padding:16px 0;list-style:none;cursor:pointer}
.problem__radek::-webkit-details-marker{display:none}
.problem__nazev{grid-column:1;font:400 clamp(1.9rem,6.2vw,5.4rem)/1 var(--nadpis);text-wrap:balance}
.problem__sluzba{grid-column:1;font-weight:600;font-size:17px;color:var(--kamen)}
.problem__plus{grid-column:2;grid-row:1 / span 2;position:relative;width:52px;height:52px;border:3px solid currentColor}
.problem__plus::before,.problem__plus::after{content:'';position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%)}
.problem__plus::before{width:22px;height:4px}
.problem__plus::after{width:4px;height:22px}
#p-prasklo .problem__radek{background:var(--med);color:var(--cerna);--odsazeni:0px;padding-left:18px;padding-right:18px}
#p-prasklo .problem__sluzba{color:var(--cerna)}
@media (hover:hover){
  .problem__radek:hover{background:var(--med);color:var(--cerna);--odsazeni:18px}
  .problem__radek:hover .problem__sluzba{color:var(--cerna)}
  #p-prasklo .problem__radek:hover{background:var(--bila)}
}
.problem__radek:active{background:var(--med);color:var(--cerna)}
.problem__nazev,.problem__sluzba,.problem__odhad{transform:translateX(var(--odsazeni,0px))}
.problem__plus{transform:translateX(calc(var(--odsazeni,0px) * -1))}
@media (prefers-reduced-motion:no-preference){
  .problem__radek{transition:background-color .16s,color .16s}
  .problem__nazev,.problem__sluzba,.problem__odhad,.problem__plus{transition:transform .16s,color .16s}
}
@media (min-width:900px){
  .problem__radek{grid-template-columns:minmax(0,1fr) minmax(220px,26%) auto;min-height:118px}
  .problem__sluzba{grid-column:2;align-self:center;font-size:19px}
  .problem__plus{grid-column:3;grid-row:auto}
}
.problem__karta{padding:8px 0 36px;display:grid;gap:18px 40px;max-width:980px}
@media (min-width:900px){.problem__karta{grid-template-columns:1fr 1fr}.problem__karta .karta__pozn,.problem__karta .volat{grid-column:1 / -1}}
.blok{border-top:3px solid currentColor;padding:10px 0 4px}
.blok__nadpis{font:700 19px/1.25 var(--text);margin-bottom:4px}
.blok p{font-size:18px;line-height:1.42}
.karta__pozn{font-size:17px;line-height:1.4;opacity:.85}
.volat--karta{width:100%;max-width:560px;min-height:76px;padding:12px 24px}
.volat--karta .volat__cislo{font-size:clamp(30px,8vw,40px)}

/* ---------- dialog s kartou ---------- */
.karta{--fokus:var(--cerna);border:0;padding:0;margin:auto;width:min(100%,860px);max-width:100%;max-height:min(100svh,940px);background:var(--med);color:var(--cerna);overflow:auto;overscroll-behavior:contain}
.karta::backdrop{background:rgb(26 17 11 / .78)}
.karta__plocha{--pad:clamp(18px,4vw,48px);position:relative;padding:0 var(--pad) clamp(16px,3vw,36px)}
.karta__hlava{position:sticky;top:0;z-index:3;display:flex;justify-content:flex-end;margin:0 calc(var(--pad) * -1);padding:10px var(--pad);background:var(--med)}
.karta__zavrit{position:relative;appearance:none;border:0;border-radius:0;background:var(--cerna);color:var(--med);font:700 17px/1 var(--text);min-height:48px;min-width:48px;padding:0 20px 0 52px;cursor:pointer}
.karta__zavrit::before,.karta__zavrit::after{content:'';position:absolute;left:19px;top:50%;width:20px;height:3px;margin-top:-1.5px;background:currentColor}
.karta__zavrit::before{transform:rotate(45deg)}
.karta__zavrit::after{transform:rotate(-45deg)}
.karta__zavrit:hover{background:var(--bila);color:var(--cerna)}
.karta__nadpis{font:400 clamp(2rem,8.4vw,4.8rem)/.98 var(--nadpis);letter-spacing:-.012em;margin:4px 0 16px;max-width:12em}
.karta__telo{display:grid;gap:12px}
.karta__telo .blok{border-top-color:var(--cerna)}
.karta__telo .volat{position:sticky;bottom:0;z-index:2;margin-top:8px;box-shadow:0 0 0 10px var(--med)}
@media (max-width:899px){.karta{margin:auto 0 0;width:100%;max-height:94svh}}
@media (prefers-reduced-motion:no-preference){.karta[open]{animation:karta-vstup .22s ease-out}}
@keyframes karta-vstup{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}

/* ---------- scéna: řez za obkladem ---------- */
.scena{--fokus:var(--cerna);background:var(--svetla);color:var(--cerna);padding:clamp(48px,7vw,96px) 0 clamp(40px,6vw,80px)}
.scena__podium{display:grid;gap:22px;padding:0 var(--rub)}
.scena__nadpis{font:400 clamp(2.4rem,7.6vw,6.4rem)/.95 var(--nadpis);letter-spacing:-.012em}
.scena__napoveda{font-weight:700;font-size:19px;margin-top:18px}
.titulky{display:grid;gap:16px 40px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.titulek{display:block;font:400 clamp(1.7rem,3.4vw,2.6rem)/1 var(--nadpis)}
.titulek span{display:block}
.titulek__veta{display:block;margin-top:6px;font-size:19px;font-weight:600;line-height:1.35}
.scena__okno{container-type:inline-size;overflow-x:auto;overflow-y:hidden;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.platno{--sirka:clamp(860px,100cqw,1240px);--u:calc(var(--sirka) / 1280);position:relative;flex:none;width:var(--sirka);height:calc(var(--sirka) / 2)}
.rez-kresba{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.cev path{stroke-dasharray:1}
.cislo{font-feature-settings:'tnum'}
.cislo[data-i='0']{transform:translateY(-108px)}
.cislo[data-i='1']{transform:translateY(-252px)}
.cislo[data-i='2']{transform:translateY(-144px)}
.cislo[data-i='3']{transform:translateY(-288px)}
.spoj{transform-box:fill-box;transform-origin:center}
.bod{position:absolute;z-index:2;left:calc(var(--cx) * var(--u));top:calc(var(--cy) * var(--u));transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px 0 12px;background:var(--cerna);color:var(--med);font:700 17px/1 var(--text);white-space:nowrap;text-decoration:none;transition:background-color .15s,color .15s}
.bod::before{content:'+';font:700 22px/1 var(--text);margin-top:-2px}
.bod__slovo{display:inline}
.bod::after{content:'';position:absolute;z-index:-1;left:calc(50% + (var(--x) - var(--cx)) * var(--u));top:calc(50% + (var(--y) - var(--cy)) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
.bod:hover,.bod.je-aktivni{background:var(--bila);color:var(--cerna);box-shadow:0 0 0 4px var(--cerna)}
.bod:focus-visible{outline:4px solid var(--cerna);outline-offset:3px;box-shadow:0 0 0 3px var(--bila)}
.bod--vodomer{--cx:204;--cy:250;--x:116;--y:52;--w:170;--h:160}
.bod--rozvody{--cx:560;--cy:186;--x:300;--y:104;--w:760;--h:52}
.bod--baterie{--cx:236;--cy:322;--x:232;--y:300;--w:204;--h:300}
.bod--wc{--cx:636;--cy:292;--x:590;--y:212;--w:222;--h:382}
.bod--pracka{--cx:985;--cy:252;--x:900;--y:372;--w:170;--h:222}
.bod--mycka{--cx:1166;--cy:252;--x:1102;--y:372;--w:118;--h:222}
/* na telefonu v živé scéně mají neaktivní značky jen plus (slovo je v titulku), aktivní se rozbalí */
@media (max-width:1099px){
  .scena--zive .bod:not(.je-aktivni){width:44px;padding:0;justify-content:center;gap:0;background:transparent;color:var(--med)}
  .scena--zive .bod:not(.je-aktivni):not(:focus-visible){box-shadow:none}
  .scena--zive .bod:not(.je-aktivni)::before{display:grid;place-items:center;width:32px;height:32px;margin:0;background:var(--cerna);font-size:24px;padding-bottom:3px}
  .scena--zive .bod:not(.je-aktivni) .bod__slovo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .scena--zive .bod.je-aktivni{z-index:3}
}
/* živá scéna (třídu přidává script.js při načtení a otočení, jen bez omezeného pohybu a od výšky 520 px) */
.scena--zive{height:calc(100svh * 4.4);padding:0}
.scena--zive .scena__podium{position:sticky;top:0;height:100svh;overflow:clip;grid-template-rows:auto auto minmax(0,1fr);gap:10px;padding:clamp(14px,2.4svh,28px) var(--rub) calc(var(--lista-v) + 10px)}
.scena--zive .scena__nadpis{font-size:clamp(1.55rem,6.2vw,2.3rem)}
.scena--zive .scena__napoveda{margin-top:6px;font-size:17px}
.scena--zive .titulky{display:grid;grid-template-columns:1fr;gap:0}
.scena--zive .titulky li{grid-area:1 / 1;opacity:0;transform:translateY(14px);transition:opacity .26s,transform .26s}
.scena--zive .titulky li.je-aktivni{opacity:1;transform:none}
.scena--zive .titulek{font-size:clamp(2rem,10.2vw,3.2rem)}
.scena--zive .titulek__veta{font-size:17px;margin-top:4px}
.scena--zive .scena__okno{overflow:clip;padding:0;align-self:center}
.scena--zive .platno{--sirka:max(calc((100svh - 18.6rem) * 2),600px);will-change:transform}
.scena--zive .cev{stroke-dashoffset:1}
.scena--zive .spoj{opacity:0}
@media (min-width:1100px){
  .scena--zive .scena__podium{grid-template-columns:minmax(260px,26%) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:'hlava okno' 'titulky okno';column-gap:clamp(16px,3vw,48px);row-gap:clamp(16px,3svh,36px);align-content:center}
  .scena--zive .scena__hlava{grid-area:hlava;align-self:end}
  .scena--zive .scena__nadpis{font-size:clamp(1.7rem,2.5vw,2.6rem)}
  .scena--zive .scena__napoveda{font-size:19px;margin-top:10px}
  .scena--zive .titulky{grid-area:titulky;align-self:start}
  .scena--zive .titulek{font-size:clamp(2.2rem,4.3vw,4.8rem)}
  .scena--zive .titulek__veta{font-size:clamp(18px,1.6vw,24px)}
  .scena--zive .scena__okno{grid-area:okno;grid-row:1 / -1;margin-right:calc(var(--rub) * -1)}
  .scena--zive .platno{--sirka:min(100cqw,calc((100svh - 6rem) * 2));will-change:auto}
}

/* ---------- pásy ---------- */
.slova{--fokus:var(--cerna);background:var(--pisek);color:var(--cerna);padding:clamp(56px,9vw,130px) var(--rub) clamp(48px,7vw,100px)}
.slova__rady{border-top:4px solid var(--cerna)}
.slova__rada{display:grid;gap:8px 32px;align-items:end;padding:clamp(14px,2vw,28px) 0;border-bottom:4px solid var(--cerna)}
.slova__veta{font:400 clamp(2.3rem,8.2vw,8rem)/.98 var(--nadpis);letter-spacing:-.012em;text-wrap:balance}
.slova__pozn{font:700 clamp(17px,1.6vw,22px)/1.3 var(--text)}
.slova__rada:nth-child(2) .slova__veta{margin-left:auto;text-align:right}
.slova__zdroj{margin-top:16px;font-size:17px;font-weight:600}
@media (min-width:900px){.slova__rada{grid-template-columns:minmax(0,1fr) auto}.slova__rada:nth-child(2){grid-template-columns:1fr}.slova__rada:nth-child(3){grid-template-columns:1fr}}

/* ---------- konec ---------- */
.konec{--fokus:var(--cerna);--cta-h:100px;--theta:8deg;position:relative;overflow:clip;background:var(--med);color:var(--cerna);padding:clamp(64px,11vw,160px) var(--rub) clamp(80px,12vw,170px);display:grid;gap:clamp(28px,5vw,64px)}
.konec__veta{font:400 clamp(2.6rem,14.2vw,13rem)/.92 var(--nadpis);letter-spacing:-.02em}
.konec__veta span{display:block}
.konec__fake{margin-top:10px}
.konec__pozn{margin-top:12px;font-weight:700;font-size:clamp(17px,1.7vw,24px);line-height:1.3;text-wrap:balance}
.volat--konec{--pr:120;--nx:14}
@media (max-width:899px){.volat--konec .volat__cislo{font-size:clamp(22px,6.3vw,34px)}}
.volat--konec .k-pos,.volat--konec .celist,.volat--konec .zebra,.volat--konec .k-rot,.volat--konec .m-rot{animation:none}
@media (min-width:900px){.konec{--cta-h:clamp(104px,9vw,140px);--klic-k:.7}}

/* ---------- patička a lišta ---------- */
.paticka{--fokus:var(--med);background:var(--cerna);color:var(--kamen);padding:32px var(--rub) calc(32px + var(--lista-v));display:grid;gap:10px}
.paticka p{font-size:17px;line-height:1.5;max-width:60em}
.paticka strong{color:var(--bila)}
.paticka__znacka{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
.paticka__tel,.paticka__zpet a{display:inline-flex;align-items:center;min-height:44px;color:var(--med);font-weight:700}
.paticka__tel{appearance:none;border:0;border-radius:0;padding:0;background:none;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}
.lista{appearance:none;border:0;border-radius:0;cursor:pointer;font:inherit;width:100%;position:fixed;z-index:30;inset:auto 0 0 0;display:none;align-items:center;justify-content:center;gap:14px;min-height:calc(var(--lista-v) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--cerna);color:var(--bila);text-decoration:none;--fokus:var(--med);visibility:hidden;transform:translateY(105%);transition:transform .24s ease,visibility 0s .24s}
.lista.je-videt{visibility:visible;transform:none;transition-delay:0s}
.lista__stitek{color:var(--med);font-weight:700;font-size:17px}
.lista__cislo{font:400 22px/1 var(--nadpis)}
@media (max-width:899px){:root{--lista-v:56px}.lista{display:flex}}

/* ---------- odhady a ukázková poznámka ---------- */
.fake{font-weight:600;font-size:17px;line-height:1.25}
.problem__odhad{grid-column:1;font-weight:700;font-size:17px;color:var(--med)}
#p-prasklo .problem__odhad{color:var(--cerna)}
.problem__radek:active .problem__odhad{color:var(--cerna)}
@media (hover:hover){.problem__radek:hover .problem__odhad{color:var(--cerna)}}
.odhad{display:grid;gap:2px 28px;padding:14px 18px 16px;background:var(--cerna);color:var(--bila)}
.odhad__nadpis{font:700 17px/1.25 var(--text);color:var(--med)}
.odhad__cena{font:400 clamp(30px,7.4vw,46px)/1.1 var(--nadpis)}
.odhad__cas{font-size:17px;line-height:1.35;font-weight:600}
@media (min-width:900px){
  .problem__radek{grid-template-rows:auto auto}
  .problem__nazev,.problem__plus{grid-row:1 / span 2}
  .problem__sluzba{align-self:end}
  .problem__odhad{grid-column:2;align-self:start;font-size:19px}
}
@media (max-width:899px){
  .fake{font-size:16px}
  .problem__plus{grid-row:1 / span 3}
}
.problem__karta .odhad{grid-column:1 / -1;border:3px solid var(--bila)}
.karta__telo .odhad{border:0}
.problem__karta .volat{border:3px solid var(--bila)}
.karta__telo .volat{border:0}
/* úzké telefony: deska sahá dál doleva, ať se popisek vejde vedle klíče */
@media (max-width:389px) and (max-height:799px){.uvod .volat--velke{width:calc(100% - 22px)}}
@media (max-width:369px) and (max-height:799px){.uvod .volat--velke{width:calc(100% - 12px)}}
/* vysoké telefony: čelist leží nad deskou, delší popisek se zalomí dřív */
@media (min-width:350px) and (max-width:440px) and (min-height:800px){.uvod .volat__stitek{max-width:10em}}

/* ---------- ceník: položky odbočují ze stoupačky jako v řezu ---------- */
.cenik{--fokus:var(--med);--trubka:18px;background:var(--cerna);color:var(--bila);padding:clamp(56px,9vw,130px) var(--rub) clamp(56px,8vw,120px);overflow:clip}
.cenik__hlava{display:grid;gap:18px 48px;margin-bottom:clamp(32px,5vw,72px)}
.cenik__uvod{font-size:clamp(17px,1.7vw,24px);line-height:1.4;font-weight:500;color:var(--pisek);max-width:26em}
.cenik__mrizka{display:grid;gap:clamp(40px,6vw,80px)}
.cena{display:inline-block;padding:.34em .5em .38em;background:var(--med);color:var(--cerna);font:400 clamp(21px,2.2vw,30px)/1 var(--nadpis);white-space:nowrap}
.vyjezd__nadpis{font:700 clamp(19px,1.9vw,26px)/1.25 var(--text)}
.vyjezd__cena{margin-top:8px;font:400 clamp(4.2rem,8.2vw,8.6rem)/.92 var(--nadpis);letter-spacing:-.02em;color:var(--med)}
.vyjezd__pozn{margin-top:14px;font-size:clamp(17px,1.5vw,21px);line-height:1.4;color:var(--pisek);max-width:24em}
.vyjezd__dalsi{margin-top:clamp(22px,3vw,40px);display:grid;gap:12px;max-width:34em}
.vyjezd__dalsi li{display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:700;font-size:clamp(17px,1.5vw,21px);line-height:1.25}
.opravy{--odbocka:calc(var(--trubka) + 30px)}
.opravy__nadpis{position:relative;font:400 clamp(1.7rem,3vw,2.6rem)/1 var(--nadpis);padding:12px 0 16px var(--odbocka);background:var(--trubka-svisle) 6px 0 / var(--trubka) 100% no-repeat}
.opravy__nadpis::before{content:'';position:absolute;left:0;top:0;width:30px;height:10px;background:var(--trubka-vodorovne)}
.opravy__seznam{display:grid}
.oprava{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;min-height:64px;padding:6px 0 6px var(--odbocka);background:var(--trubka-svisle) 6px 0 / var(--trubka) 100% no-repeat}
.oprava:last-child{background-size:var(--trubka) 50%}
.oprava::before{content:'';position:absolute;left:15px;top:50%;width:calc(var(--odbocka) - 22px);height:12px;margin-top:-6px;background:var(--trubka-vodorovne)}
.oprava::after{content:'';position:absolute;left:0;top:50%;width:30px;height:30px;margin-top:-15px;border:3px solid var(--cerna);border-radius:50%;background:var(--spojka)}
.oprava__text{display:grid;gap:1px}
.oprava__nazev{font-weight:700;font-size:clamp(18px,1.7vw,23px);line-height:1.2}
.oprava__pozn{font-size:17px;line-height:1.25;color:var(--kamen)}
.opravy__pozn{margin-top:18px;font-size:17px;color:var(--pisek)}
@media (min-width:900px){
  .cenik__hlava{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end}
  .cenik__mrizka{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:start}
  .vyjezd{position:sticky;top:32px}
}

/* ---------- závěr: čelist klíče přesahuje nad desku, nadpis musí mít odstup; úzký telefon má menší klíč ---------- */
@media (min-width:900px){.konec{gap:clamp(40px,6.4vw,92px)}}
@media (max-width:340px){.volat--konec{--klic-k:.46;width:100%}.volat--konec .volat__cislo{font-size:20px}}

/* ---------- hodiny ---------- */
.hodiny{margin-top:clamp(36px,6vw,88px);display:grid;gap:22px 48px;align-items:end}
.hodiny__stav{font:400 clamp(3rem,10.4vw,9rem)/.96 var(--nadpis);letter-spacing:-.015em;text-wrap:balance}
.hodiny__dny{display:grid;gap:2px;max-width:21em}
.hodiny__dny li{display:flex;justify-content:space-between;gap:28px;font:700 clamp(19px,1.9vw,26px)/1.3 var(--text)}
.hodiny__pozn{margin-top:10px;font-size:17px;font-weight:500;line-height:1.35;max-width:21em}
@media (min-width:900px){.hodiny{grid-template-columns:minmax(0,1fr) minmax(300px,auto)}}

/* ---------- vysvětlení ukázky ---------- */
.pop{--fokus:var(--cerna);width:27rem;max-width:calc(100vw - 2rem);padding:1.4rem 1.4rem 1.5rem;border:5px solid var(--cerna);border-radius:0;color:var(--cerna);background:var(--med)}
.pop::backdrop{background:rgb(26 17 11 / .74)}
.pop h2{font:400 clamp(1.5rem,6vw,1.9rem)/1.12 var(--nadpis);margin:0 0 .7rem}
.pop p{margin:0 0 1.2rem}
.pop__ok{appearance:none;display:block;width:100%;min-height:52px;border:0;border-radius:0;background:var(--cerna);color:var(--bila);font:700 18px/1 var(--text);cursor:pointer}
.pop__ok:hover{background:var(--tmava-nad)}
/* náhrada bez popover (Safari < 17): okno a ztmavení přepíná třída is-open; bez :popover-open, aby starý prohlížeč pravidlo nezahodil */
.pop-fb{display:none;position:fixed;top:50%;left:50%;z-index:100;margin:0;max-height:calc(100vh - 2rem);overflow:auto;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.pop-fb.is-open{display:block}
.pop-shade{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;background:rgba(26,17,11,.74)}
.pop-shade.is-open{display:block}
@media (prefers-reduced-motion:reduce){.lista{transition:none}}

/* ---------- kompozice: deska vpravo, klíč zleva; v úvodu pod textem, v závěru nad větou ---------- */
.uvod__akce{--s:calc(var(--cta-h) * var(--klic-k,.58) / 84);padding-top:calc(var(--s) * 26)}  /* místo pro čelist nad deskou, ať nesahá na podtitulek */
.uvod__akce .fake{text-align:right}
.uvod .volat--velke{--pr:126}
@media (max-width:354px){.uvod .fake{max-width:9.8em}}  /* poznámka se zalomí a nesahá ke klíči */
/* od šířky 560 px je klíč vidět celý: rukojeť vede dolů doleva pod text */
@media (min-width:560px){
  .uvod{--theta:27deg;padding-bottom:clamp(44px,9svh,96px)}
  .uvod__akce{padding-top:calc(var(--s) * 62)}
  .uvod .volat--velke{--pr:150;--ny:-14}
}
@media (min-width:560px) and (max-width:899px){.uvod .volat--velke{max-width:540px}}
@media (min-width:1100px) and (min-height:801px){
  .uvod__razitko{top:auto;bottom:calc(clamp(44px,9svh,96px) + var(--cta-h) + 48px);transform:rotate(9deg)}
}
.konec__akce{display:flex;flex-direction:column;align-items:flex-end}
.konec__akce .fake,.konec__pozn{text-align:right}
@media (max-width:374px){.konec__fake{max-width:9.8em}}  /* zalomení za pomlčkou, ať poznámka nesahá ke klíči a řádek pomlčkou nezačíná */
@media (max-width:559px){.konec__pozn{max-width:15em}}  /* na dva řádky, ať věta nesahá pod klíč */
/* FORMA-POLISH (generuje vizitka/tools/ukazky-polish.py) */
:where(input,textarea){caret-color:#1a110b}
:where(a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible){outline:3px solid #1a110b;outline-offset:3px}
:where(a){text-underline-offset:.2em}
:where(table,dd,time,data,[class*=cen],[class*=price],[class*=hod],[class*=hours],[class*=doba],[class*=kc]){font-variant-numeric:tabular-nums}
/* /FORMA-POLISH */