# Design system JVS Klima

Tento soubor popisuje design system JVS Klima. Při návrhu nebo kódu se drž jeho pravidel, používej jen uvedené barvy, písma a komponenty a jejich HTML přebírej beze změny tříd. Nevymýšlej nové barvy ani styly.

Montáž klimatizací na klíč do bytů, domů i firem. Od návrhu přes instalaci až po servis.

Písmo: Urbanist. Živý web: https://jvsklima.cz/. Katalog: https://www.romankacerek.cz/dev/designsystem/jvsklima/. Sestaveno 11. 11. 2026.

## Soubory

Načti je v tomto pořadí:

- https://www.romankacerek.cz/dev/designsystem/jvsklima/site/assets/css/web.css
- https://www.romankacerek.cz/dev/designsystem/jvsklima/site/assets/js/web.js

Relativní cesty v HTML níže vedou do https://www.romankacerek.cz/dev/designsystem/jvsklima/site/.

## Pravidla

### Barvy

- Text i tmavé plochy jsou `#0a1e3b`, podklad stránky bílá, střídavé pruhy sekcí `#f0f5fc` (třída `bg-f0f5fc`).
- Červená `#c3002f` je jediná akční barva: tlačítka, menu, fajfky, plus u otázek, odznaky. Nepřidávej další akční barvu.
- Oranžová `#ff8330` a zelená `#31b308` jen pro trojici Problém, Řešení, Výsledek. Červená je u problému.
- Popisný text a perex v šedé `#657585` (`co-657585`), nadpisy v tmavě modré.

### Písmo

- Jediné písmo je Urbanist v jednom řezu, s alternativou `ss01`. Tučné `strong` a ostatní váhy jsou jen syntetické.
- Velikosti: H1 46 px, H2 38 px, H3 a H4 26 px, text 20 px, řádkování 30 px. Na tabletu a telefonu se zmenšují (H1 37 px, 30 px).
- Menu, tlačítka a odznaky jsou velkými písmeny. Štítek `cap` má rozestup 1,5 px.

### Rozložení

- Obsah v `.w` do 1800 px, boční okraj 60 px. Sekce `r` mají svislé odsazení třídami `pt60`, `pt100`, `pb80`.
- Mřížka `g` a `c` s procentními šířkami `w50`, `w33_3333`, `w16_6667`. Pod 1000 px sloupce do jednoho.
- Sekce se střídají: bílá, pruh `bg-f0f5fc`, bílá. Nadpis sekce bývá na střed (`ta-c`) s odznakem `badge--obrys` nad ním.

### Tvary

- Tlačítka, odznaky, štítky a hlavička jsou pilulky (50 až 100 px). Pole formuláře mají 10 px.
- Karty jsou ostré, bez rádiusu, s okrajem 1 px `#d9def4` nebo barevným horním okrajem 4 px.
- Žádné stíny kromě rozbalené nabídky v hlavičce.

### Fotky

- Úvod s fotkou přes celou šířku a tmavým překryvem 50 %, text bílý. Fotky realizací bez rámu a bez rádiusu.
- Logo je `logo.svg`, loga značek `logo-*.svg` v šesti sloupcích.

### Jazyk

- Texty jsou česky, s nezlomitelnými mezerami za jednopísmennými předložkami. Cena vždy s mezerou před Kč (`25 000 Kč`).
- Tón je věcný a přímý, nabízí se nezávazná poptávka.

## Barvy

| Název | Hodnota | V tmavém tématu | Použití |
| --- | --- | --- | --- |
| --text, body | #0a1e3b |  | Text, nadpisy, tmavé plochy. |
| červená | #c3002f |  | Tlačítka, menu, odznaky, linky a ikony. |
| světlá modrá | #f0f5fc |  | Podklad pruhů sekcí bg-f0f5fc, citace. |
| bílá | #ffffff |  | Podklad stránky, hlavičky a karet. |
| oranžová | #ff8330 |  | Štítek Řešení a horní okraj karty. |
| zelená | #31b308 |  | Štítek Výsledek a zelené tlačítko. |
| šedá | #657585 |  | Popisný text co-657585, perex a slogan. |
| okraj karet | #d9def4 |  | Rámečky štítků a boxů, linky FAQ. |
| okraj recenzí | #dee4ed |  | Okraj karty recenze. |
| okraj polí | #86868b |  | Okraj vstupů formuláře. |
| chybové pozadí | #fbe9ed |  | Pozadí chybové hlášky formuláře. |
| hvězdy Google | #fbbc04 |  | Hvězdy v souhrnu recenzí. |
| hvězdy hodnocení | #ffc107 |  | Hvězdy v pilulce hodnocení v úvodu. |
| tmavý překryv | rgba(0,0,0,0.5) |  | Překryv fotek v úvodu ovl-000000-50. |
| hvězdička seznamu | #c31f33 |  | Hvězdička star-bullet. |

## Typografie

| Styl | Hodnoty | Použití |
| --- | --- | --- |
| H1 | viz CSS | Nadpis úvodní stránky, bílý na fotce |
| H2 | viz CSS | Nadpis sekce |
| H3 | viz CSS | Nadpis karty |
| H4 | viz CSS | Nadpis kroku |
| Text | viz CSS | Tělo textu, šedý |
| Štítek | viz CSS | Malé velké písmeno nad nadpisem |
| Odznak | viz CSS | Pilulka nad nadpisem sekce |
| Citace | viz CSS | Citace zákazníka |
| Tlačítko | viz CSS | Hlavní akce |

## Mezery a šířky

| Název | Hodnota | Použití |
| --- | --- | --- |
| .w okraj | 60px | Boční okraj obsahu, max. šířka 1800 px. |
| sekce | 100px / 60px | Svislé odsazení sekcí pt100, pb80. |
| hlavička | 112px | Výška plovoucí hlavičky, 80 px na tabletu, 64 px na telefonu. |

## Rádiusy

| Název | Hodnota | Použití |
| --- | --- | --- |
| pilulka | 50px | Hlavička, tlačítko menu, odznaky, štítky. |
| tlačítko | 100px | Třída btn. |
| pole | 10px | Vstupy a chybová hláška formuláře. |
| karty | 0 | Karty, citace a fotky bez rádiusu. |

## Komponenty: Navigace

### Hlavička

Plovoucí bílá pilulka s logem, menu velkými písmeny a červeným tlačítkem. Pod 1360 px se menu schová do tlačítka. Třídy: `hdr`, `hdr__logo`, `nav`, `nav__sub`, `nav__btn`, `hdr__menu`.

```html
<header class="hdr">
<a class="hdr__logo" href="#"><img alt="JVS Klima" height="52" src="assets/foto/logo.svg" width="174"/></a>
<nav aria-label="Hlavní menu" class="nav">
<ul>
<li class="nav__sub"><a href="#">Služby</a>
<ul>
<li><a href="#">Klimatizace do domu</a></li>
<li><a href="#">Klimatizace pro firmy</a></li>
<li><a href="#">Jak probíhá instalace</a></li>
<li><a href="#">Tepelná čerpadla</a></li>
</ul>
</li>
<li><a href="#">Typy klimatizací</a></li>
<li><a href="#">Realizace</a></li>
<li><a href="#">O nás</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">+420 722 220 508</a></li>
<li><a class="nav__btn" href="#">Nezávazná poptávka</a></li>
</ul>
</nav>
<button aria-controls="ocm" aria-expanded="false" class="hdr__menu" type="button">Menu</button>
</header>
```

### Boční menu

Červený panel vyjíždějící zprava s velkým bílým menu. Otevírá se tlačítkem Menu. Třídy: `ocm`, `ocm__panel`, `ocm__menu`, `ocm__sub`, `ocm__close`.

```html
<div class="ocm" id="ocm">
<div class="ocm__bg"></div>
<div aria-label="Menu" aria-modal="true" class="ocm__panel" role="dialog">
<button aria-label="Zavřít menu" class="ocm__close" type="button"><span aria-hidden="true" class="ocm__lines"><i></i><i></i><i></i></span></button>
<ul class="ocm__menu">
<li class="ocm__sub"><a aria-expanded="false" aria-haspopup="true" href="#">Služby</a>
<ul>
<li><a href="#">Klimatizace do domu</a></li>
<li><a href="#">Klimatizace pro firmy</a></li>
<li><a href="#">Jak probíhá instalace</a></li>
<li><a href="#">Tepelná čerpadla</a></li>
</ul>
</li>
<li><a href="#">Typy klimatizací</a></li>
<li><a href="#">Realizace</a></li>
<li><a href="#">O nás</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Nezávazná poptávka</a></li>
</ul>
</div>
</div>
```

### Patička

Bílá patička se čtyřmi sloupci (logo se sloganem, kontakt, dvě menu) a řádkem s autorstvím. Třídy: `ftr`, `ftr__in`, `ftr__col`, `ftr__menu`, `ftr__copy`.

```html
<footer class="ftr">
<div class="ftr__in">
<div class="ftr__col">
<a href="#"><img alt="JVS Klima" class="ftr__logo" height="48" src="assets/foto/logo.svg" width="160"/></a>
<p class="ftr__slogan">Instalujeme klimatizace pro domácnosti i firmy. Důraz klademe na kvalitu montáže, jasnou komunikaci a dlouhodobý servis.</p>
</div>
<div class="ftr__col ftr__kontakt">
<p>JVS Klima s.r.o.<br/><a href="#">klima@jvsklima.cz</a><br/><a href="#">+420 722 220 508</a><br/>Po - Pá 7:00 - 17:00</p>
</div>
<ul class="ftr__col ftr__menu">
<li><a href="#">Služby</a></li>
<li><a href="#">Klimatizace pro firmy</a></li>
<li><a href="#">Klimatizace do domu</a></li>
<li><a href="#">Typy klimatizací</a></li>
<li><a href="#">Jak probíhá instalace</a></li>
<li><a href="#">Tepelná čerpadla</a></li>
</ul>
<ul class="ftr__col ftr__menu">
<li><a href="#">Realizace</a></li>
<li><a href="#">O nás</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Nezávazná poptávka</a></li>
</ul>
</div>
<p class="ftr__copy"><span data-rok="">2026</span> © JVS Klima s.r.o., <span class="ftr__credit">design <a href="#" rel="noopener" target="_blank">KACER STUDIO</a></span><br/><a href="#">Osobní údaje</a>, <a href="#">Cookies</a></p>
</footer>
```

## Komponenty: Úvod

### Úvod s fotkou a hodnocením

Úvod úvodní stránky: velká fotka na pozadí, bílý nadpis, perex, tlačítko a bílá pilulka s hvězdičkami Google. Třídy: `r--full`, `mh770`, `bgi-header-image`, `hodnoceni`, `hvezdy`.

```html
<main class="obsah" id="obsah"><section class="r t-h p-h r--full mh770 r--mh bgi-header-image">
<div class="w"><div class="g gpt137 t-gpt89">
<div class="c w50 cmb100 c--bot">
<div class="c__in">
<div class="ir r--mb">
<div class="g">
<div class="c">
<div class="tx co-ffffff tx--i mw600"><h1>Profesionální instalace klimatizace na klíč</h1></div>
</div>
</div>
</div>
<div class="ir r--mb pt20 pb20">
<div class="g">
<div class="c">
<div class="tx co-ffffff tx--i mw710"><p class="p1">Navrhneme a namontujeme klimatizaci přesně pro váš prostor.<br/>Postaráme se o vše od prvního návrhu až po finální instalaci, abyste měli doma i v práci vždy příjemné klima bez starostí.</p></div>
</div>
</div>
</div>
<div class="ir">
<div class="g">
<div class="c">
<div class="tl"><a class="btn" href="#">Typy klimatizací</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="c w50 c--bot">
<div class="c__in">
<div class="ir">
<div class="g g--0">
<div class="c hodnoceni w58_3333 m-w75 c--fill">
<div class="c__in bg-ffffff rad100 cpt10 cpr20 cpb10 cpl20 c--row gap10 jc-center ai-center nowrap">
<div class="tx male co-000000"><p><strong>5,0</strong></p></div>
<div aria-label="5 z 5 hvězdiček" class="hvezdy" role="img"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg></div>
<div class="tx male co-000000"><p><span class="co-0a1e3b"><a class="co-0a1e3b" href="#" rel="noopener" target="_blank">65+ recenzí na Google</a></span></p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Úvod podstránky s fotkou

Podstránka s fotkou přes celou šířku a 50% tmavým překryvem, štítek `cap`, bílý nadpis, perex a bílé tlačítko. Třídy: `r--fullc`, `ovl-000000-50`, `bgi-o-nas-01`, `cap`, `btn btn--bila`.

```html
<main class="obsah" id="obsah"><section class="r r--fullc ptv8 t-pt140 p-pt100 pbv6 t-pb40 p-pb60 bgi-o-nas-01 ovl-000000-50">
<div class="g g--0 gpt137 t-gpt89 gpxp5 t-gpx60 p-gpx30">
<div class="c ta-c">
<div class="ir">
<div class="g g--0">
<div class="c ta-c">
<div class="tx male cap co-ffffff"><p><strong>JVS Klima<br/></strong></p></div>
</div>
</div>
</div>
<div class="ir pt20 pb40 t-pb20">
<div class="g g--0">
<div class="c ta-c">
<div class="tx co-ffffff tx--i mw800"><h1>Od návrhu po montáž. Jeden tým, žádné kompromisy.</h1></div>
</div>
</div>
</div>
<div class="ir t-pb20">
<div class="g g--0">
<div class="c ta-c">
<div class="tx co-ffffff tx--i mw900"><p>Naším cílem není prodat zařízení za každou cenu. Chceme navrhnout řešení, které v konkrétním prostoru skutečně funguje a zůstává spolehlivé dlouhodobě.</p></div>
</div>
</div>
</div>
<div class="ir pt40 p-pt20 pb40 t-pb60 p-pb40">
<div class="g g--0">
<div class="c ta-c">
<div class="c__in cpb20 t-cpb40 p-cpb20">
<div class="tl"><a class="btn btn--bila btn--m10" href="#">Probrat projekt</a></div>
<div class="tl"><a class="btn btn--bila btn--m10" href="#">Služby</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section></main>
```

### Úvod světlé bez fotky

Světle modrý úvod s červeným štítkem, nadpisem a perexem na střed. Třídy: `r--full`, `bg-f0f5fc`, `cap`, `co-c3002f`, `mw800`.

```html
<main class="obsah" id="obsah"><section class="r r--full pt100 t-pt80 p-pt40 pb100 t-pb80 p-pb60 bg-f0f5fc">
<div class="w"><div class="g gpt137 t-gpt89">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx male cap"><p><strong><span class="co-c3002f">Průběh instalace</span><br/></strong></p></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw800"><h1>Jak probíhá instalace klimatizace</h1></div>
</div>
</div>
</div>
<div class="ir">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw860"><p>Celá instalace probíhá na klíč - od zaměření a vedení potrubí přes montáž vnitřní i venkovní jednotky až po vakuaci okruhu a zprovoznění. Obvykle jde o práci na jeden den.</p></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Kontakt s kartami

Světlý úvod s dvěma kartami s ikonou (telefon, e-mail) v obrysu 1 px. Ikony jsou animace Lottie, ve vzorku prázdné. Třídy: `c--box`, `lottie`, `max-width900`, `g--30`.

```html
<main class="obsah" id="obsah"><section class="r r--full pt100 t-pt80 p-pt40 pb100 t-pb80 p-pb60 bg-f0f5fc">
<div class="w"><div class="g gpt137 t-gpt89">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx male cap"><p><strong><span class="co-c3002f">Kontaktujte nás</span><br/></strong></p></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw800"><h1>Ozvěte se a připravíme vám jasný další krok k realizaci</h1></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw740"><p>Stačí krátká zpráva nebo telefonát. Upřesníme základní parametry projektu a doporučíme postup, který vám pomůže rychle a správně rozhodnout.</p></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c cmt-40 t-cmt-20 ta-c">
<div class="ir r--mb pt60 t-pt40 p-pt20 pb30">
<div class="g">
<div class="c ta-c">
<div class="ir max-width900 pt20">
<div class="g g--30">
<div class="c w50 p-w100 p-cmb30 ta-c c--fill">
<div class="c__in c--box cpt50 t-cpt40 cpr15 cpb50 t-cpb40 cpl15">
<div aria-hidden="true" class="lottie" data-loop="true" data-speed="0.6" data-src="assets/lottie/ikona-telefon.json" style="width:70px;height:70px"></div>
<div class="sp sh40 t-sh20"></div>
<div class="tx tx--m"><h3><strong>+420 722 220 508</strong></h3></div>
<div class="tx male"><p>Po-Pá · 7:00-17:00</p></div>
</div>
</div>
<div class="c w50 p-w100 p-cmb30 ta-c c--fill">
<div class="c__in c--box cpt50 t-cpt40 cpr15 cpb50 t-cpb40 cpl15">
<div aria-hidden="true" class="lottie" data-loop="true" data-speed="0.3" data-src="assets/lottie/ikona-mail.json" style="width:70px;height:70px"></div>
<div class="sp sh40 t-sh20"></div>
<div class="tx tx--m"><h3><a href="#">klima@jvsklima.cz</a></h3></div>
<div class="tx male"><p>Napište pár vět, stačí stručně, ozveme se vám</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ir">
<div class="g">
<div class="c cmt-20 p-cmt-60 ta-c">
<div class="tl"><a class="btn" href="#">Nezávazná poptávka</a></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

## Komponenty: Prvky

### Tlačítka

Hlavní tlačítko je plná červená pilulka s velkými písmeny, na tmavé fotce bílé, zelené pro doplňkovou akci. Třídy: `btn`, `btn--bila`, `btn--zelena`, `nav__btn`.

```html
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:24px"><a class="btn" href="#">Nezávazná poptávka</a><a class="btn btn--zelena" href="#">Zavolat</a><span style="background:#0a1e3b;padding:20px;display:inline-block"><a class="btn btn--bila" href="#">Probrat projekt</a></span></div>
```

### Odznaky a štítky

Odznak `badge` nad nadpisem je obrysová pilulka s velkými písmeny, štítek `stitek` je bílá pilulka s tenkým okrajem. Třídy: `badge`, `badge--obrys`, `stitek`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt40 p-pt20 pb40 t-pb20">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="badges"><span class="badge bg-ffffff co-c3002f badge--obrys">KDE PŮSOBÍME</span></div>
<div class="tx"><h2 class="h1">Praha, Čechy, Vysočina a okolí</h2></div>
</div>
</div>
</div>
<div class="ir pt20 t-pt0 pb20 t-pb0">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw800"><p><span class="stitek">Praha</span><span class="stitek">Jižní Čechy</span><span class="stitek">Střední Čechy</span><span class="stitek">Západní Čechy</span><span class="stitek">Plzeňský kraj</span><span class="stitek">Vysočina</span><span class="stitek"><a href="#">Nejste jistí? Zeptejte se</a></span></p></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Seznam s fajfkami

Tři krátké výhody s červenou fajfkou vedle sebe. Třídy: `ikona-check`, `tx`, `g--30`.

```html
<main class="obsah" id="obsah"><section class="r r--full pt40 t-pt20 pb40">
<div class="w"><div class="g">
<div class="c">
<div class="ir pt20">
<div class="g">
<div class="c w33_3333 t-w100 t-cmb25">
<div class="tx"><ul> <li class="ikona-check">Instalace v bytech a rodinných domech.</li> </ul></div>
</div>
<div class="c w33_3333 t-w100 t-cmb25">
<div class="tx"><ul> <li class="ikona-check">Klimatizace v kancelářích a prodejnách.</li> </ul></div>
</div>
<div class="c w33_3333 t-w100">
<div class="tx"><ul> <li class="ikona-check">Hodnocení přímo od klientů.</li> </ul></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Seznam s hvězdičkou

Úvodní text se seznamem s červenými hvězdičkami místo odrážek. Třídy: `star-bullet`, `tx--i`, `badge--obrys`, `mw900`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt100 t-pt60 pb20 t-pb0">
<div class="w"><div class="g">
<div class="c w50 m-w100 t-cmb25 c--mid">
<div class="c__in">
<div class="img iwp imw1060"><img alt="Klimatizace do bytu, domu i na chatu" height="707" src="assets/foto/jvsklima-klimatizace-do-domu-02.webp" width="1060"/></div>
</div>
</div>
<div class="c w50 m-w100 cmt60 t-cmt40 c--mid">
<div class="c__in cprf50 t-cpr0 cplf50 t-cpl0">
<div class="ir r--mb">
<div class="g">
<div class="c">
<div class="tx tx--i mw800"><h2>Když je doma horko, klesá energie i kvalita odpočinku</h2></div>
</div>
</div>
</div>
<div class="ir r--mb pb20">
<div class="g">
<div class="c">
<div class="tx tx--i mw900"><p><span class="co-657585">Vysoká teplota přes den snižuje soustředění a večer zhoršuje spánek. Zákazník zároveň neví, které řešení odpovídá jeho dispozici.</span></p></div>
</div>
</div>
</div>
<div class="ir">
<div class="g">
<div class="c">
<div class="tx tx--i mw900"><ul> <li class="star-bullet">Obava ze špatného výběru zařízení</li> <li class="star-bullet">Nejistota v porovnání nabídek</li> <li class="star-bullet">Nedůvěra v dlouhodobou funkčnost</li> </ul></div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Citace

Světle modrý blok s citací zákazníka, jménem a rolí. Bez rámečku a bez rádiusu. Třídy: `bq`, `bq__autor`, `bq__kdo`, `bq__role`.

```html
<main class="obsah" id="obsah"><section class="r r--mb max-width900 pt20 pb20">
<div class="w"><div class="g">
<div class="c">
<div class="ir pt20 t-pt0 pb20 t-pb0">
<div class="g">
<div class="c">
<blockquote class="bq co-000000"><p>Měli jsme přehřátý byt ve druhém patře a nevěděli, jestli nám stačí jedna jednotka nebo potřebujeme multisplit. Technik přijel, všechno vysvětlil a navrhl řešení, které sedí přesně na náš prostor. Montáž proběhla za jeden den, úklid perfektní.</p><div class="bq__autor"><span class="bq__kdo"><span class="bq__jmeno">Rodina Novákových</span><span class="bq__role">Byt 3+kk, Praha 6</span></span></div></blockquote>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

## Komponenty: Sekce

### Pruh se zprávou

Jednořádkový pruh s hlavními argumenty, oddělenými červenými šipkami. Třídy: `r--mb`, `ta-c`, `co-c3002f`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt60 p-pt40">
<div class="w"><div class="g">
<div class="c ta-c">
<div class="tx"><p>Naplánujte klimatizaci před letní špičkou<span class="co-c3002f">   →  </span>Praha, Jižní, Střední, Západní Čechy a Vysočina<span class="co-c3002f">   →  </span>Dodávka a montáž klimatizace od 25 000 Kč</p></div>
</div>
</div></div>
</section></main>
```

### Karty s fotkou

Dvě velké fotokarty s nadpisem dole, popis se rozbalí po najetí. Třídy: `fbox`, `fbox__bg`, `fbox__in`, `fbox__d`, `fbox__a`, `mh470`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt60 t-pt40 p-pt20">
<div class="w"><div class="g">
<div class="c">
<div class="ir">
<div class="g">
<div class="c w50 t-w100 t-cmb25 ta-c">
<div class="fbox mh470 t-mh400 p-mh280"><img alt="" class="fbox__bg" height="470" src="assets/foto/klimatizace-do-domu.webp" width="750"/><div class="fbox__in"><h3>Klimatizace do bytu, domu i na chatu</h3><div class="fbox__dw"><div class="fbox__d"><p>Klidný spánek, příjemná teplota v obýváku i na chatě. Kompletní klimatizace do domu od 25 000 Kč za místnost včetně montáže, materiálu a záruky.</p></div></div></div><a class="fbox__a" href="#"><span class="sr">Klimatizace do bytu, domu i na chatu</span></a></div>
</div>
<div class="c w50 t-w100">
<div class="fbox mh470 t-mh400 p-mh280"><img alt="" class="fbox__bg" height="470" src="assets/foto/klimatizace-do-firmy.webp" width="750"/><div class="fbox__in"><h3>Klimatizace do kanceláře a firmy</h3><div class="fbox__dw"><div class="fbox__d"><p>Klimatizace, která neruší práci a spolehlivě funguje celou sezónu. Montáž klimatizace pro kanceláře, prodejny i větší komerční prostory.</p></div></div></div><a class="fbox__a" href="#"><span class="sr">Klimatizace do kanceláře a firmy</span></a></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Loga partnerů

Řada šesti log značek klimatizací na střed pod nadpisem H3. Třídy: `imgodkaz`, `img iw197`, `w16_6667`, `c--mid`.

```html
<main class="obsah" id="obsah"><section class="r pb20">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb pt60 t-pt40">
<div class="g">
<div class="c">
<div class="ir">
<div class="g">
<div class="c ta-c">
<div class="tx"><h3>Autorizovaný instalační partner</h3></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ir pb40">
<div class="g">
<div class="c ta-c">
<div class="ir">
<div class="g">
<div class="c w16_6667 m-w33_3333 p-w50 cmt20 ta-c c--mid">
<div class="c__in">
<div class="img iw197 p-iwp imw197 img--c"><a class="imgodkaz" href="#"><img alt="Hisense" height="80" src="assets/foto/logo-hisence.svg" width="197"/></a></div>
</div>
</div>
<div class="c w16_6667 m-w33_3333 p-w50 cmt20 ta-c c--mid">
<div class="c__in">
<div class="img iw197 p-iwp imw197 img--c"><a class="imgodkaz" href="#"><img alt="Samsung" height="80" src="assets/foto/logo-samsung.svg" width="197"/></a></div>
</div>
</div>
<div class="c w16_6667 m-w33_3333 p-w50 cmt20 ta-c c--mid">
<div class="c__in">
<div class="img iw197 p-iwp imw197 img--c"><a class="imgodkaz" href="#"><img alt="ACOND" height="80" src="assets/foto/logo-acond.svg" width="197"/></a></div>
</div>
</div>
<div class="c w16_6667 m-w33_3333 p-w50 cmt20 ta-c c--mid">
<div class="c__in">
<div class="img iw197 p-iwp imw197 img--c"><a class="imgodkaz" href="#"><img alt="DAIKIN" height="80" src="assets/foto/logo-daikin.svg" width="197"/></a></div>
</div>
</div>
<div class="c w16_6667 m-w33_3333 p-w50 cmt20 ta-c c--mid">
<div class="c__in">
<div class="img iw197 p-iwp imw197 img--c"><a class="imgodkaz" href="#"><img alt="LG" height="80" src="assets/foto/logo-lg.svg" width="197"/></a></div>
</div>
</div>
<div class="c w16_6667 m-w33_3333 p-w50 cmt20 ta-c c--mid">
<div class="c__in">
<div class="img iw197 p-iwp imw197 img--c"><a class="imgodkaz" href="#"><img alt="Toshiba" height="80" src="assets/foto/logo-toshiba.svg" width="197"/></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Problém, řešení, výsledek

Tři bílé karty na světle modrém pásu, každá s barevným horním okrajem 4 px: červený problém, oranžové řešení, zelený výsledek. Třídy: `problem`, `reseni`, `vysledek`, `bdt4-c3002f`, `bdt4-ff8330`, `bdt4-31b308`.

```html
<main class="obsah" id="obsah"><section class="r r--full pt120 t-pt80 pb100 t-pb60 bg-f0f5fc">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw700"><h2>V létě příjemný chlad a v zimě útulné teplo v bytě i kanceláři</h2></div>
</div>
</div>
</div>
<div class="ir r--mb pt20">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw800"><p>Návrh, montáž klimatizace i pravidelný servis klimatizace od JVS Klima.</p></div>
</div>
</div>
</div>
<div class="ir mb40 pt20 pb20 t-pb0">
<div class="g g--40">
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-c3002f cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx problem tx--m co-c3002f"><ul> <li><strong>Problém</strong></li> </ul></div>
<div class="tx tx--m"><h3>V létě horko, v zimě zima</h3></div>
<div class="tx"><p><span class="co-657585"><strong>Přehřátá ložnice, rozpálená kancelář, otevřená okna nepomáhají.</strong> V noci se nedá spát, přes den se nedá soustředit. A vy nevíte, jestli potřebujete split, multisplit nebo něco úplně jiného.</span></p></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-ff8330 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx reseni tx--m co-ff8330"><ul> <li><strong>Řešení</strong></li> </ul></div>
<div class="tx tx--m"><h3>Doporučíme konkrétní řešení</h3></div>
<div class="tx"><p><span class="co-657585">Chápeme, že výběr klimatizace není jednoduchý. Proto vám na základě 1 800+ realizací <strong>doporučíme konkrétní řešení podle dispozice, využití a rozpočtu</strong>, ne podle toho, co zrovna potřebujeme prodat.</span></p></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-31b308 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx vysledek tx--m co-31b308"><ul> <li><strong>Výsledek</strong></li> </ul></div>
<div class="tx tx--m"><h3>Příjemná teplota po celý rok</h3></div>
<div class="tx"><p><span class="co-657585"><strong>V létě chlad, v zimě úsporné vytápění. Tichý chod, jasný plán údržby</strong> a spolehlivý systém na roky dopředu. Nic neřešíte, všechno funguje.</span></p></div>
</div>
</div>
</div>
</div>
<div class="ir">
<div class="g">
<div class="c ta-c">
<div class="tl"><a class="btn" href="#">Nezávazná poptávka</a></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Karty modelů

Mřížka tří karet s červeným okrajem nahoře, fotkou modelu, popisem a odkazem na prospekt s ikonou PDF. Třídy: `iwt`, `iwt__t`, `prospekt`, `bdt4-c3002f`, `w33_3333`.

```html
<main class="obsah" id="obsah"><section class="r r--full pt100 t-pt80 p-pt60 pb60 t-pb20 bg-f0f5fc" id="modely">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="badges"><span class="badge bg-ffffff co-c3002f badge--obrys">Doporučené modely</span></div>
<div class="tx"><h2 class="h1">Řešení, která pravidelně instalujeme</h2></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw900"><p>Každý model má jiné přednosti. Vybereme ten, který nejlépe odpovídá vašemu prostoru a očekávání.</p></div>
</div>
</div>
</div>
<div class="ir mb40 pt20 pb20 t-pb0">
<div class="g g--40">
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-c3002f cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx problem tx--m co-c3002f"><ul> <li><strong>Lidovka</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>ACOND ASB</strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="ACOND ASB" height="500" src="assets/foto/typ-klimatizace-01.webp" width="600"/></a></div>
<div class="tx male tx--m"><p><span class="co-657585">Spolehlivá a cenově dostupná volba pro menší byty, ložnice nebo jednu hlavní místnost. Ideální řešení, pokud hledáte jednoduché a funkční chlazení bez zbytečných příplatků.</span></p></div>
<div class="sp sh10"></div>
<div class="iwt mt10 m-mt9 t-mt10 p-mt9"><img alt="" height="35" src="assets/foto/ikona-pdf.svg" width="35"/><div class="iwt__t"><a class="prospekt" href="#" rel="noopener" target="_blank">Zobrazit prospekt</a></div></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-c3002f cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx problem tx--m co-c3002f"><ul> <li><strong>Lidovka</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>Hisense Easy</strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="Hisense Easy" height="500" src="assets/foto/typ-klimatizace-02.webp" width="600"/></a></div>
<div class="tx male tx--m"><p><span class="co-657585">Praktický základní model pro běžné domácnosti, kde je prioritou dobrý poměr ceny a výkonu. Vhodný pro menší prostory nebo rekreační využití s důrazem na dostupnost.</span></p></div>
<div class="sp sh10"></div>
<div class="iwt mt10 m-mt9 t-mt10 p-mt9"><img alt="" height="35" src="assets/foto/ikona-pdf.svg" width="35"/><div class="iwt__t"><a class="prospekt" href="#" rel="noopener" target="_blank">Zobrazit prospekt</a></div></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-c3002f cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx problem tx--m co-c3002f"><ul> <li><strong>Lidovka</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>Samsung AR35</strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="Samsung AR35" height="500" src="assets/foto/typ-klimatizace-03.webp" width="600"/></a></div>
<div class="tx male tx--m"><p><span class="co-657585">Ověřená klasika pro zákazníky, kteří chtějí spolehlivou značku a jednoduché ovládání. Dobrá volba do bytů, kanceláří nebo místností s pravidelným letním provozem.</span></p></div>
<div class="sp sh10"></div>
<div class="iwt mt10 m-mt9 t-mt10 p-mt9"><img alt="" height="35" src="assets/foto/ikona-pdf.svg" width="35"/><div class="iwt__t"><a class="prospekt" href="#" rel="noopener" target="_blank">Zobrazit prospekt</a></div></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-ff8330 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx reseni tx--m co-ff8330"><ul> <li><strong>Střední třída</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>Hisense Comfort</strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="Hisense Comfort" height="500" src="assets/foto/typ-klimatizace-04.webp" width="600"/></a></div>
<div class="tx male tx--m"><p><span class="co-657585">Oblíbený model střední třídy s velmi dobrým poměrem ceny, výkonu a výbavy. Tichý provoz a široké možnosti využití z něj dělají ideální volbu pro byty i kanceláře.</span></p></div>
<div class="sp sh10"></div>
<div class="iwt mt10 m-mt9 t-mt10 p-mt9"><img alt="" height="35" src="assets/foto/ikona-pdf.svg" width="35"/><div class="iwt__t"><a class="prospekt" href="#" rel="noopener" target="_blank">Zobrazit prospekt</a></div></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-ff8330 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx reseni tx--m co-ff8330"><ul> <li><strong>Střední třída</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>Hisense Unipure</strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="Hisense Unipure" height="500" src="assets/foto/typ-klimatizace-05.webp" width="600"/></a></div>
<div class="tx male tx--m"><p><span class="co-657585">Moderní klimatizace pro zákazníky, kteří chtějí vyšší komfort, elegantní vzhled a zdravější vzduch v interiéru. Skvělá volba do domácností, kde hraje roli design i nízká spotřeba.</span></p></div>
<div class="sp sh10"></div>
<div class="iwt mt10 m-mt9 t-mt10 p-mt9"><img alt="" height="35" src="assets/foto/ikona-pdf.svg" width="35"/><div class="iwt__t"><a class="prospekt" href="#" rel="noopener" target="_blank">Zobrazit prospekt</a></div></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-ff8330 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx reseni tx--m co-ff8330"><ul> <li><strong>Střední třída</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>Samsung Comfort a Avant </strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="Samsung Comfort a Avant" height="500" src="assets/foto/typ-klimatizace-06.webp" width="600"/></a></div>
<div class="tx male tx--m"><p><span class="co-657585">Vyvážené řešení pro každodenní používání s důrazem na komfort, tichý chod a moderní design. Vhodné pro domácnosti, které chtějí spolehlivý výkon a reprezentativní vzhled.</span></p></div>
<div class="sp sh10"></div>
<div class="iwt mt10 m-mt9 t-mt10 p-mt9"><img alt="" height="35" src="assets/foto/ikona-pdf.svg" width="35"/><div class="iwt__t"><a class="prospekt" href="#" rel="noopener" target="_blank">Zobrazit prospekt</a></div></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-31b308 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx vysledek tx--m co-31b308"><ul> <li><strong>Premium model</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>Hisense Energy PRO-X<br/></strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="Hisense Energy PRO-X" height="500" src="assets/foto/typ-klimatizace-07.webp" width="600"/></a></div>
<div class="tx male tx--m"><p><span class="co-657585">Prémiový model pro náročné zákazníky, kteří očekávají maximální výkon, nízkou spotřebu a špičkovou výbavu. Výborná volba pro celoroční provoz včetně účinného vytápění.</span></p></div>
<div class="sp sh10"></div>
<div class="iwt mt10 m-mt9 t-mt10 p-mt9"><img alt="" height="35" src="assets/foto/ikona-pdf.svg" width="35"/><div class="iwt__t"><a class="prospekt" href="#" rel="noopener" target="_blank">Zobrazit prospekt</a></div></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-31b308 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx vysledek tx--m co-31b308"><ul> <li><strong>Premium model</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>Samsung Premiere a Premiere+</strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="Samsung Premiere a Premiere+" height="500" src="assets/foto/typ-klimatizace-08.webp" width="600"/></a></div>
<div class="tx male"><p><span class="co-657585">Nejvyšší řada pro zákazníky, kteří chtějí to nejlepší bez kompromisů. Luxusní design, pokročilé technologie a maximální komfort dělají z této novinky reprezentativní řešení pro moderní interiéry.</span></p></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 t-cmb0 cmt20 ta-c c--fill">
<div class="c__in bg-ffffff bdt4-31b308 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="badges badges--kruh"><span class="badge bg-31b308 co-ffffff badge--kruh">+</span></div>
<div class="sp sh60 t-sh40 p-sh20"></div>
<div class="tx tx--m"><h3><strong>Klimatizace na míru pro byt, dům nebo kancelář</strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><img alt="JVS Klima - klimatizace na míru" height="338" src="assets/foto/klimatizace-na-miru.svg" width="600"/></div>
<div class="tx tx--m"><p>Pokud nechcete vybírat jen podle katalogu, připravíme řešení na míru podle dispozice a provozu.</p></div>
<div class="tl"><a class="btn btn--zelena btn--m20" href="#">Individuální nabídka</a></div>
</div>
</div>
</div>
</div>
<div class="ir">
<div class="g">
<div class="c ta-c">
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Karty obav

Karty s kulatým červeným odznakem na okraji, ikonou a popisem obavy zákazníka. Třídy: `badge--kruh`, `badges--kruh`, `img iw90`, `c__in`.

```html
<main class="obsah" id="obsah"><section class="r r--full pt100 t-pt80 p-pt60 pb60 t-pb20 bg-f0f5fc">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="badges"><span class="badge bg-ffffff co-c3002f badge--obrys">Znáte to?</span></div>
<div class="tx"><h2 class="h1">Vybrat správnou klimatizaci není snadné</h2></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw800"><p>Většina lidí řeší stejné obavy. A přesně proto jsme tady.</p></div>
</div>
</div>
</div>
<div class="ir pt40 p-pt20">
<div class="g g--40">
<div class="c w33_3333 m-w50 t-w100 cmb40 c--fill">
<div class="c__in c--box bdc-c3002f cptf50 t-cpt40 p-cpt35 cprf50 t-cpr40 p-cpr35 cpbf50 t-cpb40 p-cpb35 cplf50 t-cpl40 p-cpl35">
<div class="badges badges--kruh"><span class="badge bg-c3002f co-ffffff badge--kruh">×</span></div>
<div class="img img--mb iw90"><img alt="V létě vedro, v zimě zima" height="90" src="assets/foto/ikona-klima-obava-01.svg" width="90"/></div>
<div class="tx tx--m"><h3>V létě vedro, v zimě zima</h3></div>
<div class="tx"><p><span class="co-657585">Přetopené pokoje, bezesné noci a pocit, že vaše bydlení nefunguje tak, jak má. Řešení přitom existuje.</span></p></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb40 c--fill">
<div class="c__in c--box bdc-c3002f cptf50 t-cpt40 p-cpt35 cprf50 t-cpr40 p-cpr35 cpbf50 t-cpb40 p-cpb35 cplf50 t-cpl40 p-cpl35">
<div class="badges badges--kruh"><span class="badge bg-c3002f co-ffffff badge--kruh">×</span></div>
<div class="img img--mb iw90"><img alt="Nepřehledná nabídka" height="90" src="assets/foto/ikona-klima-obava-02.svg" width="90"/></div>
<div class="tx tx--m"><h3>Nepřehledná nabídka</h3></div>
<div class="tx"><p><span class="co-657585">Desítky značek, modelů a instalatérů. Jak poznat, co je pro váš dům to pravé a komu svěřit instalaci?</span></p></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb40 c--fill">
<div class="c__in c--box bdc-c3002f cptf50 t-cpt40 p-cpt35 cprf50 t-cpr40 p-cpr35 cpbf50 t-cpb40 p-cpb35 cplf50 t-cpl40 p-cpl35">
<div class="badges badges--kruh"><span class="badge bg-c3002f co-ffffff badge--kruh">×</span></div>
<div class="img img--mb iw90"><img alt="Strach ze špatné investice" height="90" src="assets/foto/ikona-klima-obava-03.svg" width="90"/></div>
<div class="tx tx--m"><h3>Strach ze špatné investice</h3></div>
<div class="tx"><p><span class="co-657585">Nekvalitní montáž, skryté poplatky nebo zařízení, které nesplní očekávání. To jsou obavy, které nechcete řešit.</span></p></div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Fotka s body

Fotka s pulzujícími červenými body, po kliknutí se u nich ukáže bublina. Vedle fotky číslované kroky. Třídy: `hotspoty`, `hs__b`, `kroky`, `kroky__c`, `kroky__t`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt60">
<div class="w"><div class="g">
<div class="c w50 m-w100 t-cmb25 c--mid">
<div class="c__in">
<div class="hotspoty"><img alt="Profesionální instalace klimatizace na klíč od JVS Klima" height="1275" src="assets/foto/klimatizace-01.webp" width="1500"/><div class="hs hs--bottom" style="top:55.659%;left:69.4175%"><button aria-expanded="false" aria-label="Zobrazit informaci" class="hs__b" type="button"></button><div class="hs__t" hidden=""><div class="hs__in">Voláte přímo technikovi, který vaši zakázku povede od začátku do konce. Žádné přepojování nebo nekonečné čekání.<button aria-label="Zavřít" class="hs__z" type="button"></button></div></div></div><div class="hs hs--bottom" style="top:22.7252%;left:33.0097%"><button aria-expanded="false" aria-label="Zobrazit informaci" class="hs__b" type="button"></button><div class="hs__t" hidden=""><div class="hs__in">Nemáte představu o řešení? Schůzku domluvíme i bez předchozí nabídky.<button aria-label="Zavřít" class="hs__z" type="button"></button></div></div></div></div>
</div>
</div>
<div class="c w50 m-w100 cmt80 t-cmt40 c--mid">
<div class="c__in cprf50 t-cpr0 cplf50 t-cpl0">
<div class="ir r--mb pb20 t-pb40 p-pb20">
<div class="g">
<div class="c">
<div class="tx tx--i mw510"><h2>Tři kroky od prvního kontaktu k funkční instalaci</h2></div>
</div>
</div>
</div>
<ol class="kroky kroky--3"><li><span class="kroky__c">1</span><div class="kroky__t"><h4>Telefonát a orientační nabídka</h4><p>Probereme vaši představu o řešení po telefonu a připravíme orientační cenovou nabídku. Získáte srozumitelné podklady pro srovnání s dalšími firmami bez nutnosti osobní schůzky.</p></div></li><li><span class="kroky__c">2</span><div class="kroky__t"><h4>Osobní schůzka a konečná cena</h4><p>Jakmile se rozhodnete pro nás, domluvíme osobní prohlídku prostoru. Na jejím základě připravíme finální cenovou nabídku přesně na míru bez skrytých poplatků.</p></div></li><li><span class="kroky__c">3</span><div class="kroky__t"><h4>Montáž, spuštění a doporučení</h4><p>Montáž klimatizace trvá zpravidla jeden den. Po realizaci předáme instrukce k obsluze a navrhneme interval pravidelné údržby.</p></div></li></ol>
</div>
</div>
</div></div>
</section></main>
```

### Tři kroky velkými čísly

Světlý pás se třemi sloupci, červené velké číslo a H3. Třídy: `stredni-nadpis`, `badge--obrys`, `bg-f0f5fc`.

```html
<main class="obsah" id="obsah"><section class="r r--full pt20 p-pt40 bg-f0f5fc">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb pt60 t-pt40 p-pt20 pb30" id="poptavka">
<div class="g">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="badges"><span class="badge bg-ffffff co-c3002f badge--obrys">JAK TO PROBÍHÁ</span></div>
<div class="tx tx--i mw800"><h2 class="h1">Tři kroky ke klimatizaci</h2></div>
</div>
</div>
</div>
<div class="ir r--mb pt20 t-pt0 pb20 t-pb0">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw900"><p><span class="co-657585">Doporučujeme řešení podle počtu místností, orientace prostoru a hlučnosti. Nejdříve připravíme orientační nabídku, potom konkrétní návrh.</span></p></div>
</div>
</div>
</div>
<div class="ir r--mb pt20">
<div class="g g--50">
<div class="c w33_3333 p-w100 cmb40 ta-c">
<div class="tx stredni-nadpis mb40 t-mb20 mt20"><p><strong><span class="co-c3002f">01.</span><br/></strong></p></div>
<div class="tx tx--m"><h3><strong>Telefonát a orientační nabídka<br/></strong></h3></div>
<div class="tx mt-10 tx--i mw450"><p><span class="co-657585">Upřesníme typ objektu, počet místností a vaši představu o řešení. Na základě hovoru připravíme orientační cenovou nabídku ke srovnání.</span></p></div>
</div>
<div class="c w33_3333 p-w100 cmb40 ta-c">
<div class="tx stredni-nadpis mb40 t-mb20 mt20"><p><strong><span class="co-c3002f">02.</span><br/></strong></p></div>
<div class="tx tx--m"><h3><strong>Osobní schůzka a finální nabídka<br/></strong></h3></div>
<div class="tx mt-10 tx--i mw450"><p><span class="co-657585">Po vašem rozhodnutí domluvíme osobní prohlídku. Na jejím základě dostanete finální nabídku přesně podle dispozice a technických podmínek.</span></p></div>
</div>
<div class="c w33_3333 p-w100 cmb40 ta-c">
<div class="tx stredni-nadpis mb40 t-mb20 mt20"><p><strong><span class="co-c3002f">03.</span><br/></strong></p></div>
<div class="tx tx--m"><h3><strong>Instalace, spuštění, předání</strong></h3></div>
<div class="tx mt-10 tx--i mw450"><p><span class="co-657585">Montáž doplníme o praktické instrukce pro používání a návrh servisu podle zátěže systému.</span></p></div>
</div>
</div>
</div>
<div class="ir mb30 max-width900 pt20">
<div class="g g--30">
<div class="c w50 p-w100 p-cmb30 ta-c c--fill">
<div class="c__in c--box cpt50 t-cpt40 cpr15 cpb50 t-cpb40 cpl15">
<div aria-hidden="true" class="lottie" data-loop="true" data-speed="0.6" data-src="assets/lottie/ikona-telefon.json" style="width:70px;height:70px"></div>
<div class="sp sh40 t-sh20 t-mt20 t-mb20"></div>
<div class="tx tx--m"><h3><strong>+420 722 220 508</strong></h3></div>
<div class="tx male"><p>Po-Pá · 7:00-17:00</p></div>
</div>
</div>
<div class="c w50 p-w100 p-cmb30 ta-c c--fill">
<div class="c__in c--box cpt50 t-cpt40 cpr15 cpb50 t-cpb40 cpl15">
<div aria-hidden="true" class="lottie" data-loop="true" data-speed="0.3" data-src="assets/lottie/ikona-mail.json" style="width:70px;height:70px"></div>
<div class="sp sh40 t-sh20 t-mt20 t-mb20"></div>
<div class="tx tx--m"><h3><a href="#">klima@jvsklima.cz</a></h3></div>
<div class="tx male"><p>Napište pár vět, stačí stručně, ozveme se vám</p></div>
</div>
</div>
</div>
</div>
<div class="ir r--mb pt20 t-pt0 pb20 t-pb0">
<div class="g">
<div class="c ta-c">
<div class="sp sh1 mt5 t-mt20 mb5 t-mb20"></div>
</div>
</div>
</div>
<div class="ir pb20 t-pb0">
<div class="g">
<div class="c ta-c">
<div class="tx nejmensi tx--i mw1000"><p><span class="co-657585">U jednodušších instalací pro jednu místnost se běžně pohybujeme kolem 25 000 Kč. U větších řešení závisí cena na počtu jednotek a složitosti trasy. Orientační cena slouží pro základní představu. Přesnou nabídku připravíme po upřesnění dispozice a technických podmínek.</span></p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Recenze

Souhrn hodnocení s hvězdičkami a posuvník karet z Googlu s fotkou autora. Třídy: `rec__souhrn`, `rec__pas`, `rec__k`, `rec__text`, `rec__hlava`, `rec__foto`.

```html
<main class="obsah" id="obsah"><section class="r">
<div class="w"><div class="g">
<div class="c">
<div class="ir pt40">
<div class="g">
<div class="c t-cmt-20 p-cmt-40">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx tx--m"><h2>Hodnocení zákazníků</h2></div>
<div class="tx"><p><a href="#" rel="noopener" target="_blank">JVS Klima</a></p></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="c__in cpz30">
<div><div class="rec">
<p class="rec__souhrn"><span class="rec__celkem">5,0</span><span aria-hidden="true" class="rec__hv"><svg viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg></span><span class="sr">Hodnocení 5,0 z 5 hvězdiček, celkem 68 recenzí na Google</span></p>
<div class="rec__slider" data-autoplay="5000"><ul class="rec__pas">
<li class="rec__k"><p class="rec__text">Skvělá spolupráce s JVS Klima, instalace, rychlá domluva, je spolehnutí na jejich slova. Komunikace i přes sociální sitě. V rámci záruky jsem řešil závadu - opět kvalitní služby, výměna dílu, zprovoznění. Jelikož mám nestandartní instalaci kliatizace ve skleníku a vše probíhalo na podle domluvy - umístění bylo dostatečně komunikováno, typ klimatizace konzultován více než dostatečně s upozoněním na kvalitu výrobce a provozuschopnost klimatizace pro mé potřeby. Doporučuji.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-01.webp" width="50"/><a href="#" rel="noopener" target="_blank">Ctirad Prochazka</a></div></li>
<li class="rec__k"><p class="rec__text">Poptavali jsme v okoli i dalsi firmy na 3 klimatizace do RD, ale vetsina se ani nedokazala ozvat zpet. Naopak JVS hned odpovedeli, domluvili jsme na schuzce, konzultovali s nami, co bylo treba. Nabidka byla fer, pristup a komunikace super a profi, i presto, ze k nam museli jet na vicekrat, protoze byl dum v rekontrukci. Ted jen aby vse slapalo ;)</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-02.webp" width="50"/><a href="#" rel="noopener" target="_blank">Barbora Kolář</a></div></li>
<li class="rec__k"><p class="rec__text">Rychlé jednání, profesionální přístup, dobrá cena. Mohu jen doporučit.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-03.webp" width="50"/><a href="#" rel="noopener" target="_blank">apeks apeks</a></div></li>
<li class="rec__k"><p class="rec__text">Velká spokojenost s touto firmou. U nás v Českých Budějovicích byla velmi složitá realizace klimatizace (asi na nás budou chvíli vzpomínat) do půdní vestavby, ale chlapi si poradili, makali bez přestávky, bez jídla a za 2 dny bylo hotovo. Jako bonus po sobě ještě uklidili. Od samotného návrhu až po realizaci velmi solidní a slušné vystupování. Když nezvedli telefon, volali zpět. Na čem jsme se domluvili, to platilo, zkrátka profíci každým coulem :-) Velmi doporučuji a moc díky!!</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-04.webp" width="50"/><a href="#" rel="noopener" target="_blank">Jakub Chán</a></div></li>
<li class="rec__k"><p class="rec__text">Realizace klimatizace Daikin Comfora proběhla dle domluvy do týdne za cenu předem jasnou bez vedlejších nákladů a v porovnání od konkurence nejvýhodněji. Krásně mi vytopí domek a bez starosti, ekonomicky a úsporně, mohu si i odvlhčovat místnosti a nastavovat teplotu se sepnutím nebo vypnutím předem na x hodin podle potřeby a to i na dálku přes apku. Není třeba už používat kotel na tuhá paliva 🙏. Pan Jelínek s kolegou byli hodně šikovní, lidský, slušní a s dobrou náladou. Dostala jsem všechny zásadní informace ohledně používaní a servisu. Kolega pana Jelínka mi ochotně přivrtal po skončení věšáky na ovladače a ještě to ochotně předělal, protože jsem si rozmyslela místo :)). Děkuju za spolupráci a váš přístup ! S úctou JK Petříkov</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-05.webp" width="50"/><a href="#" rel="noopener" target="_blank">Jitka Korandova</a></div></li>
<li class="rec__k"><p class="rec__text">Super jednání a práce. Doporučuji</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-06.webp" width="50"/><a href="#" rel="noopener" target="_blank">Leoš Mrzena</a></div></li>
<li class="rec__k"><p class="rec__text">Není to velká firma, ale v tom je kouzlo jejich služeb. Pánové jsou z oboru, mají přehled. Jednoduchý a čistý obchod. Dali jsme poptávku, přijeli zaměřit, promyslet vhodnou technologii včetně výkonů jednotlivých jednotek. Nahlásili se dopředu, makali rychle a přesně včetně úklidu po sobě. Perfektní, na co jsme si podali ruku to platí. Doporučuji všema deseti.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-07.webp" width="50"/><a href="#" rel="noopener" target="_blank">Petr Stibor</a></div></li>
<li class="rec__k"><p class="rec__text">Perfektně odvedená práce, vstřícné jednání, realistická cena za celou dodávku klimatizace. Doporučuji.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/avatar.svg" width="50"/><a href="#" rel="noopener" target="_blank">Libor Hynek</a></div></li>
<li class="rec__k"><p class="rec__text">Děkuji firmě za perfektně provedenou práci. Je radost, když jednáte s někým, kdo nejen své práci rozumí, ale co slíbí, tak přesně splní.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-09.webp" width="50"/><a href="#" rel="noopener" target="_blank">Pavel Roubíček</a></div></li>
<li class="rec__k"><p class="rec__text">Skvělá zkušenost s firmou JVS klima - profesionální přístup, vše proběhlo podle dohody a bez problémů. Mohu jen doporučit!</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-10.webp" width="50"/><a href="#" rel="noopener" target="_blank">Monika Kašparová</a></div></li>
<li class="rec__k"><p class="rec__text">Naprosto profesionální přístup. Ihned zareagovali na poptávku, rychle přijeli na prohlídku a zaslali cenovou nabídku. Kvalitně provedená montáž velice schopnými řemeslníky, kteří si poradili i s náročnější průchodností stěn, elektroinstalací atd. Z celkem šesti nabídek nejlepší cena. Mohu opravdu doporučit!</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-11.webp" width="50"/><a href="#" rel="noopener" target="_blank">Michal Vincenc</a></div></li>
<li class="rec__k"><p class="rec__text">Velmi doporučuji společnost JVS Klima. Nechala jsem si nainstalovat A/C jednotku do panelového domu s vývodem na plochou, asfaltovou střechu pro vnější jednotku. Tedy poměrně šložité řešení. JVS Klima, pod vedením 2 profesionálních mužů, vše provedla bez problému. Skvělá komunikace (i v pátek ve večerních hodinách), rychlý termín instalce a samotná instalace, včetně prostupu na střechu, trvala cca 4 hodiny. Přesně věděli, co dělají. Tedy za mě 5*.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-12.webp" width="50"/><a href="#" rel="noopener" target="_blank">Lucie Švecová</a></div></li>
<li class="rec__k"><p class="rec__text">Naprostá spokojenost, vše podle dohody, flexibilita, ochota, vysoká profesionalita. Atypické řešení technického problému na místě obratem. Pracovníky firmy chci chtěla pochválit, jak pokud jde o profesionalitu, jednání, za minimální nepořádek, i za to, jak po sobě skvěle uklidili. Zakrývala jsem kvůli nutnému vrtání otvoru do zdi celou místnost - stačilo díky zakrýt jen nejbližší okolí! Ještě jednou moc děkuji. Klimatizace funguje skvěle.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-13.webp" width="50"/><a href="#" rel="noopener" target="_blank">Lenka Clara</a></div></li>
<li class="rec__k"><p class="rec__text">Firmu JVS Klima mohu jen doporučit. Na dnešní dobu opravdu výjimečné jednání, profesionalita, slušnost a do puntíku dodrženo vše co je dohodnuto. Ještě jednou díky pánové.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-14.webp" width="50"/><a href="#" rel="noopener" target="_blank">Pavel Matoušek</a></div></li>
<li class="rec__k"><p class="rec__text">Rád bych se podělil o velmi pozitivní zkušenost s firmou JVS Klima. Od samého počátku bylo jasné, že se jedná o profesionální tým, který klade důraz na spokojenost zákazníků. Komunikace byla vždy příjemná a otevřená, a i když se zakázka nakonec neuskutečnila z naší strany, firma se zachovala velmi seriózně. Bez jakýchkoliv komplikací nám vrátili peníze, což svědčí o jejich férovém přístupu. Taková ochota a vstřícnost se dnes jen tak nevidí. I když jsme zakázku nerealizovali, tuto firmu mohu vřele doporučit všem, kteří hledají spolehlivého a seriózního partnera. Děkujeme za profesionální a lidský přístup!</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-15.webp" width="50"/><a href="#" rel="noopener" target="_blank">Miroslav Osko</a></div></li>
<li class="rec__k"><p class="rec__text">Velká spokojenost. Tuto firmu mohu doporučit. Žádné zálohy a skvělá práce.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-16.webp" width="50"/><a href="#" rel="noopener" target="_blank">Ivana Cardová</a></div></li>
<li class="rec__k"><p class="rec__text">Tuto firmu rozhodně doporučuji. Oceňuji zejména rozumné ceny, flexibilní a individuální přístup a dále pak, že všechny dohody bezezbytku dodržela.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-17.webp" width="50"/><a href="#" rel="noopener" target="_blank">Ondrej Bartos</a></div></li>
<li class="rec__k"><p class="rec__text">JVS Klima s.r.o. odvedla profesionální práci, žádné ulejvání, práce pouze s velmi malými přestávkami a velmi příjemná komunikace, dodržení termínu a v mém případě dokonce o den dříve. Osobně tuto partu poctivých mladých kluků doporučuji. To, že si po sobě uklidili, brali jako samozřejmost. Poměrně netypicky jsem platil celou zakázku poté, co jsem měl vše zprovozněné a funkční.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-18.webp" width="50"/><a href="#" rel="noopener" target="_blank">Jan Mejzlík</a></div></li>
<li class="rec__k"><p class="rec__text">Firma mi montovala klimatizaci, odvedli skvělou práci, perfektně vymysleli všechny rozvody, aby byly schované a nemusel se hyzdit byt nějakými lištami. Navíc je s nimi skvělá komunikace. Prostě za mne naprostá spokojenost, vše funguje jak má. Tuto firmu stoprocentně doporučuji 🙂.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-19.webp" width="50"/><a href="#" rel="noopener" target="_blank">Kateřina Benešová</a></div></li>
<li class="rec__k"><p class="rec__text">Senzační přístup, nebyl problém přijet na obhlídku, kvalifikovaně poradit! Velký rozdíl proti jiným firmám, které vše řeší přes internetovou objednávku, kdy člověk v zásadě neví, co objednává. Tady velmi zásadní rada ohledně umístění čerpadla, blesková kalkulace a rychle i montáž. Tak už si topíme a děkujeme skvělým pánům z JVS, které bychom všem zákazníkům doporučili!</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-20.webp" width="50"/><a href="#" rel="noopener" target="_blank">Jana Černá</a></div></li>
<li class="rec__k"><p class="rec__text">Předně oceňuji, že při výjezdu nás navštívil kvalifikovaný zástupce a společně s námi vyhodnotil uvažované zařízení, vysvětlil podrobnosti a navrhl vhodné (lepší) umístění /v místnosti i venku/ s ohledem na estetiku místnosti i snížení příp. hlučnosti. Dále oceňuji dodržení termínu, ceny kvality a instruktáže po uvedení do provozu i nabídku operativního řešení příp. problémů. Pro 5 hvězdiček a přání mnoha obchodních úspěchů. V. Černý</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-21.webp" width="50"/><a href="#" rel="noopener" target="_blank">Václav Černý</a></div></li>
<li class="rec__k"><p class="rec__text">VJS Klima, pánové M.Jelínek spolu s V.Slávkem , nám nedávno instalovali klima do nepříliž "přátelských" prostor našeho panelákového bytu. Oba kluci jsou nejen dobří řemeslníci, ale i prima komunikativní typy, kteří vás svým jednáním přesvědčí o správnosti vaší volby při výběru firmy. Tomáš Kašpar, tel. [telefon odstraněn]</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-22.webp" width="50"/><a href="#" rel="noopener" target="_blank">Tomáš Kašpar</a></div></li>
<li class="rec__k"><p class="rec__text">Vřele doporučuji, oba pánové super, vše co se domluvilo, také platilo. Vše provedeno kvalitně, profesionálně a včas.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-23.webp" width="50"/><a href="#" rel="noopener" target="_blank">Martin Volek</a></div></li>
<li class="rec__k"><p class="rec__text">Naprosto špičková firma. Po domluvení se na jádrovém vrtání, jsem měl po telefonu dobrý pocit a nemýlil jsem se. Chlapci přijeli ve smluvený čas, a dopředu mi i zavolali. Vše proběhlo jak jsme se domluvili a naopak jsem při jejich zásahu zjistil, že by jsem mi hodil i další prostup do sklepa, kvůli nově plánovanému bazénu. Domluvili jsme se na dalším prostupu a oni vše ochotně provrtali a musím říct, že v dnešní době s jejich vybavením to bylo i za velmi solidní cenu. Od začátku jsem cítil, že o práci mají zájem a já je nemusím "prosit" jako většinu řemeslníků. Příjemní, dochvilní, profesionální. Asi takto by jsme je definoval tuto firmu a všem mohu jen doporučit! Přeji mnoho úspěchů v podnikání a velmi děkuji</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-24.webp" width="50"/><a href="#" rel="noopener" target="_blank">Michal Mareš</a></div></li>
</ul></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="ir">
<div class="g">
<div class="c ta-c">
<div class="tl"><a class="btn" href="#" rel="noopener" target="_blank">Recenze na Google</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Galerie realizací

Vodorovný pás fotek výšky 500 px s popiskem pod každou, posouvá se tažením. Třídy: `gal`, `gal__pas`, `gal__i`, `lb`.

```html
<main class="obsah" id="obsah"><section class="r r--fullc pb80 t-pb60 p-pb40 bg-f0f5fc">
<div class="g g--0">
<div class="c">
<div class="ir">
<div class="g g--0">
<div class="c ta-c">
<div class="gal" data-autoplay="5000"><div class="gal__pas"><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Venkovní jednotka · novostavba, České Budějovice" href="#"><img alt="Venkovní jednotka · novostavba, České Budějovice" height="1012" src="assets/foto/realizace-klimatizace-domacnost-09.webp" width="1350"/></a><figcaption>Venkovní jednotka · novostavba, České Budějovice</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Samsung WindFree Avant - černé provedení" href="#"><img alt="Samsung WindFree Avant - černé provedení" height="1012" src="assets/foto/realizace-klimatizace-domacnost-05.webp" width="1350"/></a><figcaption>Samsung WindFree Avant - černé provedení</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Samsung WindFree · byt, Praha 5" href="#"><img alt="Samsung WindFree · byt, Praha 5" height="1125" src="assets/foto/realizace-klimatizace-domacnost-04.webp" width="1500"/></a><figcaption>Samsung WindFree · byt, Praha 5</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Samsung WindFree · byt, Praha 5" href="#"><img alt="Samsung WindFree · byt, Praha 5" height="1500" src="assets/foto/realizace-klimatizace-domacnost-10.webp" width="1125"/></a><figcaption>Samsung WindFree · byt, Praha 5</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Venkovní jednotka ACOND · konzole na fasádě" href="#"><img alt="Venkovní jednotka ACOND · konzole na fasádě" height="1125" src="assets/foto/realizace-klimatizace-domacnost-06.webp" width="1500"/></a><figcaption>Venkovní jednotka ACOND · konzole na fasádě</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="ACOND - Praha" href="#"><img alt="ACOND - Praha" height="1125" src="assets/foto/realizace-klimatizace-domacnost-07.webp" width="1500"/></a><figcaption>ACOND - Praha</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Kazetová klimatizace Samsung" href="#"><img alt="Kazetová klimatizace Samsung" height="1500" src="assets/foto/realizace-klimatizace-domacnost-02.webp" width="1125"/></a><figcaption>Kazetová klimatizace Samsung</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Samsung WindFree Comfort" href="#"><img alt="Samsung WindFree Comfort" height="1500" src="assets/foto/realizace-klimatizace-domacnost-01.webp" width="1125"/></a><figcaption>Samsung WindFree Comfort</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Samsung WindFree · rodinný dům, Tábor" href="#"><img alt="Samsung WindFree · rodinný dům, Tábor" height="1500" src="assets/foto/realizace-klimatizace-domacnost-12.webp" width="1125"/></a><figcaption>Samsung WindFree · rodinný dům, Tábor</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Jednocestná klimatizační jednotka Samsung" href="#"><img alt="Jednocestná klimatizační jednotka Samsung" height="1125" src="assets/foto/realizace-klimatizace-domacnost-03.webp" width="1500"/></a><figcaption>Jednocestná klimatizační jednotka Samsung</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Vnitřní klimatizační jednotka ACOND · byt, Praha 5" href="#"><img alt="Vnitřní klimatizační jednotka ACOND · byt, Praha 5" height="1125" src="assets/foto/realizace-klimatizace-domacnost-08.webp" width="1500"/></a><figcaption>Vnitřní klimatizační jednotka ACOND · byt, Praha 5</figcaption></figure></div></div>
</div>
</div>
</div>
<div class="ir pt60 p-pt40">
<div class="g g--0">
<div class="c ta-c">
<div class="tl"><a class="btn" href="#">Chci podobné řešení</a></div>
</div>
</div>
</div>
</div>
</div>
</section></main>
```

### Kroky instalace

Vlevo lepivý seznam kroků s počítadlem, vpravo fotky jednotlivých kroků. Třídy: `tabs`, `tabs__nav`, `tabs__akt`, `tabs__obsah`, `tabs__p`, `tabs__img`.

```html
<main class="obsah" id="obsah"><section class="r r--mb r--kroky max-width1200 pt120 pb40">
<div class="w"><div class="g">
<div class="c">
<div class="tabs"><nav aria-label="Kroky instalace" class="tabs__nav"><p class="tabs__poc"><span class="tabs__akt">1</span> / 13</p><ol><li><a href="#">Rozměření středu jednotky a ukotvení plechu</a></li><li><a href="#">Kontrola umístění jednotky a provrtání otvoru ven</a></li><li><a href="#">Vylištování trasy potrubí uvnitř objektu</a></li><li><a href="#">Vylištování trasy potrubí venku</a></li><li><a href="#">Příprava na ukotvení venkovní jednotky</a></li><li><a href="#">Natažení hadičky pro odvod kondenzátu při chlazení z vnitřní jednotky</a></li><li><a href="#">Natažení potrubí a zalištování trasy</a></li><li><a href="#">Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci</a></li><li><a href="#">Připojení hadičky na odvod kondenzátu z vnitřní jednotky</a></li><li><a href="#">Zapěnění otvoru</a></li><li><a href="#">Upevnění venkovní jednotky a její připojení</a></li><li><a href="#">Kontrola těsnosti a vakuace chladivového okruhu</a></li><li><a href="#">Výsledná montáž</a></li></ol></nav><div class="tabs__obsah"><section class="tabs__p" id="krok-1"><h3 class="tabs__h">Rozměření středu jednotky a ukotvení plechu</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Rozměření středu jednotky a ukotvení plechu" href="#"><img alt="Rozměření středu jednotky a ukotvení plechu" height="1500" src="assets/foto/1.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-2"><h3 class="tabs__h">Kontrola umístění jednotky a provrtání otvoru ven</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Kontrola umístění jednotky a provrtání otvoru ven" href="#"><img alt="Kontrola umístění jednotky a provrtání otvoru ven" height="1500" src="assets/foto/2.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-3"><h3 class="tabs__h">Vylištování trasy potrubí uvnitř objektu</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Vylištování trasy potrubí uvnitř objektu" href="#"><img alt="Vylištování trasy potrubí uvnitř objektu" height="1500" src="assets/foto/3.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-4"><h3 class="tabs__h">Vylištování trasy potrubí venku</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Vylištování trasy potrubí venku" href="#"><img alt="Vylištování trasy potrubí venku" height="1500" src="assets/foto/4.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-5"><h3 class="tabs__h">Příprava na ukotvení venkovní jednotky</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Příprava na ukotvení venkovní jednotky" href="#"><img alt="Příprava na ukotvení venkovní jednotky" height="1500" src="assets/foto/5.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-6"><h3 class="tabs__h">Natažení hadičky pro odvod kondenzátu při chlazení z vnitřní jednotky</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Natažení hadičky pro odvod kondenzátu při chlazení z vnitřní jednotky" href="#"><img alt="Natažení hadičky pro odvod kondenzátu při chlazení z vnitřní jednotky" height="1500" src="assets/foto/6-1.webp" width="1125"/></a><a class="lb" data-galerie="kroky" data-popis="Natažení hadičky pro odvod kondenzátu při chlazení z vnitřní jednotky" href="#"><img alt="Natažení hadičky pro odvod kondenzátu při chlazení z vnitřní jednotky" height="1500" src="assets/foto/6-2.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-7"><h3 class="tabs__h">Natažení potrubí a zalištování trasy</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Natažení potrubí a zalištování trasy" href="#"><img alt="Natažení potrubí a zalištování trasy" height="1500" src="assets/foto/7-1.webp" width="1125"/></a><a class="lb" data-galerie="kroky" data-popis="Natažení potrubí a zalištování trasy" href="#"><img alt="Natažení potrubí a zalištování trasy" height="1500" src="assets/foto/7-2.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-8"><h3 class="tabs__h">Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci" href="#"><img alt="Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci" height="1500" src="assets/foto/8-1.webp" width="1125"/></a><a class="lb" data-galerie="kroky" data-popis="Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci" href="#"><img alt="Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci" height="1500" src="assets/foto/8-2.webp" width="1125"/></a><a class="lb" data-galerie="kroky" data-popis="Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci" href="#"><img alt="Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci" height="1500" src="assets/foto/8-3.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-9"><h3 class="tabs__h">Připojení hadičky na odvod kondenzátu z vnitřní jednotky</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Připojení hadičky na odvod kondenzátu z vnitřní jednotky" href="#"><img alt="Připojení hadičky na odvod kondenzátu z vnitřní jednotky" height="1500" src="assets/foto/9.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-10"><h3 class="tabs__h">Zapěnění otvoru</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Zapěnění otvoru" href="#"><img alt="Zapěnění otvoru" height="1500" src="assets/foto/10.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-11"><h3 class="tabs__h">Upevnění venkovní jednotky a její připojení</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Upevnění venkovní jednotky a její připojení" href="#"><img alt="Upevnění venkovní jednotky a její připojení" height="1500" src="assets/foto/11.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-12"><h3 class="tabs__h">Kontrola těsnosti a vakuace chladivového okruhu</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Kontrola těsnosti a vakuace chladivového okruhu" href="#"><img alt="Kontrola těsnosti a vakuace chladivového okruhu" height="1500" src="assets/foto/12.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-13"><h3 class="tabs__h">Výsledná montáž</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Výsledná montáž" href="#"><img alt="Výsledná montáž" height="1500" src="assets/foto/13-1.webp" width="1125"/></a><a class="lb" data-galerie="kroky" data-popis="Výsledná montáž" href="#"><img alt="Výsledná montáž" height="1500" src="assets/foto/13-2.webp" width="1125"/></a><a class="lb" data-galerie="kroky" data-popis="Výsledná montáž" href="#"><img alt="Výsledná montáž" height="1500" src="assets/foto/13-3.webp" width="1125"/></a></div></section></div></div>
</div>
</div></div>
</section></main>
```

### Výzva k akci

Závěrečný blok s nadpisem, vysvětlením a červeným tlačítkem na střed. Třídy: `r`, `tx--i`, `mw800`, `tl`, `btn`.

```html
<main class="obsah" id="obsah"><section class="r">
<div class="w"><div class="g">
<div class="c">
<div class="ir mb20 p-mb0 mt100 t-mt80 p-mt60 bg-f0f5fc">
<div class="g g--rev-t g--rev-p">
<div class="c w50 m-w58_3333 t-w100 c--mid">
<div class="c__in cptf60 t-cpt50 p-cpt28 cprf60 t-cpr50 p-cpr28 cpbf60 t-cpb50 p-cpb28 cplf60 t-cpl50 p-cpl28">
<div class="ir r--mb pt40 t-pt0">
<div class="g">
<div class="c">
<div class="tx tx--i mw800"><h2>Zjistěte jednoduše, na kolik vás vyjde klimatizace do vašeho prostoru</h2></div>
</div>
</div>
</div>
<div class="ir r--mb pb20">
<div class="g">
<div class="c">
<div class="tx tx--i mw600"><p>Pošlete nám typ objektu, počet místností a město. <strong>Nezávazně a zdarma vám připravíme cenovou nabídku</strong> na montáž klimatizace v Praze, Jižních, Středních, Západních Čechách a na Vysočině.</p></div>
</div>
</div>
</div>
<div class="ir t-pb20">
<div class="g">
<div class="c">
<div class="tl"><a class="btn" href="#">Nezávazná poptávka</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="c w50 m-w41_6667 t-w100 t-cmb25 c--fill">
<div class="c__in c--plna">
<div class="img iwp img--fill"><img alt="Profesionální instalace klimatizace na klíč od JVS Klima" height="650" src="assets/foto/klimatizace-02.webp" width="960"/></div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Obchodní údaje a mapa

Dva sloupce: fakturační údaje vlevo, mapa působnosti vpravo. Třídy: `max-width1200`, `w50`, `c--mid`, `img`.

```html
<main class="obsah" id="obsah"><section class="r r--mb max-width1200 pt120 t-pt80 p-pt60 pb60 t-pb40 p-pb20">
<div class="w"><div class="g">
<div class="c">
<div class="ir">
<div class="g">
<div class="c w50 t-w100 t-cmb25 t-ta-c c--mid">
<div class="c__in">
<div class="tx tx--m"><h3><strong><strong>Obchodní a fakturační údaje</strong></strong></h3></div>
<div class="tx"><p><strong>JVS Klima s.r.o.<br/></strong>Varšavská 715/36<br/>120 00 Praha - Vinohrady</p> <p>IČO: 21085960<br/>DIČ: CZ21085960</p></div>
</div>
</div>
<div class="c w50 t-w100 t-cmt60 p-cmt40 c--mid">
<div class="c__in">
<div class="img iwp t-iw600 p-iw320 imw1000 img--c"><img alt="JVS Klima" height="577" src="assets/foto/mapa.svg" width="1000"/></div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

## Komponenty: Formuláře

### Poptávkový formulář

Formulář na světle modrém pásu s popisky nad poli, zaoblenými poli 10 px a červenou odesílací pilulkou. Třídy: `form`, `form__f`, `form__row`, `form__req`, `field__err`, `form__odeslat`.

```html
<main class="obsah" id="obsah"><section class="r r--full pt100 p-pt60 pb80 t-pb100 p-pb40 bg-f0f5fc" id="poptavka">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="badges"><span class="badge bg-ffffff co-c3002f badge--obrys">NEZÁVAZNÁ POPTÁVKA</span></div>
<div class="tx tx--i mw680"><h2 class="h1">Popište svůj prostor a ozveme se s návrhem</h2></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx"><p>Vyplňte základní údaje a my se vám ozveme s orientační nabídkou nebo upřesňujícími otázkami.</p></div>
</div>
</div>
</div>
<div class="ir stred-max-width-form pb40 p-pb20">
<div class="g">
<div class="c">
<div><form class="form" id="poptavka-form">
<div class="form__f">
<label for="f-jmeno">Jméno a příjmení (firma) <span aria-hidden="true" class="form__req">*</span></label>
<input aria-describedby="f-jmeno-err" autocomplete="name" data-msg="Vyplňte jméno a příjmení." id="f-jmeno" maxlength="200" name="jmeno" required="" type="text"/>
<p class="field__err" hidden="" id="f-jmeno-err"></p>
</div>
<div class="form__row">
<div class="form__f">
<label for="f-email">E-mail <span aria-hidden="true" class="form__req">*</span></label>
<input aria-describedby="f-email-err" autocomplete="email" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="f-email" maxlength="200" name="email" required="" type="email"/>
<p class="field__err" hidden="" id="f-email-err"></p>
</div>
<div class="form__f">
<label for="f-telefon">Telefon <span aria-hidden="true" class="form__req">*</span></label>
<input aria-describedby="f-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 722 220 508 nebo +420 722 220 508." id="f-telefon" maxlength="40" name="telefon" placeholder="722 220 508" required="" type="tel"/>
<p class="field__err" hidden="" id="f-telefon-err"></p>
</div>
</div>
<div class="form__row">
<div class="form__f">
<span class="form__lbl" id="f-typ">Typ objektu</span>
<details class="ms ms--jeden">
<summary aria-describedby="f-typ">Vyberte</summary>
<div aria-labelledby="f-typ" class="ms__list" role="radiogroup">
<label><input name="typ" type="radio" value="Byt"/>Byt</label>
<label><input name="typ" type="radio" value="Bytový dům (SVJ)"/>Bytový dům (SVJ)</label>
<label><input name="typ" type="radio" value="Rodinný dům"/>Rodinný dům</label>
<label><input name="typ" type="radio" value="Chata"/>Chata</label>
<label><input name="typ" type="radio" value="Kancelář"/>Kancelář</label>
<label><input name="typ" type="radio" value="Hotel / penzion"/>Hotel / penzion</label>
<label><input name="typ" type="radio" value="Prodejna / provozovna"/>Prodejna / provozovna</label>
<label><input name="typ" type="radio" value="Jiné"/>Jiné</label>
</div>
</details>
</div>
<div class="form__f">
<label for="f-misto">Místo realizace <span aria-hidden="true" class="form__req">*</span></label>
<input aria-describedby="f-misto-err" autocomplete="address-level2" data-msg="Vyplňte místo realizace." id="f-misto" maxlength="200" name="misto" required="" type="text"/>
<p class="field__err" hidden="" id="f-misto-err"></p>
</div>
</div>
<div class="form__f">
<label for="f-zprava">Zpráva</label>
<textarea id="f-zprava" maxlength="5000" name="zprava" placeholder="Počet místností, přibližná plocha, termín nebo cokoliv dalšího…" rows="5"></textarea>
</div>
<div aria-hidden="true" class="form__hp"><label for="f-web">Web</label><input autocomplete="off" id="f-web" name="web" tabindex="-1" type="text"/></div>
<input name="kontrola" type="hidden" value=""/>
<input name="navsteva" type="hidden" value=""/>
<p class="form__gdpr">Odesláním souhlasíte se zpracováním <a href="#">osobních údajů</a> za účelem odpovědi na vaši poptávku.</p>
<p class="form__chyba" hidden="" id="form-chyba" role="alert">Poptávku se nepodařilo odeslat. Zkontrolujte prosím vyplněná pole nebo nám zavolejte na <a href="#">+420 722 220 508</a>.</p>
<button class="btn btn--plna form__odeslat" type="submit">Odeslat poptávku</button>
</form>
<div class="form__ok" id="odeslano" tabindex="-1"><p>Děkujeme za zprávu!</p></div></div>
</div>
</div>
</div>
<div class="ir pt20">
<div class="g">
<div class="c w33_3333 t-w100 t-cmb25">
<div class="tx"><ul> <li class="ikona-check">Projdeme vaši poptávku a připravíme orientační nabídku.</li> </ul></div>
</div>
<div class="c w33_3333 t-w100 t-cmb25">
<div class="tx"><ul> <li class="ikona-check">Poptávky řešíme co nejrychleji, většinou to stihneme za pár dnů.</li> </ul></div>
</div>
<div class="c w33_3333 t-w100">
<div class="tx"><ul> <li class="ikona-check">Domluvíme další postup, případně osobní prohlídku prostoru.</li> </ul></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

## Komponenty: Obsah

### Časté otázky

Rozbalovací otázky s červeným plusem, oddělené tenkou linkou. Třídy: `faq`, `faq__i`, `faq__a`.

```html
<main class="obsah" id="obsah"><section class="r r--full max-width900 pt120 t-pt80 p-pt60 pb40 t-pb20" id="dotazy">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c">
<div class="tx"><h2>Co lidé řeší, než se ozvou</h2></div>
</div>
</div>
</div>
<div class="faq"><details class="faq__i"><summary>Je poptávka nezávazná?</summary><div class="faq__a"><p>Ano, je. Telefonát, e-mail i osobní schůzka - vše je zdarma a nezávazné.</p></div></details><details class="faq__i"><summary>Platí se něco za orientační nabídku?</summary><div class="faq__a"><p>Ne. Orientační nabídka je zdarma a nic za ni neplatíte. Slouží vám jako podklad pro rozhodnutí a pro srovnání s ostatními dodavateli.</p></div></details><details class="faq__i"><summary>Jak rychle se ozvete?</summary><div class="faq__a"><p>Obvykle do 48 hodin. Pokud pošlete základní údaje o objektu (typ, počet místností, město), odpovíme s konkrétním návrhem dalšího kroku.</p></div></details><details class="faq__i"><summary>Musím mít připravenou dokumentaci nebo půdorys?</summary><div class="faq__a"><p>Ne. Pro první orientaci stačí popsat, o jaký prostor jde a co od klimatizace očekáváte. Fotky nebo půdorys pomohou, ale nejsou podmínkou.</p></div></details><details class="faq__i"><summary>Působíte i v mém městě?</summary><div class="faq__a"><p>Působíme v Praze, Jižních Čechách (České Budějovice, Tábor, Písek), Středních Čechách (Kladno, Mladá Boleslav, Příbram), Plzeňském kraji (Plzeň, Klatovy, Rokycany) a na Vysočině (Jihlava, Třebíč, Havlíčkův Brod) - vždy včetně okolí. Pokud si nejste jistí, zeptejte se - rádi upřesníme.</p></div></details><details class="faq__i"><summary>Kdy je nejlepší objednat klimatizaci?</summary><div class="faq__a"><p>Ideálně na jaře před začátkem sezóny, kdy jsou termíny volnější. V létě poptávka výrazně roste a čekací doby se prodlužují. Ale ozvat se můžete kdykoli - termín domluvíme.</p></div></details></div>
</div>
</div></div>
</section></main>
```

### Právní text

Stránka s právními informacemi: nadpis H1 a rozbalovací bloky. Třídy: `s-texty`, `tx--i`, `mw1100`, `faq`.

```html
<main class="obsah" id="obsah">
<section class="r r--mb pt80 t-pt40 p-pt20 pb40 p-pb20">
<div class="w"><div class="g">
<div class="c">
<div class="tx tx--i mw1100"><h1><strong>Informace o cookies a jejich použití</strong></h1></div>
</div>
</div></div>
</section>
<section class="r pb40 t-pb20 p-pb0">
<div class="w"><div class="g">
<div class="c">
<div class="faq"><details class="faq__i"><summary>Vaše soukromí</summary><div class="faq__a"><p>Web jvsklima.cz používá cookies pro měření návštěvnosti (Google Analytics) a pro měření reklam na Facebooku a Instagramu (Meta Pixel), ale jen když s nimi souhlasíte v liště cookies. Bez souhlasu uložíme jen cookie, která si pamatuje vaši volbu. Jiné cookies neukládáme. Se souhlasem s analytickými cookies si web navíc v úložišti prohlížeče zapamatuje, odkud jste na něj přišli, a připojí to k vaší poptávce.</p></div></details><details class="faq__i"><summary>Správce</summary><div class="faq__a"><p>JVS Klima s.r.o., IČO: 21085960, se sídlem Varšavská 715/36, 120 00 Praha.</p></div></details><details class="faq__i"><summary>Co web ukládá</summary><div class="faq__a"><ol>
<li><strong>CookieYes</strong> ukládá cookie cookieyes-consent, ve které si pamatuje, jak jste se v liště cookies rozhodli. Platí 1 rok.</li>
<li><strong>Google Analytics</strong> (načítá ho Google Tag Manager) ukládá po vašem souhlasu cookies _ga a _ga_*, podle kterých počítá návštěvy a zjišťuje, které stránky čtete a odkud jste přišli. Platí až 2 roky.</li>
<li><strong>Meta Pixel</strong> ukládá po vašem souhlasu cookie _fbp (a při příchodu z reklamy _fbc), podle které Meta vyhodnocuje reklamy na Facebooku a Instagramu. Platí až 3 měsíce.</li>
<li><strong>Zdroj návštěvy</strong> (záznam jvs-zdroj v úložišti prohlížeče) ukládáme jen po vašem souhlasu s analytickými cookies: odkud jste na web přišli (vyhledávač, reklama, jiný web), na kterou stránku a kdy. Když pošlete poptávku, připojíme ho k ní. Platí 30 dní, při odvolání souhlasu se smaže. Bez souhlasu do prohlížeče nic neukládáme a zdroj zjistíme, jen když přijdete rovnou na stránku Kontakt.</li>
<li>Odeslání poptávkového formuláře žádné cookies nevytváří. Písmo a fotografie načítáme přímo z našeho webu.</li>
</ol></div></details><details class="faq__i"><summary>Jak souhlas změnit nebo odvolat</summary><div class="faq__a"><p>Svou volbu můžete kdykoli změnit v <a class="cky-banner-element" href="#">nastavení cookies</a>. Cookies můžete také smazat nebo zablokovat v nastavení svého prohlížeče. Měření Google Analytics vypnete doplňkem <a href="#" rel="noopener" target="_blank">Google Analytics Opt-out</a>, reklamy od Meta v <a href="#" rel="noopener" target="_blank">nastavení reklam na Facebooku</a>.</p></div></details><details class="faq__i"><summary>Zpracovatelé cookies</summary><div class="faq__a"><ol>
<li><a href="#" rel="noopener" target="_blank"><strong>CookieYes</strong></a> - lišta cookies a uložení vašeho souhlasu.</li>
<li><a href="#" rel="noopener" target="_blank"><strong>Google</strong></a> - měření návštěvnosti (Google Analytics, Google Tag Manager).</li>
<li><a href="#" rel="noopener" target="_blank"><strong>Meta</strong></a> - měření reklam (Meta Pixel).</li>
</ol></div></details><details class="faq__i"><summary>Když se to změní</summary><div class="faq__a"><p>Pokud začneme používat další cookies, doplníme sem informaci.</p></div></details><details class="faq__i"><summary>Vaše práva a kontaktní informace</summary><div class="faq__a"><p>Přečtěte si další informace o vašich právech týkajících se<strong> <a href="#">zpracování vašich osobních údajů</a></strong>. Kontaktní údaje pro další informace a stížnosti naleznete v sekci „<strong>Kontakt</strong>“.</p></div></details></div>
</div>
</div></div>
</section>
</main>
```

### Chybová stránka

Stránka 404 s logem na střed, nadpisem H3 a seznamem odkazů. Třídy: `menu-odkazy`, `img iw220`, `h3`.

```html
<main class="obsah" id="obsah"><section class="r mb20 m-mb18 t-mb20 p-mb17 pt80 p-pt60 pb40">
<div class="w"><div class="g">
<div class="c ta-c c--mid">
<div class="c__in">
<div class="img img--mb mb40 mt40 p-mt30 iw220 p-iw200 tpb15 img--c"><a class="imgodkaz" href="#"><img alt="JVS Klima" height="80" src="assets/foto/logo.svg" width="268"/></a></div>
<div class="tx mb20 m-mb18 t-mb20 p-mb17 tx--i mw700"><h1 class="h3"><strong>Vypadá to, že to, co jste hledali, už jsme stáhli z nabídky, můžete ale zkusit některý z odkazů</strong></h1></div>
<div class="ir pt20 pb20">
<div class="g">
<div class="c ta-c">
<div class="mb-15"><ul class="menu-odkazy"><li><a href="#">Služby</a></li><li><a href="#">Klimatizace pro firmy</a></li><li><a href="#">Klimatizace do domu</a></li><li><a href="#">Typy klimatizací</a></li><li><a href="#">Jak probíhá instalace</a></li><li><a href="#">Tepelná čerpadla</a></li></ul></div>
<ul class="menu-odkazy"><li><a href="#">Realizace</a></li><li><a href="#">O nás</a></li><li><a href="#">Kontakt</a></li><li><a href="#">Nezávazná poptávka</a></li></ul>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

## Stránky

- Úvod: https://jvsklima.cz/
- Služby: https://jvsklima.cz/sluzby/
- Typy klimatizací: https://jvsklima.cz/typy-klimatizaci
- Realizace: https://jvsklima.cz/realizace
- Jak probíhá instalace: https://jvsklima.cz/prubeh-instalace
- O nás: https://jvsklima.cz/o-nas
- Kontakt: https://jvsklima.cz/kontakt
