@charset "utf-8";
/* ==========================================================================
   Hořáky Třebíč — wireframe fáze
   Rozměry, pozice a typografie 1:1 podle Figmy (soubor 4oZfsD2xMrnnTXe3EIXBHg).
   Fotky jsou zatím šedé plochy, efekty a animace se doplní až po schválení.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Písmo — Google Sans, tedy stejné jako v grafice od Relative.
   Je na Google Fonts pod SIL Open Font License; hostujeme ho u sebe,
   žádné volání na CDN. Jeden soubor pokrývá tloušťky 400–700 (proměnné písmo).
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Google Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/googlesans-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-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Google Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/googlesans-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;
}

:root{
  --dark:#0c1216;
  --dark-2:#273138;
  --dark-line:#1a252c;       /* linky a rámečky na tmavém pozadí */
  --orange:#fe6102;
  --white:#fff;
  --grey-line:#dfe2e4;
  --grey-text:#5c666d;
  --outline:#c3d2dd;         /* linky a rámečky na světlém pozadí */
  --gray-bg:#f3f3f3;
  --gray-font:#6d7c87;
  --blue:#007380;
  --ph:#d7dadd;              /* plocha místo fotky */
  --ph-line:#c3c8cc;
  --wrap:1440px;             /* kontejner na 1920 */
  --side:240px;              /* okraj na 1920 */
  --font:"Google Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* --------------------------------------------------------------------------
   RESET nad template/css/default.css — ta stará McRAI kostra se načítá dřív
   a nese body{font-size:11px;text-align:center}, .paticka{text-align:right},
   h1{16px}, p{margin:10px 0}. Bez tohoto přebití nic nesedí na návrh.
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--gray-bg)}
body,.paticka,.obsah,.menu{text-align:left}
.paticka{clear:none}
h1,h2,h3,h4,h5,h6,p,ul,ol{margin:0;padding:0;font-size:inherit;font-weight:inherit}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
a:link,a:visited{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
/* 1920 je strop pro OBSAH, ne pro plochu.
   Do 24. 8. měl strop `body`, takže na širokém okně (Martin má 2526) zůstaly
   po stranách šedé pruhy `html` a fotky končily uprostřed obrazovky —
   „plochu fotek vyplňovat“. Teď jde stránka přes celou šířku okna, pozadí
   a fotky sekcí s ní, a obsah drží vnitřní kontejner `.wrap` (1440,
   vycentrovaný) — ten je uvnitř všech sekcí kromě mapy na Kontaktech
   a širokého pásu na Službách, které jsou na celou šířku záměrně.
   Prvky hlavičky se ukotvují na střed přes `max()` níž, aby si na 4K
   neodjely ke krajům okna. */
body{background:var(--white);color:var(--dark);font-family:var(--font);
  font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;
  margin:0 auto;position:relative;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Mona obaluje obsah do .blok_sirky_webu — sekce si šířku řídí samy */
.blok_sirky_webu{width:100%;max-width:none;margin:0;padding:0}

/* výchozí menu Mony (template/menu/menu.php) se nevykresluje v toku —
   navigace patří do panelu pod hamburgerem, odkazy si z něj vezmeme */
.blok_sirky_webu > .menu{display:none}

.wrap{width:var(--wrap);margin:0 auto;position:relative}

/* placeholder místo fotky */
.ph{background:var(--ph);border:1px solid var(--ph-line);position:relative;
  display:flex;align-items:center;justify-content:center;color:#7d868c;
  font-size:13px;letter-spacing:.04em;text-transform:uppercase}

/* Dvojice rámečků u levého okraje stránky — v grafice se opakuje u sekcí
   na světlém pozadí; tmavé intro má vlastní variantu .int-znacky.

   ⭐ Leží přímo v sekci, ne v kontejneru: v grafice se **levou hranou
   zarovnávají s hamburgerem** (24 od kraje stránky). V kontejneru by se
   odsazení počítalo od něj a v mezistavech, kde kontejner drží pevnou šířku,
   by dvojice ujela ke kraji (naměřeno 13 místo 24 na okně 1785).
   Odsazení proto drží hamburger až do chvíle, kdy se dvojice schová (1495). */
.znacky{display:flex;gap:7px;position:absolute;left:max(24px,calc(50% - 936px))}
.znacky span{width:71px;height:67px;border:1px solid var(--outline)}

/* ——— typografie podle Figmy ——————————————————————————————————— */
.h1{font-size:72px;line-height:86px;font-weight:400;margin:0}
.h2{font-size:48px;line-height:64px;font-weight:400;margin:0;letter-spacing:-.96px}
.eyebrow{font-size:32px;line-height:normal;font-weight:600;color:var(--orange);
  text-transform:uppercase;letter-spacing:-.64px;margin:0}
/* nadpisek nad H2 — v grafice modrozelený ve všech sekcích, ne oranžový */
.label{font-size:16px;line-height:20px;font-weight:600;color:var(--blue);
  text-transform:uppercase;letter-spacing:-.32px;margin:0}
.perex{font-size:20px;line-height:30px;margin:0}
.text{font-size:18px;line-height:28px;margin:0;color:var(--grey-text)}
/* Blok jde z administrace, editor obsah balí do odstavců — první
   a poslední nesmí přidat mezeru navíc, jinak by se sekce s pevnými
   pozicemi rozjela. */
.text p{margin:0 0 12px}
.text p:last-child{margin-bottom:0}

/* ——— tlačítka (Figma: padding 32/14, 18px, řádek 24) ———————————
   Barvy se píšou dvojitou třídou (.btn.btn--fill). Reset odkazů výš používá
   a:link/a:visited a ten má vyšší specificitu než jedna třída — bez toho by
   tlačítko zdědilo barvu textu stránky místo své vlastní. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:14px 32px;font-size:18px;line-height:24px;font-weight:500;
  font-family:var(--font);border:0;cursor:pointer;white-space:nowrap}
.btn.btn--fill{background:var(--orange);color:var(--white)}
.btn.btn--glass{background:rgba(255,255,255,.4);color:var(--white);
  -webkit-backdrop-filter:blur(18.3px);backdrop-filter:blur(18.3px)}
.btn.btn--outline{background:transparent;color:var(--white);border:1px solid var(--white);
  padding:11px 24px;font-size:16px;line-height:24px;height:48px}
.btn.btn--dark{background:var(--dark);color:var(--white)}
/* běžné tlačítko v sekcích (Figma „button-48"): 48 px vysoké, 16px Bold —
   hero má vlastní, o kus vyšší variantu (52 px, 18px Medium) */
.btn.btn--48{font-size:16px;line-height:normal;font-weight:700;padding:14px 32px;height:48px}

/* ==========================================================================
   HLAVIČKA — leží nad hero fotkou, vlastní pozadí nemá.
   Pozice 1:1 podle Figmy (1920): hamburger x=24 y=26, logo x=859 y=24,
   jazyk x=1579 y=24, CTA x=1681 y=24 (pravý okraj 24 jako u hamburgeru).
   ========================================================================== */
.hlavicka{position:absolute;top:0;left:0;right:0;z-index:20;height:106px}
/* Při otevřeném panelu jde hlavička nad něj, jinak by hamburger zůstal pod
   panelem a nešlo by jím zavřít (z-index uvnitř hlavičky proti jejímu vlastnímu
   nestačí — rodič si drží vlastní vrstvu). */
.hlavicka.je-otevreno{position:fixed;z-index:40}

/* Hamburger **cestuje se stránkou** (Martin 19. 8.): zbytek hlavičky (logo,
   jazyk, tlačítko) odroluje pryč jako v grafice, ale jediná cesta do menu
   zůstane po ruce. Souřadnice jsou tytéž, takže na začátku stránky se nic
   nepohne — jen se od hlavičky odlepí, jakmile člověk sjede níž. Vlastní
   z-index proto, že `fixed` uvnitř hlavičky by jinak zůstal pod jejími
   sourozenci; stín ho drží čitelný i na světlých sekcích. */
/* `max()`: do 1920 platí souřadnice z grafiky, nad ní se prvek drží
   vycentrovaného bloku 1920 místo hrany okna (Martin 24. 8. — na jeho
   2526 px okně visel hamburger úplně vlevo, mimo web). */
.hl-burger{position:fixed;left:max(24px,calc(50% - 936px));top:26px;z-index:22;width:52px;height:52px;
  background:var(--orange);border:0;padding:0;cursor:pointer;
  box-shadow:0 8px 24px -12px rgba(12,18,22,.5)}
.hl-burger span{position:absolute;left:14px;width:24px;height:2px;background:var(--white);
  transition:top .2s,transform .2s,opacity .15s}
.hl-burger span:nth-child(1){top:20px}
.hl-burger span:nth-child(2){top:25px}
.hl-burger span:nth-child(3){top:30px}
/* Tlačítko zůstává nad panelem, takže jím jde menu i zavřít, a při otevření
   se překlopí na křížek: prostřední linka zmizí, krajní se sejdou do X.
   Do 24. 8. se to dělo jen pod 1200 px (na širokém okně zůstával hamburger,
   jak to měl prototyp) — Martin to nechal sjednotit na všechny šířky. */
.hl-burger.je-otevreno{z-index:35}
.hl-burger.je-otevreno span:nth-child(1){top:25px;transform:rotate(45deg)}
.hl-burger.je-otevreno span:nth-child(2){opacity:0}
.hl-burger.je-otevreno span:nth-child(3){top:25px;transform:rotate(-45deg)}

.hl-logo{position:absolute;left:50%;transform:translateX(-50%);top:24px;
  width:203px;height:82px;display:block}
.hl-znacka{position:absolute;left:2px;top:0;width:199px;height:56px}
.hl-nazev{position:absolute;left:0;top:63px;font-size:15px;line-height:normal;
  font-weight:700;color:var(--white);white-space:nowrap}
.hl-nazev b{font-weight:inherit;text-transform:uppercase}

/* Vzhled sdílí obě kopie (hlavička i panel), ale POZICE patří jen té v hlavičce:
   obě mají třídu .hl-lang, takže jednotřídové pravidlo s `right` by panelové
   kopii přebilo její vlastní umístění a odsunulo ji mimo blok. */
.hl-lang{width:86px;height:48px;
  border:1px solid var(--white);color:var(--white)}
.hlavicka .hl-lang{position:absolute;right:max(255px,calc(50% - 705px));top:24px}
/* Tlačítko vyplňuje celý rámeček, ale samo se nepozicuje — kód jazyka
   a šipka tak zůstávají umístěné vůči rámečku přesně podle grafiky. */
.hl-lang-tlacitko{display:block;width:100%;height:100%;
  background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer}
.hl-kod{position:absolute;left:31px;top:14px;transform:translateX(-50%);
  font-size:16px;line-height:normal;font-weight:700}
.hl-sipka{position:absolute;left:49px;top:13px;width:20px;height:20px;
  transform:rotate(90deg)}
.hl-sipka svg{display:block;width:100%;height:100%}

/* ——— rozbalený seznam jazyků ————————————————————————————————
   Ne `<select>`: ten si každý systém vykreslí po svém a do grafiky nesedí.
   Panel navazuje na rámeček tlačítka (překryté okraje, proto −1 px) a drží
   se jeho šířky. Bez JavaScriptu ho odkryje `:focus-within`, takže jazyk jde
   přepnout i tabulátorem. */
.hl-lang-menu{position:absolute;left:-1px;right:-1px;top:100%;z-index:5;
  margin:0;padding:0;list-style:none;
  background:var(--white);border:1px solid var(--outline);
  opacity:0;visibility:hidden;translate:0 -6px;
  transition:opacity .2s ease,translate .2s cubic-bezier(.16,1,.3,1),visibility 0s linear .2s}
.hl-lang.je-otevreno .hl-lang-menu,
html:not(.js) .hl-lang:focus-within .hl-lang-menu{opacity:1;visibility:visible;
  translate:none;transition-delay:0s}
/* ⚠️ Fokusový fallback platí **jen bez JavaScriptu**. Do 24. 8. platil vždycky
   a seznam pak nešlo zavřít: po kliknutí si tlačítko drží focus, takže
   `:focus-within` držel seznam otevřený i poté, co skript odebral třídu —
   druhý klik ani odjetí myší nepomohly (Martin 24. 8.). Klávesnice o nic
   nepřišla: Enter na tlačítku je klik, tedy tatáž cesta jako u myši. */
/* Myš je při otevřeném seznamu uvnitř rámečku, takže ten svítí oranžově —
   seznam přebírá tutéž barvu, aby obojí drželo pohromadě jako jeden prvek. */
.hl-lang.je-otevreno .hl-lang-menu{border-color:var(--orange)}
.hl-lang-menu a,.hl-lang-menu span{display:flex;align-items:center;justify-content:center;
  height:40px;font-size:16px;line-height:normal;font-weight:700;color:var(--dark);
  transition:background .18s ease,color .18s ease}
.hl-lang-menu span.je-tady{color:var(--orange)}
.hl-lang-tlacitko[aria-expanded="true"] .hl-sipka{transform:rotate(-90deg)}

.hlavicka .hl-cta{position:absolute;right:max(24px,calc(50% - 936px));top:24px;width:215px;height:48px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--white);color:var(--white);
  font-size:16px;line-height:normal;font-weight:700;white-space:nowrap}
.hlavicka .hl-logo{color:var(--white)}

/* ==========================================================================
   PANEL MENU 592×934 — 1:1 podle Figmy (node 5:162)

   ⚠️ Umístění je z prototypu, ne z rámečku menu: panel se lepí na hamburger
   jako záložka — začíná na jeho PRAVÉ hraně (76) a HORNÍ hraně (26), takže
   nad ním i vlevo od něj zůstává kus hero fotky a hamburger z panelu vyčnívá
   jako ouško. Zůstává přitom hamburgerem, nemění se na křížek (ten má jen
   mobilní verze, node 414:2444) — zavírá se jím, klávesou Esc nebo klikem mimo.

   Stránka pod panelem se v prototypu neztmavuje (ověřeno v barvách snímku),
   takže závoj je průhledný a slouží jen k zachycení kliku mimo panel.
   ========================================================================== */
/* Závoj pod panelem. Původně byl průhledný a sloužil jen jako chytač
   kliknutí; na stránce s bílým pozadím ale panel splýval se stránkou
   a nebylo poznat, kde končí. Ztmavení je jemné a s lehkým rozostřením
   („micro glass“), aby obsah pod ním zůstal čitelný jako kontext. */
.hl-zavoj{position:fixed;inset:0;z-index:25;
  background:rgba(12,18,22,.28);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s ease}
.hl-zavoj.je-videt{opacity:1}

/* Panel sedí na hamburgeru (26 shora) a stejnou mezeru drží i dole — proto se
   výška počítá z okna, ne z návrhu. Strop je ta výška, jakou by měl na Full HD
   (1080 − 2 × 26): na vyšším monitoru už by přes celou obrazovku působil moc
   (Martin 19. 8.). Obsah je od té chvíle v toku a mezery mezi bloky se
   roztahují, takže se nikde nescrolluje. */
.hl-panel{position:fixed;left:76px;top:26px;z-index:30;width:592px;
  height:calc(100vh - 52px);max-height:1028px;
  overflow-y:auto;background:var(--white);
  border-left:4px solid var(--orange);
  box-shadow:0 24px 64px -16px rgba(12,18,22,.45);
  transform:translateX(calc(-100% - 76px));transition:transform .3s ease}
.hl-panel.je-otevreno{transform:translateX(0)}
/* Nad 1920 se panel drží vycentrovaného bloku jako hamburger vedle něj
   (viz poznámka u `body`). Zavírá se posunem o vlastní šířku plus odsazení
   zleva — a to odsazení je nad 1920 proměnlivé, takže se přepisuje spolu
   s `left`. `vw` na rozdíl od `%` počítá i s posuvníkem, proto je v posunu
   rezerva 24 px navíc: dráha je o kousek delší, ale panel po zavření nikde
   nekouká. */
@media (min-width:1921px){
  .hl-panel{left:calc(50% - 884px);
    transform:translateX(calc(-100% - 50vw + 860px))}
  .hl-panel.je-otevreno{transform:translateX(0)}
}
.hl-panel-in{position:relative;display:flex;flex-direction:column;
  height:100%;padding:80px 60px 36px}

.hl-panel .label{position:static;flex:0 0 auto;margin-bottom:32px}

/* výpis typů — komponenta „product-bar“ z grafiky, stejná jako v sekci produktů:
   linka jen pod řádkem, chevron u pravého okraje.
   Řádky si drží výšku z návrhu, ale v nízkém okně se smrsknou (až na 52), aby
   se panel vešel bez posuvníku. */
.hl-horaky{flex:0 1 auto;display:flex;flex-direction:column;min-height:0;
  width:432px;margin-left:16px}
.hl-horaky a{flex:0 1 88px;min-height:52px;
  display:flex;align-items:center;justify-content:space-between;
  padding-right:25px;border-bottom:1px solid var(--outline);
  font-size:28px;line-height:normal;font-weight:500;letter-spacing:-.56px;
  color:var(--dark)}
.hl-horaky svg{flex:0 0 24px;width:24px;height:24px;color:var(--orange)}
.hl-horaky a:hover span{color:var(--orange)}

/* Dvojice sloupců pod výpisem. `margin-top:auto` je pružina: volné místo
   panelu se rozdělí mezi tuhle mezeru a tu nad copyrightem, takže obsah drží
   proporce místo aby se slehl nahoru. `padding-top` je jejich minimum. */
.hl-panel-stred{flex:0 0 auto;display:flex;gap:38px;margin-top:auto;padding-top:48px}

/* řádkování je psané napevno: rozteč v návrhu je 39 (řádek 23 + mezera 16)
   a s `normal` vychází o pixel míň, takže se seznam přes šest položek rozejde */
.hl-web{width:194px;
  display:flex;flex-direction:column;gap:16px;
  font-size:18px;line-height:23px;color:var(--gray-font)}
.hl-gdpr{width:198px;
  display:flex;flex-direction:column;gap:16px;
  font-size:16px;line-height:normal;color:var(--gray-font)}
.hl-web a:hover,.hl-gdpr a:hover{color:var(--orange)}

.hl-panel-copy{position:static;flex:0 0 auto;margin-top:auto;padding-top:32px;
  display:flex;gap:24px;
  font-size:14px;line-height:normal;color:var(--gray-font);white-space:nowrap}
.hl-panel-copy a{text-decoration:underline}

/* Tlačítko a jazyk se sem stěhují z hlavičky, jakmile se tam přestanou vejít.
   Drží se pravého okraje panelu a jedné výšky: když je jazyk sám, sedne přesně
   tam, kde jinak stojí tlačítko, ne doprostřed prázdna. */
.hl-panel-extra{position:static;flex:0 0 auto;margin-top:24px;
  display:flex;align-items:center;justify-content:flex-end;gap:16px}
.hl-lang--panel{position:relative;width:72px;height:40px;
  border-color:var(--outline);color:var(--dark)}
.hl-lang--panel .hl-lang-tlacitko{display:flex;align-items:center;justify-content:center;gap:4px}
.hl-lang--panel .hl-kod{position:static;transform:none;font-size:14px}
.hl-lang--panel .hl-sipka{position:static;display:flex;width:20px;height:20px;
  transform:rotate(90deg)}
.hl-lang--panel .hl-sipka svg{width:20px;height:20px}
/* V panelu stojí přepínač u spodní hrany, takže se seznam rozbaluje nahoru —
   dolů by vyjel z panelu ven. */
.hl-lang--panel .hl-lang-menu{top:auto;bottom:100%;translate:0 6px}
.hl-lang--panel .hl-lang-menu a,.hl-lang--panel .hl-lang-menu span{height:36px;font-size:14px}
.hl-panel-extra .btn{white-space:nowrap}
@media (min-width:1201px){
  .hl-panel-extra .btn{display:none}
}
/* Hranice musí sedět na tu, kde jazyk mizí z hlavičky (tabletová sada ho vypíná
   od 1320) — jinak by mezi 1320 a 961 nebyl ani nahoře, ani tady. */
@media (min-width:1321px){
  .hl-lang--panel{display:none}
}
/* zbude-li v bloku jen skrytý obsah, ať po něm nezůstane prázdné místo */
@media (min-width:1321px){
  .hl-panel-extra{gap:0;margin-top:0}
}

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */
.sekce{position:relative;width:100%}

/* ——— fotky přes celou šířku ———————————————————————————————————
   Fotka při scrollování stojí na místě a obsah sekce jede přes ni; sekce
   funguje jako okénko, kterým je vidět. Stejné chování má hero, citát
   ředitele i kontakt. Na mobilu se fotka posouvá s obsahem — iOS Safari
   pevné pozadí nevykreslí (viz mobilní breakpoint dole).             */
.foto-pevna{background-repeat:no-repeat;background-position:center center;
  background-size:cover;background-attachment:fixed}
/* gradient leží nad fotkou a scrolluje se sekcí */
.foto-stin{position:absolute;inset:0}

/* ——— HERO 1920×990 ————————————————————————————————————————— */
.hp-hero{height:990px;background-color:var(--dark-2);overflow:hidden;
  background-image:url(../img/hero-uvod.jpg)}
/* ——— prolínačka fotek v hero ——————————————————————————————
   Fotek je `--pocet`, každá svítí stejně dlouho. Vrstvy nesou snímky 2..N,
   první je pozadím sekce a je vidět vždy, když je všechny vrstvy průhledné —
   proto se bez animací (nebo s `prefers-reduced-motion`) hero nezmění.
   Vrstva má `.foto-pevna`, takže drží stejné chování jako pozadí sekce:
   na desktopu stojí, na mobilu ji posouvá skript. */
.hp-hero{--pocet:4;--doba:6s}
.hero-snimek{position:absolute;inset:0;display:block;opacity:0;
  animation:hero-prolnuti calc(var(--doba) * var(--pocet)) linear infinite;
  animation-delay:calc(var(--doba) * var(--poradi))}
@keyframes hero-prolnuti{
  /* 25 % = jeden snímek ze čtyř, 5 % ≈ 1,2 s na prolnutí */
  0%{opacity:0} 5%{opacity:1} 25%{opacity:1} 30%{opacity:0} 100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hero-snimek{animation:none;opacity:0}
}

.hp-hero .foto-stin{background:linear-gradient(180deg,
  rgba(12,18,22,0) 0%,rgba(12,18,22,.64) 47.115%,var(--dark) 100%)}
.hp-hero .hero-in{position:relative;height:100%;width:var(--wrap);margin:0 auto}
.hp-hero .eyebrow{position:absolute;left:2px;top:488px}
.hp-hero .h1{position:absolute;left:0;top:538px;width:662px;color:var(--white)}
.hp-hero .perex{position:absolute;left:0;top:734px;width:593px;color:var(--white)}
.hp-hero .hero-btns{position:absolute;left:0;top:834px;display:flex;gap:24px}

/* ——— INTRO 1920×782 ———————————————————————————————————————— */
/* Prvky sedí na kontejneru 1440; výkres a rámečky mu ujíždějí doleva
   (v grafice zasahují do okraje stránky), proto záporné odsazení. */
.hp-intro{height:782px;background:var(--dark);color:var(--gray-font)}
.hp-intro .wrap{height:100%}
.hp-intro b{color:var(--white);font-weight:inherit}

.int-znacky{position:absolute;left:max(24px,calc(50% - 936px));top:111px;display:flex;gap:7px}
.int-znacky span{width:71px;height:67px;border:1px solid var(--dark-line)}

.int-vykres{position:absolute;left:-64px;top:160px;width:712px;height:542px;overflow:hidden}
.int-vykres img{position:absolute;left:-21.71%;top:0;width:142.2%;height:105.63%;max-width:none}

/* ⚠️ Sloupec vpravo jde v toku, ne na pevných pozicích (Jiřina 27. 8.):
   v užších oknech měl první odstavec o řádek víc, než s kolika návrh počítal,
   a odstavce s tlačítkem se do sebe zařezávaly. Odsazení dávají návrhové
   pozice (první odstavec 227, druhý 379, tlačítko 561 — tedy 32 mezi nimi);
   výkres vlevo zůstává pozicovaný. Sada je v dotazu na šířku, protože pod
   1320 jde sekce do jednoho sloupce a odsazení zleva by ji vytlačilo. */
@media (min-width:1321px){
  .hp-intro .wrap{display:flex;flex-direction:column;align-items:flex-start}
  .int-txt{position:static;width:564px;margin-left:732px;
    font-size:20px;line-height:30px}
  .int-txt--1{margin-top:227px}
  .int-txt--2{margin-top:32px}
  /* Tlačítko drží svou výšku i tam, kde je text delší (španělština):
     sloupec má výšku sekce, a flex ho jinak stlačí z 48 na 28 px —
     text se pak ořízne. */
  .int-btn{position:static;margin:32px 0 0 732px;flex:0 0 auto}
}
.int-txt{font-size:20px;line-height:30px}

/* ——— PRODUKTY 1920×894 ——————————————————————————————————— */
/* Bílá sekce zakončená linkou; vlevo výpis typů hořáků, vpravo šedý panel
   s vyfotografovaným hořákem (průhledné pozadí), popiskem a tlačítkem. */
.hp-produkty{height:894px;background:var(--white);border-bottom:1px solid var(--outline)}
.hp-produkty .wrap{height:100%;position:relative}
.hp-produkty .znacky{position:absolute;left:max(24px,calc(50% - 936px));top:184px}
.hp-produkty .label{position:absolute;left:0;top:154px}
.hp-produkty .h2{position:absolute;left:0;top:182px;width:575px}

/* výpis typů — linka jen pod řádkem, nad prvním žádná */
.hp-produkty .seznam{position:absolute;left:121px;top:368px;width:464px}
.hp-produkty .seznam a{position:relative;display:flex;align-items:center;height:88px;
  border-bottom:1px solid var(--outline);
  font-size:28px;line-height:normal;font-weight:500;letter-spacing:-.56px;
  transition:color .18s ease,border-color .18s ease,padding-left .18s ease}
.hp-produkty .seznam svg{position:absolute;right:25px;top:31px;width:24px;height:24px;
  color:var(--orange);transition:right .18s ease}

/* najetí: text i linka pod ním zoranžoví, text i šipka se posunou o 8 px
   doprava. Bez podkladu — jen barva a posun.
   Jen tam, kde je myš a kde je vedle výpisu panel s fotkou; na mobilu má
   řádek vlastní odsazení, které by posun přebil. */
@media (hover:hover) and (min-width:640px){
  .hp-produkty .seznam a:hover,
  .hp-produkty .seznam a.je-aktivni{color:var(--orange);border-bottom-color:var(--orange);
    padding-left:8px}
  .hp-produkty .seznam a:hover svg,
  .hp-produkty .seznam a.je-aktivni svg{right:17px}
}
.hp-produkty .seznam a:focus-visible{color:var(--orange);border-bottom-color:var(--orange);
  outline:2px solid var(--orange);outline-offset:-2px}

.hp-produkty .panel{position:absolute;left:730px;top:104px;width:708px;height:686px;
  background:var(--gray-bg);overflow:hidden}
.hp-produkty .panel .foto{position:absolute;left:-95px;top:90px;width:851px;height:481px;
  max-width:none}
/* Pod ostrým hořákem leží tatáž fotka i s bílým pozadím a stínem, na 50 %,
   nahoře a dole vykrytá do šedé panelu — od toho je plocha kolem hořáku
   o kousek světlejší a hořák má pod sebou stín. */
.hp-produkty .panel .zavoj{position:absolute;left:-95px;top:90px;width:851px;height:481px;
  opacity:.5;background-size:cover;background-position:center;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 36%,#000 74%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 36%,#000 74%,transparent 100%)}

/* výměna fotky a popisku po najetí na typ hořáku — obsah panelu se prolne */
.hp-produkty .panel .foto,.hp-produkty .panel .zavoj,.hp-produkty .panel .popis{
  transition:opacity .22s ease}
.hp-produkty .panel.meni-se .foto,
.hp-produkty .panel.meni-se .zavoj,
.hp-produkty .panel.meni-se .popis{opacity:0}
@media (prefers-reduced-motion:reduce){
  .hp-produkty .panel .foto,.hp-produkty .panel .zavoj,.hp-produkty .panel .popis,
  .hp-produkty .seznam a,.hp-produkty .seznam svg{transition:none}
}
.hp-produkty .panel .popis{position:absolute;left:52px;top:551px;width:379px;
  font-size:18px;line-height:26px;color:var(--gray-font)}
.hp-produkty .panel .btn{position:absolute;left:484px;top:590px}

/* ——— SLUŽBY 1920×920 ——————————————————————————————————————— */
.hp-sluzby{height:920px}
.hp-sluzby .wrap{height:100%;position:relative}
.hp-sluzby .znacky{position:absolute;left:max(24px,calc(50% - 936px));top:145px}
.hp-sluzby .label{position:absolute;left:0;top:104px}
.hp-sluzby .h2{position:absolute;left:0;top:132px;width:600px}
/* text téhle sekce je o dva stupně větší než v ostatních (20/30, ne 18/26) */
.hp-sluzby .text{position:absolute;left:732px;top:145px;width:574px;
  font-size:20px;line-height:30px;color:var(--gray-font)}
.hp-sluzby .text b{font-weight:400;color:var(--dark)}
.hp-sluzby .btn{position:absolute;left:732px;top:289px}
.hp-sluzby .karty{position:absolute;left:0;top:416px;display:grid;
  grid-template-columns:repeat(4,342px);gap:24px}

/* Dlaždice služby. Fotka je v grafice posazená mimo kartu (849×467 na
   -400/-32) a kartou jen prosvítá — výřez proto není přepočítaný v CSS,
   ale vyexportovaný z Figmy rovnou jako 342×400 (soubory jsou 2× kvůli
   retině). Pásek s názvem je matné sklo: rozostří fotku pod sebou. */
.hp-sluzby .karta{position:relative;width:342px;height:400px;overflow:hidden;
  background:var(--dark)}
.hp-sluzby .karta .foto{display:block;width:100%;height:100%;object-fit:cover}
/* ⚠️ Ztmavení pod páskem je navíc proti návrhu. V grafice mají všechny čtyři
   dlaždice tmavou fotku, takže bílý název na matném skle drží sám. Klientova
   fotka k „Engineering" je ale CAD render na bílé (19. 8.) a název na ní zmizel.
   Přechod je proto součástí dlaždice, ne fotky — přežije i výměnu fotek. */
.hp-sluzby .karta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;
  background:linear-gradient(180deg,rgba(12,18,22,0) 0%,rgba(12,18,22,.55) 100%);
  pointer-events:none}
.hp-sluzby .karta .nazev{position:absolute;z-index:1;left:0;bottom:0;width:100%;height:56px;
  display:flex;align-items:flex-start;padding:10px 0 0 24px;
  background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(18.3px);backdrop-filter:blur(18.3px);
  font-size:28px;line-height:35px;font-weight:500;letter-spacing:-.56px;
  color:var(--white);white-space:nowrap}
.hp-sluzby .karta .nazev--dlouhy{font-size:26px;letter-spacing:-.52px}
.sl-foto-mobil{display:none}

/* ——— PROČ MY 1920×788 —————————————————————————————————————
   Pozadí je bílé (ne šedé) a panely nemají ani rámeček, ani podklad —
   dělí je jen svislá linka na levé straně; za posledním už žádná není.
   Ikony jsou v šabloně vypsané inline, barvu tak berou z `color`. */
.hp-proc{height:788px;background:var(--white)}
.hp-proc .wrap{height:100%;position:relative}
.hp-proc .znacky{position:absolute;left:max(24px,calc(50% - 936px));top:147px}
.hp-proc .label{position:absolute;left:-3px;top:108px}
/* řádkování nadpisu je tu 56, ne 64 jako u služeb — liší se sekce od sekce */
.hp-proc .h2{position:absolute;left:-1px;top:136px;width:659px;line-height:56px}
.hp-proc .text{position:absolute;left:735px;top:147px;width:564px;
  font-size:18px;line-height:26px;color:var(--gray-font)}
.hp-proc .text b{font-weight:400;color:var(--dark)}

.hp-proc .karty{position:absolute;left:1px;top:380px;width:1440px;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.hp-proc .karta{position:relative;height:335px;padding:18px 0 0 31px;
  border-left:1px solid var(--outline)}
.hp-proc .karta .ikona{display:block;width:48px;height:48px;color:var(--dark)}
.hp-proc .karta .ikona svg{display:block;width:100%;height:100%}
/* název se láme jen tam, kde je v šabloně <br> — pevná šířka by ho u delších
   („realizace projektů") přelomila na tři řádky a rozhodila mřížku */
.hp-proc .karta b{position:absolute;left:31px;top:161px;
  font-size:24px;line-height:30px;font-weight:500;white-space:nowrap}
.hp-proc .karta .popis{position:absolute;left:31px;top:244px;width:199px;
  font-size:16px;line-height:20px;color:var(--gray-font)}

/* ——— CITÁT 1920×870 —————————————————————————————————————————
   Fotka leží v grafice na tmavém podkladu s krytím 21 %. Ztmavení proto není
   součástí pozadí, ale vlastní vrstva `.foto-stin` — jinak by se na mobilu
   posouvalo spolu s fotkou (posun tam řídí skript) a odhalovalo neztmavený pruh.
   Obsah je vycentrovaný na sekci (ne na kontejneru), proto left:0;right:0. */
.hp-citat{height:870px;color:var(--white);background-color:var(--dark);
  background-image:url(../img/citat-kotelna.jpg)}
.hp-citat .foto-stin{background:rgba(12,18,22,.79)}
.hp-citat .wrap{height:100%;position:relative;text-align:center}
/* Uvozovka je jen obrys o síle 1 px. Když sedí na půl pixelu, rozmaže se
   vyhlazováním přes dva a působí slabě a roztřepeně — proto má pevnou
   celočíselnou pozici (663 = 903 z grafiky mínus okraj kontejneru), ne
   vycentrování, a linku o kousek silnější, ať drží sytost jako v návrhu. */
.hp-citat .uvoz{position:absolute;left:663px;top:146px;
  display:block;width:117px;height:84px;color:var(--orange)}
/* margin:auto drží uvozovku uprostřed i tam, kde jde blok do toku přes celou
   šířku (mobil a tablet) — pevné `left` výš platí jen pro absolutní umístění */
.hp-citat .uvoz svg{display:block;width:100%;height:100%;margin:0 auto}
.hp-citat .cit{position:absolute;left:50%;transform:translateX(-50%);top:248px;
  width:1046px;font-size:48px;line-height:64px;letter-spacing:-.96px}
.hp-citat .podpis{position:absolute;left:0;right:0;top:528px;
  font-size:18px;line-height:26px}
.hp-citat .znak{position:absolute;left:50%;transform:translateX(-50%);top:576px;
  width:268px;height:148px}

/* ——— SVĚT 1920×657 ———————————————————————————————————————
   Mapa přesahuje kontejner doleva (v grafice začíná na 211, kontejner na 240).
   Zvýrazněné země jsou vázané na mapu v procentech, ne pevně — poměr sedí
   na všech třech šířkách z návrhu (20,6 / 34,9 / 48,0 / 58,9 %), takže se
   s mapou samy zmenšují. */
.hp-svet{height:657px;background:var(--gray-bg)}
.hp-svet .wrap{height:100%;position:relative}
.hp-svet .mapa{position:absolute;left:-29px;top:95px;width:700px;height:467px}
/* země se pozicují uvnitř mapy — kdyby mapa nebyla pozicovaná (v mezistavech
   a na mobilu jde do toku), počítaly by procenta z kontejneru a rozjely by se */
.hp-svet .mapa-podklad{width:100%;height:100%;object-fit:contain}
.hp-svet .mapa-zeme{position:absolute;left:20.62%;top:34.89%;width:47.96%;height:58.93%}
.hp-svet .label{position:absolute;left:732px;top:174px}
.hp-svet .h2{position:absolute;left:732px;top:210px;width:448px;line-height:56px}
.hp-svet .text{position:absolute;left:732px;top:346px;width:563px;
  font-size:18px;line-height:26px;color:var(--gray-font)}
.hp-svet .text b{font-weight:400;color:var(--dark)}

/* ——— LOGA 1920×781 ———————————————————————————————————————
   Dva pásy log jedoucí proti sobě. Velikosti log i rozteče drží poměr `--m`
   (1 = velikosti z návrhu pro 1920), takže na užších obrazovkách stačí
   přepsat jedno číslo. Každý pás má loga dvakrát pod sebou a posouvá se
   o polovinu své výšky — smyčka tak navazuje beze švu.
   Prolnutí do pozadí je maskou, ne bílým překryvem jako v grafice:
   vypadá stejně, ale nezáleží na tom, jakou barvu má sekce pod ním. */
.hp-loga{height:781px;background:var(--white);overflow:hidden}
.hp-loga .wrap{height:100%;position:relative}
.hp-loga .znacky{position:absolute;left:max(24px,calc(50% - 936px));top:209px}
.hp-loga .label{position:absolute;left:-3px;top:170px}
.hp-loga .h2{position:absolute;left:-1px;top:206px;width:496px}
.hp-loga .text{position:absolute;left:-1px;top:422px;width:553px;
  font-size:18px;line-height:26px;color:var(--gray-font)}
.hp-loga .text b{font-weight:400;color:var(--dark)}

.hp-loga .pasy{--m:1;position:absolute;left:746px;top:0;height:100%;
  display:flex;gap:24px}
.hp-loga .pas{width:293px;height:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 8.7%,#000 24.7%,#000 75.2%,transparent 91.3%);
  mask-image:linear-gradient(180deg,transparent 8.7%,#000 24.7%,#000 75.2%,transparent 91.3%)}
/* Pásy jsou rozladěné schválně, dvěma způsoby: mají různou dobu otáčky
   (se stejnou by se jednou za kolo potkaly ve shodné poloze) a druhý je
   posunutý o půl položky, takže loga nikdy nestojí vedle sebe v jedné řadě
   a sekce nevypadá jako dva sloupce jedné tabulky. */
.hp-loga .pas-in{animation:hp-loga-nahoru 60s linear infinite}
.hp-loga .pas--2 .pas-in{position:relative;top:calc(63px * var(--m));
  animation-name:hp-loga-dolu;animation-duration:77s}
.hp-loga .polozka{height:calc(126.7px * var(--m));
  display:flex;align-items:center;justify-content:center}
.hp-loga .polozka img{width:calc(var(--w) * var(--m));height:auto}

@keyframes hp-loga-nahoru{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes hp-loga-dolu{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .hp-loga .pas-in{animation:none}
}

/* ——— KONTAKT / FORMULÁŘ 1920×750 ——————————————————————————
   Fotka má v grafice krytí 31 % nad tmavým podkladem — což je totéž jako
   tmavá vrstva s krytím 69 % nad plnou fotkou, a tak je to i tady. Nad ní
   ještě gradient zleva, aby měl text pod sebou stálý kontrast.
   Obojí drží `.foto-stin`, aby se na mobilu neposouvalo s fotkou. */
/* Výška je z návrhu, ale jako spodní mez — s delším nadpisem (němčina) by
   se poslední řádek adresy o pevnou výšku otíral (Jiřina 27. 8.). */
.hp-form{min-height:750px;padding-bottom:24px;
  background-color:var(--dark);color:var(--white);
  background-image:url(../img/form-kotelna.jpg);
  background-size:114.69% auto;background-position:20.9% 38.5%}
.hp-form .foto-stin{background-color:rgba(12,18,22,.69);
  background-image:linear-gradient(90deg,#0c1216 0%,rgba(12,18,22,0) 52%)}
/* ⚠️ Levý sloupec jde v běžném toku, ne na pevných pozicích z návrhu
   (Jiřina 27. 8.): německý nadpis „Haben Sie ein Projekt? Sprechen wir
   darüber.“ má čtyři řádky místo dvou a na pevné pozici ležel přes telefon
   i e-mail — a protože je tahle sekce na konci **každé** stránky, bylo to
   vidět na celém německém webu. Odsazení jsou nastavená tak, že vyjdou
   pozice z návrhu (label 154, nadpis 194, telefon 346, e-mail 394,
   firma 458, adresa 492); sloupec se teď při delším nadpisu jen posune níž.
   Rámečky a panel zůstávají pozicované — jsou mimo tok, takže je růst
   nadpisu neposouvá; kontejner proto nesmí dostat odsazení shora
   (počítal by se jim do `top`), první odsazení nese sám nadpisek. */
.hp-form .wrap{height:100%;position:relative;
  display:flex;flex-direction:column;align-items:flex-start}
.hp-form .znacky{position:absolute;left:max(24px,calc(50% - 936px));top:220px}
.hp-form .znacky span{border-color:var(--dark-line)}
.hp-form .label{position:static;margin:154px 0 0 -3px}
.hp-form .h2{position:static;width:535px;margin:20px 0 0 1px;color:var(--white)}

/* telefon a e-mail — ikona v oranžovém rámečku, vedle ní kontakt */
.hp-form .fm-spoj{position:static;display:flex;align-items:center;gap:14px;
  font-size:22px;line-height:normal;font-weight:600;color:var(--white)}
.hp-form .fm-spoj--tel{margin:24px 0 0 1px;text-transform:uppercase}
.hp-form .fm-spoj--mail{margin:8px 0 0 1px}
.hp-form .fm-spoj .ikona{flex:0 0 40px;width:40px;height:40px;position:relative;
  border:1px solid var(--orange);color:var(--orange)}
.hp-form .fm-spoj--tel .ikona svg{position:absolute;left:7px;top:7px;width:24px;height:24px}
.hp-form .fm-spoj--mail .ikona svg{position:absolute;left:9px;top:10px;width:26px;height:26px}

.hp-form .fm-firma{position:static;margin:24px 0 0 1px;
  font-size:18px;line-height:26px;font-weight:600;white-space:nowrap}
.hp-form .fm-adresa{position:static;width:289px;margin:8px 0 0 1px;
  font-size:16px;line-height:26px}

/* panel z matného skla — rozteče polí vycházejí na výšku z návrhu (534),
   takže obsah může jít v běžném toku a nemusí mít pevné pozice */
.hp-form .fm-panel{position:absolute;left:730px;top:108px;width:707px;height:534px;
  padding:50px 72px 0;background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(18.3px);backdrop-filter:blur(18.3px);
  display:flex;flex-direction:column;align-items:flex-start;overflow:hidden}
.hp-form .fm-pole{width:100%;height:60px;margin-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.3)}
.hp-form .fm-pole--zprava{height:114px}
.hp-form .fm-pole input,.hp-form .fm-pole textarea{display:block;width:100%;height:100%;
  padding:28px 0 0;background:none;border:0;resize:none;
  font-size:14px;line-height:24px;color:var(--white)}
.hp-form .fm-pole input::placeholder,.hp-form .fm-pole textarea::placeholder{
  color:var(--white);opacity:1}
/* souhlas se zaškrtávátkem — nativní políčko zůstává kvůli klávesnici
   a čtečkám, jen se schová za vlastní čtvereček vedle textu */
.hp-form .fm-souhlas{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  margin:8px 0 0;font-size:14px;line-height:20px}
/* Odkaz na zpracování osobních údajů je podtržený pořád (ať je poznat, že se
   dá otevřít) a na najetí se probarví oranžově — Martin 24. 8. Vlastní hover
   proto, že celý řádek je `<label>`: bez něj by najetí na odkaz vypadalo
   stejně jako najetí kamkoli jinam do souhlasu. */
.hp-form .fm-souhlas a{text-decoration:underline;transition:color .18s ease}
@media (hover:hover){
  .hp-form .fm-souhlas a:hover{color:var(--orange)}
}
.hp-form .fm-souhlas input{position:absolute;width:1px;height:1px;
  opacity:0;pointer-events:none}
.hp-form .fm-ctverec{flex:0 0 20px;width:20px;height:20px;position:relative;
  border:1px solid rgba(255,255,255,.5);transition:background .15s,border-color .15s}
.hp-form .fm-souhlas:hover .fm-ctverec{border-color:var(--orange)}
.hp-form .fm-souhlas input:checked ~ .fm-ctverec{background:var(--orange);
  border-color:var(--orange)}
/* fajfka — dvě strany rámečku otočené o 45° */
.hp-form .fm-ctverec::after{content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid var(--white);border-width:0 2px 2px 0;
  transform:rotate(45deg);opacity:0;transition:opacity .15s}
.hp-form .fm-souhlas input:checked ~ .fm-ctverec::after{opacity:1}
.hp-form .fm-souhlas input:focus-visible ~ .fm-ctverec{outline:2px solid var(--orange);
  outline-offset:2px}
.hp-form .fm-panel .btn{margin-top:26px}

/* past na roboty — pole musí zůstat v kódu, ale mimo obraz i mimo tabulátor */
.fm-past{position:absolute;left:-9999px;width:1px;height:1px;
  opacity:0;pointer-events:none}

/* hláška po odeslání — chyba nad formulářem, potvrzení místo něj */
.hp-form .fm-hlaska{margin:0 0 20px;padding:12px 16px;
  font-size:14px;line-height:20px;
  border-left:3px solid var(--orange);background:rgba(255,255,255,.12)}
.hp-form .fm-hlaska--ok{border-left-color:#4caf50}
/* Potvrzení po odeslání — panel si drží rozměr z návrhu (707×534), takže
   samotná věta uprostřed by v něm plavala jako proužek. Dostane proto značku
   a druhý řádek a celý blok se vycentruje. */
.hp-form .fm-panel--hotovo{display:flex;align-items:center;justify-content:center;
  padding:40px}
.hp-form .fm-hotovo{max-width:360px;text-align:center}
.hp-form .fm-fajfka{display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;margin:0 auto 24px;border-radius:50%;
  background:var(--orange);color:var(--white)}
.hp-form .fm-fajfka svg{display:block;width:36px;height:36px}
.hp-form .fm-panel--hotovo .fm-hlaska{margin:0;padding:0;background:none;
  border:0;font-size:28px;line-height:36px;font-weight:500}
.hp-form .fm-detail{margin:12px 0 0;font-size:16px;line-height:24px;
  color:rgba(255,255,255,.7)}

/* ==========================================================================
   PATIČKA 1920×549 — pozice 1:1 podle Figmy (node 323:1883)
   ========================================================================== */
/* Šedé pozadí patí i pod dolním blokem — v grafice je blok deklarovaný na 227,
   ale šedá pokračuje až na konec rámu (posledních 15 px). */
.paticka{height:549px;position:relative;overflow:hidden;background:var(--gray-bg)}
.paticka .pat-in{width:var(--wrap);margin:0 auto;position:relative;height:100%}

/* horní blok — pobočka Polsko (bílý, 305 px) */
.pat-polsko{height:305px;background:var(--white);position:relative}
.pat-label{position:absolute;left:0;top:48px;font-size:16px;line-height:1;font-weight:600;
  color:var(--blue);text-transform:uppercase;letter-spacing:-.32px;margin:0}
/* Dělicí linky začínají na 95, ale text v sloupci až na 106 — proto odsazení
   shora; bez něj celý blok visí o 11 px výš než v návrhu. */
.pat-sloupce{position:absolute;left:0;top:95px;display:grid;
  grid-template-columns:376px 352px 1fr;height:162px}
.pat-sl{padding:11px 0 0 24px;border-left:1px solid var(--grey-line);
  font-size:16px;line-height:26px;color:var(--gray-font);text-align:left}
.pat-sl:first-child{padding-left:20px}
.pat-sl b{display:block;font-size:18px;line-height:26px;font-weight:600;color:var(--dark);
  margin-bottom:8px}
.pat-sl a{text-decoration:underline}
.pat-logo{position:absolute;left:1345px;top:105px;width:98px;height:69px;
  object-fit:contain}

/* dolní blok — menu a copyright (šedý, 227 px) */
.pat-dole{height:227px;background:var(--gray-bg);position:relative}
.pat-horaky{position:absolute;left:0;top:56px;display:flex;gap:24px;
  font-size:18px;line-height:normal;font-weight:600;color:var(--dark)}
/* Nejširší typ drží v návrhu pevnou šířku. Míří na něj třída, ne pořadí —
   od 28. 8. je v řadě navíc odkaz na souhrnnou stránku a `:nth-child` by
   šířku dal jeho sousedovi (v řadě pak vznikla mezera). */
.pat-horaky .pat-typ-2{width:242px}
.pat-menu{position:absolute;left:838px;top:56px;display:flex;gap:32px;
  font-size:18px;color:var(--gray-font);white-space:nowrap}
.pat-linka{position:absolute;left:0;top:136px;width:var(--wrap);height:1px;
  background:var(--grey-line)}
.pat-copy{position:absolute;left:0;top:169px;display:flex;gap:24px;
  font-size:16px;color:var(--gray-font);white-space:nowrap}
.pat-copy a{text-decoration:underline}
.pat-gdpr{position:absolute;left:1243px;top:169px;display:flex;gap:24px;
  font-size:16px;color:var(--gray-font);white-space:nowrap}
/* Barva se píše dvojitou třídou — reset `a:link{color:inherit}` má vyšší váhu
   než jedna třída a šipka by zůstala tmavá (stejná past jako u tlačítek).

   Šipka **plave nad stránkou** a objeví se, jakmile člověk odscrolluje první
   obrazovku — aby nemusel dojet až do patičky, když se chce vrátit nahoru
   (Martin 19. 8.). Pravý okraj lícuje s tím, co stojí nejvíc vpravo v hlavičce:
   tady s tlačítkem „Konzultovat projekt“ (24), níž s hamburgerem (40, na mobilu
   26). Třídu `je-videt` přidává `funkce/skripty.js`; bez skriptu je šipka vidět
   pořád, což je pořád lepší než mít ji zamčenou. */
.paticka .pat-nahoru{position:fixed;right:max(24px,calc(50% - 936px));bottom:24px;z-index:18;
  width:40px;height:40px;
  background:var(--white);display:flex;align-items:center;justify-content:center;
  color:var(--gray-font)}
/* chevron míří doprava, nahoru ho otočí až tenhle zvrat */
.pat-nahoru svg{display:block;width:32px;height:32px;transform:rotate(-90deg)}
.js .paticka .pat-nahoru{opacity:0;visibility:hidden;translate:0 12px;
  box-shadow:0 8px 24px -10px rgba(12,18,22,.45);
  transition:opacity .3s ease,translate .3s cubic-bezier(.16,1,.3,1),
             visibility 0s linear .3s,background .2s ease,color .2s ease}
.js .paticka .pat-nahoru.je-videt{opacity:1;visibility:visible;translate:none;
  transition-delay:0s}
/* při otevřeném menu nemá co dělat — vedle panelu by jen visela ve vzduchu */
.js.menu-otevreno .paticka .pat-nahoru{opacity:0;visibility:hidden;transition-delay:0s,0s,.3s}
@media (prefers-reduced-motion:reduce){
  .js .paticka .pat-nahoru{transition:opacity .01s}
}

/* ——— hlavička: CTA a jazyk by se dřív nebo později potkaly s logem ————
   (logo je vždy uprostřed, takže volné místo po stranách ubývá dvakrát rychleji) */
/* pozor na váhu selektoru: samotné .hl-cta by nepřebilo .hlavicka .hl-cta výš,
   tlačítko by zůstalo viset přes logo */
@media (max-width:1200px){
  .hlavicka .hl-cta{display:none}
}
@media (max-width:960px){
  /* jen ten v hlavičce — jeho kopie v panelu má stejnou třídu a od téhle
     šířky naopak nastupuje místo něj */
  .hlavicka .hl-lang{display:none}
}
/* Jakmile tlačítko zmizí, drží se logo pořád uprostřed a vpravo zůstává prázdno
   — hlavička pak vypadá přeložená doleva. Rozdělí se proto na kraje jako na
   mobilu (logo vlevo, hamburger vpravo), jen ve velikostech z MacBooku.
   Okraj 40 je tentýž, jaký mají v tomhle pásmu sekce, takže logo lícuje s nadpisem. */
@media (max-width:1200px) and (min-width:640px){
  .hl-logo{left:40px;transform:none}
  .hl-burger{left:auto;right:40px}
  .hlavicka .hl-lang{right:108px} /* těsně vedle hamburgeru, ne osamoceně uprostřed */
  /* tlačítko z hlavičky je pryč, nejvíc vpravo je teď hamburger — šipka
     zpět nahoru lícuje s ním */
  .paticka .pat-nahoru{right:40px}

  /* Hamburger je tu vpravo, takže se panel jako záložka lepí na něj z druhé
     strany: najíždí zprava a tlačítko se překlápí na křížek, stejně jako na
     mobilu. Vlevo i nahoře od panelu zůstává vidět fotka jako u širších sad. */
  .hl-panel{left:auto;right:92px;border-left:0;border-right:4px solid var(--orange);
    transform:translateX(calc(100% + 92px))}
  .hl-panel.je-otevreno{transform:translateX(0)}
}
/* Panel je 592 široký a odsazený o hamburger (92), takže se pod 684 px okna
   přestane vejít — od téhle hranice jde ke kraji a přes celou šířku. */
/* Logo se schová všude, kde ho panel překrývá: panel sedí na 76 a je 592 široký,
   takže končí na 668, a logo stojí uprostřed okna — dotknou se od zhruba 1560
   dolů. Nad tím logo zůstává vidět vedle panelu, jak to má prototyp. */
@media (max-width:1560px){
  .hlavicka.je-otevreno .hl-logo{display:none}
}

/* ——— mezipásmo 1874–1721 ————————————————————————————————————
   Kontejner se pořád drží na 1440, ale okno se zužuje, takže dvojice rámečků
   u levého okraje stránky by ujela mimo obraz (na 1920 sedí na 23 px od kraje,
   při 1800 už by byla za ním). Zmenší se proto na velikost jako na MacBooku
   a přisune ke kraji — s odstupem takovým, aby ani na spodní hranici pásma
   nezalezla pod nadpis. Sada pro 1920 zůstává nedotčená. */
@media (max-width:1888px) and (min-width:1721px){
  .znacky,.int-znacky{gap:5px}
  .znacky span,.int-znacky span{width:52px;height:49px}
  /* Odsazení řeší základní pravidlo (24 od kraje sekce), tady se dvojice
     jen zmenší — v původní velikosti by v užším okně zalezla pod nadpis. */
}

/* ==========================================================================
   MEZISTAV 1512 (MacBook Pro 14") — kontejner 1232, okraje 140

   Hranice je 1720, ne 1919: okno na Full HD monitoru má se svislým posuvníkem
   jen 1905 px, takže by mu jinak naskočila tahle menší sada místo desktopové.
   Desktop 1920 tedy platí od 1721 px výš (tam má kontejner 1440 pořád
   okraje aspoň 140 jako návrh pro MacBook).
   ========================================================================== */
@media (max-width:1720px){
  :root{--wrap:1232px;--side:140px}

  /* hlavička sedí o kousek výš než na 1920 (Figma: hamburger y=20, logo y=19) */
  .hl-burger{top:20px}
  .hl-logo{top:19px}

  /* ——— panel menu (Figma 423:3421) — užší odsazení, menší položky ———
     ⚠️ Souřadnice z Figmy jsou od VNĚJŠÍ hrany panelu, ale obsah uvnitř začíná
     až za oranžovým pruhem — od každé se proto odečítají jeho 4 px
     (návrh 48 → 44). Bez toho stojí celý obsah o pruh doprava.
     Výška jde z okna (hamburger je tu na 20, tedy 2 × 20 stranou), strop je
     opět Full HD. */
  .hl-panel{top:20px;height:calc(100vh - 40px);max-height:1040px}
  .hl-panel-in{padding:70px 44px 32px}
  .hl-panel .label{margin-bottom:24px}
  .hl-horaky{width:444px;margin-left:24px}
  .hl-horaky a{flex-basis:64px;min-height:48px;padding-right:20px;
    font-size:24px;letter-spacing:-.48px}
  .hl-panel-stred{padding-top:40px}
  .hl-panel-copy{padding-top:28px}

  .btn{padding:12px 32px;font-size:16px;line-height:24px}

  .hp-hero{height:958px}
  .hp-intro{height:653px}
  .hp-produkty{height:719px}
  .hp-sluzby{height:813px}
  .hp-proc{height:732px}
  .hp-citat{height:697px}
  .hp-svet{height:527px}
  .hp-loga{height:576px}
  .hp-form{min-height:694px}
  .paticka{height:478px}

  .h1{font-size:60px;line-height:72px}
  .h2{font-size:44px;line-height:56px;letter-spacing:-.88px}
  .eyebrow{font-size:24px}
  .perex{font-size:18px;line-height:26px}

  .hp-hero .eyebrow{left:0;top:514px}
  .hp-hero .h1{top:552px;width:578px}
  .hp-hero .perex{top:720px;width:511px}
  .hp-hero .hero-btns{top:812px;gap:16px}

  /* intro: dva rámečky vlevo v téhle šířce v grafice nejsou */
  .int-znacky{display:none}
  .int-vykres{left:-17px;top:142px;width:557px;height:424px}
  /* Odsazení pro tuhle šířku (první odstavec 142, druhý 286, tlačítko 438
     — tedy 32 mezi nimi) — viz poznámka u `.int-txt` výš. */
  .int-txt{margin-left:623px}
  .int-txt--1{width:491px;margin-top:142px}
  .int-txt--2{width:466px;margin-top:32px}
  .int-btn{margin:32px 0 0 623px}

  /* produkty: sekce má v téhle šířce vlastní okraj 164, tedy o 24 víc
     než kontejner; rámečky vlevo jsou menší než na 1920 */
  .znacky span{width:52px;height:49px}
  .znacky{gap:5px}
  .hp-produkty .znacky{left:-116px;top:179px}
  .hp-produkty .label{left:24px;top:139px}
  .hp-produkty .h2{left:24px;top:167px;width:400px}

  .hp-produkty .seznam{left:64px;top:335px;width:444px}
  .hp-produkty .seznam a{height:64px;font-size:24px;letter-spacing:-.48px}
  .hp-produkty .seznam svg{right:20px;top:20px}

  .hp-produkty .panel{left:624px;top:88px;width:584px;height:543px}
  .hp-produkty .panel .foto,
  .hp-produkty .panel .zavoj{left:-64px;top:53px;width:689px;height:390px}
  .hp-produkty .panel .popis{left:40px;top:435px;width:302px;font-size:16px;line-height:22px}
  .hp-produkty .panel .btn{left:386px;top:471px}

  /* služby: stejně jako produkty mají v téhle šířce okraj 164, tedy o 24
     víc než kontejner; dlaždice jsou 284×310 s mezerou 16 */
  .hp-sluzby .znacky{left:-116px;top:144px}
  .hp-sluzby .label{left:24px;top:104px}
  .hp-sluzby .h2{left:24px;top:132px;width:536px}
  .hp-sluzby .text{left:626px;top:151px;width:439px;font-size:18px;line-height:24px}
  .hp-sluzby .btn{left:626px;top:295px}
  .hp-sluzby .karty{left:24px;top:399px;grid-template-columns:repeat(4,284px);gap:16px}
  .hp-sluzby .karta{width:284px;height:310px}
  .hp-sluzby .karta .nazev{height:50px;font-size:24px;line-height:30px;letter-spacing:-.48px}
  .hp-sluzby .karta .nazev--dlouhy{font-size:22px;letter-spacing:-.44px}

  /* proč my: sekce má stejně jako produkty a služby okraj 164 */
  .hp-proc .znacky{left:-116px;top:144px}
  .hp-proc .label{left:24px;top:104px}
  .hp-proc .h2{left:24px;top:132px;width:416px}
  .hp-proc .text{left:626px;top:151px;width:468px;font-size:18px;line-height:24px}
  .hp-proc .karty{left:24px;top:380px;width:1184px;gap:16px}
  .hp-proc .karta{height:248px;padding:24px 0 0 23px}
  .hp-proc .karta .ikona{width:40px;height:40px}
  .hp-proc .karta b{left:23px;top:112px;font-size:20px;line-height:25px}
  .hp-proc .karta .popis{left:23px;top:170px;width:174px;font-size:14px;line-height:18px}

  /* pevná pozice se počítá od kontejneru, ten je tu užší (709 z grafiky − 140) */
  .hp-citat .uvoz{left:569px;top:128px;width:93px;height:66px}
  .hp-citat .uvoz svg{width:93px;height:66px}
  .hp-citat .cit{top:218px;width:792px;font-size:40px;line-height:56px;letter-spacing:-.8px}
  .hp-citat .podpis{top:466px;font-size:16px}
  .hp-citat .znak{top:520px;width:184px;height:102px}

  /* svět: mapa je 75 % velikosti z 1920 a přesahuje kontejner o 25 doprava */
  .hp-svet .mapa{left:25px;top:88px;width:526.5px;height:351px}
  .hp-svet .label{left:626px;top:125px}
  .hp-svet .h2{left:626px;top:153px;width:439px}
  .hp-svet .text{left:626px;top:281px;width:439px;line-height:24px}

  /* loga: sekce má stejně jako produkty a služby okraj 164; pásy jsou tu
     užší a beze spáry, loga menší (poměr 0,697 proti návrhu pro 1920) */
  .hp-loga .znacky{left:-116px;top:150px}
  .hp-loga .label{left:24px;top:110px}
  .hp-loga .h2{left:24px;top:138px;width:466px}
  .hp-loga .text{left:24px;top:322px;width:466px;line-height:24px}
  .hp-loga .pasy{--m:.697;left:630px;gap:0}
  .hp-loga .pas{width:240px}

  /* kontakt: panel je tu užší (584) a stojí u pravého okraje sekce (164),
     nadpis i firma o stupeň menší; rozteče polí zůstávají */
  .hp-form .znacky{left:-116px;top:195px}
  /* Odsazení odpovídají návrhu v téhle šířce (label 155, nadpis 183,
     telefon 319, e-mail 367, firma 431, adresa 465) — jen se počítají
     od sebe navzájem, ne od hrany sekce; viz poznámka u `.hp-form` výš. */
  .hp-form .label{margin:155px 0 0 24px}
  .hp-form .h2{width:413px;margin:8px 0 0 24px}
  .hp-form .fm-spoj--tel{margin:24px 0 0 23px}
  .hp-form .fm-spoj--mail{margin:8px 0 0 23px}
  .hp-form .fm-firma{margin:24px 0 0 23px;font-size:16px}
  .hp-form .fm-adresa{margin:8px 0 0 23px;line-height:24px}
  .hp-form .fm-panel{left:624px;top:80px;width:584px;padding-top:53px}
  .hp-form .fm-panel .btn{margin-top:24px}
  /* ——— patička: na téhle šířce má vlastní rozvržení, ne zmenšeninu ————
     Kontejner je 1184 s okrajem 164 (ne 1232 jako zbytek webu), spodní blok
     je nižší (173 místo 227), písma menší a logo Interserwisu je nahoře
     vpravo místo vedle sloupců. */
  .paticka .pat-in{width:1184px}

  .pat-label{top:48px}
  .pat-sloupce{top:95px;grid-template-columns:336px 335px 1fr}
  .pat-sl{padding-left:20px}
  .pat-sl:first-child{padding-left:20px}
  .pat-sl b{font-size:16px}
  .pat-sl{line-height:24px}
  .pat-logo{left:auto;right:3px;top:48px}

  .pat-dole{height:173px}
  .pat-horaky{top:40px;font-size:16px;gap:24px}
  .pat-horaky .pat-typ-2{width:auto}
  .pat-menu{left:auto;right:-2px;top:40px;font-size:16px;gap:24px}
  .pat-linka{top:100px;width:1184px}
  .pat-copy{top:124px}
  .pat-gdpr{left:auto;right:0;top:124px}
}

/* ==========================================================================
   TABLET / UŽŠÍ NOTEBOOK 1320–640 — mezistav mezi MacBookem a mobilem

   Pevný kontejner 1232 z MacBooku se sem nevejde: při 1300 px zbývá po
   stranách 26 px místo 140 a text se lepí na kraj. Kontejner proto jede
   přes celou šířku s okrajem 40 a dvojice sekcí drží **půl na půl** —
   text v jedné polovině, obrázek ve druhé. Poloha obrázků uvnitř rámečků
   je proto v procentech, ne v pixelech jako v návrhu.

   Horní hranice je 1320: nad ní má kontejner z MacBooku po stranách aspoň
   40 px, takže se vyplatí víc než tenhle mezistav.
   Rozsah je uzavřený zdola — mobilní sada má vlastní rozvržení a nesmí se
   do ní z tohoto bloku nic protéct.
   ========================================================================== */
@media (max-width:1320px) and (min-width:640px){
  /* kontejner přes celou šířku s okrajem — žádné pevné rozměry z návrhu */
  .wrap{width:100%;padding:0 40px}

  /* hlavička: zůstane jen hamburger a logo, jazyk i CTA patří do panelu */
  .hlavicka .hl-lang{display:none}

  /* sekce si výšku určí obsahem, aby se do nich vešel přeskládaný obsah */
  .sekce,.hp-hero,.hp-intro,.hp-produkty,.hp-sluzby,.hp-proc,
  .hp-citat,.hp-svet,.hp-loga,.hp-form{height:auto;min-height:0}

  /* HERO — text v toku s odsazením od kraje, ne přilepený */
  .hp-hero{min-height:640px;display:flex;align-items:flex-end;padding:0 0 72px}
  .hp-hero .hero-in{width:100%;height:auto;padding:0 40px}
  .hp-hero .eyebrow,.hp-hero .h1,.hp-hero .perex,.hp-hero .hero-btns{
    position:static;left:auto;top:auto;width:auto}
  .hp-hero .h1{max-width:640px;margin:8px 0 20px}
  .hp-hero .perex{max-width:560px}
  .hp-hero .hero-btns{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap}

  /* INTRO — drátový výkres vlevo, text vpravo; výřez uvnitř rámečku zůstává
     stejný jako v návrhu, jen se rámeček zmenší se sekcí */
  .hp-intro{padding:72px 0}
  .hp-intro .wrap{height:auto;position:relative}
  /* Dekorativní rámečky jsou v tomhle pásmu pryč všude — kontejner nemá po
     stranách místo, kam by se vešly, a jednotlivě vypsané sekce se snadno
     rozejdou (služby tu zůstávaly viset kus za levým okrajem). */
  .int-znacky,.znacky{display:none}
  .int-vykres{display:block;position:absolute;left:40px;top:0;
    width:calc(50% - 60px);height:auto;aspect-ratio:712/542}
  .int-txt,.int-btn{position:static;left:auto;top:auto;width:auto;margin:0;
    margin-left:calc(50% + 20px)}
  .int-txt--2{margin-top:24px}
  .int-btn{display:inline-flex;margin-top:32px}

  /* PRODUKTY — vlevo výpis typů, vpravo panel s fotkou hořáku; půl na půl.
     Panel má v návrhu pevnou výšku a v ní rozmístěné prvky; tady se zmenšuje
     se sekcí, takže popisek i tlačítko jdou do běžného toku pod fotku.
     Podkladová fotka se stínem odpadá — hořák dostane stín podle svého
     obrysu, jinak by se ty dvě vrstvy při jiné výšce rozešly. */
  .hp-produkty{padding:64px 0 72px}
  .hp-produkty .wrap{height:auto;position:relative}
  .hp-produkty .znacky{display:none}
  .hp-produkty .label,.hp-produkty .h2,.hp-produkty .seznam{
    position:static;left:auto;top:auto;width:calc(50% - 20px)}
  .hp-produkty .h2{margin:12px 0 32px}
  .hp-produkty .seznam a{height:76px;font-size:24px;letter-spacing:-.48px}
  .hp-produkty .seznam svg{right:8px;top:26px}

  /* Panel jde od horního po spodní okraj výpisu vedle sebe — kdyby si výšku
     bral z obsahu, skončil by vysoko nad ním a vypadal by odseknutě.
     Fotka vyplní, co zbude nahoře, popisek s tlačítkem sedí dole.
     Panel je umístěný absolutně, takže se odsazení kontejneru musí započítat
     ručně — jinak by šel až ke kraji okna, na rozdíl od výpisu vedle něj. */
  .hp-produkty .panel{position:absolute;left:auto;right:40px;top:0;bottom:0;
    width:calc(50% - 60px);height:auto;padding:24px;
    display:flex;flex-direction:column}
  .hp-produkty .panel .zavoj{display:none}
  .hp-produkty .panel .foto{position:relative;left:auto;top:auto;
    flex:1 1 auto;min-height:0;width:100%;height:auto;object-fit:contain;
    filter:drop-shadow(0 18px 22px rgba(12,18,22,.22))}
  .hp-produkty .panel .popis{position:static;width:auto;margin-top:24px;
    font-size:16px;line-height:22px}
  .hp-produkty .panel .btn{position:static;margin-top:20px;align-self:flex-start}

  /* SLUŽBY — dlaždice ve dvou sloupcích; do čtyř jako v návrhu se vrátí
     až nad 1185, kde je sloupec dost široký na nejdelší název (viz níž) */
  .hp-sluzby{padding:64px 0 72px}
  .hp-sluzby .wrap{height:auto}
  .hp-sluzby .label,.hp-sluzby .h2,.hp-sluzby .text,.hp-sluzby .btn,.hp-sluzby .karty{
    position:static;left:auto;top:auto;width:auto}
  .hp-sluzby .h2{max-width:640px;margin:12px 0 20px}
  .hp-sluzby .text{max-width:720px}
  .hp-sluzby .btn{margin:24px 0 40px;display:inline-flex}
  .hp-sluzby .karty{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  /* dlaždice si šířku bere z mřížky, výška zůstává z návrhu a fotka se ořízne.
     Ve dvou sloupcích je dlaždice užší než v návrhu, takže název dostane menší
     písmo, kratší odsazení a smí se zalomit — jinak se ten nejdelší usekne. */
  .hp-sluzby .karta{width:auto;height:400px}
  .hp-sluzby .karta .nazev,
  .hp-sluzby .karta .nazev--dlouhy{height:auto;min-height:56px;padding:10px 12px;
    align-items:center;white-space:normal;
    font-size:20px;line-height:26px;letter-spacing:-.4px}

  /* PROČ MY — pod 1100 už je pět sloupců na text moc úzkých, panely proto jdou
     pod sebe jako řádky: ikona vlevo, název a popisek vpravo. Je to mezistav
     mezi návrhem (panely vedle sebe) a mobilem (jen ikona a název).
     Nad 1100 panely zůstávají vedle sebe — sada je níž za tímhle blokem. */
  .hp-proc{padding:64px 0 72px}
  .hp-proc .wrap{height:auto}
  .hp-proc .znacky{display:none}
  .hp-proc .label,.hp-proc .h2,.hp-proc .text,.hp-proc .karty{
    position:static;left:auto;top:auto;width:auto}
  .hp-proc .h2{max-width:640px;margin:12px 0 20px}
  .hp-proc .text{max-width:720px;margin-bottom:40px}
  /* řádky s ikonami jdou přes celou šířku — jsou to dlaždice, ne text,
     takže se strop na čtení řádku netýká a vpravo by jinak zbýval pruh */
  .hp-proc .karty{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
  .hp-proc .karta{height:auto;padding:0;border-left:0;
    display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px}
  .hp-proc .karta .ikona{grid-row:1 / span 2;width:40px;height:40px}
  .hp-proc .karta b{position:static;grid-column:2;align-self:center;
    font-size:20px;line-height:26px}
  .hp-proc .karta .popis{position:static;grid-column:2;width:auto;margin-top:8px;
    font-size:16px;line-height:24px}
  /* název je v šabloně zalomený pro úzký panel — v řádku se hodí na jeden */
  .hp-proc .karta b br{display:none}

  /* CITÁT — prvky jdou do toku, takže se musí zrušit i vycentrování posunem
     (na širších šířkách je každý absolutně umístěný a tažený o půl šířky) */
  .hp-citat{height:auto;padding:96px 0 80px}
  .hp-citat .wrap{height:auto}
  .hp-citat .uvoz,.hp-citat .cit,.hp-citat .podpis,.hp-citat .znak{
    position:static;left:auto;top:auto;width:auto;height:auto;transform:none;margin:0 auto}
  .hp-citat .uvoz svg{width:80px;height:57px}
  .hp-citat .cit{max-width:820px;margin-top:34px;
    font-size:34px;line-height:46px;letter-spacing:-.68px}
  .hp-citat .podpis{margin-top:22px;font-size:16px}
  .hp-citat .znak{width:184px;height:102px;margin-top:20px}

  /* SVĚT — mapa vlevo, text vpravo, půl na půl; mapa si drží poměr z návrhu
     a zvýrazněné země jdou s ní, protože jsou vázané procenty */
  /* Mapa je vyšší než trojice textů vedle ní. Prázdné pružné řádky nahoře
     a dole drží texty jako celek uprostřed — bez nich by se rozdíl rozdělil
     do mezer mezi ně a nadpis by od nadpisku odskočil. */
  .hp-svet{padding:64px 0 72px}
  .hp-svet .wrap{height:auto;display:grid;grid-template-columns:1fr 1fr;
    grid-template-rows:1fr auto auto auto 1fr;column-gap:40px}
  .hp-svet .mapa,.hp-svet .label,.hp-svet .h2,.hp-svet .text{
    position:static;left:auto;top:auto;width:auto;height:auto;margin:0}
  .hp-svet .mapa{position:relative;grid-column:1;grid-row:1 / span 5;
    align-self:center;aspect-ratio:700/467}
  .hp-svet .label{grid-column:2;grid-row:2}
  .hp-svet .h2{grid-column:2;grid-row:3;margin:12px 0 20px}
  .hp-svet .text{grid-column:2;grid-row:4}

  /* LOGA — pásy si drží velikost z MacBooku (dvojice 240 px beze spáry).
     Roztahovat je s oknem nemá smysl: šířka pásu určuje, jak velká jsou
     loga, a nad velikost z návrhu se jít nemá. Pod 1080 už se vedle textu
     nevejdou a jdou pod něj (sada za tímhle blokem). */
  .hp-loga{padding:64px 0 72px}
  .hp-loga .wrap{height:auto;position:relative}
  .hp-loga .znacky{display:none}
  /* Pod 1080 už pásy nestojí vedle textu a sekce by jinak zůstala nalepená
     na levé straně s prázdnou pravou polovinou: text jde proto přes celou
     šířku a pásy taky, takže loga sedí ve čtvrtinách a působí vycentrovaně. */
  .hp-loga .label,.hp-loga .h2,.hp-loga .text{
    position:static;left:auto;top:auto;width:auto;max-width:none}
  .hp-loga .h2{margin:12px 0 20px}
  .hp-loga .pasy{position:static;left:auto;top:auto;--m:.697;
    width:100%;max-width:480px;height:576px;gap:0;margin:40px auto 0}
  /* Nad 1080 stojí pásy vedle textu; pod tím jdou pod něj a vycentrují se.
     Strop 480 je šířka dvojice z návrhu — roztažená na celou šířku by měla
     stejně velká loga a jen by se rozestoupila do prázdna. */
  .hp-loga .pas{flex:1 1 0;width:240px}

  /* KONTAKT — kontakty vlevo, panel s formulářem vpravo (půl na půl).
     Panel je jako u produktů umístěný absolutně, takže odsazení kontejneru
     musí mít započítané ručně; uvnitř má menší okraje než v návrhu, aby
     na pole zbylo místo. Pod 900 jde pod text — sada za tímhle blokem. */
  .hp-form{height:auto;min-height:0;padding:72px 0}
  .hp-form .wrap{height:auto;position:relative;min-height:534px}
  .hp-form .znacky{display:none}
  /* `margin:0` ruší odsazení, kterými si levý sloupec drží pozice z návrhu
     na širších obrazovkách — tady si je sekce staví po svém. */
  .hp-form .label,.hp-form .h2,.hp-form .fm-spoj,
  .hp-form .fm-firma,.hp-form .fm-adresa{
    position:static;left:auto;top:auto;width:auto;margin:0}
  .hp-form .h2{max-width:calc(50% - 60px);margin:12px 0 32px}
  .hp-form .fm-spoj{display:inline-flex;margin-bottom:8px}
  .hp-form .fm-spoj--mail{display:flex}
  .hp-form .fm-firma{margin-top:24px}
  .hp-form .fm-adresa{max-width:320px}
  .hp-form .fm-panel{position:absolute;left:auto;right:40px;top:0;
    width:calc(50% - 60px);padding:50px 40px 0}

  /* PATIČKA — celá jde do běžného toku; nadpisek a sloupce musí do resetu
     taky, jinak zůstanou na pevných pozicích a překryjí se s textem */
  .paticka{height:auto;padding-bottom:40px}
  .paticka .pat-in{width:100%;padding:0 40px}
  .pat-label,.pat-sloupce,.pat-horaky,.pat-menu,.pat-linka,.pat-copy,.pat-gdpr{
    position:static;left:auto;right:auto;top:auto;width:auto}
  .pat-sloupce{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:auto;
    margin-top:24px;gap:16px}
  .pat-sl,.pat-sl:first-child{padding:0 0 0 20px}
  /* Logo pobočky drží pravý horní roh jako na MacBooku i na mobilu — odsazení
     kontejneru si musí započítat samo, absolutní prvek ho nedědí. */
  .pat-logo{display:block;left:auto;right:40px;top:36px;width:72px;height:51px}
  .pat-polsko{height:auto;padding:40px 0}
  .pat-dole{height:auto;padding:40px 0}

  /* Odkazy jdou pod sebe v pořadí hořáky → menu webu → GDPR → linka →
     copyright. V šabloně je GDPR až za copyrightem (tak to sedí na 1920),
     tady ho proto vrací nad linku mřížka, ne pořadí v HTML. */
  .pat-dole .pat-in{display:grid;grid-template-columns:minmax(0,1fr)}
  .pat-horaky{grid-row:1;flex-wrap:wrap}
  .pat-menu{grid-row:2;margin-top:24px;flex-wrap:wrap}
  .pat-gdpr{grid-row:3;margin-top:12px;flex-wrap:wrap}
  .pat-linka{grid-row:4;height:1px;margin:24px 0}
  .pat-copy{grid-row:5;flex-wrap:wrap}

}

/* Patička: nad 1000 je vedle menu webu ještě dost místa, GDPR proto zůstává
   na jeho řádku a drží se pravého okraje — jako na širších obrazovkách.
   Pod 1000 spadne na vlastní řádek pod něj (sada v tabletovém bloku výš). */
@media (max-width:1320px) and (min-width:1000px){
  .pat-dole .pat-in{grid-template-columns:1fr auto;column-gap:40px}
  .pat-horaky{grid-column:1/-1}
  .pat-menu{grid-column:1;grid-row:2}
  .pat-gdpr{grid-column:2;grid-row:2;justify-self:end;margin-top:24px}
  .pat-linka{grid-column:1/-1;grid-row:3}
  .pat-copy{grid-column:1/-1;grid-row:4}
}

/* Horní část pásma: dlaždice služeb se vejdou do čtyř sloupců jako v návrhu.
   Hranice 1185 je daná nejdelším názvem — pod ní by se „Automatika hořáku
   – BMS" do dlaždice nevešla a zalomila by se na dva řádky. */
@media (max-width:1320px) and (min-width:1185px){
  .hp-sluzby .karty{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Proč my drží pět panelů vedle sebe hluboko do pásma — do řádků se přepnou
   až pod 1100, kde už je sloupec na text moc úzký. Panel si tu ale nemůže
   nechat rozměry z návrhu: je užší, takže obsah jde do běžného toku pod sebe
   a panel roste podle textu (výšku srovná mřížka). */
@media (max-width:1320px) and (min-width:1101px){
  .hp-proc .karty{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;
    max-width:none}
  .hp-proc .karta{display:block;height:auto;padding:24px 0 24px 23px;
    border-left:1px solid var(--outline)}
  .hp-proc .karta .ikona{width:40px;height:40px;margin-bottom:36px}
  .hp-proc .karta b{display:block;margin-bottom:12px;
    font-size:20px;line-height:25px}
  .hp-proc .karta b br{display:inline}
  .hp-proc .karta .popis{display:block;font-size:14px;line-height:18px}
}

/* Horní část pásma: dvojice pásů log (480 px) se ještě vejde vedle textu jako
   v návrhu. Wrap si proto musí držet jejich výšku — pásy v něm stojí
   absolutně, aby text vedle nich mohl být kratší. */
@media (max-width:1320px) and (min-width:1081px){
  /* texty jsou nižší než pásy — v návrhu na 1512 mají společný střed */
  .hp-loga .wrap{min-height:576px;display:flex;flex-direction:column;justify-content:center;
    align-items:flex-start}
  .hp-loga .label,.hp-loga .h2,.hp-loga .text{max-width:calc(50% - 60px)}
  .hp-loga .pasy{position:absolute;right:40px;top:0;width:480px;margin-top:0}
  .hp-loga .pas{flex:0 0 240px}
}

/* Dolní část pásma: v půlce šířky je nadpis z MacBooku (44 px) tak úzký, že
   se láme na čtyři řádky vedle malého obrázku. O stupeň menší nadpis to srovná
   a navazuje na mobilní velikost (32). */
@media (max-width:1000px) and (min-width:640px){
  .h2{font-size:36px;line-height:46px;letter-spacing:-.72px}
  /* obě sekce mají v návrhu vlastní řádkování nadpisu (56 místo 64) — to platí
     jen pro velikosti z návrhu, tady musí jít dolů s písmem */
  .hp-proc .h2,.hp-svet .h2{line-height:46px}
}

/* Nejužší část pásma: v půlce šířky už obrázek nemá co ukázat a text vedle něj
   se láme do úzkého sloupce. Sekce se proto chovají jako na mobilu — obrázek
   pryč, text přes celou šířku. Výkres v intru potřebuje víc místa než panel
   u produktů (je na šířku), proto mizí o kus dřív. */
@media (max-width:799px) and (min-width:640px){
  /* patička: tři sloupce pobočky jsou v téhle šířce na jména funkcí moc
     úzké, jdou proto pod sebe jako na mobilu */
  .pat-sloupce{grid-template-columns:minmax(0,1fr);gap:24px}

  .hp-produkty .panel{display:none}
  .hp-produkty .label,.hp-produkty .h2,.hp-produkty .seznam{
    width:auto;max-width:720px}
}
@media (max-width:899px) and (min-width:640px){
  .int-vykres{display:none}
  .int-txt,.int-btn{margin-left:0;max-width:720px}

  /* Kontakt: v půlce šířky už je panel na formulář moc úzký, jde proto pod
     kontaktní údaje a roztáhne se přes celou šířku — pole u formuláře snesou
     být širší, na rozdíl od běžného textu. */
  .hp-form .wrap{min-height:0}
  .hp-form .h2{max-width:none}
  .hp-form .fm-panel{position:static;right:auto;width:100%;margin-top:48px}

  /* Mapa se ale neschovává — je to obsah sekce, ne dekorace. Místo toho jde
     sekce do jednoho sloupce jako na mobilu: nadpis, mapa, text pod sebou. */
  .hp-svet .wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  /* mapa jde přes celou šířku jako na mobilu — se stropem z návrhu by tu
     po pravé straně zůstal pruh prázdna */
  .hp-svet .mapa{grid-column:auto;grid-row:auto;margin:8px 0 32px}
  .hp-svet .label,.hp-svet .h2,.hp-svet .text{grid-column:auto;grid-row:auto;
    max-width:none}
}

/* Pásmo 1495–1321: kontejner z MacBooku se ještě vejde, ale dvojice rámečků
   u levého okraje už ne. Přisunout je ke kraji nestačí — vedle nadpisu, který
   jde s kontejnerem doleva, jim zbývá míň místa, než jsou samy široké, a lezly
   by pod něj. Jsou to dekorace, takže se v tomhle pásmu neukazují (stejně jako
   níž v tabletu); vrátí se, jakmile má kontejner po stranách dost místa. */
@media (max-width:1495px) and (min-width:1321px){
  .hp-produkty .znacky,.hp-sluzby .znacky,
  .hp-proc .znacky,.hp-loga .znacky,.hp-form .znacky{display:none}
}

/* ==========================================================================
   MOBIL — návrh je na 375 (kontejner 295, okraje 40), sada ale platí až do
   639 px, proto se šířky nepíšou pevně, ale odečtením okrajů od šířky okna:
   na 375 vyjdou přesně hodnoty z grafiky a na širším telefonu se roztáhnou
   (tlačítka tak drží celou šířku, ne 327 px).

   Hranice je 640, ne 768: mobilní rozvržení s tlačítky přes celou šířku
   vypadá na tabletu na šířku divně, tam ještě patří sada „široký mobil".
   ========================================================================== */
/* ——— panel menu v mobilním provedení ———————————————————————————
   Panel je 592 široký a odsazený o hamburger (92), takže se pod 684 px okna
   přestane vejít. Od téhle hranice tedy jede rovnou mobilní sada — přes celou
   šířku i výšku, ne jen užší záložka (Martin 19. 8.; zbytek mobilní grafiky
   naskakuje až od 639, tohle je jen menu).
   Mezera dole = mezera nahoře, tady tedy žádná: panel jde přes celou výšku.
   `dvh` kvůli mizející adresní liště, `vh` jako záloha pro starší prohlížeče. */
@media (max-width:690px){
  .hl-panel{left:auto;right:0;top:0;width:100%;height:100vh;height:100dvh;
    max-height:1080px;
    border-left:4px solid var(--orange);border-right:0;
    transform:translateX(100%)}
  .hl-panel.je-otevreno{transform:translateX(0)}
  .hl-panel-in{padding:53px 36px 32px}
  .hl-panel .label{margin-bottom:21px}
  .hl-horaky{width:100%;margin-left:0}
  .hl-horaky a{flex-basis:58px;min-height:44px;padding-right:0;
    font-size:18px;letter-spacing:-.36px}
  /* dva sloupce po polovině — v návrhu 174 + 193 na 375 */
  .hl-panel-stred{gap:12px;padding-top:32px}
  .hl-web{flex:1 1 0;width:auto;gap:12px;font-size:16px;line-height:20px}
  .hl-gdpr{flex:1 1 0;width:auto;gap:12px;font-size:14px;line-height:18px}
  .hl-panel-copy{display:none}
  .hl-panel-extra{margin-top:auto;padding-top:32px}
  .hl-panel-extra .btn{flex:1 1 auto;justify-content:center}
}

@media (max-width:639px){
  :root{--wrap:295px;--side:40px}

  .h1{font-size:36px;line-height:44px}
  .h2{font-size:32px;line-height:40px;letter-spacing:-.64px}
  .label{font-size:14px;letter-spacing:-.28px}
  .eyebrow{font-size:22px}
  .perex{font-size:17px;line-height:26px}
  .text{font-size:16px;line-height:24px}

  /* iOS Safari pevné pozadí nevykreslí — svislý posun proto na mobilu počítá
     funkce/skripty.js ze scrollu (viz „stojící fotky na mobilu").
     Výřez je u každé sekce jiný, bere se z grafiky pro 375. */
  .foto-pevna{background-attachment:scroll}
  /* hero: fotka 870×653 na pozici −3, −13 v rámci 375×580 */
  .hp-hero.foto-pevna,.hp-hero .hero-snimek{background-size:232% auto;background-position:.6% 17.8%}
  /* citát: fotka 904×678 na pozici −226, −24 v rámci 375×471 */
  .hp-citat.foto-pevna{background-size:241% auto;background-position:42.7% 11.6%}

  /* hlavička: logo vlevo (menší značka), hamburger vpravo, jazyk i CTA v panelu */
  .hlavicka{height:68px}
  .hl-logo{left:24px;transform:none;top:18px;width:203px;height:70px}
  .hl-znacka{left:0;width:139px;height:39px}
  .hl-nazev{top:51px}
  .hl-burger{left:auto;right:26px;top:16px}
  /* jen ten v hlavičce — kopie v panelu má stejnou třídu a tady má naopak svítit */
  .hlavicka .hl-lang,.hlavicka .hl-cta{display:none}
  /* Panel tu zabírá celou šířku, takže by pod ním logo prosvítalo — v grafice
     menu (404:2362) je nahoře jen křížek. */
  .hlavicka.je-otevreno .hl-logo{display:none}

  /* ——— panel menu 375×579 (Figma 404:2362) — přes celou šířku, bez copyrightu;
     položky jsou nižší a menu se dělí na dva sloupce po polovině ——— */
  /* Návrh je 579 vysoký, ale nepočítá s tlačítkem a jazykem — ty se sem
     stěhují z hlavičky, takže panel je o jejich řádek delší (menu webu končí
     na 538, blok sedí na 570 a pod ním zbývá 32). */
  /* Na mobilu panel najíždí zprava a jde přes celou plochu od horního okraje —
     na záložku odsazenou od kraje tu není místo. Oranžový pruh zůstává u levé
     hrany, jak ho má grafika, a hamburger se překlápí na křížek. */
  /* výšky sekcí podle mobilní obrazovky ve Figmě (375×6873) */
  .wrap{width:100%;padding:0 40px}
  .hp-intro{height:421px}
  .hp-produkty{height:440px}
  .hp-sluzby{height:696px}
  .hp-proc{height:754px}
  .hp-citat{height:471px}
  .hp-svet{height:659px}
  .hp-loga{height:975px}
  .hp-form{min-height:950px}
  .paticka{height:927px}

  /* hero: perex se na mobilu nezobrazuje, gradient začíná až pod hlavičkou */
  .hp-hero{height:580px}
  .hp-hero .foto-stin{top:67px}
  .hp-hero .hero-in{width:100%}
  .hp-hero .eyebrow{left:24px;top:293px;font-size:18px}
  /* prostrkání musí být záporné jako v grafice, jinak se nadpis nevejde
     na dva řádky a přeteče přes perex i tlačítka */
  .hp-hero .h1{left:24px;top:324px;width:calc(100% - 48px);max-width:520px;
    font-size:36px;line-height:42px;letter-spacing:-.72px}
  .hp-hero .perex{display:none}
  .hp-hero .hero-btns{left:24px;top:447px;width:calc(100% - 48px);
    flex-direction:column;gap:8px}
  .hp-hero .btn{width:100%;height:44px;padding:10px 32px;font-size:16px;line-height:24px}

  /* intro: na mobilu jen dva odstavce — výkres, rámečky ani tlačítko tu v grafice nejsou */
  .hp-intro .wrap{padding:0}
  .int-vykres,.int-znacky,.int-btn{display:none}
  /* Odstavce tu drží pevné pozice z návrhu (24 a 192), takže `position`
     i nulové odsazení musí být vypsané — sada pro širší obrazovky je
     posouvá odsazením zleva a to by je jinak vytlačilo z okna. */
  .int-txt{position:absolute;left:30px;width:calc(100% - 60px);margin:0;
    font-size:16px;line-height:24px}
  .int-txt--1{top:24px}
  .int-txt--2{top:192px}

  /* produkty: na mobilu je jen výpis typů — panel s fotkou hořáku v grafice není.
     Sekce má okraj 24 (ne 40 jako zbytek) a odkazy jsou odsazené o 16 dovnitř.
     ⚠️ Sekce jede v běžném toku, ne na pevných pozicích z návrhu (Jiřina 27. 8.):
     nadpis má ve skutečnosti čtyři řádky místo dvou, se kterými návrh počítal,
     a na pevné pozici vjížděl do výpisu typů — v češtině o 66 px, v němčině víc.
     Odsazení jsou nastavená tak, že na 375 vyjdou pozice z návrhu
     (label 56, nadpis 82, výpis 14 pod nadpisem, sekce končí 32 pod výpisem). */
  .hp-produkty{height:auto;padding:56px 0 32px}
  .hp-produkty .wrap{height:auto;padding:0}
  .hp-produkty .znacky,.hp-produkty .panel{display:none}
  .hp-produkty .label,.hp-produkty .h2,.hp-produkty .seznam{
    position:static;left:auto;top:auto;width:auto;height:auto;
    margin-left:24px;margin-right:24px}
  .hp-produkty .h2{margin-top:6px}
  .hp-produkty .seznam{margin-top:14px}
  .hp-produkty .seznam a{height:58px;padding-left:16px;
    font-size:18px;letter-spacing:-.36px}
  .hp-produkty .seznam a:last-child{border-bottom:0}
  .hp-produkty .seznam svg{right:16px;top:17px}

  /* služby: na mobilu je v grafice místo čtyř dlaždic jedna fotka přes celou
     šířku okna a nadpisek nad H2 se nezobrazuje (H2 sedí na jeho místě).
     Sekce má okraj 24 jako produkty, fotka jde až ke kraji. */
  /* ⚠️ Taky v běžném toku, ze stejného důvodu jako produkty (Jiřina 27. 8.):
     nadpis se na pevné pozici řezal o fotku — česky o 11 px, německy o 89.
     Fotka je v HTML až za tlačítkem (patří k němu obsahově), na mobilu ale
     stojí hned pod nadpisem, proto sloupec s pořadím. Mezera 24 je stejná
     jako mezi textem a tlačítkem v návrhu; sekce končí 56 pod tlačítkem. */
  .hp-sluzby{height:auto;padding:56px 0}
  .hp-sluzby .wrap{height:auto;padding:0;display:flex;flex-direction:column;
    align-items:stretch}
  .hp-sluzby .znacky,.hp-sluzby .label,.hp-sluzby .karty{display:none}
  .hp-sluzby .h2,.hp-sluzby .text,.hp-sluzby .btn{
    position:static;left:auto;top:auto;width:auto;
    margin-left:24px;margin-right:24px}
  .hp-sluzby .h2{order:1}
  .sl-foto-mobil{display:block;position:static;order:2;
    width:100%;height:199px;margin-top:24px;object-fit:cover}
  .hp-sluzby .text{order:3;margin-top:24px;
    font-size:16px;line-height:24px}
  .hp-sluzby .btn{order:4;margin-top:24px;height:44px;
    padding:10px 32px;font-size:16px;line-height:24px}

  /* proč my: na mobilu jsou v grafice jen řádky ikona + název, popisek se
     nezobrazuje. Sekce jede v běžném toku, aby se odstupy srovnaly samy,
     až se texty na širším telefonu roztáhnou na míň řádků; odsazení jsou
     nastavená tak, že na 375 vyjdou pozice z návrhu (label 56, nadpis 82,
     text 226, řádky 450). Řádky jsou po 52 px (ikona 40 a 12 mezi nimi). */
  .hp-proc{height:auto;padding:56px 0}
  .hp-proc .wrap{height:auto;padding:0 24px}
  .hp-proc .znacky{display:none}
  .hp-proc .label,.hp-proc .h2,.hp-proc .text,.hp-proc .karty{
    position:static;left:auto;top:auto;width:auto}
  .hp-proc .h2{line-height:40px;margin:6px 0 0}
  .hp-proc .text{margin-top:24px;font-size:16px;line-height:24px}
  .hp-proc .karty{margin-top:32px;display:grid;
    grid-template-columns:minmax(0,1fr);gap:12px}
  .hp-proc .karta{height:40px;padding:0;border-left:0;
    display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;
    align-items:center}
  .hp-proc .karta .ikona{width:40px;height:40px}
  .hp-proc .karta b{position:static;font-size:16px;line-height:20px;
    white-space:nowrap}
  .hp-proc .karta b br{display:none}
  .hp-proc .karta .popis{display:none}

  /* citát: sekce jede v toku, odsazení sedí na návrh (uvozovka 56, citát 120,
     podpis 328, značka 370; výška sekce 471) a na širším telefonu se srovnají
     samy, jak se citát zalomí na míň řádků */
  .hp-citat{height:auto;padding:56px 0 36px}
  .hp-citat .wrap{height:auto;padding:0 24px}
  .hp-citat .uvoz,.hp-citat .cit,.hp-citat .podpis,.hp-citat .znak{
    position:static;width:auto;height:auto;left:auto;top:auto;transform:none;margin:0 auto}
  .hp-citat .uvoz svg{width:55px;height:40px}
  .hp-citat .cit{margin-top:24px;max-width:322px;
    font-size:22px;line-height:32px;letter-spacing:-.44px}
  .hp-citat .podpis{margin-top:16px;font-size:12px;line-height:26px}
  .hp-citat .znak{width:118px;height:65px;margin-top:16px}

  /* svět: nadpis, mapa a text pod sebou v běžném toku (odsazení sedí na návrh:
     label 64, nadpis 90, text 36 pod mapou). Mapa není přes celý kontejner —
     v grafice začíná o 4 px vpravo od okraje a končí 21 před pravým, proto
     `calc(100% - 19px)`: na 375 vyjde 308×205 jako v návrhu.
     ⚠️ Nadpis je tu v grafice nedodělaný (má text ze sekce „Proč spolupracovat
     s námi“), obsah se proto bere z 1920 a je o řádek kratší. */
  .hp-svet{height:auto;padding:64px 0 40px}
  .hp-svet .wrap{height:auto;padding:0 24px;display:block}
  .hp-svet .mapa,.hp-svet .label,.hp-svet .h2,.hp-svet .text{
    position:static;width:auto;height:auto;left:auto;top:auto;max-width:none;margin:0}
  .hp-svet .h2{line-height:40px;margin:6px 0 0}
  .hp-svet .mapa{position:relative;width:calc(100% - 19px);margin:25px 0 35px 4px;
    aspect-ratio:700/467}

  /* loga: nadpis, text a pod nimi dvojice pásů přes celou šířku kontejneru
     (odsazení sedí na návrh — label 56, nadpis 82, text 218, pásy 440) */
  .hp-loga{height:auto;padding:56px 0}
  .hp-loga .wrap{height:auto;padding:0 24px}
  .hp-loga .znacky{display:none}
  .hp-loga .label,.hp-loga .h2,.hp-loga .text,.hp-loga .pasy{
    position:static;width:auto;left:auto;top:auto;height:auto;max-width:none}
  .hp-loga .h2{margin:6px 0 0}
  .hp-loga .text{margin-top:16px;font-size:16px;line-height:24px}
  /* Strop 340 drží loga v pásu stejně hustě jako v návrhu: na 375 je kontejner
     327, takže se neuplatní, a na širším telefonu se dvojice vycentruje místo
     aby se roztáhla a nechala loga plavat v prázdnu. */
  .hp-loga .pasy{--m:.4754;height:479px;gap:0;margin:30px auto 0;max-width:340px}
  .hp-loga .pas{width:50%}

  /* Kontakt je na mobilu ⚠️ úplně jiná sekce než výš: světlé pozadí, žádná
     fotka a formulář v bílém panelu. Barevnost se proto obrací — texty tmavé,
     linky polí `--outline`, popisky `--gray-font`.
     Odsazení sedí na návrh: label 56, nadpis 82, kontakty 186, firma 298,
     adresa 324, panel 453; sekce končí 24 pod ním. */
  .hp-form{height:auto;min-height:0;padding:56px 0 24px;color:var(--dark);
    background-color:var(--gray-bg);background-image:none}
  .hp-form .foto-stin{display:none}
  .hp-form .wrap{height:auto;padding:0 24px}
  .hp-form .znacky{display:none}
  .hp-form .label,.hp-form .h2,.hp-form .fm-spoj,.hp-form .fm-firma,
  .hp-form .fm-adresa,.hp-form .fm-panel{
    position:static;left:auto;top:auto;width:auto;height:auto;margin:0}
  .hp-form .h2{color:var(--dark);margin:6px 0 0}

  .hp-form .fm-spoj{gap:16px;margin-top:24px;font-size:20px;color:var(--dark)}
  .hp-form .fm-spoj--mail{margin-top:8px}
  .hp-form .fm-firma{margin-top:24px;font-size:16px}
  .hp-form .fm-adresa{font-size:14px;line-height:22px;color:var(--gray-font)}

  .hp-form .fm-panel{margin-top:41px;padding:14px 24px 20px;
    background:var(--white);-webkit-backdrop-filter:none;backdrop-filter:none}
  .hp-form .fm-pole{border-bottom-color:var(--outline)}
  .hp-form .fm-pole--zprava{height:107px}
  .hp-form .fm-pole input,.hp-form .fm-pole textarea{color:var(--dark)}
  .hp-form .fm-pole input::placeholder,.hp-form .fm-pole textarea::placeholder{
    color:var(--gray-font)}
  /* mezera 16 z návrhu se skládá s odsazením pod polem zprávy (8) */
  .hp-form .fm-souhlas{margin-top:8px;color:var(--gray-font)}
  .hp-form .fm-ctverec{border-color:var(--outline)}
  .hp-form .fm-panel .btn{width:100%;margin-top:24px}
  /* potvrzení: panel je tu bílý, takže se obrací i barevnost hlášky */
  .hp-form .fm-panel--hotovo{padding:40px 24px}
  .hp-form .fm-panel--hotovo .fm-hlaska{font-size:22px;line-height:30px;
    color:var(--dark)}
  .hp-form .fm-detail{color:var(--gray-font)}
  .hp-form .fm-fajfka{width:56px;height:56px;margin-bottom:16px}
  .hp-form .fm-fajfka svg{width:28px;height:28px}

  /* ——— patička: na mobilu vlastní rozvržení podle návrhu (375×927) ————
     Sloupce pobočky jdou pod sebe (linka zůstává vlevo), menu se rozpadne
     do svislých seznamů a logo Interserwisu je nahoře vpravo.
     ⚠️ Kontejner se **zužuje**, neodsazuje: prvky uvnitř jsou umístěné
     absolutně a těm je odsazení rodiče jedno — s `padding` by skončily
     na okraji obrazovky. Pozice níž se tak počítají od něj (návrhových 24 = 0). */
  .paticka .pat-in{width:calc(100% - 48px);margin:0 auto;padding:0}

  .pat-polsko{height:460px}
  .pat-label{top:53px}
  .pat-logo{display:block;left:auto;right:0;top:37px;width:72px;height:51px}
  .pat-sloupce{top:97px;left:0;right:0;display:flex;flex-direction:column;
    gap:16px;height:auto}
  .pat-sl,.pat-sl:first-child{padding:0 0 0 16px;font-size:14px;line-height:22px}
  .pat-sl b{font-size:14px;line-height:26px;margin-bottom:0}

  /* ⚠️ Spodní blok jede v běžném toku, ne na pevných pozicích z návrhu
     (Martin 28. 8.): odkazů na hořáky přibyl jeden (souhrnná stránka)
     a pátý řádek se na pevné pozici otiskl do menu webu pod ním. Mřížka
     zachovává rozvržení z návrhu — odkazy na hořáky přes celou šířku,
     pod nimi menu webu vlevo a GDPR vpravo — a sama se posune, kdyby
     klient další typ přidal nebo ubral.
     Odsazení sedí na návrh (hořáky 32, menu a GDPR 24 pod nimi,
     linka 20, copyright 23, konec sekce 21 pod ním). */
  .pat-dole{height:auto;padding:32px 0 21px}
  .pat-dole .pat-in{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .pat-horaky,.pat-menu,.pat-gdpr,.pat-linka,.pat-copy{
    position:static;left:auto;right:auto;top:auto}
  .pat-horaky{grid-column:1/-1;flex-direction:column;gap:12px;font-size:16px;width:242px}
  .pat-horaky .pat-typ-2{width:auto}
  /* Odkazy stojí ve dvou sloupcích po polovině — menu webu vlevo, GDPR vpravo.
     Každý začíná u levého kraje svého sloupce, takže se dvojice roztahuje
     s displejem a nikde nezůstane viset. */
  .pat-menu{grid-column:1;grid-row:2;width:auto;margin-top:24px;
    flex-direction:column;gap:12px;font-size:14px}
  .pat-gdpr{grid-column:2;grid-row:2;width:auto;margin-top:24px;
    flex-direction:column;gap:12px;font-size:14px}
  .pat-linka{grid-column:1/-1;grid-row:3;width:100%;margin-top:20px}
  .pat-copy{grid-column:1/-1;grid-row:4;margin-top:23px;
    flex-direction:column;gap:10px;font-size:14px;white-space:normal}
  /* lícuje s hamburgerem, který je na mobilu na 26 */
  .paticka .pat-nahoru{right:26px;bottom:20px}
}

/* ==========================================================================
   ŠIROKÝ TELEFON 639–480 — horní část mobilního pásma

   Texty se tu díky pružným šířkám roztáhnou na míň řádků a řádky s ikonami
   by zůstaly viset v úzkém sloupci u levého kraje. Jdou proto do dvou
   sloupců (2 + 2 a pátý dole) a název smí být na dva řádky — v jednom
   sloupci se pak vrátí zpátky pod sebe.
   ========================================================================== */
@media (max-width:639px) and (min-width:480px){
  .hp-proc .karty{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
  .hp-proc .karta{height:auto;min-height:40px;align-items:center}
  .hp-proc .karta b{white-space:normal}

  /* Loga si tu berou velikost z MacBooku, ne z mobilu: pás se roztahuje
     s oknem, ale loga zůstávala v mobilní velikosti a rozestupovala se do
     prázdna. Dvojice má proto strop 480 a pod ním se vycentruje — poměr loga
     ke sloupci pak vychází stejně hustě jako na 375. */
  .hp-loga .pasy{--m:.697;max-width:480px;margin-left:auto;margin-right:auto}
}

/* ==========================================================================
   PODSTRÁNKA — DETAIL TYPU HOŘÁKU
   1:1 podle Figmy (node 200:576, 1920×2967)

   Svislé pásmo sekcí v návrhu: hlavička 0–106 · záhlaví 106–846 ·
   vlastnosti 846–1238 · závěr 1238–1668 · kontakt 1668–2418 · patička 2418.
   Kontaktní sekce i patička jsou tytéž jako na homepage, včetně výšky.
   ========================================================================== */

/* ——— hlavička na světlém pozadí ————————————————————————————————
   Na homepage leží nad hero fotkou a je celá bílá; tady stojí na bílé ploše,
   takže texty i rámečky přebírají barvu textu stránky. Logo se nemění —
   je tyrkysové s bílými písmeny a čitelné na obojím.
   Píše se dvojitou třídou, protože originál má taky (.hlavicka .hl-cta). */
/* ⚠️ Bez vlastního pozadí: sekce pod hlavičkou je bílá sama, takže bílé pozadí
   nic nepřidávalo — jen překrývalo otevřený panel menu, kterému tím mizel
   oranžový pruh navazující na hamburger. Mění se jen barvy textů a rámečků. */
.hlavicka--svetla .hl-nazev{color:var(--dark)}
.hlavicka--svetla .hl-lang{border-color:var(--outline);color:var(--dark)}
.hlavicka--svetla .hl-cta{border-color:var(--outline);color:var(--dark)}
.hlavicka--svetla .hl-logo{color:var(--dark)}
/* Šipka u přepínače jazyka je vektor kreslený barvou textu (`currentColor`),
   takže se na světlé hlavičce ztmaví sama — dřív to byl obrázek s natvrdo
   bílou barvou a musel se ztmavovat filtrem. */

/* ——— ZÁHLAVÍ 1920×740 ——————————————————————————————————————— */
/* Výška je včetně hlavičky (106 + 740 obsahu = 846 v návrhu) — box-sizing
   je border-box, takže odsazení nahoře se počítá dovnitř. */
.pod-hlava{height:846px;padding-top:106px;background:var(--white);overflow:hidden}
.pod-hlava .wrap{height:100%}
/* Dvojice rámečků stojí u levého okraje stránky, ne kontejneru (v návrhu x=23). */
/* Dvojice leží přímo v sekci, takže odsazení shora se počítá od jejího okraje
   (v návrhu 227), ne od kontejneru, který začíná až pod hlavičkou. */
.pod-znacky{position:absolute;left:max(24px,calc(50% - 936px));top:227px}
.pod-hlava .label{position:absolute;left:0;top:80px}
.h1--pod{font-size:60px;line-height:75px;letter-spacing:-1.2px}
.pod-hlava .h1--pod{position:absolute;left:0;top:108px;width:678px}
.pod-perex{position:absolute;left:0;top:365px;width:531px;
  font-size:20px;line-height:30px;color:var(--gray-font)}
/* Zvýrazněné pasáže jsou v grafice jen tmavší, ne tučné — tučné je nese kvůli
   administraci (klient je v editoru označí normálně jako tučné). */
.pod-perex b,.pod-perex strong{font-weight:inherit;color:var(--dark)}

/* ——— fotka produktu 948×700 —————————————————————————————————
   Sedí u pravého okraje stránky a přesahuje kontejner. Fotka samotná je širší
   než rám a vyčnívá doleva (v návrhu 1088 široká na x=−167).
   ⚠️ Vytracení do šedé (návrh) je pryč — přes fotku působilo jako bílý závoj
   (Martin 19. 8.); totéž na Technologii a Kvalitě.
   Pod výřezem leží tatáž fotka na 50 %, jako panel produktů na homepage. */
.pod-foto{position:absolute;right:max(0px,calc(50% - 960px));top:146px;width:948px;height:700px;
  background:var(--gray-bg);overflow:hidden}
/* Nad 1920 pokračuje **podklad** panelu až k okraji okna, ale fotka i šipky
   zůstávají na hraně bloku (Martin 24. 8.: „A má správné umístění, ale schází
   mu ten podklad doprava“). Doplňuje ho proto vrstva v sekci, ne pozadí
   panelu: ten má `overflow:hidden` kvůli výřezu fotky, takže by si přetečení
   ořízl vlastním rámem. Pruh sedí přesně napravo od panelu, nic nepřekrývá.
   Sekce s fotkou jsou ty bez modifikátoru — široká i textová hlava panel
   nemají a šedý pruh by jim visel v prázdnu. */
@media (min-width:1921px){
  .pod-hlava:not(.pod-hlava--siroka):not(.pod-hlava--text)::after{
    content:"";position:absolute;top:146px;right:0;
    width:calc(50% - 960px);height:700px;background:var(--gray-bg)}
}
/* Snímky galerie leží přes sebe; vidět je jen ten aktivní. Panel se dá
   listovat i tažením prstu nebo myší, proto kurzor a vypnutý výběr textu —
   jinak tažení označí popisky kolem. Svislé posouvání stránky zůstává. */
.pod-foto[data-galerie]{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.pod-foto[data-galerie]:active{cursor:grabbing}
.pod-foto-snimek{position:absolute;inset:0;display:none}
.pod-foto-snimek.je-videt{display:block}
.pod-foto-snimek img{-webkit-user-drag:none;user-drag:none}

/* Šipky pod fotkou — v návrhu dva čtverce 40×40 s rámečkem u dolního okraje
   panelu (620 / 668 od jeho levé hrany, 628 shora). */
.pod-foto-sipky{position:absolute;left:620px;top:628px;display:flex;gap:8px}
.pod-sipka{width:40px;height:40px;padding:0;display:flex;align-items:center;
  justify-content:center;background:transparent;border:1px solid var(--dark);
  color:var(--dark);cursor:pointer}
.pod-sipka svg{width:24px;height:24px;display:block}
.pod-sipka--zpet svg{transform:rotate(180deg)}
/* Šipky se na najetí probarví oranžově jako tlačítka na webu — do 24. 8.
   byly černé (Martin: „jako buttony na webu", platí pro všechny šipky). */
.pod-sipka{transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.pod-sipka:hover{background:var(--orange);border-color:var(--orange);color:var(--white)}
/* Rozměry uvnitř jsou v procentech rámu, aby se celý panel dal v užších oknech
   jen zmenšit a fotka si udržela poměr z návrhu (rám 948×700, fotka 1088×615
   na pozici −167 / 57).
   max-width:none — reset dává obrázkům strop 100 % rodiče a fotka je záměrně
   širší než rám, jinak se srazí a objekt vyjde menší. */
.pod-foto img{position:absolute;left:-17.616%;top:8.143%;width:114.768%;height:87.857%;
  max-width:none;object-fit:cover;pointer-events:none}
.pod-foto-podklad{opacity:.5}

/* ——— VLASTNOSTI 1920×392 ————————————————————————————————————
   Pět dlaždic 269 širokých s mezerou 24; dělí je svislá linka vlevo.
   Počet řídí obsah (kolik nadpisů H3 klient napíše), proto mřížka a ne
   pevné pozice — při jiném počtu se rozestupy dopočítají samy. */
.pod-body{background:var(--gray-bg);padding:48px 0}
.pod-body-mrizka{display:grid;grid-template-columns:repeat(5,269px);gap:24px}
.pod-bod{position:relative;height:296px;padding-left:31px;
  border-left:1px solid var(--outline);overflow:hidden}
.pod-bod-fajfka{position:absolute;left:31px;top:24px;width:24px;height:24px;
  display:block;color:var(--orange)}
.pod-bod-fajfka svg{width:24px;height:24px;display:block}
.pod-bod-nazev{position:absolute;left:31px;top:64px;width:174px;margin:0;
  font-size:24px;line-height:normal;font-weight:500;color:var(--dark)}
.pod-bod-text{position:absolute;left:31px;top:140px;width:219px;
  font-size:16px;line-height:22px;color:var(--gray-font)}

/* ——— ZÁVĚR 1920×430 ————————————————————————————————————————
   Nadpis i text stojí odsazené od levého okraje kontejneru (v návrhu x=484,
   tedy 244 od kontejneru), text je 935 široký. */
/* Výška z návrhu jako spodní mez — delší text (němčina) by se přes pevnou
   výšku otíral o hranu sekce (Martin 28. 8.). */
/* ⚠️ Nadpis i text jdou v toku, ne na pevných pozicích z návrhu
   (Martin 28. 8.): německý text je delší a na pevné pozici se otíral
   o kontaktní sekci pod sebou. Odsazení dávají návrhové pozice
   (nadpis 80, text 88 pod ním, konec sekce 24 pod textem). */
.pod-zaver{min-height:430px;padding-bottom:24px;background:var(--white)}
.pod-zaver .wrap{min-height:100%;display:flex;flex-direction:column;align-items:flex-start}
.pod-zaver-nazev{position:static;margin:80px 0 0 244px;line-height:56px;
  white-space:nowrap}
/* Text je tu menší než perex nahoře (18/26) a odstavce dělí prázdný řádek —
   v návrhu je mezi nimi opravdu prázdný odstavec, ne zmenšená mezera. */
.pod-zaver-text{position:static;margin:32px 0 0 244px;width:935px;
  font-size:18px;line-height:26px;color:var(--gray-font)}
.pod-zaver-text p{margin:0}
.pod-zaver-text p + p{margin-top:26px}

/* Odstavce uvnitř textů z administrace nesmí dědit odsazení staré McRAI kostry
   (default.css dává p{margin:10px 0}). */
.obsah-text p{margin:0}
.obsah-text p + p{margin-top:18px}

/* ——— podstránka v užších oknech ————————————————————————————————
   ⚠️ Grafika podstránky existuje jen pro 1920 — rozvržení níž je odvozené
   podle stejných pravidel jako homepage (kontejner 1232 / okraj 140 od 1720,
   mobilní sada od 639), ne odměřené z návrhu.
   ========================================================================== */
@media (max-width:1720px) and (min-width:1321px){
  /* Panel s fotkou drží stejný podíl šířky stránky jako v návrhu (948 z 1920)
     a poměr stran; obsah uvnitř je v procentech, takže stačí zmenšit rám. */
  /* Výška sekce je odsazení fotky + její výška (120 + 520): panel s fotkou
     musí končit přesně na spodní hraně, aby jeho šedé pozadí **navazovalo
     na šedý pás panelů** jako v grafice. Jinak mezi nimi zůstane bílý pruh. */
  .pod-hlava{height:640px}
  .pod-foto{top:120px;width:49.375%;height:520px}
  /* Panel se zmenšil, šipky proto drží roh místo pevné pozice z návrhu. */
  .pod-foto-sipky{left:auto;right:32px;top:auto;bottom:32px}
  .pod-hlava .label{top:66px}
  .h1--pod{font-size:48px;line-height:60px;letter-spacing:-.96px}
  .pod-hlava .h1--pod{top:92px;width:560px}
  .pod-perex{top:300px;width:462px;font-size:18px;line-height:26px}

  /* Pět dlaždic se do užšího kontejneru nevejde v pevné šířce 269 — dělí se
     tedy rovným dílem a texty uvnitř se roztáhnou s nimi. */
  .pod-body-mrizka{grid-template-columns:repeat(5,minmax(0,1fr))}
  .pod-bod{padding-right:24px}
  .pod-bod-nazev,.pod-bod-text{width:auto;right:24px}
  .pod-bod-nazev{font-size:22px}

  /* Odsazení dole jako ve výchozí sadě — bez něj se německý text otíral
     o kontaktní sekci pod sebou (Martin 28. 8., naměřeno na 1358). */
  .pod-zaver{min-height:400px;padding-bottom:24px}
  /* Odsazení pro tuhle šířku (nadpis 70, text 80 pod ním) — viz poznámka výš. */
  .pod-zaver-nazev{margin:70px 0 0 208px;font-size:44px;line-height:56px;letter-spacing:-.88px}
  .pod-zaver-text{margin:24px 0 0 208px;width:800px}
}

/* ——— pod 1320 se text a fotka přestanou vejít vedle sebe ————————————
   Fotka jde pod text přes celou šířku kontejneru, sekce tím přestává mít
   pevnou výšku.

   ⚠️ Hranice je 1320, ne níž: od téhle šířky má kontejner sada homepage
   `width:100%;padding:0 40px`, jenže **absolutně umístěné prvky odsazení
   rodiče nevidí** — s `left:0` by se text i nadpis nalepily na kraj okna
   (bylo vidět v pásmu 1320–1181). Stejnou hranicí přepíná do toku i homepage,
   takže obě sady drží stejný okraj. */
@media (max-width:1320px){
  /* Bez spodního odsazení — fotka je poslední prvek sekce a její šedé pozadí
     má navazovat na šedý pás panelů. */
  .pod-hlava{height:auto;padding-bottom:0;overflow:visible}
  /* ⚠️ Jenže záhlaví **bez fotky** (O nás, Naše služby, GDPR) končí posledním
     odstavcem, a ten se pak lepil rovnou na fotku další sekce (Martin 28. 8.).
     Ty proto spodní odsazení dostanou — u sekcí s fotkou zůstává nula. */
  .pod-hlava--siroka,.pod-hlava--text{padding-bottom:48px}
  .pod-hlava .wrap{height:auto;padding-top:66px}
  .pod-znacky{display:none}
  .pod-hlava .label,.pod-hlava .h1--pod,.pod-perex{position:static;width:auto;max-width:760px}
  .pod-hlava .h1--pod{margin-top:22px}
  .pod-perex{margin-top:32px}
  .pod-foto{position:relative;top:auto;right:auto;width:100%;height:auto;
    aspect-ratio:948 / 700;margin-top:48px}
  .pod-foto-sipky{left:auto;right:24px;top:auto;bottom:24px}

  /* Pět dlaždic vedle sebe je tu už moc úzkých — jdou do dvou řad. */
  .pod-body-mrizka{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
  .pod-bod{height:auto;min-height:240px}
  .pod-bod-nazev,.pod-bod-text{position:static;width:auto;right:auto}
  .pod-bod-nazev{margin-top:16px}
  .pod-bod-text{margin-top:16px}
  .pod-bod-fajfka{position:static}

  .pod-zaver{height:auto;min-height:0;padding:72px 0}
  .pod-zaver .wrap{display:block}
  .pod-zaver-nazev,.pod-zaver-text{position:static;left:auto;top:auto;width:auto;margin:0;
    white-space:normal}
  .pod-zaver-text{margin-top:32px;max-width:935px}
}

/* ——— mobil ————————————————————————————————————————————————
   Dlaždice pod sebou; nadpis i texty přebírají mobilní sadu velikostí. */
@media (max-width:639px){
  /* Bez spodního odsazení — šedé pozadí fotky navazuje na pás panelů. */
  .pod-hlava{padding-bottom:0}
  .pod-hlava--siroka,.pod-hlava--text{padding-bottom:40px}
  .pod-hlava .wrap{padding-top:40px}
  .h1--pod{font-size:36px;line-height:44px;letter-spacing:-.72px}
  .pod-hlava .h1--pod{margin-top:16px}
  .pod-perex{margin-top:24px;font-size:16px;line-height:24px}
  .pod-foto{margin-top:32px}

  .pod-body{padding:40px 0}
  .pod-body-mrizka{grid-template-columns:1fr;gap:32px}
  .pod-bod{min-height:0}
  .pod-bod-nazev{font-size:20px}

  .pod-zaver{padding:48px 0}
  .pod-zaver-nazev{font-size:32px;line-height:40px;letter-spacing:-.64px}
  .pod-zaver-text{margin-top:24px;font-size:16px;line-height:24px}
  .pod-zaver-text p + p{margin-top:24px}
}

/* ==========================================================================
   PODSTRÁNKA — NAŠE SLUŽBY
   1:1 podle Figmy (node 349:2625, 1920×3031)

   Pásmo sekcí: hlavička 0–106 · záhlaví 106–528 · fotka 528–1168 ·
   dlaždice 1168–1732 · kontakt 1732–2482 · patička 2482.
   Proti detailu hořáku stojí perex vpravo, fotka jde přes celou šířku
   a dlaždic je osm ve dvou řadách.
   ========================================================================== */

.pod-hlava--siroka{height:528px}
/* Nadpis je tu o kus větší než u hořáku (64/80 proti 60/75). */
.h1--sluzby{font-size:64px;line-height:80px;letter-spacing:-1.28px}
.pod-hlava--siroka .h1--pod{width:621px}
/* Perex stojí v pravé polovině, ve výšce druhého řádku nadpisu (návrh x=1022). */
.pod-perex--vpravo{left:782px;top:156px;width:531px}

/* ——— široký pás s fotkou 1920×640 ——————————————————————————————
   Z fotky je vidět jen výsek (v návrhu 1989×1492 na −34 / −368), proto
   procenta místo pevných pixelů — pás se pak dá v užších oknech zmenšit.
   max-width:none kvůli resetu, který dává obrázkům strop 100 %. */
.pod-pas{height:640px;background-color:var(--outline);overflow:hidden}
.pod-pas-stin{position:absolute;inset:0;display:block;background:rgba(0,0,0,.2)}

/* ——— osm dlaždic ve dvou řadách ————————————————————————————————
   Dlaždice jsou širší a nižší než u hořáku (341×222 proti 269×296) a nadpis
   se vejde na jeden řádek, takže text začíná výš. */
.pod-body--ctyri{padding:48px 0}
.pod-body--ctyri .pod-body-mrizka{grid-template-columns:repeat(4,341px);gap:24px}
.pod-body--ctyri .pod-bod{height:222px}
/* Nadpisy mají v návrhu různé šířky podle délky (246 / 274 / 300) a všechny
   se vejdou na jeden řádek — místo pevné šířky proto dostanou celou dlaždici,
   jinak se „Technická dokumentace“ zalomí a přeteče na text pod sebou. */
.pod-body--ctyri .pod-bod-nazev{top:64px;width:auto;right:31px}
.pod-body--ctyri .pod-bod-text{top:110px;width:254px}

@media (max-width:1720px) and (min-width:1321px){
  .pod-hlava--siroka{height:470px}
  .h1--sluzby{font-size:52px;line-height:66px;letter-spacing:-1.04px}
  .pod-hlava--siroka .h1--pod{width:520px}
  .pod-perex--vpravo{left:660px;top:132px;width:462px}
  .pod-pas{height:540px}
  /* V užší dlaždici se nadpis zalomí na dva řádky a na pevné pozici by narazil
     do textu pod sebou — obsah proto jde do toku a dlaždice roste podle něj. */
  .pod-body--ctyri .pod-body-mrizka{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pod-body--ctyri .pod-bod{height:auto;min-height:222px;padding-bottom:24px}
  .pod-body--ctyri .pod-bod-fajfka{position:static;margin:24px 0 0}
  .pod-body--ctyri .pod-bod-nazev{position:static;width:auto;right:auto;margin-top:16px}
  .pod-body--ctyri .pod-bod-text{position:static;width:auto;right:auto;margin-top:16px;
    padding-right:24px}
}

@media (max-width:1320px){
  /* Perex se vedle nadpisu přestane vejít a jde pod něj. */
  .pod-hlava--siroka{height:auto}
  .pod-hlava--siroka .h1--pod{width:auto}
  /* Šířku je nutné vrátit taky — dvě třídy přebijí `width:auto`, které si
     perex bere ze společného pravidla, a blok by přetékal přes okraj okna. */
  .pod-perex--vpravo{left:auto;top:auto;width:auto}
  .pod-pas{height:400px}
  .pod-body--ctyri .pod-body-mrizka{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pod-body--ctyri .pod-bod{height:auto;min-height:0;padding-bottom:24px}
  /* Šířky z návrhu (246 / 254) tu musí pryč — jinak text nevyplní dlaždici
     a vpravo v ní zůstane prázdno. Obsah jde do toku jako u hořáků. */
  .pod-body--ctyri .pod-bod-fajfka{position:static;margin:24px 0 0}
  .pod-body--ctyri .pod-bod-nazev{position:static;width:auto;right:auto;top:auto;margin-top:16px}
  .pod-body--ctyri .pod-bod-text{position:static;width:auto;right:auto;top:auto;margin-top:16px;
    padding-right:24px}
}

@media (max-width:639px){
  .h1--sluzby{font-size:36px;line-height:44px;letter-spacing:-.72px}
  .pod-pas{height:260px}
  .pod-body--ctyri .pod-body-mrizka{grid-template-columns:1fr}
}


/* ==========================================================================
   O NÁS — 1920×4172 (Figma node 133:2005)

   Záhlaví je stejné jako u služeb (nadpis vlevo, perex vpravo), liší se jen
   šířkou nadpisu. Pod ním fotka provozu s panelem vlastností, sekce
   „Spolehlivý partner“ a mapa světa jako na homepage.
   ========================================================================== */
.on-hlava .h1--pod{width:619px;font-size:64px;line-height:80px;letter-spacing:-1.28px}
.on-hlava .pod-perex--vpravo{left:778px}

/* ——— fotka provozu 1920×940 s panelem vlastností ————————————————
   Fotka stojí při scrollování jako všechny fotky na šířku (`.foto-pevna`),
   přes ni leží tmavá vrstva 20 % a u dolního okraje panel z matného skla. */
.on-pas{height:940px;background-color:var(--dark-2);overflow:hidden}
.on-pas .wrap{height:100%}
/* ⚠️ V grafice leží panel na tmavé části fotky a bílý text na ní drží kontrast.
   Tady fotka při scrollování stojí, takže se výřez pod panelem mění a text
   se občas ocitne na světlé trubce — dolní část sekce proto ztmavuje přechod.
   Nad panelem zůstává krytí 20 % z návrhu. */
.on-pas .pod-pas-stin{background:linear-gradient(180deg,
  rgba(0,0,0,.2) 0%,rgba(0,0,0,.2) 46%,rgba(12,18,22,.5) 58%,rgba(12,18,22,.5) 100%)}
/* Sklo začíná u levého okraje stránky a končí na pravé hraně kontejneru
   (v návrhu 0–1680, kontejner 240–1680) — pravý okraj se proto dopočítává
   z šířky kontejneru a drží i v užších oknech. */
.on-panel{position:absolute;left:max(0px,calc(50% - 960px));right:calc((min(100%,1920px) - var(--wrap)) / 2);
  top:510px;height:430px;display:block;
  background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(18.3px);backdrop-filter:blur(18.3px)}

/* Svislý popisek s šipkou ukazuje na panel pod sebou (v návrhu je otočený
   o 90° a čte se zdola nahoru). */
.on-svisle{position:absolute;left:1px;top:182px;height:172px;margin:0;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:16px;line-height:20px;font-weight:600;letter-spacing:.32px;color:var(--white)}
.on-sipka{position:absolute;left:1px;top:378px;width:24px;height:24px;
  display:block;color:var(--white);transform:rotate(90deg)}
.on-sipka svg{width:100%;height:100%;display:block}

/* Pět dlaždic v panelu — stejná mřížka i typografie jako táž pětice na
   homepage, jen na tmavém podkladu (bílé texty, oranžové ikony). */
.on-karty{position:absolute;left:1px;top:557px;width:1441px;
  display:grid;grid-template-columns:repeat(5,269px);gap:24px}
.on-karta{position:relative;height:335px;padding:18px 0 0 31px;
  border-left:1px solid rgba(255,255,255,.2);overflow:hidden}
.on-karta .ikona{display:block;width:48px;height:48px;color:var(--orange)}
.on-karta .ikona svg{display:block;width:100%;height:100%}
.on-karta b{position:absolute;left:31px;top:161px;width:212px;
  font-size:24px;line-height:30px;font-weight:500;color:var(--white)}
.on-karta .popis{position:absolute;left:31px;top:244px;width:209px;
  font-size:16px;line-height:20px;color:var(--white)}

/* ——— SPOLEHLIVÝ PARTNER 1920×748 — fotka vlevo, text vpravo —————— */
.on-partner{height:748px;background:var(--white)}
.on-partner .wrap{height:100%}
.on-partner-foto{position:absolute;left:0;top:104px;width:707px;height:540px;
  background:var(--outline);overflow:hidden}
.on-partner-foto img,.on-partner-video{display:block;width:100%;height:100%;object-fit:cover}
/* Kdo tlumí pohyb, uvidí `poster` — video se nepřehrává (zastaví ho skript). */
.on-partner-video[data-tlumeno]{visibility:visible}
.on-partner .label{position:absolute;left:783px;top:214px}
.on-partner-nazev{position:absolute;left:783px;top:242px;width:544px;line-height:56px}
.on-partner-text{position:absolute;left:783px;top:434px;width:490px;
  font-size:18px;line-height:26px;color:var(--gray-font)}

/* ——— REALIZACE VE SVĚTĚ — táž sekce jako na homepage ————————————
   Na podstránce stojí texty o kus výš a víc vpravo než na homepage
   a přibývá pod nimi tlačítko na reference. */
/* ⚠️ Sloupec vpravo jde v toku, ne na pevných pozicích (Jiřina 27. 8.):
   český odstavec má o řádek víc a tlačítko mu leželo na posledním řádku.
   Odsazení dávají návrhové pozice (nadpisek 148, nadpis 184, text 320,
   tlačítko 24 pod textem). Mapa vlevo zůstává pozicovaná.
   Sada je schválně v dotazu na šířku: odsazení zleva drží sloupec vpravo
   vedle mapy, a od 1320 níž jde sekce do mřížky, kde by ho vytlačilo z okna. */
@media (min-width:1321px){
  .hp-svet--pod .wrap{display:flex;flex-direction:column;align-items:flex-start}
  .hp-svet--pod .label{position:static;margin:148px 0 0 780px}
  .hp-svet--pod .h2{position:static;margin:16px 0 0 780px}
  .hp-svet--pod .text{position:static;margin:24px 0 0 780px}
  .svet-cta{position:static;margin:24px 0 0 780px}
}

@media (max-width:1720px) and (min-width:1321px){
  .on-hlava .h1--pod{width:520px;font-size:52px;line-height:66px;letter-spacing:-1.04px}
  .on-hlava .pod-perex--vpravo{left:660px}

  .on-pas{height:780px}
  .on-panel{top:390px;height:390px}
  .on-svisle{top:150px}
  .on-sipka{top:340px}
  /* Dlaždice drží podíl šířky kontejneru, ať se panel může zúžit; odsazení
     od jeho okrajů je stejné jako u téže pětice na homepage (24 z 1232). */
  .on-karty{left:24px;top:432px;width:1184px;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .on-karta{height:300px;padding:18px 0 0 23px}
  .on-karta .ikona{width:40px;height:40px}
  .on-karta b{left:23px;top:140px;width:auto;right:16px;font-size:20px;line-height:25px}
  .on-karta .popis{left:23px;top:212px;width:auto;right:16px;font-size:14px;line-height:18px}

  .on-partner{height:620px}
  .on-partner-foto{top:80px;width:560px;height:430px}
  .on-partner .label{left:620px;top:170px}
  .on-partner-nazev{left:620px;top:198px;width:470px;font-size:40px;line-height:48px}
  .on-partner-text{left:620px;top:360px;width:460px}

  /* Odsazení pro tuhle šířku (nadpisek 125, nadpis 153, text 281,
     tlačítko 16 pod textem) — viz poznámka u `.hp-svet--pod` výš. */
  .hp-svet--pod .label{margin:125px 0 0 626px}
  .hp-svet--pod .h2{margin:8px 0 0 626px}
  .hp-svet--pod .text{margin:16px 0 0 626px}
  .svet-cta{margin:16px 0 0 626px}
}

/* Od 1320 níž jde obsah do toku — pevné pozice by se lepily ke kraji. */
@media (max-width:1320px){
  .on-hlava .h1--pod{width:auto;font-size:44px;line-height:56px}
  .on-hlava .pod-perex--vpravo{left:auto}

  .on-pas{height:auto;padding:64px 0 72px}
  .on-pas .wrap{height:auto}
  /* ⚠️ Sklo za dlaždicemi zůstává i v užších oknech — bez něj leží bílý text
     rovnou na fotce a je nečitelný (Martin 19. 8.). Panel z návrhu stojí na
     pevné pozici mimo kontejner, což v toku nedává smysl; podklad proto nese
     rovnou mřížka dlaždic a drží tak přesně jejich výšku. */
  .on-panel{display:none}
  .on-pas .pod-pas-stin{background:rgba(12,18,22,.35)}
  .on-svisle,.on-sipka{display:none}
  .on-karty{position:static;width:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
    padding:32px;background:rgba(255,255,255,.1);
    -webkit-backdrop-filter:blur(18.3px);backdrop-filter:blur(18.3px)}
  .on-karta{height:auto;padding:0 0 0 23px}
  .on-karta .ikona{width:40px;height:40px}
  .on-karta b{position:static;display:block;width:auto;margin:24px 0 12px;
    font-size:20px;line-height:25px}
  .on-karta .popis{position:static;display:block;width:auto;font-size:14px;line-height:18px}

  .on-partner{height:auto;padding:64px 0 72px}
  .on-partner .wrap{height:auto;display:grid;grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;column-gap:48px;align-items:start}
  .on-partner-foto{position:static;width:auto;height:420px;
    grid-column:1;grid-row:1 / span 3}
  .on-partner .label{position:static;grid-column:2;grid-row:1}
  .on-partner-nazev{position:static;grid-column:2;grid-row:2;width:auto;
    margin:12px 0 20px;font-size:36px;line-height:46px}
  .on-partner-text{position:static;grid-column:2;grid-row:3;width:auto}

  /* V toku je sekce světa mřížka — tlačítko by se jinak roztáhlo přes sloupec. */
  /* `margin:24px 0 0` ruší i odsazení zleva, kterým si tlačítko drží
     pozici v pravém sloupci na širších obrazovkách. */
  .svet-cta{position:static;margin:24px 0 0;justify-self:start;grid-column:2;grid-row:5}
}

@media (max-width:900px){
  .on-karty{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svet-cta{grid-column:auto;grid-row:auto}
  .on-partner .wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .on-partner-foto{grid-column:auto;grid-row:auto;height:360px;margin-bottom:32px}
  .on-partner .label,.on-partner-nazev,.on-partner-text{grid-column:auto;grid-row:auto}
}

@media (max-width:639px){
  .on-hlava .h1--pod{font-size:36px;line-height:44px;letter-spacing:-.72px}
  .on-pas{padding:48px 0 56px}
  .on-karty{grid-template-columns:1fr;gap:28px;padding:24px}
  .on-partner{padding:48px 0 56px}
  .on-partner-foto{height:260px}
  .on-partner-nazev{font-size:32px;line-height:40px}
  /* CTA, které v mobilní sadě spadne pod text, jde na celou šířku — stejně
     jako tlačítka v hero, u služeb i ve formuláři (Martin 19. 8.). */
  .svet-cta{width:100%;margin-left:0}
}

/* ==========================================================================
   TECHNOLOGIE — 1920×3887 (Figma node 226:1499)

   Záhlaví je jako u detailu hořáku (nadpis a perex vlevo, rám s fotkou
   vpravo), jen render uvnitř leží menší a vytrácí se do šedé ze všech stran.
   Pod ním tři obsahové bloky z druhého textu: výkon, komplexní řešení
   (tmavá sekce s obrázkem proudění) a emise s tabulkou.
   ========================================================================== */
.h1--tech{font-size:64px;line-height:80px;letter-spacing:-1.28px}
.te-hlava .h1--pod{width:641px}
.te-perex{top:312px}

/* ——— rám s renderem 948×700 ————————————————————————————————
   Render je menší než rám (924×523 na 12/112) a ze všech čtyř stran se
   vytrácí do šedé — proto čtyři krycí přechody místo jednoho jako u hořáku.
   Rozměry uvnitř jsou v procentech rámu, ať se dá v užších oknech zmenšit. */
.te-foto{position:absolute;right:max(0px,calc(50% - 960px));top:146px;width:948px;height:700px;
  background:var(--gray-bg);overflow:hidden}
.te-foto img{position:absolute;left:1.266%;top:16%;width:97.468%;height:74.714%;
  max-width:none;object-fit:contain}

/* ——— VÝKON 1920×464 — stejné rozvržení jako závěr u hořáku, jen šedé ——— */
.te-vykon{height:464px;background:var(--gray-bg)}
/* V návrhu dělí odstavce 24 px, ne prázdný řádek jako u hořáku. */
.te-vykon .pod-zaver-text{line-height:24px}
.te-vykon .pod-zaver-text p + p{margin-top:24px}

/* ——— KOMPLEXNÍ ŘEŠENÍ 1920×665 — tmavá sekce s obrázkem proudění ———— */
.te-reseni{height:665px;background:var(--dark)}
.te-reseni .wrap{height:100%}
.te-cfd{position:absolute;left:0;top:35px;width:720px;height:576px;object-fit:contain}
.te-reseni-nazev{position:absolute;left:733px;top:114px;width:566px;
  line-height:56px;color:var(--white)}
.te-reseni-text{position:absolute;left:733px;top:258px;width:550px;
  font-size:18px;line-height:24px;color:var(--gray-font)}
/* Zvýrazněné pasáže jsou v grafice bílé a polotučné. */
.te-reseni-text b,.te-reseni-text strong{font-weight:600;color:var(--white)}

/* Legenda rychlosti — v grafice vektor, tady přechod a popisky, aby zůstala
   ostrá i po zvětšení. Leží nad obrázkem u jeho levého okraje. */
.te-legenda{position:absolute;left:0;top:92px;width:100px;height:433px;
  font-size:14px;line-height:normal;letter-spacing:-.28px;color:var(--white)}
.te-legenda-nazev{position:absolute;left:0;top:0;margin:0}
.te-skala{position:absolute;left:0;top:62px;width:17px;height:329px;display:block;
  background:linear-gradient(0deg,#0008fc 0%,#00fcfc 25%,#03fc05 49.038%,
    #fdf905 73.558%,#f80d0c 100%)}
/* Pět dělicích čárek přes škálu (v grafice 8 px dlouhé, po 82 px). */
.te-carky{position:absolute;left:20px;top:62px;width:8px;height:328px;display:block;
  background:repeating-linear-gradient(180deg,var(--white) 0,var(--white) 1px,
    transparent 1px,transparent 82px)}
.te-hodnoty{position:absolute;left:37px;top:54px;margin:0;padding:0;list-style:none}
.te-hodnoty li{height:82px}
.te-legenda-jednotka{position:absolute;left:0;top:415px;margin:0}

/* ——— EMISE 1920×615 — nadpis, tabulka a poznámky ————————————————— */
/* ⚠️ Nadpis a obsah jdou v toku, ne na pevných pozicích (Jiřina 27. 8.):
   německy i anglicky má nadpis dva řádky místo jednoho a na pevné pozici
   ležel přes tabulku. Odsazení dávají návrhové pozice (nadpis 88, obsah
   96 pod ním); výška sekce je jen spodní mez. */
.te-emise{min-height:615px;background:var(--white)}
.te-emise .wrap{min-height:100%;display:flex;flex-direction:column;align-items:flex-start}
.te-emise-nazev{position:static;width:680px;margin:88px 0 0 244px;line-height:56px}
.te-emise-obsah{position:static;width:952px;margin:40px 0 0 244px}

/* Tabulka emisí — rámečky kolem každé buňky, záhlaví na šedém podkladu.
   Šířky sloupců jsou z návrhu (72 / 154 / 151 / 208 / 208 / 164). */
.tab-emise{width:100%;border-collapse:collapse;table-layout:fixed;
  font-size:16px;line-height:20px}
.tab-emise th,.tab-emise td{border:1px solid var(--outline);
  padding:10px 15px;text-align:left;vertical-align:top;font-weight:600;color:var(--dark)}
.tab-emise thead th{background:var(--gray-bg);height:81px}
.tab-emise tbody th,.tab-emise tbody td{height:40px}
/* Upřesnění v závorce je v návrhu menší a bez zvýraznění. */
.tab-emise thead small{display:block;font-size:14px;font-weight:400;line-height:normal}
.tab-emise th:first-child{width:72px}
.tab-emise thead th:nth-child(2){width:154px}
.tab-emise thead th:nth-child(3){width:151px}
.tab-emise thead th:nth-child(4),.tab-emise thead th:nth-child(5){width:208px}
.tab-emise thead th:nth-child(6){width:164px}

/* Obal tabulky z editoru — posuv patří tabulce, ne celému bloku s poznámkami
   (`ht_tabulky()` v `_obsah_stranky.php`). V desktopové sadě se neuplatní. */
.tabulka-obal{max-width:100%}

/* Poznámky pod tabulkou — v návrhu drobné písmo v barvě doprovodných textů. */
.te-emise-obsah > p,.te-emise-obsah > ul{font-size:12px;line-height:18px;color:var(--gray-font)}
/* Tabulka je od 19. 8. v obalu `.tabulka-obal` (viz `ht_tabulky()`), takže
   odstup poznámek se počítá od něj, ne od `<table>`. */
.te-emise-obsah table + p,.te-emise-obsah .tabulka-obal + p{margin-top:38px}
.te-emise-obsah ul{margin:0;padding:0;list-style:none}
.te-emise-obsah ul li:before{content:"• "}

@media (max-width:1720px) and (min-width:1321px){
  .h1--tech{font-size:52px;line-height:66px;letter-spacing:-1.04px}
  .te-hlava .h1--pod{width:520px}
  .te-perex{top:262px;width:462px}
  .te-foto{top:120px;width:49.375%;height:520px}

  /* Text je tu delší než u hořáku a v užším sloupci přeroste pevnou výšku —
     sekce si ji proto počítá z obsahu (délku textu řídí administrace). */
  .te-vykon{height:auto;padding:70px 0 64px}
  .te-vykon .wrap{height:auto}
  .te-vykon .pod-zaver-nazev{position:static;margin:0 0 24px 208px;white-space:normal}
  .te-vykon .pod-zaver-text{position:static;margin-left:208px;width:800px}

  .te-reseni{height:560px}
  .te-cfd{left:0;top:30px;width:52%;height:480px}
  .te-reseni-nazev{left:56%;top:96px;width:440px;font-size:40px;line-height:48px}
  .te-reseni-text{left:56%;top:216px;width:460px}
  .te-legenda{top:78px;height:370px;font-size:12px}
  .te-skala{top:54px;height:280px}
  .te-carky{top:54px;height:280px;
    background:repeating-linear-gradient(180deg,var(--white) 0,var(--white) 1px,
      transparent 1px,transparent 70px)}
  .te-hodnoty{top:47px}
  .te-hodnoty li{height:70px}
  .te-legenda-jednotka{top:352px}

  .te-emise{min-height:560px}
  .te-emise-nazev{margin:72px 0 0 24px;font-size:40px;line-height:48px}
  .te-emise-obsah{margin:32px 0 0 24px;width:1184px}
}

/* Od 1320 níž jde obsah do toku. */
@media (max-width:1320px){
  .h1--tech{font-size:44px;line-height:56px}
  .te-hlava .h1--pod{width:auto}
  .te-perex{position:static;width:auto;margin-top:24px}
  .te-foto{position:relative;right:auto;top:auto;width:100%;height:420px;margin-top:32px}

  .te-vykon{height:auto;padding:56px 0 64px}
  .te-reseni{height:auto;padding:56px 0 64px}
  .te-reseni .wrap{height:auto;display:grid;grid-template-columns:1fr 1fr;
    column-gap:48px;align-items:start}
  .te-cfd{position:relative;left:auto;top:auto;width:100%;height:auto;
    grid-column:1;grid-row:1 / span 2}
  /* Svislá legenda by v nižší sekci přesáhla přes její okraj (popisky uvnitř
     mají pevné pozice), proto se rovnou překlopí na vodorovnou. */
  .te-legenda{position:relative;left:auto;top:auto;width:auto;height:auto;
    grid-column:1;grid-row:3;display:flex;align-items:center;gap:12px;margin-top:16px}
  .te-legenda-nazev,.te-legenda-jednotka{position:static}
  .te-skala{position:static;width:200px;height:14px;
    background:linear-gradient(90deg,#0008fc 0%,#00fcfc 25%,#03fc05 49.038%,
      #fdf905 73.558%,#f80d0c 100%)}
  .te-carky{display:none}
  .te-hodnoty{display:none}
  .te-reseni-nazev{position:static;grid-column:2;grid-row:1;width:auto;
    font-size:36px;line-height:46px;margin-bottom:20px}
  .te-reseni-text{position:static;grid-column:2;grid-row:2;width:auto}

  .te-emise{height:auto;min-height:0;padding:56px 0 64px}
  .te-emise .wrap{height:auto}
  .te-emise .wrap{display:block}
  .te-emise-nazev{position:static;width:auto;margin:0;font-size:36px;line-height:46px}
  .te-emise-obsah{position:static;width:auto;margin:32px 0 0}

  /* ⚠️ Tabulka se v užším okně **smrští**, neposouvá se. Dřív měla pevné
     šířky sloupců z návrhu a `min-width:760`, takže vodorovný posuv dostal
     celý blok — lišta visela až pod poznámkami a poslední sloupec byl
     uříznutý (Martin 19. 8.). Teď se sloupce dopočítají z obsahu a posuv
     zůstává jen jako pojistka kolem samotné tabulky. */
  .tabulka-obal{overflow-x:auto}
  .tab-emise{table-layout:auto;min-width:0;font-size:14px;line-height:18px}
  .tab-emise th,.tab-emise td{padding:8px 10px}
  .tab-emise th:first-child,
  .tab-emise thead th:nth-child(2),.tab-emise thead th:nth-child(3),
  .tab-emise thead th:nth-child(4),.tab-emise thead th:nth-child(5),
  .tab-emise thead th:nth-child(6){width:auto}
  .tab-emise thead th{height:auto}
  .tab-emise thead small{font-size:12px}
}

@media (max-width:900px){
  .te-reseni .wrap{grid-template-columns:minmax(0,1fr)}
  .te-cfd{grid-column:auto;grid-row:auto;margin-bottom:32px}
  .te-reseni-nazev,.te-reseni-text{grid-column:auto;grid-row:auto}
}

@media (max-width:639px){
  .h1--tech{font-size:36px;line-height:44px;letter-spacing:-.72px}
  .te-foto{height:280px}

  /* Šest sloupců se na telefon nevejde v žádné podobě — tabulka se rozloží
     pod sebe: řádek („NOx“) je záhlaví bloku a každá hodnota si nese popisek
     svého sloupce z hlavičky (`data-popisek`, doplňuje `ht_tabulky()`). */
  .tabulka-obal{overflow-x:visible}
  .tab-emise{display:block;font-size:15px;line-height:20px}
  .tab-emise thead{display:none}
  .tab-emise tbody,.tab-emise tr{display:block}
  .tab-emise tr + tr{margin-top:16px}
  .tab-emise tbody th{display:block;height:auto;padding:10px 14px;
    background:var(--gray-bg);font-size:16px}
  .tab-emise tbody td{display:flex;align-items:baseline;justify-content:space-between;
    gap:16px;height:auto;padding:8px 14px;border-top:0;white-space:nowrap}
  .tab-emise tbody td[data-popisek]:before{content:attr(data-popisek);
    font-weight:400;color:var(--gray-font);font-size:13px;line-height:17px;
    white-space:normal}
  .te-vykon,.te-reseni,.te-emise{padding:48px 0 56px}
  .te-reseni-nazev,.te-emise-nazev{font-size:32px;line-height:40px}
}

/* ==========================================================================
   KVALITA — 1920×2495 (Figma node 225:1184)

   Záhlaví je jako u technologie (nadpis a perex vlevo, rám s renderem
   vpravo), navíc má pod perexem dlaždice certifikátů ke stažení. Pod ním
   už jen šedý pás se dvěma odstavci — nadpis grafika u něj nemá.
   ========================================================================== */
.h1--kvalita{font-size:64px;line-height:80px;letter-spacing:-1.28px}
.kv-hlava .h1--pod{width:568px}
/* ⚠️ Levý sloupec jde v toku, ne na pevných pozicích (Jiřina 27. 8.):
   německý i anglický nadpis má o řádek víc než český a na pevné pozici
   ležel přes perex. Odsazení dávají návrhové pozice (nadpisek 80, nadpis
   108, perex 312, certifikáty 529); rám s fotkou zůstává pozicovaný. */
/* Pod dlaždicemi certifikátů má zůstat bílý pruh jako v návrhu (26).
   V češtině ho drží výška sekce, v němčině a angličtině je nadpis o řádek
   delší a sekce se o něj natáhla — pruh by tam bez odsazení zmizel a
   certifikáty by končily na hraně (Martin 28. 8.). Fotka vpravo je na
   odsazení nezávislá, sahá vždy až dolů a navazuje na šedou sekci pod ním. */
.kv-hlava{min-height:846px;height:auto;padding-bottom:26px}
.kv-hlava .wrap{display:flex;flex-direction:column;align-items:flex-start}
.kv-hlava .label{position:static;margin-top:80px}
.kv-hlava .h1--pod{position:static;margin-top:8px}
.kv-hlava .pod-perex{position:static;margin-top:44px}
.kv-hlava .kv-certifikaty{position:static;margin-top:67px}

/* ——— dlaždice certifikátů 220×134 ————————————————————————————— */
.kv-certifikaty{position:absolute;left:0;top:529px;display:flex;gap:24px}
.kv-cert{position:relative;display:block;width:220px;height:134px;
  background:var(--gray-bg);border-left:1px solid var(--outline)}
.kv-cert-stitek{position:absolute;left:23px;top:24px;display:inline-flex;
  align-items:center;gap:6px;height:28px;padding:0 8px;border:1px solid var(--orange);
  font-size:12px;line-height:normal;font-weight:500;letter-spacing:-.24px;color:var(--dark)}
/* Jazyk certifikátu na štítku — jeden certifikát ve dvou jazykových verzích
   by se jinak četl jako dva různé certifikáty (Martin 19. 8.). */
.kv-cert-jazyk{display:inline-flex;align-items:center;height:18px;padding:0 5px;
  background:var(--orange);color:var(--white);font-weight:700;letter-spacing:0}
.kv-cert-nazev{position:absolute;left:23px;top:65px;width:140px;
  font-size:18px;line-height:23px;font-weight:700;color:var(--blue)}
.kv-cert-stahnout{position:absolute;right:0;bottom:0;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:var(--orange);color:var(--white)}
.kv-cert-stahnout svg{width:20px;height:20px;display:block}
.kv-cert:hover .kv-cert-stahnout{background:var(--dark)}

/* ——— rám s renderem 948×700 ————————————————————————————————
   Render přesahuje rám doleva (v návrhu 928×525 na −42 / 102).
   ⚠️ Vytracení do šedé nahoře, dole a vpravo (návrh) je pryč — přes fotku
   působilo jako bílý závoj (Martin 19. 8.). */
/* ⚠️ Výška je daná horní a spodní hranou, ne pevným číslem: v němčině
   a angličtině je nadpis o řádek delší, sekce se o něj natáhne — a fotka
   s pevnou výškou pak končila dřív a pod ní zůstal bílý pruh
   (Martin 28. 8.). Takhle sahá vždy až ke spodní hraně sekce. */
.kv-foto{position:absolute;right:max(0px,calc(50% - 960px));top:146px;bottom:0;width:948px;
  background:var(--gray-bg);overflow:hidden}
/* ⚠️ Návrh sem dal CAD render, web ale používá fotorealistickou verzi téhož
   hořáku (stejnou jako detail kombinovaných). Objekt v ní zabírá menší část
   plochy, proto je výřez posunutý a zvětšený tak, aby hořák v rámu vyšel
   stejně velký a na stejném místě jako v grafice (naměřeno 490×354 na 129/118). */
.kv-foto img{position:absolute;left:-19.28%;top:7.41%;width:122.13%;height:93.5%;
  max-width:none;object-fit:contain}

/* ——— TEXT 1920×352 — dva odstavce v užším sloupci ————————————————
   Odstavce dělí 24 px a text má řádkování 24, ne 26 jako závěr u hořáku. */
.kv-text{height:352px;background:var(--gray-bg)}
.kv-text .wrap{height:100%}
.kv-text-obsah{position:absolute;left:244px;top:80px;width:935px;
  font-size:18px;line-height:24px;color:var(--gray-font)}
.kv-text-obsah p + p{margin-top:24px}

@media (max-width:1720px) and (min-width:1321px){
  .h1--kvalita{font-size:52px;line-height:66px;letter-spacing:-1.04px}
  .kv-hlava .h1--pod{width:480px}
  .kv-perex{width:462px}
  /* Záhlaví je tu vyšší než u ostatních podstránek — pod perexem stojí ještě
     dlaždice certifikátů a v 640 už se nevešly. */
  .kv-hlava{min-height:700px}
  /* Odsazení pro tuhle šířku (nadpisek 66, nadpis 92, perex 262,
     certifikáty 434) — viz poznámka u `.kv-hlava` výš. */
  .kv-hlava .label{margin-top:66px}
  .kv-hlava .h1--pod{margin-top:6px}
  .kv-hlava .pod-perex{margin-top:38px}
  .kv-hlava .kv-certifikaty{margin-top:42px}
  .kv-foto{top:150px;bottom:0;width:49.375%;height:auto}

  .kv-text{height:auto;padding:64px 0}
  .kv-text .wrap{height:auto}
  .kv-text-obsah{position:static;margin-left:208px;width:800px}
}

@media (max-width:1320px){
  .h1--kvalita{font-size:44px;line-height:56px}
  .kv-hlava .h1--pod{width:auto}
  /* Odsazení 26 z návrhu drží prostor pod certifikáty. Tady je pod nimi
     fotka na celou šířku, takže by z něj byl bílý pruh pod ní (Martin 28. 8.). */
  .kv-hlava{padding-bottom:0}
  .kv-perex{position:static;width:auto;margin-top:24px}
  .kv-certifikaty{position:static;margin-top:32px;flex-wrap:wrap}
  /* Rám má poměr samotné fotky (1024×580). Pevná výška by při šířce
     stránky nesedla: buď by hořák plaval v prázdnu, nebo by ho vyplnění
     uřízlo (Martin 28. 8.). */
  .kv-foto{position:relative;right:auto;top:auto;bottom:auto;width:100%;
    height:auto;aspect-ratio:1024/580;margin-top:32px}
  /* Výřez výš je spočítaný pro široký rám z návrhu; tady má rám poměr
     fotky, takže se obraz jen položí na celou plochu. */
  .kv-foto img{left:0;top:0;width:100%;height:100%;object-fit:cover}

  .kv-text{height:auto;padding:56px 0 64px}
  .kv-text .wrap{height:auto}
  .kv-text-obsah{position:static;width:auto;max-width:935px}
}

@media (max-width:639px){
  .h1--kvalita{font-size:36px;line-height:44px;letter-spacing:-.72px}
  .kv-foto{height:auto}
  /* přiblížení fotky až na úzkých displejích — viz @media (max-width:480px) */
  /* Když se dlaždice certifikátů nevejdou vedle sebe, jdou na celou šířku —
     stejně jako tlačítka a panely ve zbytku mobilní sady (Martin 19. 8.). */
  .kv-certifikaty{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;width:100%}
  .kv-cert{width:auto;height:110px}
  .kv-cert-nazev{width:auto;right:56px}
  .kv-text{padding:48px 0 56px}
  .kv-text-obsah{font-size:16px;line-height:24px}
}

/* ==========================================================================
   KONTAKT — 1920×2368 (Figma node 128:878)

   Kontaktní sekce tu stojí místo záhlaví: je vyšší (851 proti 750), nadpis
   je hlavní nadpis stránky a pod kontakty jsou dvě adresy se štítky.
   Pod ní lidé ve čtyřech sloupcích a mapa přes celou šířku.
   ========================================================================== */
.hp-form--stranka{height:851px}
.hp-form--stranka .znacky{top:227px}
.hp-form--stranka .label{left:0;top:186px}
.hp-form--stranka .h2{left:0;top:214px;width:609px;
  font-size:64px;line-height:80px;letter-spacing:-1.28px}
.hp-form--stranka .fm-spoj{left:0}
.hp-form--stranka .fm-spoj--tel{top:418px}
.hp-form--stranka .fm-spoj--mail{top:466px}
.hp-form--stranka .fm-panel{left:730px;top:235px}

/* Štítky nad adresami a samotné adresy — korespondenční vlevo, fakturační
   o 244 dál (v návrhu 240 a 484 od okraje stránky). */
/* Barvu dědí po sekci — ta je na mobilu světlá (bílý štítek by na ní zmizel). */
.fm-stitek{position:absolute;top:538px;margin:0;font-size:18px;line-height:26px;
  font-weight:600;color:inherit;white-space:nowrap}
.fm-stitek--korespondence{left:0}
.fm-stitek--fakturace{left:244px}
.hp-form--stranka .fm-firma{position:absolute;left:0;top:572px;width:200px;
  font-size:16px;line-height:26px;font-weight:400;white-space:normal}
.hp-form--stranka .fm-firma--fakturace{left:244px}

/* ——— LIDÉ 1920×517 ————————————————————————————————————————
   Čtyři sloupce 342 široké s mezerou 23; dělí je svislá linka vlevo. */
.ko-lide{height:517px;background:var(--white)}
.ko-lide .wrap{height:100%}
.ko-lide-nazev{position:absolute;left:0;top:104px;line-height:56px}
.ko-lide-mrizka{position:absolute;left:0;top:216px;width:1440px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:23px}
.ko-osoba{position:relative;height:197px;padding-left:39px;
  border-left:1px solid var(--outline)}
.ko-osoba p{margin:0}
.ko-osoba-jmeno{position:absolute;left:39px;top:38px;
  font-size:24px;line-height:normal;font-weight:500;color:var(--dark)}
.ko-osoba-role{position:absolute;left:39px;top:76px;
  font-size:14px;line-height:normal;color:var(--gray-font)}
.ko-osoba-tel{position:absolute;left:39px;top:112px;font-size:16px;line-height:normal}
.ko-osoba-mail{position:absolute;left:39px;top:140px;font-size:16px;line-height:normal}
.ko-osoba-mail a{text-decoration:underline}
.ko-osoba-tel a:hover,.ko-osoba-mail a:hover{color:var(--orange)}

/* ——— MAPA 1920×451 ————————————————————————————————————————
   Mapa je **šedá** jako v grafice (a jako na ostatních našich webech) —
   Google embed nejde stylovat zevnitř, odbarvuje ho proto filtr.
   Překryv se souhlasem se ukáže jen tehdy, když web má lištu souhlasu
   a návštěvník ji zatím nepotvrdil (viz funkce/skripty.js). */
.ko-mapa{height:451px;background:var(--gray-bg);overflow:hidden}
.ko-mapa-ramec{position:absolute;inset:0;display:block;width:100%;height:100%;
  border:0;filter:grayscale(1) contrast(.92) brightness(1.05)}


@media (max-width:1720px) and (min-width:1321px){
  .hp-form--stranka{height:800px}
  .hp-form--stranka .h2{width:520px;font-size:52px;line-height:66px;letter-spacing:-1.04px}
  .hp-form--stranka .fm-panel{left:auto;right:0;top:200px}
  .hp-form--stranka .fm-spoj--tel{top:396px}
  .hp-form--stranka .fm-spoj--mail{top:444px}
  .fm-stitek{top:516px}
  .fm-stitek--fakturace{left:232px}
  .hp-form--stranka .fm-firma{top:550px}
  .hp-form--stranka .fm-firma--fakturace{left:232px}

  .ko-lide{height:470px}
  .ko-lide-nazev{top:88px;font-size:40px;line-height:48px}
  .ko-lide-mrizka{top:190px;width:1184px;gap:16px}
  .ko-osoba{padding-left:24px}
  .ko-osoba-jmeno{left:24px;font-size:20px}
  .ko-osoba-role,.ko-osoba-tel,.ko-osoba-mail{left:24px}
  .ko-mapa{height:400px}
}

/* Od 1320 níž jde obsah do toku. */
@media (max-width:1320px){
  /* Sekce stojí na stránce Kontakt jako první, takže musí uhnout pevné
     hlavičce stejně jako záhlaví ostatních podstránek (132, resp. 112 na
     telefonu) — s 56 lezl nadpisek pod logo (Martin 19. 8.). */
  .hp-form--stranka{height:auto;padding:132px 0 64px}
  /* ⚠️ Formulář zůstává vedle textu stejně jako kontaktní sekce na ostatních
     stránkách (`.hp-form` výš) — pod text jde až od 900, ne hned od 1320.
     Předtím tu spadl do toku o dvě pásma dřív, takže se stránka Kontakt
     v mezistavech chovala jinak než tatáž sekce jinde na webu. */
  .hp-form--stranka .wrap{height:auto;min-height:534px}
  .hp-form--stranka .label,.hp-form--stranka .h2,.hp-form--stranka .fm-spoj,
  .fm-stitek,.hp-form--stranka .fm-firma{
    position:static;left:auto;top:auto;right:auto}
  .hp-form--stranka .h2{width:auto;max-width:calc(50% - 60px);
    margin:12px 0 32px;font-size:44px;line-height:56px}
  .hp-form--stranka .fm-spoj{margin-bottom:16px}
  .fm-stitek{margin-top:24px}
  .hp-form--stranka .fm-firma{width:auto;margin-top:8px}
  .hp-form--stranka .fm-panel{position:absolute;left:auto;right:40px;top:0;
    width:calc(50% - 60px);max-width:none;height:auto;margin-top:0;padding:50px 40px 0}

  .ko-lide{height:auto;padding:56px 0 64px}
  .ko-lide .wrap{height:auto}
  .ko-lide-nazev{position:static;font-size:36px;line-height:46px}
  .ko-lide-mrizka{position:static;width:auto;margin-top:40px;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .ko-mapa{height:360px}
}

/* V půlce šířky je panel na formulář moc úzký — jde pod kontaktní údaje,
   stejně jako kontaktní sekce na ostatních stránkách (`.hp-form` výš). */
@media (max-width:899px){
  .hp-form--stranka .wrap{min-height:0}
  .hp-form--stranka .h2{max-width:none}
  .hp-form--stranka .fm-panel{position:static;right:auto;width:100%;
    max-width:707px;margin-top:48px;padding:40px 32px}
}

@media (max-width:639px){
  .hp-form--stranka{padding:112px 0 56px}
  .hp-form--stranka .h2{font-size:36px;line-height:44px;letter-spacing:-.72px}
  .ko-lide{padding:48px 0 56px}
  .ko-lide-nazev{font-size:32px;line-height:40px}
  .ko-lide-mrizka{grid-template-columns:minmax(0,1fr);gap:28px}
  .ko-osoba{height:auto;padding-bottom:8px}
  .ko-osoba p{position:static}
  .ko-osoba-jmeno{margin-bottom:4px}
  .ko-osoba-role{margin-bottom:12px}
  .ko-osoba-tel{margin-bottom:4px}
  .ko-mapa{height:300px}
}

/* ==========================================================================
   SOUHLAS S COOKIES (CookieScript)

   ⚠️ Skript si nese vlastní `<style>`, který se vkládá až do `<body>` — tedy
   po tomhle souboru. Se stejnou specificitou vyhraje on, proto `!important`
   (stejně to má bilina; obalový `.cookie-report` tu je, ale Mona jede takhle).
   ========================================================================== */
.cookie-report{margin-top:40px}
._CookieScriptReportPageTable{width:100% !important;border-collapse:collapse !important;
  font-size:14px !important;line-height:20px !important;color:var(--dark) !important}
._CookieScriptReportPageTable th,._CookieScriptReportPageTable td{
  border:1px solid var(--outline) !important;padding:10px 15px !important;text-align:left !important}
._CookieScriptReportPageTable th{background:var(--gray-bg) !important;font-weight:600 !important}
._CookieScriptReportPageCheckbox{margin:10px 0 !important}
._CookieScriptReportPageCheckboxText{margin:0 0 0 12px !important}
._CookieScriptReportPageSaveSettingButton{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  height:48px !important;padding:0 32px !important;margin:16px 0 !important;
  background:var(--orange) !important;border:0 !important;color:var(--white) !important;
  font-family:var(--font) !important;font-size:16px !important;font-weight:700 !important;
  line-height:normal !important;cursor:pointer !important}
._CookieScriptReportPageSaveSettingButton:hover{background:var(--dark) !important}
.cookie-report h4{margin:24px 0 8px !important;font-size:18px !important;
  line-height:26px !important;font-weight:600 !important;color:var(--dark) !important}

/* Překryv místo mapy, dokud návštěvník nesvolil s cookies třetích stran. */
.ko-mapa-souhlas{position:absolute;inset:0;z-index:3;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:0 24px;background:var(--gray-bg);text-align:center}
.ko-mapa.je-nactena .ko-mapa-souhlas{display:none}
.ko-mapa-adresa{margin:0;font-size:18px;line-height:26px;font-weight:600;color:var(--dark)}
.ko-mapa-pozn{margin:0;font-size:14px;line-height:20px;color:var(--gray-font);max-width:520px}
.ko-mapa-souhlas .btn{margin-top:8px}

/* ==========================================================================
   GDPR / prohlášení o cookies — textová stránka (grafiku pro ni návrh nemá)
   ========================================================================== */
/* ⚠️ Záhlaví si tu výšku bere z obsahu (nadpis a nic víc), ale `.pod-hlava`
   ořezává přetékající obsah kvůli fotce, která u ostatních podstránek vyčnívá.
   Dvojice rámečků stojí na 227 a je 67 vysoká, takže konec sekce (288) ji
   uřízl. Ořez tady nemá co ořezávat — vypíná se, a `min-height` navíc drží
   pod rámečky trochu vzduchu, aby na ně text nenavazoval hned pod hranou. */
.pod-hlava--text{height:auto;min-height:318px;padding:196px 0 0;background:var(--white);
  overflow:visible}
.pod-hlava--text .wrap{height:auto}
.h1--gdpr{font-size:48px;line-height:60px;letter-spacing:-.96px}
/* Nadpis i text drží stejné odsazení jako závěrečný text v detailu hořáku
   (244 od kontejneru, blok 935) — na širokém okně tak nesedí u levého kraje
   s prázdnou polovinou vedle sebe. Dvojice rámečků zůstává u okraje, jako
   všude jinde na webu. */
.gd-hlava .label,.gd-hlava .h1--pod{position:static;width:auto;margin-left:244px}
.gd-hlava .h1--pod{margin-top:12px}
.gd-text{background:var(--white);padding:40px 0 96px}
.gd-obsah{max-width:935px;margin-left:244px;font-size:18px;line-height:28px;color:var(--gray-font)}
.gd-obsah p + p{margin-top:18px}
.gd-nadpis{margin:40px 0 16px;font-size:28px;line-height:36px;font-weight:500;color:var(--dark)}
/* Odrážky v právním textu — Mona výchozí styl seznamu nemá, na tomhle webu
   se `list-style` navíc globálně vypíná. */
.gd-obsah ul{margin:12px 0 0;padding:0;list-style:none}
.gd-obsah li{position:relative;padding-left:20px;margin-top:6px}
.gd-obsah li:before{content:"";position:absolute;left:2px;top:11px;
  width:6px;height:6px;background:var(--orange);border-radius:50%}
.gd-obsah a{color:var(--blue);text-decoration:underline}
.gd-obsah a:hover{color:var(--orange)}
.gd-obsah b,.gd-obsah strong{font-weight:600;color:var(--dark)}

@media (max-width:1720px){
  .gd-hlava .label,.gd-hlava .h1--pod,.gd-obsah{margin-left:208px}
}
/* Od téhle hranice jedou sekce v toku s okrajem 40 — odsazení by text jen
   zúžilo, takže se ruší (jako u závěrečného textu detailu hořáku). */
@media (max-width:1320px){
  .pod-hlava--text{padding-top:160px}
  .h1--gdpr{font-size:40px;line-height:50px}
  .gd-hlava .label,.gd-hlava .h1--pod,.gd-obsah{margin-left:0}
}

@media (max-width:639px){
  .pod-hlava--text{padding-top:128px}
  .h1--gdpr{font-size:32px;line-height:40px;letter-spacing:-.64px}
  .gd-text{padding:24px 0 64px}
  .gd-obsah{font-size:16px;line-height:26px}
  .gd-nadpis{font-size:24px;line-height:32px}
}
/* ==========================================================================
   DVOJICE RÁMEČKŮ — dokdy se ukazuje

   Od 1500 níž se neukazuje vůbec: v užším okně už zasahuje do textu
   (Martin 18. 8.). Platí na homepage i na podstránkách, proto jedno pravidlo
   na konci souboru místo pěti sekčních. Nad touhle hranicí drží dvojice
   levou hranou hamburger (24 od kraje stránky), jak to má grafika.
   ========================================================================== */
@media (max-width:1500px){
  .znacky,.int-znacky{display:none}
}

/* ==========================================================================
   REFERENCE — výpis (Figma 141:473, 1920×4255)

   Záhlaví 106–470 · výběr projektů 470–950 · nadpis a filtr 950–1222 ·
   mřížka od 1222 · kontakt 2956.
   ========================================================================== */

.ref-hlava{height:470px}
.ref-hlava .h1--pod{width:544px}
.ref-hlava .pod-perex--vpravo{left:780px}

/* ——— výběr projektů — tři karty s fotkou ————————————————————————
   Karta 464×400, mezera 25 (v návrhu 240 / 729 / 1216). Okno ořezává pás,
   takže se dá posouvat, i když je karet víc než tři. */
.ref-vyber{padding-bottom:80px}
/* Pás se dá kromě šipek posouvat i tažením (myš, prst, trackpad).
   `touch-action:pan-y` nechá svislé rolování prstu na prohlížeči a vodorovný
   tah si vezme skript; `je-tazeno` na dobu tahu vypne animaci, aby pás šel
   za kurzorem, a přepne kurzor na „chytnutou ruku“. */
.ref-vyber-okno{overflow:hidden}
.ref-vyber-okno[data-karusel]{touch-action:pan-y;-webkit-user-select:none;user-select:none}
/* Karty jsou odkazy s fotkou — bez tohohle by prohlížeč místo posunu spustil
   vlastní přetahování (stejně jako u galerie `.pod-foto`). */
.ref-vyber-okno[data-karusel] a,
.ref-vyber-okno[data-karusel] img{-webkit-user-drag:none;user-drag:none}
/* Ruka svítí, jen když je opravdu co posouvat — třídu dává skript podle
   toho, jestli se karty do okna vejdou. */
.ref-vyber-okno.je-tahatelne{cursor:grab}
.ref-vyber-okno.je-tazeno{cursor:grabbing}
.ref-vyber-stopa{display:flex;gap:25px;transition:transform .4s ease}
.ref-vyber-okno.je-tazeno .ref-vyber-stopa{transition:none}
.ref-vyber-okno.je-tazeno .ref-karta-foto{transition:none}
.ref-karta{position:relative;flex:0 0 464px;height:400px;overflow:hidden;
  background:var(--dark);display:block}
/* Výřez je z návrhu: fotka je v rámu o kus větší a posunutá nahoru
   (572×429 na −34 / −17 v rámu 464×400), proto procenta místo inset:0. */
.ref-karta-foto{position:absolute;left:-7.33%;top:-4.25%;width:123.28%;height:107.25%;
  max-width:none;object-fit:cover;transition:transform .5s ease}
.ref-karta:hover .ref-karta-foto{transform:scale(1.04)}

/* Pruh s názvem je matné sklo přes fotku — stejný princip jako panel na
   stránce O nás (rozostření pozadí + bílá vrstva 18 %). */
.ref-karta-pruh{position:absolute;left:0;right:0;bottom:0;height:56px;
  display:flex;align-items:center;gap:16px;padding:0 16px 0 24px;
  background:rgba(255,255,255,.18);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px)}
.ref-karta-nazev{flex:1;font-size:24px;line-height:normal;font-weight:500;
  letter-spacing:-.48px;color:var(--white)}
.ref-karta-sipka{width:24px;height:24px;color:var(--white);flex:0 0 24px}
.ref-karta-sipka svg{width:100%;height:100%;display:block}

/* Šipky stojí **mimo karty**, u okrajů stránky — v návrhu 32 px za hranou
   kontejneru (pravá na 1712 z 1920, levá zrcadlově). Odsazení je proto
   −72 = šířka šipky 40 + mezera 32; předtím tu bylo −32, takže šipka
   o 8 px zajížděla na fotku (Martin 19. 8.). */
.ref-sipka{position:absolute;top:180px;width:40px;height:40px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--dark);color:var(--dark);cursor:pointer}
.ref-sipka svg{width:24px;height:24px;display:block}
.ref-sipka--zpet{left:-72px}
.ref-sipka--zpet svg{transform:rotate(180deg)}
.ref-sipka--vpred{right:-72px}
.ref-sipka{transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.ref-sipka:hover{background:var(--orange);border-color:var(--orange);color:var(--white)}
.ref-sipka[disabled]{opacity:.35;cursor:default}
.ref-sipka[disabled]:hover{background:var(--white);border-color:var(--dark);color:var(--dark)}

/* ——— ostatní reference ————————————————————————————————————————— */
.ref-ostatni{padding-bottom:120px}
.ref-nadpis{line-height:56px;margin-bottom:40px}

/* Filtr roku — panel v šedé, popisek vlevo, roky ve dvou řádcích (v návrhu
   panel 1451×136, mřížka 994 široká od 366). */
.ref-filtr{position:relative;min-height:136px;background:var(--gray-bg);
  padding:40px;margin-bottom:40px}
.ref-filtr-nazev{font-size:18px;line-height:normal;font-weight:700;color:var(--dark)}
.ref-filtr-roky{position:absolute;left:366px;top:40px;width:994px;
  display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:16px 24px}
.ref-rok{display:flex;align-items:center;gap:12px;cursor:pointer;
  font-size:16px;line-height:normal;font-weight:500;color:var(--dark)}
.ref-rok-vstup{position:absolute;opacity:0;width:0;height:0}
.ref-rok-box{flex:0 0 20px;width:20px;height:20px;border-radius:4px;
  background:var(--white);border:1px solid var(--outline);
  display:flex;align-items:center;justify-content:center;color:var(--white)}
.ref-rok-box svg{width:16px;height:16px;display:block;opacity:0}
.ref-rok-vstup:checked + .ref-rok-box{background:var(--orange);border-color:var(--orange)}
.ref-rok-vstup:checked + .ref-rok-box svg{opacity:1}
.ref-rok-vstup:focus-visible + .ref-rok-box{outline:2px solid var(--blue);outline-offset:2px}

/* Mřížka dlaždic — 4 sloupce 342 s mezerou 24 (v návrhu 1440 široká). */
.ref-mrizka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ref-dlazdice{position:relative;display:block;min-height:399px;padding:24px 24px 30px 22px;
  border-left:1px solid var(--outline);transition:border-color .2s ease}
.ref-dlazdice:hover{border-left-color:var(--orange)}
.ref-dlazdice[hidden]{display:none}

/* Štítek počtu — oranžové číslo a bílé pole s jednotkou vedle sebe. */
.ref-stitek{display:inline-flex;align-items:stretch;margin-bottom:16px}
.ref-stitek-cislo,.ref-stitek-jednotka{display:flex;align-items:center;justify-content:center;
  padding:5px 8px;font-size:12px;line-height:15px;letter-spacing:-.24px}
.ref-stitek-cislo{background:var(--orange);color:var(--white);font-weight:700}
.ref-stitek-jednotka{background:var(--white);color:var(--dark);font-weight:500;
  border:1px solid var(--orange);border-left:0}

.ref-dlazdice-nazev{display:block;width:273px;max-width:100%;margin-bottom:16px;
  font-size:20px;line-height:25px;font-weight:700;color:var(--blue)}
.ref-parametry{display:flex;flex-direction:column;gap:10px;width:223px;max-width:100%}
.ref-parametr{display:flex;flex-direction:column;gap:4px}
.ref-parametr-popisek{font-size:14px;line-height:18px;color:var(--gray-font)}
.ref-parametr-hodnota{font-size:16px;line-height:20px;font-weight:500;color:var(--dark)}

.ref-prazdno{margin-top:24px;font-size:18px;line-height:28px;color:var(--gray-font)}

/* ==========================================================================
   REFERENCE — detail realizace (Figma 326:2188, 1920×2423)
   ========================================================================== */

.rd-hlava{height:846px;padding-top:106px;background:var(--white);overflow:hidden}
.rd-hlava .wrap{height:100%}
.rd-drobecky{position:absolute;left:0;top:40px;display:flex;align-items:center;gap:9px;
  font-size:14px;line-height:20px;color:var(--gray-font)}
.rd-drobecky a:hover{color:var(--orange)}
.rd-drobecek-sipka{width:20px;height:20px;display:block;color:var(--outline)}
.rd-drobecek-sipka svg{width:100%;height:100%;display:block}
.rd-drobecek-tady{color:var(--dark)}
.rd-nazev{position:absolute;left:0;top:116px;width:560px}
.rd-podnazev{position:absolute;left:0;top:282px;width:560px;
  font-size:24px;line-height:30px;font-weight:500;color:var(--blue)}
.rd-text{position:absolute;left:0;top:344px;width:550px;
  font-size:18px;line-height:30px;color:var(--gray-font)}

/* Záhlaví bez fotky i popisu (realizace dodané jen tabulkou): pevná výška
   z návrhu drží místo pro fotku vpravo, tady by z ní byla díra. Prvky jdou
   do toku, sekce se stáhne k parametrům pod sebou. */
.rd-hlava--holy{height:auto;padding:132px 0 64px}
.rd-hlava--holy .wrap{height:auto}
.rd-hlava--holy .rd-drobecky,
.rd-hlava--holy .rd-nazev,
.rd-hlava--holy .rd-podnazev{position:static;width:auto;max-width:900px}
.rd-hlava--holy .rd-drobecky{margin-bottom:40px}
.rd-hlava--holy .rd-podnazev{margin-top:16px}

/* Galerie sahá k pravému okraji stránky, ne kontejneru (v návrhu 972–1920). */
.rd-galerie{position:absolute;right:0;top:146px;width:948px;height:700px;
  background:var(--outline);overflow:hidden}
.rd-galerie .pod-foto-snimek{position:absolute;inset:0}
.rd-galerie img{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;
  max-width:none;object-fit:cover}
.rd-sipky{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);
  display:flex;gap:8px;z-index:2}
/* ⚠️ Šipky na fotce mají bílý podklad přes DVĚ třídy, takže mají stejnou váhu
   jako `.pod-sipka:hover` a jsou v souboru níž — bílá tím přebíjela oranžovou
   a jako jediné na webu na najetí nereagovaly (Martin 24. 8.). Proto se hover
   musí přepsat taky dvojicí tříd. Stejná past jako u šipky v patičce. */
.rd-sipky .pod-sipka{background:var(--white)}
.rd-sipky .pod-sipka:hover{background:var(--orange);border-color:var(--orange);
  color:var(--white)}

/* ——— pás parametrů 1920×278 ———————————————————————————————————— */
.rd-pas{padding:48px 0;background:var(--gray-bg)}
.rd-pas-mrizka{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.rd-bod{min-height:182px;padding:32px 0 0 31px;border-left:1px solid var(--outline)}
.rd-bod--bms{grid-column:1/-1;min-height:0;padding-bottom:8px}
.rd-bod--bms .rd-bod-hodnota{font-size:20px;line-height:28px}
.rd-bod-popisek{font-size:18px;line-height:normal;color:var(--gray-font);margin-bottom:14px}
.rd-bod-hodnota{font-size:24px;line-height:30px;font-weight:500;color:var(--dark)}

/* ——— reference: užší okna ————————————————————————————————————
   Grafika je jen pro 1920, zbytek je odvozený stejně jako u ostatních
   podstránek: nad 1320 se rozvržení jen zmenší, pod ním jde obsah do toku.
   Kontejner se v `--wrap` zužuje sám, proto se řeší jen pevné hodnoty. */
@media (max-width:1720px) and (min-width:1321px){
  .ref-hlava{height:440px}
  .ref-hlava .h1--pod{width:470px;font-size:52px;line-height:66px;letter-spacing:-1.04px}
  .ref-hlava .pod-perex--vpravo{left:660px;top:132px;width:462px}
  .ref-karta{flex:0 0 390px;height:340px}
  .ref-sipka{top:150px}
  /* Popisek zůstává vlevo od roků i tady — jen se ubere sloupců, aby řádky
     nepřerostly tři (Martin 19. 8.). Absolutní pozice roků z návrhu by při
     jiném počtu sloupců nedržela výšku panelu, proto mřížka. */
  .ref-filtr{min-height:0;display:grid;grid-template-columns:240px minmax(0,1fr);
    align-items:start;column-gap:24px}
  .ref-filtr-roky{position:static;width:auto;margin-top:0;
    grid-template-columns:repeat(8,minmax(0,1fr))}

  .rd-hlava{height:760px}
  .rd-nazev{top:110px;width:470px;font-size:52px;line-height:66px;letter-spacing:-1.04px}
  .rd-podnazev{top:262px;width:470px;font-size:22px;line-height:28px}
  .rd-text{top:318px;width:470px}
  /* ⚠️ Fotka musí končit přesně na spodní hraně sekce, aby na ni šedý pás
     parametrů navazoval bez bílé mezery (760 − 146 = 614; bylo 600, tedy
     14 px světlého pruhu na celé pásmo 1720–1321 — Martin 19. 8.).
     Totéž pravidlo jako u panelu fotky na podstránkách. */
  .rd-galerie{top:146px;width:760px;height:614px}
  .rd-bod{padding-left:24px}
  .rd-bod-hodnota{font-size:22px;line-height:28px}
}

/* ——— šipky karuselu pod pás ————————————————————————————————————
   Šipky stojí 72 px od hrany pásu (Figma), takže potřebují po stranách
   kontejneru aspoň tolik místa. V tomhle pásmu je kontejner 1232 široký, a
   jakmile je okno užší než ~1400, vedle se přestanou vejít — stránka by dostala
   vodorovný posuvník. Od téhle šířky proto jdou pod pás a na střed (Martin
   19. 8.); hranice je o kus výš než u zbytku responzivní sady, která začíná
   na 1320. Sekce se přitom zespodu prodlouží, aby šipky nenarazily do nadpisu
   té další. */
@media (max-width:1400px){
  .ref-vyber{padding-bottom:112px}
  .ref-sipka{top:auto;bottom:-56px}
  .ref-sipka--zpet{left:calc(50% - 44px);right:auto}
  .ref-sipka--vpred{left:calc(50% + 4px);right:auto}
}

/* Od 1320 níž jde obsah do toku. */
@media (max-width:1320px){
  .ref-hlava{height:auto;padding:132px 0 48px}
  .ref-hlava .wrap{height:auto}
  .ref-hlava .label,.ref-hlava .h1--pod,.ref-hlava .pod-perex{
    position:static;left:auto;top:auto;width:auto}
  .ref-hlava .h1--pod{margin:12px 0 24px;font-size:44px;line-height:56px}
  .ref-hlava .pod-perex{max-width:620px}

  .ref-karta{flex:0 0 340px;height:300px}
  .ref-karta-nazev{font-size:20px}

  .ref-ostatni{padding-bottom:72px}
  .ref-nadpis{font-size:36px;line-height:46px;margin-bottom:24px}
  .ref-filtr{padding:24px;min-height:0;display:grid;
    grid-template-columns:200px minmax(0,1fr);align-items:start;column-gap:20px}
  .ref-filtr-roky{position:static;width:auto;margin-top:0;
    grid-template-columns:repeat(6,minmax(0,1fr))}
  /* Tři dlaždice v řadě, ne dvě — na dvě je tu ještě moc místa
     (Martin 19. 8.); na dvě se přechází až kolem 850. */
  .ref-mrizka{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ref-dlazdice{min-height:0}

  .rd-hlava{height:auto;padding:132px 0 0;background:var(--white)}
  .rd-hlava .wrap{height:auto}
  .rd-drobecky,.rd-nazev,.rd-podnazev,.rd-text{position:static;width:auto}
  .rd-nazev{margin:20px 0 12px;font-size:44px;line-height:56px}
  .rd-podnazev{margin-bottom:20px;font-size:22px;line-height:28px}
  .rd-text{max-width:620px;margin-bottom:40px}
  .rd-galerie{position:relative;top:auto;right:auto;width:100%;height:420px}
  .rd-pas{padding:32px 0}
  .rd-pas-mrizka{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .rd-bod{min-height:0;padding:16px 0 16px 20px}
  .rd-bod-popisek{font-size:16px;margin-bottom:8px}
  .rd-bod-hodnota{font-size:22px;line-height:28px}
}

/* Popisek filtru vedle roků už se nevejde — jde nad ně; roky si i tak drží
   tři řádky. Dlaždic je v řadě dvojice až tady, ne dřív (Martin 19. 8.). */
@media (max-width:1024px){
  .ref-filtr{grid-template-columns:minmax(0,1fr);row-gap:20px}
}

@media (max-width:850px){
  .ref-mrizka{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:639px){
  .ref-hlava{padding:112px 0 40px}
  .ref-hlava .h1--pod{font-size:36px;line-height:44px;letter-spacing:-.72px}
  .ref-karta{flex:0 0 280px;height:260px}
  .ref-karta-nazev{font-size:18px;line-height:24px;letter-spacing:-.36px}
  .ref-karta-pruh{padding:0 12px 0 16px;gap:12px}
  .ref-filtr-roky{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ref-nadpis{font-size:32px;line-height:40px}
  .ref-mrizka{grid-template-columns:minmax(0,1fr);gap:0}
  .ref-dlazdice{border-left:0;border-top:1px solid var(--outline);padding:24px 0}
  .ref-dlazdice:hover{border-left:0;border-top-color:var(--orange)}
  .ref-dlazdice-nazev{width:auto}
  .ref-parametry{width:auto}

  .rd-nazev{font-size:36px;line-height:44px;letter-spacing:-.72px}
  .rd-galerie{height:280px}
  .rd-pas-mrizka{grid-template-columns:minmax(0,1fr);gap:0}
  .rd-bod{border-left:0;border-top:1px solid var(--outline);padding:20px 0}
}

/* ==========================================================================
   NÍZKÉ OKNO — panel menu

   Panel se drží výšky okna, takže na notebooku (a všude, kde je okno nižší než
   zhruba 780) by se do něj obsah nevešel a naskočil by posuvník. Místo toho se
   stáhnou odsazení a mezery mezi bloky — položky se smrskávají samy (flex).
   Mobilní sada má vlastní, těsnější rozměry, proto se sem nepouští.
   ========================================================================== */
@media (max-height:780px) and (min-width:691px){
  .hl-panel-in{padding-top:48px;padding-bottom:24px}
  .hl-panel .label{margin-bottom:16px}
  .hl-panel-stred{padding-top:28px}
  .hl-panel-extra{margin-top:16px}
  .hl-panel-copy{padding-top:20px}
}
@media (max-height:640px) and (min-width:691px){
  .hl-panel-in{padding-top:36px;padding-bottom:20px}
  .hl-horaky a{font-size:22px}
  .hl-panel-stred{padding-top:20px}
  .hl-panel-copy{display:none}
}

/* ==========================================================================
   404 — STRÁNKA NENALEZENA

   Grafika ji nemá, skládá se z dílů webu: záhlaví je sazba GDPR (text
   odsazený o 244 jako závěrečný blok detailu hořáku), pás dole je sklo přes
   fotku jako na stránce O nás.
   ========================================================================== */
.ch-hlava .label,.ch-hlava .h1--pod,.ch-hlava .ch-text,.ch-tlacitka{margin-left:244px}
.ch-hlava .label,.ch-hlava .h1--pod{position:static;width:auto}
.ch-hlava .h1--pod{margin-top:12px}
.h1--chyba{font-size:48px;line-height:60px;letter-spacing:-.96px}
.ch-text{max-width:640px;margin-top:24px;font-size:18px;line-height:28px;color:var(--gray-font)}
.ch-tlacitka{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px;padding-bottom:96px}
/* sekundární tlačítko: `--outline` je bílé pro tmavá pozadí, tady je plocha bílá */
.ch-tlacitka .btn--linka{border:1px solid var(--outline);color:var(--dark);padding:13px 31px}
.ch-tlacitka .btn--linka:hover{border-color:var(--orange);color:var(--orange)}

.ch-pas{height:620px;background-color:var(--dark-2);overflow:hidden}
.ch-pas .wrap{height:100%}
/* pod sklem se fotka při scrollování mění, ztmavení drží bílý text čitelný */
.ch-pas .pod-pas-stin{background:linear-gradient(180deg,
  rgba(0,0,0,.2) 0%,rgba(0,0,0,.2) 26%,rgba(12,18,22,.5) 40%,rgba(12,18,22,.5) 100%)}
/* Sklo sahá od levého okraje stránky po pravou hranu kontejneru, stejně jako
   panel na stránce O nás. */
.ch-sklo{position:absolute;left:0;right:calc((100% - var(--wrap)) / 2);top:200px;bottom:0;
  display:block;background:rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(18.3px);backdrop-filter:blur(18.3px)}

.ch-cislo{position:absolute;left:244px;top:250px;margin:0;
  font-size:180px;line-height:180px;font-weight:500;letter-spacing:-3.6px;color:var(--white)}
.ch-rozcestnik{position:absolute;left:660px;top:268px;right:0}
.ch-kam{margin:0 0 24px;font-size:16px;line-height:20px;font-weight:600;
  letter-spacing:.32px;color:var(--white)}
.ch-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px}
.ch-menu a,.ch-menu span{font-size:18px;line-height:23px;color:rgba(255,255,255,.85)}
.ch-menu a:hover{color:var(--orange)}

@media (max-width:1720px){
  .ch-hlava .label,.ch-hlava .h1--pod,.ch-hlava .ch-text,.ch-tlacitka{margin-left:208px}
  .ch-pas{height:560px}
  .ch-sklo{top:176px}
  .ch-cislo{left:208px;top:222px;font-size:150px;line-height:150px}
  .ch-rozcestnik{left:580px;top:238px}
}
/* Od téhle hranice jedou sekce v toku s okrajem 40 — odsazení se ruší a pás
   se skládá pod sebe, aby se do užšího okna vešel rozcestník i číslo. */
@media (max-width:1320px){
  .ch-hlava .label,.ch-hlava .h1--pod,.ch-hlava .ch-text,.ch-tlacitka{margin-left:0}
  .h1--chyba{font-size:40px;line-height:50px}
  .ch-pas{height:auto;padding:88px 0 72px}
  .ch-pas .wrap{height:auto}
  .ch-pas .pod-pas-stin{background:rgba(12,18,22,.45)}
  .ch-sklo{left:0;right:0;top:auto;bottom:auto;height:100%;top:0}
  .ch-cislo{position:static;font-size:120px;line-height:120px;letter-spacing:-2.4px}
  .ch-rozcestnik{position:static;margin-top:40px}
  .ch-menu{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:899px){
  .ch-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:639px){
  .h1--chyba{font-size:32px;line-height:40px;letter-spacing:-.64px}
  .ch-text{margin-top:20px;font-size:16px;line-height:26px}
  .ch-tlacitka{margin-top:28px;padding-bottom:64px}
  /* CTA jde na mobilu přes celou šířku, jako všude jinde na webu */
  .ch-tlacitka .btn{width:100%}
  .ch-pas{padding:64px 0 56px}
  .ch-cislo{font-size:88px;line-height:88px;letter-spacing:-1.76px}
  .ch-rozcestnik{margin-top:32px}
  .ch-menu{grid-template-columns:minmax(0,1fr);gap:14px}
}

/* ==========================================================================
   EFEKTY

   Všechno, co se hýbe, sedí tady pohromadě. Dvě pravidla platí bez výjimky:

   1. `prefers-reduced-motion` vypíná pohyb — kdo si ho nepřeje, dostane
      stránku v koncovém stavu, ne prázdnou.
   2. Co JS schová, musí JS taky odkrýt: skrývací pravidla visí na `.js`
      (třídu dává `funkce/skripty.js` hned při načtení). Bez skriptu je
      stránka celá vidět.
   ========================================================================== */

/* ——— postupné najíždění obsahu ————————————————————————————————
   Směr volí hodnota atributu, kaskádu dělá `data-reveal-cekat` v šabloně.
   Křivka je „ostrý rozjezd, dlouhé dosednutí“ — pohyb je znát na začátku
   a konec je klidný.

   ⚠️ Posun se píše vlastností `translate`, ne `transform`. Půlka prvků na webu
   už transform má (typicky `translateX(-50%)` u vycentrovaných), a psát ho
   podruhé znamená ten první přepsat — citát ředitele se takhle odkotvil
   z osy a odsunul stránku do vodorovného posuvníku. `translate` a `scale`
   jsou samostatné vlastnosti a s existujícím `transform` se skládají. */
.js [data-reveal]{opacity:0;translate:0 38px;
  transition:opacity .8s cubic-bezier(.16,1,.3,1),translate .8s cubic-bezier(.16,1,.3,1);
  will-change:opacity,translate}
.js [data-reveal="vlevo"]{translate:-40px 0}
.js [data-reveal="vpravo"]{translate:40px 0}
.js [data-reveal="bez-posunu"]{translate:none}
.js [data-reveal].je-videt{opacity:1;translate:none}

/* ⚠️ Najetí do strany smí dostat jen prvek, který má vedle sebe místo.
   Rám s renderem na stránce Technologie je nad 1320 užší než kontejner, ale
   pod ním jde přes celou šířku — posun o 40 px doprava ho vystrčil ven z okna
   a stránka měla **vodorovný posuvník**, dokud se prvek neodkryl. Pod 1320 se
   proto odkrývá zdola jako zbytek webu.

   `:not(.je-videt)` je tu podstatné: bez něj tohle pravidlo přebije
   `.je-videt{translate:none}` výš a prvek by po odkrytí zůstal posunutý. */
@media (max-width:1320px){
  .js .te-foto[data-reveal="vpravo"]:not(.je-videt){translate:0 38px}
}

/* Linka, která se při najetí do okna natáhne zleva doprava.

   ⚠️ Zmenšuje se **pseudoprvek**, ne linka sama. `scale` se totiž promítá do
   toho, co vidí IntersectionObserver — linka zmenšená na nulovou šířku pro něj
   přestane existovat, nikdy nenahlásí vstup do okna a zůstane navždy neviditelná
   (na 1920 to náhodou vycházelo, pod ní ne). Takhle má prvek pořád svou velikost
   a mění se jen barevná výplň v něm. */
.js [data-reveal="linka"]{opacity:1;translate:none;position:relative;
  background:transparent}
.js [data-reveal="linka"]::after{content:"";position:absolute;inset:0;
  background:var(--grey-line);transform-origin:left center;scale:0 1;
  transition:scale .9s cubic-bezier(.16,1,.3,1)}
.js [data-reveal="linka"].je-videt::after{scale:none}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal="linka"]{opacity:1;translate:none;transition:none}
  .js [data-reveal="linka"]::after{scale:none;transition:none}
}

/* ——— tlačítka ————————————————————————————————————————————————
   Společný základ: jemné nadzvednutí a barevná změna. Přejíždějící lesk
   a plamen s vlnitou hranou tu byly do 24. 8. — Martin je nechal odstranit
   („je to takový kýčovitý“), zůstává jen překlopení popisku níž. */
/* ⚠️ `position` je v `:where()`, tedy s nulovou váhou: půlka tlačítek na webu
   je do rozvržení posazená absolutně (`.int-btn`, `.svet-cta`, tlačítko v panelu
   produktů…) a obyčejné `.btn{position:relative}` by jim to přepsalo — spadla by
   do toku a odsunula stránku do vodorovného posuvníku. Takhle platí jen tam,
   kde tlačítko vlastní pozici nemá. */
:where(.btn){position:relative}
.btn{overflow:hidden;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,
             translate .25s ease,box-shadow .25s ease}
.btn > *{position:relative;z-index:1}
@media (hover:hover){
  .btn:hover{translate:0 -2px}
  .btn:active{translate:none}
  .btn.btn--fill:hover{box-shadow:0 12px 26px -12px rgba(240,90,20,.75)}
}

/* Tlačítka, která oranžová nejsou (hlavička a druhé tlačítko v heru), se na
   najetí oranžovými stanou — Martin 19. 8. */
@media (hover:hover){
  .hlavicka .hl-cta:hover,
  .btn.btn--glass:hover,
  .btn.btn--outline:hover{background:var(--orange);border-color:var(--orange);
    color:var(--white)}
  /* Přepínač jazyka se probarvuje celý, jako ostatní tlačítka na webu
     (Martin 24. 8.) — do té doby měnil jen rámeček a text. */
  .hl-lang:hover,.hl-lang--panel:hover{background:var(--orange);
    border-color:var(--orange);color:var(--white)}
  /* v rozbaleném seznamu se podbarvuje řádek, ne celý rámeček */
  .hl-lang-menu a:hover{background:var(--orange);color:var(--white)}
}
/* `overflow` drží druhou kopii popisku pod hranou tlačítka — bez něj
   by visela v hlavičce pod ním. `.btn` ho má ve svém základu. */
.hlavicka .hl-cta{overflow:hidden;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.hl-lang{transition:background-color .2s ease,border-color .2s ease,color .2s ease}

/* ——— menu v panelu ————————————————————————————————————————————
   Stejné chování jako výpis typů na homepage (text i šipka o 8 doprava,
   oranžová barva), navíc se **linka pod řádkem natáhne zleva** — to na
   homepage není (Martin 19. 8.). Linka je pseudoprvek nad původním rámečkem,
   takže se dá animovat nezávisle na něm. */
.hl-horaky a{position:relative;transition:color .18s ease,padding-left .18s ease}
.hl-horaky a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--orange);transform-origin:left center;scale:0 1;
  transition:scale .28s cubic-bezier(.16,1,.3,1)}
.hl-horaky svg{transition:translate .18s ease}
@media (hover:hover){
  .hl-horaky a:hover{color:var(--orange);padding-left:8px}
  .hl-horaky a:hover span{color:var(--orange)}
  .hl-horaky a:hover svg{translate:-8px 0}
  .hl-horaky a:hover::after{scale:none}
}
.hl-horaky a:focus-visible::after{scale:none}

/* Položky ve dvou sloupcích pod výpisem — jen posun a barva, linku nemají.
   `align-self` je tu kvůli podtržení aktivní položky: sloupec je flex, takže
   by se odkaz roztáhl přes celou jeho šířku a podtržení by pokračovalo daleko
   za text. */
.hl-web a,.hl-gdpr a,.ch-menu a{display:inline-block;align-self:flex-start;
  transition:color .18s ease,translate .18s ease}
@media (hover:hover){
  .hl-web a:hover,.hl-gdpr a:hover,.ch-menu a:hover{translate:4px 0}
}

/* ——— fotky v panelech ————————————————————————————————————————
   Přiblížení při najetí. Kartu referencí to už umí, tady se přidávají
   zbylé panely s fotkou; rám má `overflow:hidden`, takže se obraz nikam
   nevysype. */
.pod-foto img,.te-foto img,.on-partner-foto img,.kv-foto img,.hp-sluzby .karta img{
  transition:scale .6s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){
  .pod-foto:hover img,.te-foto:hover img,.on-partner-foto:hover img,
  .kv-foto:hover img,.hp-sluzby .karta:hover img{scale:1.045}
}

/* ——— dlaždice a odkazy s linkou ————————————————————————————————
   Dlaždice referencí má oranžovou hranu už teď; přidává se posun obsahu,
   ať je najetí znát i na dotykovém okraji stránky. */
.ref-dlazdice{transition:border-color .2s ease,translate .25s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){
  .ref-dlazdice:hover{translate:4px 0}
}

/* ——— CTA: popisek se překlopí ————————————————————————————————
   Původní verze měla ještě plamen s vlnitou hranou, který vyjížděl zespodu
   („ať to vypadá, že se to zapálilo“ — grafik přes Martina 19. 8.).
   24. 8. šel pryč i s odleskem, zůstává jen překlopení popisku.
   Doba je 300 ms a náběh plynulý (`cubic-bezier(.4,0,.2,1)`): dřív to bylo
   420 ms s prudkým expo náběhem, kdy 90 % pohybu proběhlo v prvních 150 ms
   a text tím pádem švihnul. Kratší doba s klidnějším náběhem působí
   pomaleji než delší doba s prudkým — proto to číslo kleslo.
   Popisek zdvojuje skript (`funkce/skripty.js`), takže bez JS zůstane
   obyčejné tlačítko. */
.btn-popisek{display:grid;overflow:hidden}
.btn-popisek > span{grid-area:1/1;
  transition:translate .3s cubic-bezier(.4,0,.2,1),opacity .3s ease}
/* druhá kopie čeká pod hranou */
.btn-popisek > span:nth-child(2){translate:0 115%}
@media (hover:hover){
  .btn:hover .btn-popisek > span:nth-child(1),
  .hl-cta:hover .btn-popisek > span:nth-child(1){translate:0 -115%}
  .btn:hover .btn-popisek > span:nth-child(2),
  .hl-cta:hover .btn-popisek > span:nth-child(2){translate:none}
  .btn-popisek{position:relative;z-index:1}
}
@media (prefers-reduced-motion:reduce){
  .btn-popisek > span:nth-child(2){display:none}
}
/* ——— formulář: popisek pole a ukazatel vyplnění ————————————————
   Pole má nahoře 28 px volných (text sedí u dolní linky), takže se popisek
   má kam vysunout — vzhled v klidu je proto stejný jako s placeholderem.
   Oba prvky staví skript, bez něj zůstává obyčejný placeholder. */
.hp-form .fm-pole{position:relative}
.fm-popisek{position:absolute;left:0;top:28px;
  font-size:14px;line-height:24px;color:var(--white);pointer-events:auto;cursor:text;
  transform-origin:left top;
  transition:translate .25s cubic-bezier(.16,1,.3,1),scale .25s cubic-bezier(.16,1,.3,1),
             color .25s ease}
.hp-form .fm-pole:focus-within .fm-popisek,
.hp-form .fm-pole.je-vyplneno .fm-popisek{translate:0 -24px;scale:.86;
  color:rgba(255,255,255,.65)}
.hp-form .fm-pole:focus-within .fm-popisek{color:var(--orange)}
/* Pole samo nedostává žádný rámeček ani obrys — že je aktivní, se pozná podle
   linky pod ním a barvy popisku (stejně jako na pozemkyotovice.cz; Martin
   19. 8.: „input nesmí být ani označený"). */
.hp-form .fm-pole input:focus,.hp-form .fm-pole textarea:focus{outline:none}
.hp-form .fm-pole{transition:border-color .25s ease}
.hp-form .fm-pole:focus-within{border-bottom-color:var(--orange)}

/* Ukazatel sedí na dolní hraně panelu, ne v jeho toku — panel má pevnou výšku
   z grafiky a řádek navíc by z něj vytlačil tlačítko.
   ⚠️ Prázdná kolejnice (`rgba(255,255,255,.18)`) tu byla do 24. 8. a na fotce
   působila jako zbytečná šedá linka na hraně panelu — Martin ji nechal
   odstranit. Vidět je tedy jen oranžový pruh, jak formuláře přibývá. */
.fm-postup{position:absolute;left:0;right:0;bottom:0;height:3px;
  background:none;pointer-events:none}
.fm-postup > span{display:block;width:0;height:100%;background:var(--orange);
  transition:width .4s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion:reduce){
  .fm-popisek,.fm-postup > span{transition:none}
}

/* ⚠️ Na mobilu je panel bílý (blok „Kontakt je na mobilu úplně jiná sekce"),
   takže se obrací i barevnost popisku — jinak zůstane bílý na bílém a formulář
   vypadá jako prázdný rámeček se čtyřmi linkami (Jiřina 27. 8.). Přebarvení
   stojí až tady, za výchozí definicí popisku, aby ho pořadím přebilo.
   Stavy jsou tři: v klidu jako placeholder, vysunutý nad polem světlejší,
   aktivní oranžový (ten je stejný na tmavém i světlém). */
@media (max-width:639px){
  .hp-form .fm-popisek{color:var(--gray-font)}
  .hp-form .fm-pole:focus-within .fm-popisek,
  .hp-form .fm-pole.je-vyplneno .fm-popisek{color:#8b98a2}
  .hp-form .fm-pole:focus-within .fm-popisek{color:var(--orange)}
}

/* Předvyplnění prohlížečem si jinak podbarví pole svou světle modrou a vedle
   ručně vyplněných polí to vypadá jako chyba (Jiřina 27. 8.). Barvu pozadí
   u autofillu nejde přepsat přímo — přebije se vnitřním stínem, který ji
   překreslí, a text se dobarví přes `-webkit-text-fill-color`.
   Dlouhý `transition-delay` drží stín i poté, co prohlížeč pozadí dosadí. */
.hp-form .fm-pole input:-webkit-autofill,
.hp-form .fm-pole input:-webkit-autofill:hover,
.hp-form .fm-pole input:-webkit-autofill:focus,
.hp-form .fm-pole textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--white);
  -webkit-box-shadow:inset 0 0 0 1000px transparent;
  box-shadow:inset 0 0 0 1000px transparent;
  transition:background-color 9999s ease-in-out 0s;
  caret-color:var(--white)}
@media (max-width:639px){
  .hp-form .fm-pole input:-webkit-autofill,
  .hp-form .fm-pole input:-webkit-autofill:hover,
  .hp-form .fm-pole input:-webkit-autofill:focus,
  .hp-form .fm-pole textarea:-webkit-autofill{
    -webkit-text-fill-color:var(--dark);caret-color:var(--dark)}
}

/* ——— O nás: svislý popisek se natáčí za myší ————————————————————
   Skript posílá do proměnných, jak daleko je kurzor od středu sekce (−1…1),
   zbytek je na CSS — je to tak plynulé a dá se to vypnout jedním pravidlem. */
.on-pas{--mys-x:0;--mys-y:0}
.on-svisle,.on-sipka{transition:translate .5s cubic-bezier(.16,1,.3,1)}
.on-pas.ma-mys .on-svisle{translate:calc(var(--mys-x) * 10px) calc(var(--mys-y) * 14px)}
.on-pas.ma-mys .on-sipka{translate:calc(var(--mys-x) * 16px) calc(var(--mys-y) * 22px)}
@media (prefers-reduced-motion:reduce){
  .on-pas.ma-mys .on-svisle,.on-pas.ma-mys .on-sipka{translate:none}
}

/* ——— kde zrovna jsem ————————————————————————————————————————
   Položka menu, která odpovídá otevřené sekci, je podtržená — v panelu
   i v patičce (Martin 19. 8.). Označuje se podle prvního segmentu adresy,
   takže svítí i na podstránce, která v menu vlastní položku nemá (detail
   reference na „Referencích“, typ hořáku na svém typu).

   Podtržení je `box-shadow`, ne `text-decoration`: drží se dál od písmen
   (accenty by se do podtržítka trefovaly) a jde animovat spolu s posunem. */
.hl-web a.je-tady,.hl-gdpr a.je-tady,
.pat-menu a.je-tady,.pat-horaky a.je-tady,.pat-gdpr a.je-tady{
  color:var(--orange);box-shadow:inset 0 -1px 0 0 currentColor;
  /* v užších oknech se odkazy v patičce skládají pod sebe a roztáhnou se přes
     celou šířku sloupce — podtržení by pak pokračovalo daleko za text */
  width:fit-content}

/* Ve výpisu typů hořáků je linka pod řádkem už komponentou, takže se u aktivní
   položky jen natáhne natrvalo — stejný stav, jaký jinak nastane při najetí. */
.hl-horaky a.je-tady{color:var(--orange)}
.hl-horaky a.je-tady span{color:var(--orange)}
.hl-horaky a.je-tady::after{scale:none}

/* ——— patička: najetí na menu ————————————————————————————————
   Odkazy v patičce do 24. 8. na najetí nijak nereagovaly (barvu měla jen
   aktivní položka). Teď se probarví oranžově jako všude jinde — Martin 24. 8.
   Kontakty ve sloupcích a copyright zůstávají beze změny. */
.pat-horaky a,.pat-menu a,.pat-gdpr a{transition:color .18s ease}
@media (hover:hover){
  .pat-horaky a:hover,.pat-menu a:hover,.pat-gdpr a:hover{color:var(--orange)}
}

/* ==========================================================================
   JAZYKOVÉ MUTACE — doladění pro angličtinu a němčinu

   Rozvržení je kreslené na české texty. Němčina je znatelně delší
   („Kombinierte Öl-Gas-Brenner“ proti „Kombinované olejoplynové“) a na pár
   místech, kde návrh počítá s jedním řádkem, by se zalomila nebo najela do
   sousedního bloku.

   ⚠️ **Všechno v téhle sekci je podmíněné `html[lang="…"]`.** Jazyk sází Mona
   do `<html>` (`system/head.php`) podle mutace, takže se čeština z principu
   nemá jak rozbít — pravidla na ni nedosáhnou. Nové doladění piš sem, ne do
   společných bloků výš.
   ========================================================================== */

/* ——— patička: menu typů hořáků ———————————————————————————————
   Druhá položka má z grafiky pevných 242 px (v češtině „Kombinované
   olejoplynové“). Německý název potřebuje 246 a zalomil by se na dva řádky,
   čímž by celý spodní blok povyrostl.
   ⚠️ Jen nad 1720: níž má položka `width:auto` a pevná šířka by v ní udělala
   prázdné místo, protože se řádek odtud dolů zalamuje záměrně. */
@media (min-width:1721px){
  html[lang="de"] .pat-horaky .pat-typ-2{width:262px}
}

/* V pásmu 1720–1321 stojí menu typů zleva a menu webu zprava proti sobě
   v kontejneru 1184. Německé názvy jsou dohromady o 42 px širší, než se tam
   vejde, a bloky se překryjí — užší mezery mezi položkami to srovnají
   (ušetří 80 px, aniž by se sahalo na velikost písma). */
@media (max-width:1720px) and (min-width:1321px){
  html[lang="de"] .pat-horaky,
  html[lang="de"] .pat-menu{gap:14px}
}

/* ——— O nás: dlaždice na fotce ————————————————————————————————
   Názvy dlaždic jsou v panelu absolutně pozicované od horní hrany (top:161),
   protože v češtině mají všechny dva řádky a popisky pod nimi tak lícují.
   Anglicky i německy má část názvů tři řádky („Wir bieten maßgeschneiderte
   Lösungen“) — třetí řádek dojede až na popisek a texty se překryjí.

   Řešeno **ukotvením názvu za spodní hranu** místo za horní: poslední řádek
   pak stojí pořád na stejném místě, popisky lícují dál a delší název roste
   nahoru do volného místa pod ikonou. Čeština si přitom drží pozici z návrhu
   (dva řádky vyjdou na stejné y jako dřív). */
html[lang="en"] .on-karta b,
html[lang="de"] .on-karta b{top:auto;bottom:105px}

@media (max-width:1720px) and (min-width:1321px){
  html[lang="en"] .on-karta b,
  html[lang="de"] .on-karta b{top:auto;bottom:100px}
}

/* ——— homepage: popisek dlaždice služeb ——————————————————————
   Popisek stojí v grafice na jednom řádku (`white-space:nowrap`) v pruhu
   z matného skla vysokém 56 px. Cizojazyčné názvy jsou delší a usekly by se.
   Texty jsou proto zkrácené (`_texty_data.php`), tohle je pojistka pro případ,
   že je klient v administraci prodlouží: pruh smí povyrůst a název se zalomí,
   stejně jako to dělá návrh sám na užších oknech (pod 1320). */
html[lang="en"] .hp-sluzby .karta .nazev,
html[lang="de"] .hp-sluzby .karta .nazev{white-space:normal;height:auto;min-height:56px;
  align-items:center;padding-top:8px;padding-bottom:8px;padding-right:16px}

/* ——— hero: nadpis se nevejde na dva řádky ————————————————————
   Prvky hera jsou nad 1320 pozicované napevno podle grafiky (nadpis na 538,
   perex na 734). České „Hořáky pro průmysl a energetiku“ se vejde na dva
   řádky; anglické i německé znění potřebuje tři a třetí řádek projede přes
   perex.

   Grafika pro delší nadpis není, takže se mu **dá prostor**: blok se překlopí
   do toku a ukotví za spodní hranu. Tlačítka tak zůstanou tam, kde je má
   návrh, mezery mezi prvky sedí na grafiku (10/24/40, pod 1720 pak 8/24/40)
   a nadpis roste nahoru do prázdné fotky. Kolik má řádků, je pak jedno. */
@media (min-width:1321px){
  html[lang="en"] .hp-hero .hero-in,
  html[lang="de"] .hp-hero .hero-in{display:flex;flex-direction:column;
    align-items:flex-start;justify-content:flex-end;padding-bottom:66px}
  html[lang="en"] .hp-hero .eyebrow, html[lang="de"] .hp-hero .eyebrow,
  html[lang="en"] .hp-hero .h1,      html[lang="de"] .hp-hero .h1,
  html[lang="en"] .hp-hero .perex,   html[lang="de"] .hp-hero .perex,
  html[lang="en"] .hp-hero .hero-btns, html[lang="de"] .hp-hero .hero-btns{position:static}
  html[lang="en"] .hp-hero .eyebrow,   html[lang="de"] .hp-hero .eyebrow{margin-left:2px}
  html[lang="en"] .hp-hero .h1,        html[lang="de"] .hp-hero .h1{margin-top:10px}
  html[lang="en"] .hp-hero .perex,     html[lang="de"] .hp-hero .perex{margin-top:24px}
  html[lang="en"] .hp-hero .hero-btns, html[lang="de"] .hp-hero .hero-btns{margin-top:40px}
}
@media (max-width:1720px) and (min-width:1321px){
  html[lang="en"] .hp-hero .hero-in,
  html[lang="de"] .hp-hero .hero-in{padding-bottom:60px}
  html[lang="en"] .hp-hero .eyebrow, html[lang="de"] .hp-hero .eyebrow{margin-left:0}
  html[lang="en"] .hp-hero .h1,      html[lang="de"] .hp-hero .h1{margin-top:8px}
}

/* Perex hera je v grafice na dva řádky v šířce 593 px. Anglicky i německy
   přeteče o jedno slovo na třetí řádek, což vypadá jako překlep — širší
   sloupec ho vrátí na dva. Místo v heru na to je, nadpis nad ním je 662. */
@media (min-width:1721px){
  html[lang="en"] .hp-hero .perex,
  html[lang="de"] .hp-hero .perex{width:700px}
}
@media (max-width:1720px) and (min-width:1321px){
  html[lang="en"] .hp-hero .perex,
  html[lang="de"] .hp-hero .perex{width:620px}
}

/* ——— nadpisy a odstavce: víc místa na řádek ————————————————
   Šířky sloupců jsou z grafiky odměřené na české texty. Anglicky a německy
   je totéž o slovo až dvě delší, nadpis se zalomí o řádek navíc a nad 1320,
   kde jsou bloky pozicované napevno, vjede do textu pod sebou.

   Prvním krokem je **širší sloupec**, ne posun bloků: v návrhu je vedle
   každého z nich volné místo (nadpis loga 496 px, ale pásy s logy začínají
   až na 746) a širší sazba udrží svislý rytmus sekce beze změny. Kde to
   nestačí, posouvá se blok pod ním — viz níž. */
@media (min-width:1721px){
  html[lang="en"] .int-txt,          html[lang="de"] .int-txt{width:680px}
  html[lang="en"] .hp-sluzby .h2,    html[lang="de"] .hp-sluzby .h2{width:700px}
  html[lang="en"] .hp-sluzby .text,  html[lang="de"] .hp-sluzby .text{width:680px}
  html[lang="en"] .hp-citat .cit,    html[lang="de"] .hp-citat .cit{width:1200px}
  html[lang="en"] .hp-svet .h2,      html[lang="de"] .hp-svet .h2{width:600px}
  html[lang="en"] .hp-svet .text,    html[lang="de"] .hp-svet .text{width:660px}
  html[lang="en"] .hp-loga .h2,      html[lang="de"] .hp-loga .h2{width:620px}
  html[lang="en"] .hp-produkty .h2,  html[lang="de"] .hp-produkty .h2{width:690px}
}
@media (max-width:1720px) and (min-width:1321px){
  html[lang="en"] .int-txt--1,       html[lang="de"] .int-txt--1{width:590px}
  html[lang="en"] .int-txt--2,       html[lang="de"] .int-txt--2{width:590px}
  html[lang="en"] .hp-sluzby .h2,    html[lang="de"] .hp-sluzby .h2{width:580px}
  html[lang="en"] .hp-sluzby .text,  html[lang="de"] .hp-sluzby .text{width:570px}
  html[lang="en"] .hp-citat .cit,    html[lang="de"] .hp-citat .cit{width:1000px}
  html[lang="en"] .hp-svet .h2,      html[lang="de"] .hp-svet .h2{width:570px}
  html[lang="en"] .hp-svet .text,    html[lang="de"] .hp-svet .text{width:570px}
  html[lang="en"] .hp-loga .h2,      html[lang="de"] .hp-loga .h2{width:570px}
  html[lang="en"] .hp-produkty .h2,  html[lang="de"] .hp-produkty .h2{width:570px}
}

/* ——— záhlaví podstránky: nadpis z administrace ————————————————
   Nadpis stránky Naše služby má v grafice 621 px a perex vedle něj začíná
   až na 782 — mezi nimi je 160 px volných. České „Od návrhu po servis
   technologických zařízení“ se vejde na tři řádky, německé na čtyři a čtvrtý
   vyjede pod fotku (záhlaví má pevnou výšku a `overflow:hidden`).
   Širší sloupec ho vrátí na tři.

   ⚠️ Nadpis jde z administrace, takže se dá prodloužit — pak by se pod fotku
   dostal znovu. Pevná výška záhlaví je z grafiky a měnit ji tady nechci. */
@media (min-width:1721px){
  html[lang="en"] .pod-hlava--siroka .h1--pod,
  html[lang="de"] .pod-hlava--siroka .h1--pod{width:750px}
}
@media (max-width:1720px) and (min-width:1321px){
  html[lang="en"] .pod-hlava--siroka .h1--pod,
  html[lang="de"] .pod-hlava--siroka .h1--pod{width:630px}
}

/* ——— úvodní sekce na mobilu ————————————————————————————————
   Pod 640 stojí v sekci jen dva odstavce, ale pozicované napevno (24 a 192)
   v sekci pevné výšky 421. Delší cizojazyčný text se do těch 168 px nevejde
   a přeteče do dalšího odstavce i ven ze sekce.

   Odstavce se proto vrátí do toku a sekce si výšku dopočítá — na mobilu ji
   nic jiného nedrží a rozestup 40 px odpovídá tomu, co má grafika mezi nimi
   na tomhle breakpointu (192 − 24 − výška odstavce). */
@media (max-width:639px){
  html[lang="en"] .hp-intro,
  html[lang="de"] .hp-intro{height:auto;padding:24px 0 62px}
  /* `margin:0` je tu podstatné: odstavec má v toku výchozí okraje prohlížeče,
     které se přes prázdný obal propíšou ven a sekci rozhodí. */
  html[lang="en"] .int-txt,
  html[lang="de"] .int-txt{position:static;left:auto;top:auto;
    margin:0 30px;width:auto}
  html[lang="en"] .int-txt--2,
  html[lang="de"] .int-txt--2{margin:40px 30px 0}
}

/* Nadpis hera má z grafiky 662 px a české znění se do nich vejde na dva
   řádky. Anglicky i německy je delší; širší sloupec ho udrží na dvou, jak
   to má návrh — místo vedle je (text začíná u levého okraje kontejneru
   1440 a vpravo do konce sekce nic nestojí). */
@media (min-width:1721px){
  html[lang="en"] .hp-hero .h1,
  html[lang="de"] .hp-hero .h1{width:880px}
}
@media (max-width:1720px) and (min-width:1321px){
  html[lang="en"] .hp-hero .h1,
  html[lang="de"] .hp-hero .h1{width:760px}
}

/* ==========================================================================
   SOUHRNNÁ STRÁNKA HOŘÁKŮ — všechny čtyři typy pohromadě (28. 8., Jiřina)

   Z homepage vedlo tlačítko „Hořáky“ na první typ; tahle stránka je ten
   chybějící rozcestník. Grafiku pro ni návrh nemá, rozvržení je proto
   **odvozené** z hodnot, které web už používá: kontejner a okraje jako
   všude, nadpis podstránky 60/75, perex 20/30, nadpis pásu 48/56 jako
   závěrečný blok detailu, text 18/26.

   Pás = fotka na jedné straně, text na druhé; sudé pásy jsou obrácené
   a mají šedý podklad, aby se dvojice od sebe odlišily i bez linky.
   ========================================================================== */

/* záhlaví je totéž co u ostatních podstránek, jen bez fotky vpravo —
   pod ním jde rovnou první pás, který svou fotku má */
.ho-hlava{height:auto;min-height:0;padding:106px 0 72px}
.ho-hlava .wrap{height:auto}
.ho-hlava .label{position:static;margin-top:80px}
.ho-hlava .h1--pod{position:static;width:900px;margin-top:8px}
.ho-hlava .pod-perex{position:static;width:760px;margin-top:24px}

.ho-pas{padding:72px 0}
/* ⚠️ Sudé pásy měly šedý podklad, aby se dvojice odlišily. Jenže fotky
   hořáků mají samy šedé pozadí `#f3f3f3` (viz detail typu), takže rám
   musel být na šedém pásu bílý — a kolem šedé fotky se vykreslil jako
   bílý obdélník. Podklad je proto všude bílý a rytmus drží jen střídání
   stran; rám zůstává šedý jako panel produktů na homepage. */
.ho-pas .wrap{height:auto;display:grid;grid-template-columns:1fr 1fr;
  gap:100px;align-items:center}
/* U obráceného pásu se prohodí jen pořadí sloupců, ne obsah — v HTML
   zůstává text první kvůli čtečkám i kvůli pořadí při skládání pod sebe. */
.ho-pas--obraceny .ho-text{order:2}
.ho-pas--obraceny .ho-foto{order:1}

.ho-cislo{margin:0 0 12px;font-size:16px;line-height:20px;font-weight:600;
  letter-spacing:2px;color:var(--blue)}
.ho-nazev{margin:0;font-size:48px;line-height:56px;letter-spacing:-.96px}
.ho-perex{margin-top:20px;font-size:18px;line-height:26px;color:var(--gray-font)}
.ho-perex p{margin:0}
.ho-perex p + p{margin-top:16px}
/* Zvýrazněné pasáže jsou v grafice jen tmavší, ne tučné — stejně jako
   v perexu podstránek; tučné je nese kvůli editoru v administraci. */
.ho-perex b,.ho-perex strong{font-weight:inherit;color:var(--dark)}
.ho-btn{margin-top:32px}

/* Rám s fotkou je týž jako panel produktů na homepage: šedý podklad
   a fotka uvnitř `contain` — rendery od klienta mají různé poměry stran
   a v pevném rámu by se ořízly. Na šedém pásu je rám bílý, aby nesplynul. */
.ho-foto{position:relative;height:480px;background:var(--gray-bg);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.ho-foto img{display:block;width:100%;height:100%;object-fit:contain}

@media (max-width:1720px){
  .ho-hlava{padding:106px 0 56px}
  .ho-hlava .label{margin-top:66px}
  .ho-hlava .h1--pod{width:760px}
  .ho-hlava .pod-perex{width:640px}
  .ho-pas{padding:56px 0}
  .ho-pas .wrap{gap:72px}
  .ho-nazev{font-size:40px;line-height:48px;letter-spacing:-.8px}
  .ho-foto{height:400px}
}

/* Pod 1180 se pás skládá pod sebe — vedle sebe by na text zbyl sloupec,
   do kterého se nevejde ani nadpis. Fotka jde nahoru u všech pásů stejně,
   střídání stran ztrácí v jednom sloupci smysl. */
@media (max-width:1180px){
  .ho-hlava{padding:132px 0 48px}
  .ho-hlava .h1--pod,.ho-hlava .pod-perex{width:auto;max-width:760px}
  .ho-pas .wrap{grid-template-columns:minmax(0,1fr);gap:32px}
  .ho-pas--obraceny .ho-text,.ho-pas .ho-text{order:2}
  .ho-pas--obraceny .ho-foto,.ho-pas .ho-foto{order:1}
  .ho-foto{height:340px}
}

@media (max-width:639px){
  .ho-hlava{padding:112px 0 40px}
  .ho-hlava .label{margin-top:0}
  .ho-hlava .h1--pod{font-size:36px;line-height:44px;letter-spacing:-.72px}
  .ho-hlava .pod-perex{margin-top:16px;font-size:16px;line-height:24px}
  .ho-pas{padding:40px 0}
  .ho-nazev{font-size:28px;line-height:36px;letter-spacing:-.56px}
  .ho-perex{margin-top:16px;font-size:16px;line-height:24px}
  .ho-foto{height:220px}
  /* tlačítko přes celou šířku jako všude na mobilu (Martin 19. 8.) */
  .ho-btn{width:100%;margin-top:24px}
}