/* Ukazky strategickych smeru. Samostatny styl, s ostrym webem nesouvisi. */
:root{
  --ink:#151a20; --mute:#5b6672; --line:#e0e5ea; --bg:#fff; --soft:#f5f7f9;
  --deep:#0f1d2b; --accent:#d81f26; --accent-dk:#a91218;
  --tint:#f7f3ef;
  --container:1140px; --text-w:35em;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.65 "Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
/* height:auto je tu kvuli tomu, ze obrazky maji v HTML uvedene skutecne
   rozmery. Diky nim si prohlizec misto rezervuje uz pred stazenim
   a stranka pod prstem neposkoci, coz je na pomalem mobilnim pripojeni
   nejvic znat. Bez height:auto by se ale obrazek zuzeny pravidlem
   max-width roztahl na vysku z atributu a zdeformoval se. */
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-dk)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 26px}

/* hlavicka */
.top{border-bottom:1px solid var(--line);background:#fff}
.top .hlava{display:flex;align-items:center;justify-content:space-between;
  gap:26px;padding-top:15px;padding-bottom:15px;flex-wrap:wrap}
.navbar{border-top:1px solid var(--line);background:#fbfcfd}
.navbar .wrap{padding-top:0;padding-bottom:0}
.brand{text-decoration:none;line-height:1.05;flex:0 0 auto;display:block}
.brand img{height:46px;width:auto}
.brand span{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
  color:var(--mute);text-transform:uppercase;margin-top:7px}
.nav{display:flex;gap:30px;font-size:16px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;opacity:.82;padding:14px 0 13px;
  border-bottom:3px solid transparent;margin-bottom:-1px}
.nav a:hover{opacity:1;color:var(--accent-dk)}
.nav a.on{opacity:1;color:var(--accent-dk);font-weight:600;
  border-bottom-color:var(--accent)}
.tel-btn{display:inline-block;background:var(--accent);color:#fff;
  text-decoration:none;padding:8px 20px 10px;border-radius:4px;
  font-size:21px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  line-height:1.15;flex:0 0 auto}
/* Jmeno nad cislem je vlastni radek. Predvolba naopak zustava v radku
   s cislem, jinak by se telefon rozpadl na tri radky. */
.tel-btn .jmeno{display:block;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;opacity:.85;margin-bottom:1px}
.tel-btn .pred{display:inline}
.tel-btn:hover{background:var(--accent-dk)}

/* pruh, ktery rika, kterou ukazku si prohlizite */
.varbar{background:#1b2836;color:#c8dae8;font-size:14px}
.varbar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.varbar b{color:#fff}
.varianty{display:flex;gap:7px;align-items:center}
.varianty a{display:inline-block;padding:2px 8px;border:1px solid #3d566e;
  border-radius:3px;text-decoration:none;color:#c8dae8;font-weight:600}
.varianty a.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* hero na svetlem podkladu, aby bile pozadi fotek nebylo videt */
.hero{background:linear-gradient(180deg,#fff 0%,#f2f5f7 100%);
  padding:60px 0 58px;border-bottom:1px solid var(--line)}
.hero .eyebrow{color:var(--accent);font-size:13px;letter-spacing:.15em;
  text-transform:uppercase;margin:0 0 16px;font-weight:600}
.hero h1{font-size:clamp(29px,4.1vw,45px);line-height:1.16;margin:0 0 20px;
  max-width:16em;font-weight:700;letter-spacing:-.016em;color:var(--deep)}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{font-size:18px;line-height:1.6;max-width:var(--text-w);
  color:#46515e;margin:0 0 28px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:center}
/* fotky maji ciste bile pozadi; multiply ho slije s podkladem stranky */
.hero-grid img{mix-blend-mode:multiply}
/* Petrovy fotky (od 19. 10. 2026): skutecna scena, ne dil na bilem,
   takze bez multiply, ktere by je ztmavilo */
img.foto{mix-blend-mode:normal;display:block;width:100%;height:auto;border-radius:4px}
.kontakt-uvod{display:grid;grid-template-columns:1.3fr .7fr;gap:46px;align-items:center;
  margin-bottom:36px}
.kontakt-uvod .sub{margin-bottom:0}
.kontakt-foto{margin:0}
.kontakt-foto figcaption{font-size:14px;line-height:1.5;color:var(--mute);margin-top:12px}
@media(max-width:980px){
  .kontakt-uvod{grid-template-columns:1fr;gap:26px}
  .kontakt-foto,.hero-grid img.foto{max-width:420px}
}
.floor{margin:24px 0 0;font-size:15px;color:#5b6672;max-width:var(--text-w);
  border-left:2px solid var(--line);padding-left:16px}

/* tlacitka */
.btns{display:flex;gap:13px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:16px;
  padding:14px 24px;border-radius:3px;border:1px solid transparent}
.btn-main{background:var(--accent);color:#fff}
.btn-main:hover{background:var(--accent-dk)}
.btn-ghost{border-color:#b9c4ce;color:var(--deep)}
.btn-ghost:hover{background:#fff;border-color:var(--deep)}
.band .btn-ghost{border-color:#7f94a8;color:#fff}
.band .btn-ghost:hover{background:#1b2f42}

/* sekce */
section{padding:60px 0}
.soft{background:var(--soft)}
.tint{background:var(--tint)}
h2{font-size:clamp(23px,2.9vw,33px);line-height:1.24;margin:0 0 14px;
  max-width:21em;letter-spacing:-.012em}
h2.uzsi{max-width:16em}
.sub{color:var(--mute);max-width:var(--text-w);margin:0 0 32px;font-size:17px}
.pozn{max-width:52em;margin:22px 0 0;font-size:15px;color:var(--mute)}
p{max-width:var(--text-w)}
.arrow{font-weight:600;text-decoration:none;border-bottom:1px solid #e8b3b6}
.arrow:after{content:" \203A";font-weight:700}

.three{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.three h3{font-size:19px;margin:0 0 10px;line-height:1.32}
.three p{font-size:16px;color:#404a56;margin:0;max-width:none}
.num{display:inline-block;font-size:13px;font-weight:700;color:var(--accent);
  letter-spacing:.1em;margin-bottom:11px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#fff}
.card .foto{background:#fff;border-bottom:1px solid var(--line);height:184px;
  display:flex;align-items:center;justify-content:center;padding:16px}
.card .foto img{max-height:100%;width:auto;object-fit:contain}
/* Rez spojem misto fotky vyrobku. Kresba dostane klidnejsi podklad,
   aby tenke linky nesplyvaly s bilou kartou. */
.card .foto.rez{background:var(--soft);padding:14px 18px}
.card .foto.rez .schema{max-height:100%;width:100%;height:auto}
.card .in{padding:18px 20px 22px}
.card h3{font-size:17px;margin:0 0 4px}
.card .obor{font-size:13px;color:var(--accent);letter-spacing:.04em;
  text-transform:uppercase;font-weight:600;margin:0 0 9px}
.card p{font-size:15px;color:#4a545f;margin:0;max-width:none}
.card .done{display:block;margin-top:13px;font-size:13px;color:var(--mute);
  border-top:1px solid var(--line);padding-top:11px}

/* dva pilire */
.dve{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pilir{border:1px solid var(--line);border-radius:4px;background:#fff;
  padding:30px 32px 28px}
.pilir .obor{font-size:13px;color:var(--accent);letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;margin:0 0 10px}
.pilir h3{font-size:24px;margin:0 0 12px;line-height:1.25;color:var(--deep)}
.pilir p{font-size:16px;color:#404a56;max-width:none}
.pilir ul{padding-left:19px;margin:14px 0 18px;color:#404a56;font-size:16px}
.pilir li{margin-bottom:7px}

/* dvousloupec s vysvetlenim a vypisem */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.callout{background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:3px;padding:24px 27px}
.callout p{max-width:none}
.callout ol{padding-left:20px;margin:12px 0 14px}
.callout li{margin-bottom:9px;font-size:16px;color:#404a56}

/* postup po krocich */
.kroky{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.krok{border:1px solid var(--line);border-radius:4px;padding:19px 20px 21px;
  background:#fff}
.krok b{display:block;font-size:13px;font-weight:700;color:var(--accent);
  letter-spacing:.1em;margin-bottom:9px}
.krok h3{margin:0 0 7px;font-size:17px;line-height:1.3}
.krok p{font-size:15px;color:#4a545f;margin:0;max-width:none}

/* pruh duvery */
.proof{padding:36px 0 34px;border-bottom:1px solid var(--line)}
.proof-line{font-size:16px;color:#46515e;max-width:60em;margin:0}
.loga{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin:18px 0 0}
.loga img{height:44px;width:156px;object-fit:contain;filter:grayscale(1);opacity:.62}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px;
  border-top:1px solid var(--line);padding-top:24px;max-width:none}
.facts b{display:block;font-size:20px;color:var(--deep);line-height:1.2}
.facts span{display:block;font-size:14px;color:var(--mute);margin-top:5px}

/* tabulky */
.tbl{width:100%;border-collapse:collapse;margin-top:20px;font-size:16px}
.tbl th,.tbl td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);
  vertical-align:top}
.tbl th{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);
  font-weight:600}
.tbl td.cena{white-space:nowrap;font-weight:600}
.tbl tr:hover td{background:#fafbfc}
.tbl-wrap{overflow-x:auto}

/* ------------------------------------------------- tabulky na telefonu
   Zmereno 10. 9. 2026 na iPhonu SE: tabulka o trech sloupcich potrebuje
   kolem 480 bodu, obsahovy sloupec ma 323. Posouvani do stran sice
   fungovalo, ale nikdo ho nepoznal. Navstevnik videl dva a pul sloupce
   a usekly treti, coz vypada jako rozbita stranka. A prave ve tretim
   sloupci u nas byva to nejcennejsi, tedy "Proc prave ta".

   Tabulky do ctyr sloupcu se proto na uzkem displeji rozlozi: kazdy
   radek je samostatna karticka a kazda hodnota ma nad sebou nazev sveho
   sloupce. Nazev nese atribut data-hl, ktery dopisuje mobil.py pri
   sestaveni stranky. Bez nej by tabulka zustala tabulkou, takze kdyby
   se ten krok nekdy vypnul, web se jen vrati k puvodnimu chovani. */
@media(max-width:560px){
  .tbl[data-sl="2"],.tbl[data-sl="3"],.tbl[data-sl="4"]{display:block;
    font-size:16px;margin-top:16px}
  /* Radek se zahlavim se skryva, protoze nazev sloupce ted nese kazda
     bunka sama. Trida prichazi z mobil.py. */
  .tbl[data-sl="2"] tr.tbl-hl,.tbl[data-sl="3"] tr.tbl-hl,
  .tbl[data-sl="4"] tr.tbl-hl{display:none}
  .tbl[data-sl="2"] tbody,.tbl[data-sl="3"] tbody,.tbl[data-sl="4"] tbody,
  .tbl[data-sl="2"] tr,.tbl[data-sl="3"] tr,.tbl[data-sl="4"] tr{display:block}
  .tbl[data-sl="2"] tr,.tbl[data-sl="3"] tr,.tbl[data-sl="4"] tr{
    border:1px solid var(--line);border-radius:6px;padding:4px 15px 12px;
    margin-bottom:12px;background:#fff}
  .tbl[data-sl="2"] tr:hover td,.tbl[data-sl="3"] tr:hover td,
  .tbl[data-sl="4"] tr:hover td{background:none}
  .tbl[data-sl="2"] td,.tbl[data-sl="3"] td,.tbl[data-sl="4"] td{display:block;
    border:0;padding:9px 0 0;vertical-align:top}
  /* Nazev sloupce nad hodnotou. Stejna sazba jako mela hlavicka tabulky,
     aby to bylo poznat jako zahlavi a ne jako dalsi text. */
  .tbl[data-sl="2"] td:before,.tbl[data-sl="3"] td:before,
  .tbl[data-sl="4"] td:before{content:attr(data-hl);display:block;
    font-size:12px;letter-spacing:.07em;text-transform:uppercase;
    color:var(--mute);font-weight:700;margin-bottom:3px}
  /* Prazdne zahlavi zadny popisek nekresli. */
  .tbl td[data-hl=""]:before{content:none}
  /* Prvni hodnota v karticce je zaroven jeji nadpis, takze nad ni nazev
     sloupce nepatri. Opakovat "CO POŘIZUJETE" nad kazdou z osmi kartiček
     je sum, ktery nic nerika. */
  .tbl[data-sl="2"] td:first-child,.tbl[data-sl="3"] td:first-child,
  .tbl[data-sl="4"] td:first-child{font-weight:700;color:var(--deep);
    font-size:17px;padding-top:8px}
  .tbl[data-sl="2"] td:first-child:before,
  .tbl[data-sl="3"] td:first-child:before,
  .tbl[data-sl="4"] td:first-child:before{content:none}
  .tbl[data-sl="2"] td.cena,.tbl[data-sl="3"] td.cena,
  .tbl[data-sl="4"] td.cena{white-space:normal}
}

/* Siroka tabulka se nerozklada, jen posouva. Stin na okraji je videt
   jen dokud je kam posouvat, takze sam rika, ze tam jeste neco je.
   Dela to background-attachment: local u bilych prechodu, ktere se
   posouvaji s obsahem, proti scroll u stinu, ktery stoji na miste. */
.tbl-wrap.siroka{
  background:
    linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left center,
    linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,rgba(20,30,45,.16),transparent)
      left center,
    radial-gradient(farthest-side at 100% 50%,rgba(20,30,45,.16),transparent)
      right center;
  background-repeat:no-repeat;
  background-size:34px 100%,34px 100%,13px 100%,13px 100%;
  background-attachment:local,local,scroll,scroll}

.band{background:var(--deep);color:#fff}
.band h2{color:#fff}
.band .sub,.band .pozn{color:#c3d2df}
.band ol{max-width:var(--text-w);color:#dbe5ed;padding-left:20px}
.band li{margin-bottom:10px}

/* zaverecna vyzva pres celou sirku */
.zaver-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.zaver-grid h2{margin-bottom:12px}
.zaver-box{background:#16283a;border:1px solid #2c4257;border-radius:4px;
  padding:26px 28px}
.zaver-box p{max-width:none;color:#c3d2df;font-size:16px;margin:0 0 16px}
.zaver-box .cislo{display:block;font-size:27px;font-weight:700;color:#fff;
  margin-bottom:3px;text-decoration:none}
.zaver-box .cislo:hover{color:#f5a0a4}
.zaver-box .mail{color:#fff;font-size:18px;text-decoration:none;font-weight:600}
/* fotka nad vetou "Telefon zveda Petr Bernard", jen na titulni strane;
   siroka pres celou kartu, takze odecita jeji vnitrni okraj */
.zaver-foto{margin:-26px -28px 22px}
.zaver-foto img.foto{border-radius:4px 4px 0 0}

.quote{border-left:3px solid var(--accent);padding:4px 0 4px 22px;
  font-size:20px;line-height:1.5;max-width:27em;margin:0 0 24px;font-weight:600}

/* caste otazky */
.faq{max-width:52em;border-top:1px solid var(--line);margin-top:6px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:17px 34px 17px 0;font-weight:600;
  font-size:18px;list-style:none;position:relative;color:var(--deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:15px;
  color:var(--accent);font-weight:700;font-size:22px;display:inline-block;
  transition:transform .15s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq .odp{padding:0 0 18px}
.faq .odp p{margin:0 0 10px;max-width:46em;color:#404a56;font-size:16px}

/* formular jako sito */
.form{max-width:44em;background:#fff;border:1px solid var(--line);
  border-radius:4px;padding:28px 30px 30px}
.pole{margin-bottom:20px}
.pole>label{display:block;font-weight:600;margin-bottom:6px;font-size:16px;
  color:var(--deep)}
.pole .hint{display:block;font-weight:400;color:var(--mute);font-size:14px;
  margin-bottom:8px}
.pole select,.pole input,.pole textarea{width:100%;padding:11px 12px;
  border:1px solid #c6cfd8;border-radius:3px;font:inherit;font-size:16px;
  background:#fff;color:var(--ink)}
.pole textarea{min-height:110px;resize:vertical}
.dvojice{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stopka{background:#fdf3f4;border:1px solid #e8bcbe;border-left:3px solid var(--accent);
  border-radius:3px;padding:22px 24px;margin-bottom:6px}
.stopka h3{margin:0 0 10px;font-size:19px}
.stopka p{margin:0 0 10px;font-size:16px;max-width:none;color:#404a56}
.souhlas{font-size:14px;color:var(--mute);max-width:none;margin:14px 0 20px}
/* Zaskrtavatko souhlasu se zasilanim. Musi byt zretelne oddelene od
   ostatniho textu, aby bylo videt, ze je dobrovolne a nezaskrtnute. */
.souhlas-box{display:flex;gap:10px;align-items:flex-start;
  margin:0 0 20px;padding:12px 14px;border:1px solid var(--line);
  border-radius:4px;background:#fafafa;cursor:pointer}
.souhlas-box input{margin:2px 0 0;width:18px;height:18px;flex:0 0 auto;
  cursor:pointer}
.souhlas-box span{font-size:14px;line-height:1.55;color:var(--ink)}

.text p,.text li{max-width:44em}
.text ul{padding-left:20px}
.text li{margin-bottom:9px}

/* Typografie souvisleho textu. Doplneno 23. 9. 2026.
   Na strankach, kde je cela stranka jeden text, nema h2 odkud vzit horni
   odstup, protoze neotvira sekci. Bez nej se mezinadpis slepi s rameckem
   nad sebou. Zaroven je v souvislem textu mensi nez titulek, jinak neni
   poznat, co je nadrazene cemu. */
.text h2{font-size:clamp(21px,2.1vw,26px);margin:54px 0 12px}
.text h2:first-child{margin-top:0}
.text h3{font-size:19px;margin:34px 0 10px}
.text .callout{margin:30px 0}
.text .callout + h2{margin-top:46px}
.text > p:first-child,.text > .sub:first-of-type{margin-top:0}
.text .pozn{margin:14px 0 0}

footer{border-top:1px solid var(--line);padding:28px 0 34px;color:var(--mute);
  font-size:15px;background:var(--soft)}
footer .fwrap{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap}
footer a{color:var(--mute)}

@media(max-width:980px){
  .hero-grid,.grid-2,.dve,.zaver-grid{grid-template-columns:1fr;gap:30px}
  .three,.cards,.facts{grid-template-columns:1fr}
  .kroky{grid-template-columns:1fr 1fr}
  .nav{gap:16px;font-size:14px}
  .dvojice{grid-template-columns:1fr}
}


/* ---------------------------------------------------- vlastni schemata (SVG) */
.schema{width:100%;height:auto;display:block}
.krok .schema{margin:0 0 14px;max-width:200px}

/* sedm technologii: schema vlevo, text vpravo */
.tech-mrizka{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.tech{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:start;
  border:1px solid var(--line);border-radius:4px;background:#fff;padding:20px 22px}
.tech-obr{background:var(--soft);border-radius:3px;padding:10px}
.tech-in h3{font-size:18px;margin:0 0 8px;line-height:1.3;color:var(--deep)}
.tech-in p{font-size:15px;color:#4a545f;margin:0 0 8px;max-width:none}
.tech-in .naraz{color:var(--mute);margin:0}
.tech-in .naraz b{color:var(--accent-dk)}

/* casova osa */
.osa-wrap{overflow-x:auto;margin:6px 0 10px}
.osa-wrap .schema{min-width:700px}
/* Na telefonu osa mizi. Potrebuje 700 bodu a do 375 se jich vejde
   tricet procent, takze navstevnik videl tri z osmi milniku a zbytek
   useknuty. Nic se tim neztraci: tabulka hned pod osou nese tytez
   milniky a k tomu i sloupec, proc to tak dlouho trva. Na uzkem displeji
   je osa cista duplicita, ktera zabira misto a vypada rozbite. */
@media(max-width:560px){.osa-wrap{display:none}}
.osa-kdy{font-size:13px;fill:var(--mute);font-family:inherit}
.osa-co{font-size:14px;fill:var(--deep);font-weight:600;font-family:inherit}
.tbl td.kdy{white-space:nowrap;color:var(--mute);font-size:15px}

@media(max-width:980px){
  .tech-mrizka{grid-template-columns:1fr}
  .tech{grid-template-columns:120px 1fr;gap:16px;padding:16px 18px}
}

/* ------------------------------------------------------------- kalkulacky */
.kalk{border:1px solid var(--line);border-radius:5px;background:#fff;overflow:hidden;
  max-width:62em}
.kalk-hlava{padding:26px 30px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff 0%,#fafbfc 100%)}
.kalk-hlava h3{margin:0 0 8px;font-size:24px;line-height:1.25;color:var(--deep)}
.kalk-hlava p{margin:0;font-size:16px;color:var(--mute);max-width:44em}
.kalk-telo{padding:24px 30px 28px}
.kalk-pole{margin-bottom:18px}
.kalk-pole label{display:block;font-weight:600;margin-bottom:6px;font-size:16px;
  color:var(--deep)}
.kalk-pole .hint{display:block;font-weight:400;color:var(--mute);font-size:14px;
  margin-bottom:8px}
.kalk-pole select,.kalk-pole input{width:100%;padding:11px 12px;
  border:1px solid #c6cfd8;border-radius:3px;font:inherit;font-size:16px;
  background:#fff;color:var(--ink)}
.kalk-dvojice{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.kalk-vysledek{margin-top:24px;border-top:2px solid var(--line);padding-top:22px}
.kalk-radek{display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;padding:9px 0;border-bottom:1px solid var(--line);font-size:16px}
.kalk-radek span{color:var(--mute)}
.kalk-radek b{color:var(--deep);white-space:nowrap;text-align:right}
.kalk-cislo{display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;padding:14px 0 12px;border-bottom:1px solid var(--line)}
.kalk-cislo span{color:var(--mute);font-size:16px}
.kalk-cislo b{color:var(--accent);font-size:27px;line-height:1.1;white-space:nowrap;
  text-align:right}
.kalk-pozn{font-size:15px;color:var(--mute);margin:16px 0 0;max-width:none}
.kalk-pozn b{color:var(--deep)}
.kalk-stop{background:#fdf3f4;border-left:3px solid var(--accent);border-radius:3px;
  padding:16px 18px;margin:18px 0 0;font-size:16px;color:#404a56;max-width:none}
.kalk-cta{margin-top:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.kalk-cta span{font-size:15px;color:var(--mute);max-width:22em}

@media(max-width:980px){
  .kalk-dvojice{grid-template-columns:1fr;gap:0}
  .kalk-hlava,.kalk-telo{padding-left:20px;padding-right:20px}
  .kalk-cislo b{font-size:23px}
}

/* Nadpis stranky mimo hero sekci vypada stejne jako h2, jen je to H1. */
h1{font-size:clamp(23px,2.9vw,33px);line-height:1.24;margin:0 0 14px;
  max-width:21em;letter-spacing:-.012em;font-weight:700;color:var(--ink)}
h1.uzsi{max-width:16em}

/* ------------------------------------------------------- uzitecne pomucky */
.obsah{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;padding:0;
  margin:8px 0 0;max-width:62em}
.obsah a{display:inline-block;padding:8px 15px;border:1px solid var(--line);
  border-radius:100px;text-decoration:none;font-size:15px;font-weight:600;
  color:var(--deep);background:#fff}
.obsah a:hover{border-color:var(--accent);color:var(--accent-dk)}

/* znacky ano/ne/podminecne v tabulkach */
.zn{display:inline-block;font-size:14px;font-weight:600;white-space:nowrap;
  padding:2px 9px;border-radius:100px;line-height:1.5}
.zn-je{background:#e8f3ec;color:#1d6b3a}
.zn-neni{background:#f6eaea;color:#96331f}
.zn-mozna{background:#fbf1e3;color:#8a5a12}
.tbl-plasty{font-size:15px}
.tbl-plasty th{font-size:12px}
.tbl-plasty td.cis{white-space:nowrap}
/* Zmereno 23. 9. 2026: pri okne 1280 mela tabulka 1158 bodu proti obsahovemu
   sloupci 1088, tedy pretekala o 70 a musela se posouvat mysi i na notebooku.
   Petr na to v hlasove zprave narazil. Deset sloupcu krat 28 bodu odsazeni
   delalo 280 bodu, ze kterych se da ubrat, aniz by se muselo zmensovat pismo.
   Pismo zustava na 15 bodech, jen se zuzily mezery. */
.tbl-plasty th,.tbl-plasty td{padding:11px 9px}
.tbl-plasty .zn{padding:2px 7px}
/* Kdyz uz se posouvat musi, protoze je okno uzsi, zkratka plastu zustava
   stat na miste. Bez toho clovek pri posunu ztrati radek, o ktery mu slo. */
@media(max-width:1150px){
  .tbl-plasty th:first-child,.tbl-plasty td:first-child{
    position:sticky;left:0;background:#fff;z-index:1}
  .tbl-plasty tr:hover td:first-child{background:#fafbfc}
}

.pozn-mrizka{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px;
  margin-top:24px;border-top:1px solid var(--line);padding-top:22px}
.pozn-mrizka p{font-size:15px;color:#4a545f;margin:0;max-width:none}
.pozn-mrizka b{color:var(--deep)}

/* konstrukce spoje */
.spoje{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.spoj{border:1px solid var(--line);border-radius:4px;background:#fff;
  padding:22px 24px 24px}
.spoj-obr{background:var(--soft);border-radius:3px;padding:8px;margin-bottom:16px}
.spoj-in h3{font-size:19px;margin:0 0 9px;color:var(--deep)}
.spoj-in p{font-size:15px;color:#4a545f;margin:0 0 10px;max-width:none}
.spoj-in .pravidlo{color:var(--mute);margin:0;padding-top:10px;
  border-top:1px solid var(--line)}
.spoj-in .pravidlo b{color:var(--accent-dk)}
.pop{font-size:11px;fill:var(--mute);font-family:inherit}

/* vypocty */
.vyp-mrizka{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vyp{border:1px solid var(--line);border-radius:4px;background:#fff;
  padding:22px 24px 20px}
.vyp h3{font-size:18px;margin:0 0 6px;color:var(--deep)}
.vyp-vzorec{font-size:15px;color:var(--accent-dk);margin:0 0 16px;
  font-weight:600;max-width:none}
.vyp-radek{display:flex;justify-content:space-between;align-items:center;
  gap:14px;margin-bottom:11px}
.vyp-radek label{font-size:15px;color:#4a545f}
.vyp-radek span{white-space:nowrap;font-size:14px;color:var(--mute)}
.vyp-radek input,.vyp-radek select{width:96px;padding:7px 9px;
  border:1px solid #c6cfd8;border-radius:3px;font:inherit;font-size:15px;
  text-align:right;background:#fff;color:var(--ink)}
.vyp-radek select{width:150px;text-align:left}
.vyp-out{margin-top:14px;padding-top:14px;border-top:2px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap}
.vyp-out b{font-size:25px;color:var(--accent);line-height:1.1}
.vyp-out span{font-size:14px;color:var(--mute)}
.vyp-pozn{font-size:14px;color:var(--mute);margin:12px 0 0;max-width:none}

/* dvanact otazek */
.otazky{counter-reset:o;list-style:none;padding:0;margin:0;max-width:56em;
  display:grid;grid-template-columns:1fr 1fr;gap:18px 30px}
.otazky li{counter-increment:o;position:relative;padding-left:42px}
.otazky li:before{content:counter(o,decimal-leading-zero);position:absolute;
  left:0;top:1px;font-size:14px;font-weight:700;color:var(--accent);
  letter-spacing:.06em}
.otazky b{display:block;font-size:16px;color:var(--deep);margin-bottom:4px;
  line-height:1.35}
.otazky span{font-size:15px;color:var(--mute)}

@media(max-width:980px){
  .spoje,.vyp-mrizka,.otazky,.pozn-mrizka{grid-template-columns:1fr}
  .obsah a{font-size:14px;padding:7px 13px}
}

/* titulek nad pruhem s logy */
.proof-h2{font-size:clamp(20px,2.2vw,26px);margin:0 0 10px;color:var(--deep)}

/* karta v hero sekci misto fotky */
.hero-karta{background:#fff;border:1px solid var(--line);border-radius:5px;
  padding:26px 28px 24px;box-shadow:0 1px 3px rgba(15,29,43,.05)}
.karta-nadpis{font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin:0 0 14px;max-width:none}
.hero-karta ul{list-style:none;padding:0;margin:0}
.hero-karta li{position:relative;padding-left:26px;margin-bottom:11px;
  font-size:16px;color:#404a56;line-height:1.45}
.hero-karta li:before{content:"";position:absolute;left:0;top:9px;width:11px;
  height:2px;background:var(--accent)}
.karta-patka{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:15px;color:var(--mute);max-width:none}

/* vyzva primo v navigaci */
.nav-cta{background:var(--accent);color:#fff !important;opacity:1 !important;
  padding:8px 16px !important;border-radius:100px;font-weight:600;
  border-bottom:0 !important;margin-bottom:0 !important;white-space:nowrap}
.nav-cta:hover{background:var(--accent-dk);color:#fff !important}
.nav{gap:22px;font-size:15px}

/* hledani ve slovnicku */
.hledani{margin:24px 0 4px;max-width:var(--text-w)}
.hledani label{display:block;font-size:13px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:7px}
.hledani input{width:100%;padding:12px 14px;font:inherit;font-size:17px;
  border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--deep)}
.hledani input:focus{outline:2px solid var(--accent);outline-offset:1px;
  border-color:var(--accent)}
.hledani-pocet{font-size:15px;color:var(--mute);margin:9px 0 0;min-height:1.4em}

/* pokyn k posunuti siroke tabulky, jen na uzkych displejich */
.posun{display:none;font-size:15px;color:var(--mute);margin:18px 0 0}

@media(max-width:700px){
  .posun{display:block}
  .tbl-plasty th,.tbl-plasty td{padding:9px 8px;font-size:14px}
  .tbl-plasty th:nth-child(2),.tbl-plasty td:nth-child(2){display:none}
  .tbl-plasty th:first-child,.tbl-plasty td:first-child{
    position:sticky;left:0;background:#fff;z-index:1}
  .zn{font-size:13px;padding:2px 7px}
}

/* pobidka ke stazeni pruvodce */
.magnet{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;
  align-items:center}
.magnet h2{margin:0 0 10px}
.magnet .sub{margin:0}
.magnet-stitek{font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin:0 0 9px;max-width:none}
.band .magnet-stitek{color:#f5a0a4}
.magnet-cta p{font-size:14px;margin:12px 0 0;max-width:20em}
.band .magnet-cta p{color:#c3d2df}
@media(max-width:980px){
  .magnet{grid-template-columns:1fr;gap:22px}
}



/* ==================================================================
   Tisknutelny pruvodce, obe verze (v1 pribeh, v2 kapitoly).

   Tri pravidla, na kterych sazba stoji:

   1. Sloupec textu ma 60 az 65 znaku na radek. Sirsi radek se cte hure,
      protoze oko ztraci navaznost pri navratu na zacatek dalsiho radku.
      Sirku sloupce ridi promenna --odsad, ktera ukrajuje zprava.
   2. Vsechno zacina na jedne leve ose. Nadpis, odstavec, tabulka i linka.
      Volny pruh vpravo je zamerny a dela dokumentu vzduch.
   3. Do plne sirky jdou jen tabulky. Vsechno ostatni drzi sloupec
      a zadny blok nema ramecek, takze se da zalomit kdekoliv a stranky
      se zaplni.
   ================================================================== */
.tisk{background:#fff}
.dok{--odsad:205px;padding:36px 0 60px;
  font:400 17px/1.72 "Segoe UI",system-ui,-apple-system,Arial,sans-serif}
.dok .wrap{max-width:760px;margin:0 auto}
.dok p{max-width:none;margin:0 0 1.05em}

/* bloky, ktere drzi ctecí sloupec */
.dok-znacka,.dok-obalka,.dok-priznani,.dok-uvod,.dok-obsah,.kap,
.dok-soucet,.dok-epilog,.dok-priloha,.dok-patka,.dok-vizitka,
.dok-volne{padding-right:var(--odsad)}
/* Kontaktni radek na titulni strane odsazeni nepotrebuje, zadna
   poznamka na okraji tam nestoji. S nim se lamal uprostred
   e-mailove adresy. */
.dok-obalka .obalka-pata{margin-right:calc(-1 * var(--odsad))}

/* do plne sirky jde uz jen tabulka */
.dok .tbl-wrap{margin-right:calc(-1 * var(--odsad))}
.dok .tbl tr:hover td{background:none}

.dok-znacka{display:flex;justify-content:space-between;align-items:center;
  gap:18px;font-size:13px;color:var(--mute)}
.dok-znacka img{height:30px;width:auto}
.dok-znacka b{color:var(--deep)}

/* titulni strana: nadpis, jedna linka, lead, kontakt. Nic vic. */
.dok-obalka{padding-top:110px;margin-bottom:60px}
.obalka-stitek{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--mute);margin:0 0 28px}
.dok-obalka h1{font-size:38px;line-height:1.2;letter-spacing:-.01em;
  margin:0 0 26px}
.obalka-cara{width:56px;height:2px;background:var(--accent);margin:0 0 26px}
.obalka-lead{font-size:17px;line-height:1.65;color:#3d4752;margin:0}
.obalka-pata{margin-top:96px;padding-top:14px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--mute)}
.obalka-pata p{margin:0 0 4px}
.obalka-pata b{color:var(--deep)}
/* Na papire je tirazni blok drobnym pismem spravne, na telefonu uz ne.
   Sedych 13,5 bodu se na displeji sirokem 375 bodu cte spatne, a je to
   jedine misto v celem pruvodci, kde k tomu dochazi. Tisku se to netyka,
   ten ma vlastni pravidla v @media print. */
@media(max-width:620px){.obalka-pata{font-size:15px}}

/* uvodni bloky */
.dok-priznani{border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding-top:18px;padding-bottom:18px;
  margin:0 0 40px}
.dok-priznani p{font-size:15px;line-height:1.65;color:var(--mute);
  margin:0 0 9px}
.dok-priznani p:last-child{margin:0}
.dok-priznani b{color:var(--deep)}
.dok-uvod{margin-bottom:44px}
.dok-uvod h2,.dok-priloha h2,.dok-obsah h2,.dok-soucet h2,.dok-epilog h2,
.dok-hlava h2{font-size:23px;line-height:1.32;margin:0 0 18px;
  letter-spacing:-.01em}
.uvod-duraz{border-left:2px solid var(--deep);padding:3px 0 3px 20px;
  font-size:17.5px;line-height:1.6;color:var(--deep);margin:26px 0}

/* dvanact otazek na jedne strance */
.dok-obsah{border-top:1px solid var(--line);padding-top:30px;margin:0 0 46px}
.obsah-tbl{font-size:15px;margin-top:18px}
.obsah-tbl td.cis{color:var(--mute);width:1%;white-space:nowrap}
.obsah-tbl td.kdy{white-space:nowrap;color:var(--mute);width:1%;font-size:15px}
.obsah-tbl td.stalo{font-weight:600;color:var(--deep)}

/* kapitola */
.kap{border-top:1px solid var(--line);padding-top:34px;margin-bottom:46px}
.kap-stitek{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--mute);margin:0 0 10px}
.kap h2{font-size:23px;line-height:1.32;margin:0 0 14px;letter-spacing:-.01em}
.kap-otazka{font-size:15px;line-height:1.6;color:var(--mute);margin:0 0 24px}
.kap-otazka b{color:var(--deep);font-weight:600}

.kap-pozn{border-left:2px solid var(--deep);padding:3px 0 3px 20px;
  margin:28px 0}
.kap-pozn-hlava{font-size:12px !important;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--mute);
  margin:0 0 8px !important}
.kap-pozn p:last-child{font-size:17.5px;line-height:1.55;font-style:italic;
  color:var(--deep);margin:0}

/* Zaver kapitoly: tri bloky nad sebou, kazdy oddeleny vlasovou linkou.
   Zadny ramecek, protoze ten se pri zalomeni stranky rozpulí a vypada
   utrzene. Takto se zalomeni nepozna. */
.kap-dvojice{margin:30px 0 0}
.kap-ano,.kap-ne{border-top:1px solid var(--line);padding:13px 0 4px}
.kap-hlava{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;margin:0 0 7px;color:var(--mute)}
.kap-ne .kap-hlava{color:var(--accent)}
.kap-ano p,.kap-ne p{margin:0;font-size:15px;line-height:1.6;max-width:none}

.kap-cena{display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;border-top:1px solid var(--line);padding-top:13px;
  margin-top:18px;margin-bottom:0}
.kap-cena span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--mute)}
.kap-cena b{font-size:16px;font-weight:600;color:var(--accent);text-align:right}

/* soucet a epilog */
.dok-soucet{border-top:1px solid var(--line);padding-top:32px;
  margin:52px 0 40px}
.soucet-tbl{font-size:15px}
.dok-soucet .tbl-wrap,.dok-obsah .tbl-wrap{margin-bottom:20px}
.soucet-pointa{border-left:2px solid var(--deep);padding:3px 0 3px 20px;
  font-size:17.5px;line-height:1.6;color:var(--deep);margin:28px 0}
.dok-epilog{border-top:1px solid var(--line);padding-top:32px;
  margin:52px 0 40px}
.podpis{margin-top:26px}

/* prilohy a paticka */
.dok-priloha{border-top:1px solid var(--line);padding-top:30px;
  margin-bottom:38px;page-break-inside:avoid;break-inside:avoid}
.dok-seznam{padding-left:22px;font-size:16px;line-height:1.6}
.dok-seznam li{margin-bottom:11px}
.dok-patka{border-top:2px solid var(--deep);padding-top:26px;font-size:16px}
.dok-volne{font-size:14px;color:var(--mute)}

/* starsi varianty pruvodce, ktere se uz negeneruji */
.dok-hlava{border-bottom:2px solid var(--accent);padding:14px 0 24px;
  margin-bottom:32px}
.dok-nadpis{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--mute);margin:0 0 10px}
.dok-lead{font-size:18px;line-height:1.6;color:#3d4752}
.dok-pozn{font-size:15px;color:var(--mute)}
.kap-cislo{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--mute);margin:0 0 8px}

@media(max-width:900px){
  .dok{--odsad:0px}
  .dok-obalka{padding-top:40px;margin-bottom:40px}
  .dok-obalka h1{font-size:29px}
  .obalka-pata{margin-top:48px}
  .kap-cena{flex-direction:column;gap:6px}
  .kap-cena b{text-align:left}
  .obalka-lead{font-size:16px}
}

/* --------------------------------------------------------------- tisk
   A4 s okraji 20 mm ma 170 mm cisté sirky. Sloupec textu z toho bere
   116 mm, coz je pri 10,5 bodu zhruba 63 znaku na radek. Zbylych 54 mm
   je volny pruh vpravo.
   ------------------------------------------------------------------ */
@media print{
  .top,.varbar,footer,.magnet,.btns,.tel-btn{display:none !important}
  body{background:#fff}
  .dok{--odsad:58mm;padding:0;font-size:10pt;line-height:1.66;
    orphans:2;widows:2}
  /* mezery mezi bloky uvnitr kapitoly, aby se i ta nejdelsi vesla
     na jednu stranku */
  .kap p{margin-bottom:.8em}
  .kap-otazka{margin-bottom:18px}
  .kap-pozn{margin:18px 0}
  .kap-pozn p:last-child{font-size:11pt}
  .kap-dvojice{margin-top:18px}
  .kap-ano,.kap-ne{padding-top:10px;padding-bottom:2px}
  .kap-cena{margin-top:12px;padding-top:10px}
  .dok .wrap{max-width:none;padding:0}
  a{color:inherit;text-decoration:none}
  .dok-obalka{padding-top:42mm;page-break-after:always;break-after:page}
  /* kazda kapitola zacina na nove strance. Vlasova linka nad nadpisem
     tim ztraci smysl, protoze by lezela tesne pod hornim okrajem. */
  .kap{page-break-before:always;break-before:page;border-top:0;
    padding-top:0;margin-bottom:0}
  /* na novou stranku zacina i kazdy dalsi velky celek, aby se nadpis
     nelamal pres dve stranky */
  .dok-obsah,.dok-soucet,.dok-epilog,.dok-epilog + .dok-priloha{
    page-break-before:always;break-before:page;border-top:0;
    padding-top:0;margin-top:0}
  .dok-obalka h1{font-size:30pt}
  .obalka-lead{font-size:11.5pt}
  .obalka-pata{margin-top:100mm}
  .dok-uvod h2,.dok-priloha h2,.dok-obsah h2,.dok-soucet h2,.dok-epilog h2,
  .kap h2{font-size:15pt}
  .kap-pozn p:last-child,.uvod-duraz,.soucet-pointa{font-size:11.5pt}
  .kap-ano p,.kap-ne p{font-size:10pt}
  .obsah-tbl,.soucet-tbl{font-size:9.5pt}
  /* tabulka dvanacti otazek se musi vejit na jednu stranku, protoze
     si ji ctenar ma vytrhnout */
  .obsah-tbl th,.obsah-tbl td,.soucet-tbl th,.soucet-tbl td{
    padding-top:8px;padding-bottom:8px}
  .dok-seznam{font-size:10.5pt}
  .dok-priznani{padding-top:11px;padding-bottom:11px;margin-bottom:0}
  .kap-pozn{page-break-inside:avoid;break-inside:avoid}
  /* zaver kapitoly drzi pohromade, aby cenovy radek nezustal sam
     nahore na dalsi strance nad cizim nadpisem */
  .kap-dvojice{page-break-inside:avoid;break-inside:avoid;
    page-break-after:avoid;break-after:avoid}
  .kap-cena{page-break-before:avoid;break-before:avoid;
    page-break-inside:avoid;break-inside:avoid}
  .kap-stitek,.kap h2,.kap-otazka,.dok-obsah h2,.dok-soucet h2,
  .dok-epilog h2,.dok-priloha h2{page-break-after:avoid}
  .obsah-tbl tr,.soucet-tbl tr{page-break-inside:avoid;break-inside:avoid}
  /* zahlavi tabulky nesmi zustat samo na konci stranky */
  .obsah-tbl tr:first-child,.soucet-tbl tr:first-child{
    page-break-after:avoid;break-after:avoid}
}

/* ------------------------------------------------------------- menu na mobilu
   Pravidlo .nav vyse v souboru je bez media dotazu, takze prebijelo drivejsi
   mobilni nastaveni. Tento blok proto stoji az uplne na konci.
   Devet polozek se na uzkem displeji lamalo do ctyr radku a odsouvalo obsah
   pod ohyb. */
@media(max-width:980px){
  .nav{gap:14px 18px;font-size:14px}
}
@media(max-width:560px){
  .nav{gap:8px 14px;font-size:13px}
  .nav a{padding:7px 0 6px}
  .nav-cta{padding:6px 13px !important}
}

/* nakres misto fotky v hero sekci */
.hero-kresba{background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:26px 30px}
.hero-kresba .schema{width:100%;height:auto}
@media(max-width:980px){.hero-kresba{padding:20px 22px}}

/* ------------------------------------------------- lista se souhlasem */
.souhlas-lista{position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:var(--deep);color:#dbe4ec;padding:16px 0;
  box-shadow:0 -2px 18px rgba(0,0,0,.18)}
.souhlas-lista .wrap{display:flex;gap:18px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;padding-top:0;padding-bottom:0}
.souhlas-lista p{margin:0;max-width:46em;font-size:15px;line-height:1.5}
.souhlas-lista a{color:#fff}
.souhlas-btny{display:flex;gap:10px;flex-shrink:0}
.souhlas-btny button{font:inherit;font-weight:600;font-size:15px;
  padding:10px 20px;border-radius:3px;cursor:pointer;border:1px solid transparent}
.souhlas-ano{background:var(--accent);color:#fff}
.souhlas-ano:hover{background:var(--accent-dk)}
.souhlas-ne{background:transparent;color:#dbe4ec;border-color:#5d7186}
.souhlas-ne:hover{background:#1b2f42;color:#fff}
@media(max-width:700px){
  .souhlas-lista .wrap{flex-direction:column;align-items:flex-start;gap:12px}
  .souhlas-btny{width:100%}
  .souhlas-btny button{flex:1}
}

/* Past na roboty ve formulari. Nesmi to byt display:none, protoze
   nektere roboty takova pole preskakuji. Odsune se mimo obrazovku. */
.past{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Priklady pod polozkou v rozcestniku technologii. */
.pozn2{font-size:14px;color:var(--mute);font-weight:400}

/* ----------------------------------------------------- menu na jeden radek
   Vyzva k akci je pilulka a nesmi spadnout pod odkazy. Drzime ji vpravo
   a odkazum dovolime se v uzkem okne zhustit. Kdyz uz se to nevejde,
   lame se to az na mobilu, kde je menu stejne pod sebou. */
/* Vyzva k akci a telefon stoji vedle sebe vpravo nahore. */
/* Telefon a vyzva k akci maji vypadat jako dvojice, ne jako dva ruzne
   prvky vedle sebe. Proto stejny polomer rohu a stejna vyska:
   align-items:stretch natahne nizsi tlacitko na vysku toho vyssiho. */
.hlava-akce{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;
  justify-content:flex-end}
/* Telefon je nahore ta hlasitejsi vec, protoze v osobnim kontaktu Petr
   vyhrava. Vyzva k formulari proto stoji vedle nej jako obrys, ne jako
   druha cervena plocha. Dve stejne hlasite tlacitka vedle sebe spolu
   souperi a navstevnik nevi, ktere je to hlavni. */
.hlava-cta{display:flex;align-items:center;background:#fff;
  color:var(--accent-dk);border:2px solid var(--accent);text-decoration:none;
  font-weight:600;font-size:16px;padding:0 20px;border-radius:4px;
  white-space:nowrap}
.hlava-cta:hover{background:var(--accent);color:#fff}
@media(max-width:1120px){ .nav{gap:18px;font-size:15px} }
@media(max-width:1000px){ .nav{gap:15px;font-size:14.5px} }

/* ------------------------------------------------- menu na uzkem displeji
   Devet polozek pod sebou zabere na telefonu pul obrazovky driv, nez
   navstevnik uvidi jediny nadpis. Pod 900 body se menu sbali pod tlacitko.
   Tlacitko vyrabi skript v mereni.py, takze bez JavaScriptu zustane menu
   rozbalene a web funguje dal. */
.menu-tlacitko{display:none}
.nav a.menu-cta{display:none}

@media(max-width:900px){
  .menu-tlacitko{display:flex;align-items:center;gap:8px;cursor:pointer;
    background:#fff;border:2px solid var(--line);border-radius:4px;
    padding:0 14px;font:inherit;color:var(--deep);flex:0 0 auto}
  .menu-tlacitko .ikona{display:flex;flex-direction:column;gap:4px;
    width:20px}
  .menu-tlacitko .ikona i{display:block;height:2px;background:var(--deep);
    border-radius:1px}
  .menu-tlacitko[aria-expanded=true] .ikona i{background:var(--accent)}
  .menu-tlacitko em{font-style:normal;font-weight:600;font-size:15px}
  .menu-tlacitko[aria-expanded=true]{border-color:var(--accent);
    color:var(--accent-dk)}

  /* Menu je schovane, dokud se nerozbali. Panel ma vlastni rolovani,
     aby se na malem displeji dalo dojit i na posledni polozku. */
  .navbar .nav{display:none}
  .navbar.otevreno .nav{display:block;max-height:70vh;overflow-y:auto;
    padding:6px 0 14px}
  .navbar.otevreno .nav a{display:block;padding:12px 0;
    border-bottom:1px solid var(--line);border-top:0;margin:0}
  .navbar.otevreno .nav a:last-child{border-bottom:0}
  /* Vyzva k nabidce jako prvni polozka rozbaleneho menu. Zobrazuje se
     jen tam, kde uz v hlavicce neni, aby na strance nebyla dvakrat. */
  .navbar.otevreno .nav a.menu-cta{display:none}
  .navbar.otevreno .nav a.menu-cta{background:var(--accent);color:#fff;
    border:0;border-radius:4px;text-align:center;font-weight:600;
    margin:4px 0 10px;padding:14px}
  .navbar.otevreno .nav a.on{border-bottom-color:var(--line)}
}

/* ------------------------------------------------- hlavicka na telefonu
   Zmereno 10. 9. 2026 na iPhonu SE: hlavicka merila 163 bodu, tedy skoro
   ctvrtinu obrazovky, jeste nez navstevnik uvidel prvni slovo. Delalo to
   `.hlava-akce{width:100%}`, ktere lamalo hlavicku na dva radky: nahore
   znacka s podtitulkem, dole hamburger a telefon.

   Nove drzi vsechno na jednom radku. Podtitulek "Stroje na svarovani
   a nytovani plastu" na telefonu mizi, protoze presne to same stoji
   o kousek niz v nadpisu stranky. Predvolba +420 taky mizi, cislo
   ale zustava cele v odkazu tel:, takze se vytoci spravne. */
@media(max-width:620px){
  .top .hlava{flex-wrap:nowrap;gap:10px;padding-top:10px;padding-bottom:10px}
  .brand{min-width:0}
  .brand img{height:32px}
  .brand span{display:none}
  .hlava-akce{width:auto;flex:0 0 auto;gap:8px;align-items:center}
  .hlava-cta{display:none}
  /* Telefon je nejdulezitejsi ovladaci prvek na strance a musi mit
     poradny dotykovy cil. Merilo 33 bodu, tedy min nez doporucenych 44,
     a vedle nej stalo tlacitko menu, ktere 44 melo. Vypadalo to jako
     dva ruzne prvky a hur se trefovalo. */
  .tel-btn{font-size:18px;padding:0 13px;line-height:1;min-height:44px;
    display:flex;align-items:center}
  .tel-btn .jmeno{display:none}
  .tel-btn .pred{display:none}
  .menu-tlacitko em{display:none}
  /* Mezera mezi telefonem a menu je vetsi nez mezi ostatnimi prvky.
     Cervene telefonni tlacitko a hamburger stoji vedle sebe a palec
     mezi nimi snadno mine. Omylem vytoceny hovor je horsi nez omylem
     otevrene menu. */
  .menu-tlacitko{padding:0 14px;min-height:44px;min-width:52px;
    justify-content:center;margin-left:6px}
  .navbar.otevreno .nav a.menu-cta{display:block}
}
@media(max-width:400px){
  .brand img{height:28px}
  .tel-btn{font-size:17px;padding:0 10px}
  .menu-tlacitko{padding:0 11px;min-width:46px}
}

/* --------------------------------------- policka formulare na telefonu
   **Pismo v policku musi mit aspon 16 bodu.** Kdyz ma min, iOS pri
   kliknuti do nej priblizi celou stranku a uz ji nevrati. Clovek pak
   dopisuje poptavku na strance, ktera precniva pres displej, a vetsinou
   to vzda. Je to nejcastejsi mobilni vada formularu vubec a nepozna se
   jinak nez na skutecnem iPhonu.

   Tykalo se to vypoctu na strance Pomucky, ktere mely 15 bodu. Poptavkovy
   formular uz 16 mel. Nastavuje se to tady na jednom miste pro vsechna
   policka, aby na to nikdo nemusel myslet u kazdeho noveho. */
@media(max-width:620px){
  input,select,textarea{font-size:16px}
  .vyp-radek input,.vyp-radek select{font-size:16px;padding:9px 9px;
    min-height:44px}
  .vyp-radek label{font-size:16px}
}

/* --------------------------------------------------- prepinac jazyka
   Do 10. 9. 2026 byl jen v paticce, takze se k nemu nikdo nedostal,
   aniz by prorolovat celou stranku. Ted stoji na konci menu: na sirokem
   displeji vpravo jako pilulka, na telefonu jako polozka v rozbalenem
   panelu. */
.nav a.jazyk{margin-left:auto;opacity:1;border:1px solid var(--line);
  border-radius:999px;padding:5px 13px;font-size:14px;font-weight:600;
  letter-spacing:.04em;color:var(--mute);align-self:center}
.nav a.jazyk:hover{border-color:var(--accent);color:var(--accent-dk)}
@media(max-width:900px){
  /* V rozbalenem panelu je to radek jako ostatni, jen zvyrazneny. */
  .navbar.otevreno .nav a.jazyk{margin-left:0;border:0;border-radius:0;
    border-top:1px solid var(--line);padding:14px 0;font-size:16px;
    color:var(--deep)}
}

/* ---------------------------------------- hlavicka, ktera se vraci
   11. 9. 2026 Pavel na iPhonu SE: stranky jsou dlouhe a cesta zpatky
   k menu trva. Hlavicka proto zustava prilepena nahore, ale pri rolovani
   dolu odjede, aby nezabirala misto pri cteni. Jakmile clovek posune
   prstem zpatky nahoru, hned vyjede, i s menu a s telefonem.

   Tlacitko se sipkou nahoru jsme zamerne nedelali. Resi jen cestu na
   zacatek stranky, ne k menu, a na iPhonu by stalo v rohu presne tam,
   kde se objevuje spodni lista Safari. Na zacatek stranky se na iPhonu
   dostanete i klepnutim na horni okraj displeje, tam kde jsou hodiny.

   Tridu .schovana prepina skript v mereni.py. Bez JavaScriptu hlavicka
   jen zustane prilepena, nic se nerozbije. */
.top{position:sticky;top:0;z-index:200;transition:transform .22s ease,
  box-shadow .22s ease}
.top.schovana{transform:translateY(-100%)}
.top.odrolovano{box-shadow:0 2px 12px rgba(15,29,43,.1)}
@media(prefers-reduced-motion:reduce){.top{transition:none}}
/* Kotva uvnitr stranky nesmi skoncit pod hlavickou. */
[id]{scroll-margin-top:76px}

/* Na jake strance jsem. V rozbalenem menu na telefonu je aktualni
   stranka oznacena cervenym pruhem a podkladem, ne jen barvou pisma,
   kterou na slunci neni videt. */
@media(max-width:900px){
  .navbar.otevreno .nav a.on{background:#fdf3f4;
    box-shadow:inset 3px 0 0 var(--accent);padding-left:12px;
    color:var(--accent-dk)}
}

/* ---------------------------------------- preteceni na uzkem displeji
   Zmereno 11. 9. 2026. Predchozi kontrola hledala jen prvky sirsi nez
   cely displej, takze neviděla veci, ktere pretekaji jen svuj ramecek
   a ten je orizne. Presne tak zmizel konec cenoveho rozpeti v kalkulacce.

   Druhy duvod, proc to na pocitaci nebylo videt: Windows sazi pismem
   Segoe UI, iPhone pismem San Francisco, ktere je o par procent sirsi.
   Co se na pocitaci vejde tesne, na iPhonu uz precniva. */

/* Polozka mrizky ma ve vychozim stavu min-width:auto. Dlouhe slovo jako
   "Vysokofrekvenční" ji tak roztahne pres okraj, misto aby se zalomilo
   o radek niz. min-width:0 ji drzi v jejim sloupci. */
.tech-mrizka>*,.tech>*,.kroky>*,.vyp-mrizka>*,.spoje>*,.cards>*,.three>*,
.dve>*,.grid-2>*,.hero-grid>*,.zaver-grid>*,.magnet>*,.facts>*,.otazky>*,
.pozn-mrizka>*,.kalk-dvojice>*,.dvojice>*{min-width:0}

@media(max-width:560px){
  /* Kalkulacka: popisek nad hodnotou, ne vedle ni. Hodnota se nesmela
     zalomit, takze vytlacila popisek do sloupce sirokeho 53 bodu
     a sama pretekla ramecek, ktery ji orizl. */
  .kalk-radek,.kalk-cislo{flex-direction:column;align-items:flex-start;gap:2px}
  .kalk-radek b,.kalk-cislo b{white-space:normal;text-align:left}
  .kalk-radek span,.kalk-cislo span{font-size:15px}
  .kalk-cislo b{font-size:25px}
  .kalk-hlava,.kalk-telo{padding-left:16px;padding-right:16px}

  /* Sedm technologii: kresba uzsi, at zbyde misto na nadpis. */
  .tech{grid-template-columns:84px 1fr;gap:14px;padding:16px}
  .tech-obr{padding:6px}

  .krok{padding:16px 14px 18px}
  .vyp{padding:18px 16px}
}

@media(max-width:370px){
  /* Nejuzsi telefony, 320 az 360 bodu. iPhone SE s 375 body sem nepatri,
     tomu sloupce zustavaji. Dva sloupce kroku ani kresba vedle textu se
     na uzsi displej nevejdou, jde to pod sebe. */
  .kroky{grid-template-columns:1fr}
  .tech{grid-template-columns:1fr;gap:10px}
  .tech-obr{max-width:150px}
  .vyp-radek input{width:84px}
  .vyp-radek select{width:130px}
}

@media(max-width:360px){
  .top .hlava{gap:6px}
  .brand img{height:25px}
  .tel-btn{font-size:16px;padding:0 9px}
  .menu-tlacitko{min-width:44px;padding:0 10px;margin-left:4px}
}

/* zkratka pod hero sekci
   Pridano 23. 9. 2026 podle Petrovy hlasove zpravy, tyz den prestaveno
   z karet na prouzek tlacitek podle Pavla. Karty zabiraly pres tristapadesat
   bodu na vysku a odsouvaly dvacet let zkusenosti pod ohyb. Prouzek ma
   kolem sta a unese vic cilu.

   Pozadi je bile zamerne: nad prouzkem stoji sedy pruh duvery, dve sede
   sekce za sebou by se slily do jednoho bloku. */
.rozc{background:#fff;border-bottom:1px solid var(--line);padding:0}
.rozc .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;
  padding-top:18px;padding-bottom:20px}
/* Nadpis prouzku byl do 2. 10. 2026 sedy. Petr ho v druhe hlasove zprave
   prehledl a chtel ho tucne nebo jinou barvou. Ma obe: cervena je barva
   odkazu na celem webu, takze rika "tady se klika". */
.rozc-nadpis{font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-dk);margin:0;font-weight:700;flex-shrink:0}
.rozc-obsah{max-width:none;margin:0;flex:1 1 auto}
.rozc-obsah a{padding:8px 16px;font-size:15.5px}
.rozc-obsah a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:700px){.rozc .wrap{display:block}.rozc-nadpis{margin-bottom:10px}}

/* Odskoky v karte "Co tu najdete" a podobnych.
   Pridano 23. 9. 2026. Radky karty byly do te doby jen text. Petr na to
   narazil: rozcestnik chvalil a zaroven nepoznal, ze se da pouzit.
   Sipka je proto videt hned, ne az pri najeti. Afordance, ktera se objevi
   az po najeti mysi, na dotykovem displeji neexistuje vubec a na desktopu
   ji clovek najde jen nahodou. Barva textu zustava tmava, cely sloupec
   cerveneho textu by prekryl hlavni tlacitka pod nim. */
.hero-karta li.skok{list-style:none}
.hero-karta li.skok a{color:var(--deep);text-decoration:none;font-weight:500;
  display:inline-block;border-bottom:1px solid transparent;
  transition:color .12s ease,border-color .12s ease}
.hero-karta li.skok a::after{content:" \203A";color:var(--accent);
  font-weight:700;display:inline-block;
  transition:transform .12s ease}
.hero-karta li.skok a:hover,.hero-karta li.skok a:focus-visible{
  color:var(--accent-dk);border-bottom-color:#e8b3b6}
.hero-karta li.skok a:hover::after,.hero-karta li.skok a:focus-visible::after{
  transform:translateX(3px)}
.hero-karta li.skok a:focus-visible{outline:2px solid var(--accent);
  outline-offset:3px;border-radius:2px}
/* Cil odskoku nesmi skoncit pod lepici hlavickou. Zmereno 23. 9. 2026:
   hlavicka ma 150 bodu a pri rolovani dolu se odsouva pryc, ale po prichodu
   z ciziho odkazu rovnou na kotvu stoji na miste a nadpis by schovala.
   Radeji tedy o kus vic mista nahore nez schovany nadpis. */
:target{scroll-margin-top:162px}
@media(max-width:620px){:target{scroll-margin-top:120px}}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  .hero-karta li.skok a,.hero-karta li.skok a::after{transition:none}}

/* mapa dosahu v paticce
   Pridano 23. 9. 2026 podle Petrovy hlasove zpravy. Na sirokem displeji
   stoji jako ctvrty sloupec paticky, na uzsim se prelomi pod nej a roztahne
   se pres celou sirku. Samotna kresba je v diagramy.py, funkce mapa_dosah. */
/* ctvrty sloupec paticky: dosah
   Zmeneno 23. 9. 2026. Mapa drive visela pres celou sirku pod ctyrmi
   sloupci paticky a pusobila jako prilepek. Ted je to regulerni ctvrty
   sloupec. Veta o tom, co dodavame, se presunula do spodni listy, protoze
   je to popis firmy, ne kontaktni udaj. */
.pata-dosah{max-width:19em}
.pata-dosah .schema{width:100%;max-width:230px;height:auto;margin-bottom:10px}
.dosah-veta{margin:0}
.dosah-nadpis{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  margin:14px 0 6px;font-weight:600;color:#7d8896}
.dosah-casy{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:2px 16px}
.dosah-casy li{display:flex;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--line);padding:3px 0}
.dosah-casy b{color:var(--deep);font-weight:600;white-space:nowrap}

/* spodni lista paticky: co dodavame */
.pata-lista{border-top:1px solid var(--line);margin-top:26px;padding-top:18px}
.pata-lista p{margin:0;max-width:none;font-size:14.5px;color:#7d8896}
@media print{.pata-dosah .schema{display:none}}

/* pet typu blistru: kresba nad nazvem v prvni bunce tabulky
   Pridano 23. 9. 2026 podle Petrovy hlasove zpravy. Samostatny sloupec by
   tabulku rozsiril na pet a zacala by pretekat, tedy presne ta vada, kterou
   Petr vytkl u tabulky plastu. Z tehoz duvodu je kresba jen 120 bodu siroka
   a cela tabulka ma uzsi odsazeni bunek. Zmereno pri okne 1280. */
#typy .tbl th,#typy .tbl td{padding:11px 9px}
.tbl td.typ-blistru{min-width:128px}
.tbl td.typ-blistru .schema{width:120px;height:auto;margin:0 0 5px -3px}
@media(max-width:700px){
  .tbl td.typ-blistru{min-width:0}
  .tbl td.typ-blistru .schema{width:120px}
}
@media print{.tbl td.typ-blistru .schema{width:110px}}

/* meritko linky
   Pridano 23. 9. 2026. Petr: "ty stroje muzou dosahovat az 8 az 12 metru,
   neni to maly stroj a tady vlastne zadna takova zminka neni." Fotka
   nepripada v uvahu, vedla by k dodavateli. Postava vedle pudorysu rekne
   totez a rekne to presneji. */
.meritko{margin:22px 0 6px;max-width:620px}
.meritko .schema{width:100%;height:auto}
/* Pudorys linky, tri formaty vanicek a eurozaves. Pridano 2. 10. 2026
   podle Petrovy druhe hlasove zpravy. Pudorys je sirsi nez bokorys,
   protoze nese vic popisku. Eurozaves stoji vedle poznamky, na mobilu
   pod ni. */
.meritko.pudorys{max-width:720px;margin-top:26px}
.meritko.formaty{max-width:560px;margin:4px 0 26px}
.eurozaves{align-items:center;margin-top:18px}
.kresba-obal .schema{width:100%;max-width:420px;height:auto}

/* lista s tiskem nad tisknutelnym pruvodcem
   Pridano 23. 9. 2026. Petr chtel tlacitko vytiskni nebo stahni. Stranka
   tisknutelna uz byla, chybelo jen rict to ctenari. Pri tisku lista mizi,
   aby nebyla v PDF. Slovo tenhle je v projektu zakazane, v textu listy
   proto neni. */
.tisk-lista{background:var(--soft);border-bottom:1px solid var(--line);
  margin-bottom:34px}
.tisk-lista-in{max-width:var(--container);margin:0 auto;padding:16px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;font-size:15.5px;color:var(--mute)}
.tisk-lista .tisk-akce{display:flex;gap:10px;flex-shrink:0}
.tisk-lista .btn{font-size:15px;padding:9px 16px}
.tisk-lista button.btn{border:none;cursor:pointer;font-family:inherit}
@media(max-width:620px){
  .tisk-lista-in{flex-direction:column;align-items:flex-start}
}
@media print{.tisk-lista{display:none !important}}

/* schema technologie u dalsich aplikaci v atlasu
   Pridano 23. 9. 2026. Petr chtel u seznamu aplikaci vizualizaci. Fotku
   konkretniho vyrobku pouzit nemuzeme, schema technologie ale ano a je
   presnejsi: sloupec se jmenuje Technologie. */
.tech-ikona{display:block;margin:0 0 6px}
.tech-ikona .schema{width:104px;height:auto}
.tbl td.tech-bunka{min-width:116px}
@media(max-width:700px){.tech-ikona{display:none}}
@media print{.tech-ikona .schema{width:88px}}

/* pruh zkratek na sekce stranky
   Pridano 23. 9. 2026. Petr chtel na dlouhych strankach zkratku k tematum
   dole. Na uzkem displeji se pruh zalamuje, neposouva se do stran: skryta
   navigace, ktera se musi hledat prstem, je horsi nez dva radky navic. */
.kotvy{border-bottom:1px solid var(--line);background:#fff}
.kotvy .wrap{display:flex;align-items:baseline;gap:8px 22px;flex-wrap:wrap;
  padding-top:15px;padding-bottom:15px;font-size:15.5px}
.kotvy-popis{color:var(--mute);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase}
.kotvy a{color:var(--deep);text-decoration:none;font-weight:500;
  border-bottom:1px solid transparent;padding-bottom:1px}
.kotvy a::after{content:" \203A";color:var(--accent);font-weight:700}
.kotvy a:hover,.kotvy a:focus-visible{color:var(--accent-dk);
  border-bottom-color:#e8b3b6}
.kotvy a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media print{.kotvy{display:none}}

/* uzka lista s odkazem na ceny
   Pridano 23. 9. 2026. Drive to byla tmava sekce, ktera stala primo nad
   tmavou zaverecnou vyzvou. Dve tmave sekce za sebou se slijou do jednoho
   dilu a zaver v nem zanikne. Lista je proto svetla, uzka a pismo ma
   ve stylopisu, ne v HTML. */
.pruh{background:var(--soft);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:0}
.pruh .wrap{padding-top:22px;padding-bottom:22px}
.pruh p{margin:0;max-width:64em;font-size:16.5px;color:var(--mute)}
/* Bez nowrap. S vetsim pismem iPhonu odkaz pretekal ramecek o sedm bodu,
   protoze se nemohl zalomit. */
.pruh .arrow{color:var(--accent-dk);margin-left:6px}

/* tri tridy misto velikosti pisma zapsane primo v HTML
   Pridano 23. 9. 2026. Osm mist melo font-size v atributu style. Takova
   mista se pri zmene stylu prehlednou a design se rozjede. */
.vzorec{font-size:19px;margin:14px 0}
.tel-velky{font-size:26px;font-weight:700;margin:12px 0 5px;line-height:1.2}
.tel-velky a{text-decoration:none}
.tel-velky a:hover{text-decoration:underline}
.pozn-pod{font-size:15px;color:var(--mute);margin-top:16px}

/* vlajka u prepinace jazyka
   Pridano 23. 9. 2026. Drive tam stalo slovo English, respektive Cesky.
   Vlajka je zeme, ne jazyk, takze nazev jazyka zustava v aria-label
   a v title, jinak by tlacitko bylo pro cteci zarizeni prazdne. */
.vlajka{display:block;width:26px;height:auto;border-radius:2px}
.nav a.jazyk{display:inline-flex;align-items:center;padding:7px 10px}
@media(max-width:900px){
  .navbar.otevreno .nav a.jazyk{padding:12px 0}
}

/* dalsi krok pod rozhodovaci tabulkou
   Pridano 23. 9. 2026. Pavel: ctenar v tabulce zjisti, co potrebuje,
   a tam to konci. Odtud se ma dostat dal, bud k popisu technologie,
   nebo rovnou k nabidce. */
.dalsi-krok{border-top:1px solid var(--line);margin-top:28px;padding-top:24px}
.dalsi-krok p{max-width:46em}
.dalsi-krok p:last-child{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.tech{scroll-margin-top:162px}
@media(max-width:620px){.tech{scroll-margin-top:120px}}

/* zaverecna vizitka v pruvodci
   Pridano 23. 9. 2026. Pruvodce koluje po firme dal, nez kam dosahne web.
   Na konci proto stoji, kdo ho psal, proc a jak se mu ozvat. */
.dok-vizitka{border-top:2px solid var(--deep);padding-top:30px;margin-top:10px}
.dok-vizitka h2{font-size:23px;line-height:1.32;margin:0 0 16px}
.vizitka-lead{font-size:17px;line-height:1.65;margin:0 0 26px}
.vizitka-duvody{display:grid;grid-template-columns:1fr;gap:16px;margin:0 0 30px}
.vizitka-duvody div{border-top:1px solid var(--line);padding-top:12px}
.vizitka-duvody b{display:block;color:var(--deep);margin-bottom:5px}
.vizitka-duvody p{margin:0;font-size:15.5px;line-height:1.6;color:#46515e}
.vizitka-kontakt{border-top:1px solid var(--line);padding-top:20px}
.vizitka-stitek{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--mute);margin:0 0 8px}
.vizitka-tel{font-size:26px;font-weight:700;color:var(--deep);margin:0 0 4px}
.vizitka-pozn{font-size:14px;line-height:1.6;color:var(--mute);margin:14px 0 0}
/* Poznamka pod vizitkou je drobny tisk, ne dalsi odstavec textu.
   V bezne velikosti prebijela kontaktni udaje nad sebou. */
.dok-volne{font-size:14px;line-height:1.6;color:var(--mute);margin:26px 0 0}
@media print{
  .dok-volne{font-size:8.5pt}
  .dok-vizitka{page-break-before:always;break-before:page;
    border-top:0;padding-top:0;margin-top:0}
  .dok-vizitka h2{font-size:15pt}
  .vizitka-lead{font-size:11pt}
  .vizitka-duvody p{font-size:9.5pt}
  .vizitka-tel{font-size:18pt}
  .vizitka-pozn{font-size:8.5pt}
}

/* Telefon, e-mail a adresa webu patri na jeden radek vzdy. */
.nezlom{white-space:nowrap}

/* Kresby stroju a linek (Petr potvrdil 5. a 14. 10. 2026). Bila kresby
   splyne s kazdym svetlym pozadim sekce diky multiply, jinak by na sede
   a bezove plose staly jako bile obdelniky. */
.kresba{margin:0}
.kresba-img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.kresba figcaption{font-size:14.5px;color:var(--mute);margin-top:8px;line-height:1.5}
.kresba-znacky{position:relative}
.kz{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;
  border-radius:50%;background:var(--accent);color:#fff;font-weight:700;
  font-size:15px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px #fff}
.leg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 28px;
  margin:18px 0 0;padding-left:22px;font-size:15.5px}
.kresby-2{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:34px}
.pilir .kresba{margin:0 0 14px}
.tech .tech-kresba{grid-column:1/-1;margin:-4px 0 0}
.card .foto.vnejsek{padding:6px 10px;background:#fff}
.card .foto.vnejsek .kresba-img{max-height:100%;width:auto;margin:0 auto}
@media(max-width:800px){
  .leg{grid-template-columns:1fr}
  .kresby-2{grid-template-columns:1fr;gap:26px}
  .kz{width:24px;height:24px;font-size:13px;box-shadow:0 0 0 3px #fff}
}
@media(max-width:480px){
  .kz{width:20px;height:20px;font-size:11.5px;box-shadow:0 0 0 2px #fff}
}
@media print{.kresba-img{mix-blend-mode:normal}}