@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   Quercus Classic – Design Parquet
   Stylopis webu. Administrace si nahoře bere proměnné a základní prvky
   (.pole, .tlacitko, .hlaska), zbytek má ve webpages.css.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --zlata-sv: #E4CFA8;   /* světlejší zlatá pro text na fotografii */
  /* Přechody trvají půl sekundy — dost na to, aby byly vidět,
     a málo na to, aby zdržovaly. */
  --prechod: .5s ease;
  --cerna:       #0D0B09;
  --tmava:       #100F0D;
  --tmava-2:     #16130F;
  --svetla:      #F0EFED;
  --bila:        #FFFFFF;
  --zlata:       #C4A06A;
  --zlata-tmava: #8A6A2F;
  --text:        #2A2724;
  --text-slaby:  #6E6862;
  --cara:        #DCD8D3;

  /* Používá administrace – gradient v hlavičce a barva nadpisů. */
  --gradient-footer: linear-gradient(90deg, #16130F, #3A2E1C);
  --fialova: #8A6A2F;

  --nadpis: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
  --telo:   "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
/* Podklad dokumentu. Dřív stál jako vložený styl přímo v hlavičce
   stránky, aby na telefonu nesvítila bílá plocha, než se stáhne tenhle
   soubor. Od chvíle, kdy stylopis blokuje vykreslení, se stejně nic
   nenakreslí dřív — a vložené styly hlásí kontroly zdrojového kódu
   jako chybu. */
html{ scroll-behavior:smooth; background:var(--cerna); }
body{
  margin:0; font-family:var(--telo); font-weight:300; font-size: 18.5px;
  line-height:1.7; color:var(--text); background:var(--svetla);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--nadpis); font-weight:400; letter-spacing:.03em; }

.preskocit{
  position:absolute; left:-9999px; top:0; z-index:1000;
  padding:12px 20px; background:var(--cerna); color:var(--zlata);
}
.preskocit:focus{ left:0; }

/* Nadpis jen pro odečítače obrazovky a vyhledávače.

   Některé pruhy stránky žádný viditelný nadpis nemají a mít ho nemají —
   čísla o firmě, mřížka realizací s filtrem, seznam dotazů. Bez nadpisu
   ale takový pruh nemá v osnově stránky jméno a kontrola přístupnosti
   ho hlásí. Nadpis je tu tedy zapsaný, jen není vidět.

   Záměrně se nepoužívá display:none ani visibility:hidden — ty odečítač
   přeskočí taky. */
.jen-pro-cteni{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.obal{ width:min(1180px, 100% - 64px); margin-inline:auto; }

/* ─────────────────────────────────────────────────────── horní lišta ─── */
/* Lišta zůstává nahoře i při rolování. Na webu s dlouhými stránkami
   je nabídka pořád po ruce, aniž by se muselo rolovat zpátky. */
.lista{
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center; gap:22px;
  padding:4px 26px; background:var(--cerna); color:#EDE7DE;
  border-bottom:1px solid rgb(196 160 106 / .16);
  transition:background var(--prechod), border-color var(--prechod);
}

/* Nad úvodní plochou lišta leží PŘES obraz, ne nad ním — obsah se pod ni
   vysune záporným okrajem, který nastaví skript podle skutečné výšky.
   Lišta pak nemá vlastní pruh a video prosvítá až nahoru. Čitelnost
   nabídky drží plynulé ztmavení, které se dole vytrácí do ztracena. */
.lista--nad-obrazem{
  background:transparent;
  border-bottom-color:transparent;
}
.lista--nad-obrazem::before{
  content:""; position:absolute; inset:0 0 auto; height:240%;
  background:linear-gradient(180deg,
    rgb(13 11 9 / .78) 0%,
    rgb(13 11 9 / .58) 30%,
    rgb(13 11 9 / .30) 58%,
    rgb(13 11 9 / .10) 80%,
    transparent 100%);
  pointer-events:none; z-index:-1;
  transition:opacity var(--prechod);
}
.lista--nad-obrazem.je-odrolovano{
  background:var(--cerna);
  border-bottom-color:rgb(196 160 106 / .16);
}
.lista--nad-obrazem.je-odrolovano::before{ opacity:0; }

/* Obraz pod lištou dostane odsazení, aby text nezmizel za nabídkou.
   Fotografie sahá až nahoru, odsazuje se jen obsah nad ní. */
.zahlavi.ma-listu-nad-sebou{ padding-top:calc(64px + var(--vyska-listy, 88px)); }
.hero.ma-listu-nad-sebou .hero__vnitrek{ padding-top:var(--vyska-listy, 88px); }
.sluzba__hlava.ma-listu-nad-sebou{ padding-top:var(--vyska-listy, 88px); }
/* Na úzké obrazovce text vyplní celou výšku, tak potřebuje ještě
   trochu vzduchu, aby se nadpis lišty nedotýkal. */
@media (max-width:760px){
  .sluzba__hlava.ma-listu-nad-sebou{ padding-top:calc(var(--vyska-listy, 88px) + 22px); }
  /* Perex i nadpis o něco menší, ať se dlouhé texty vejdou do stejné výšky. */
  .sluzba__perex{ font-size: 15.5px; line-height:1.7; }
  .oddil .zahlavi p, .zahlavi p{ font-size: 15.5px; line-height:1.7; }
}
.lista__logo{ display:flex; align-items:center; text-decoration:none; }
/* Logo je vektor z originálních podkladů, ne text. Výška 34 px je nejmenší,
   při které je „DESIGN PARQUET“ ještě čitelné. */
/* Ochranná zóna z manuálu je odsazením, ne součástí SVG. Kdyby byla
   zapečená ve viewBoxu, zabírala by 43 % plochy a nápis by při stejné
   výšce boxu vycházel o třetinu menší — a „DESIGN PARQUET" nečitelné.
   Zóna = výška velkého písmene, tedy 0,377 × výška loga. */
/* Ochranná zóna z manuálu je odsazením, ne součástí SVG — jinak by
   zabírala 43 % plochy a nápis by při stejné výšce boxu vycházel o
   třetinu menší. Zóna = výška velkého písmene, 0,377 × výška loga.
   Výška 60 px je nejmenší, při které je „DESIGN PARQUET" čitelné
   i na běžném monitoru. */
.lista__logo{ padding:14px 23px 14px 0; min-width:0; }
/* Logo je zlaté; po najetí zbělá. */
.lista__logo svg{
  height:60px; width:auto; max-width:100%; color:var(--zlata); flex:0 1 auto;
  transition:color var(--prechod);
}
.lista__logo:hover svg,
.lista__logo:focus-visible svg{ color:#F6F2EA; }
.lista__logo:focus-visible{ outline:2px solid var(--zlata); outline-offset:4px; }
.lista__logo b, .lista__logo strong{
  display:block; font-family:var(--nadpis); font-size: 15px; font-weight:500;
  letter-spacing:.14em; line-height:1.25;
}
.lista__logo i{
  display:block; font-style:normal; font-size: 9px; letter-spacing:.24em;
  color:var(--zlata); text-transform:uppercase; margin-top:2px;
}
/* Devět položek se do řádku vejde jen tehdy, když se nesmí lámat
   a mezery se stahují podle šířky okna. */
.lista__menu{ display:flex; gap:18px; margin-inline:auto; flex-wrap:nowrap; }
.lista__menu a{ white-space:nowrap; }
.lista__menu a{ transition:color var(--prechod), border-color var(--prechod);
  font-size: 13px; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; color:#EDE7DE; padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.lista__menu a:hover,
.lista__menu a[aria-current="page"]{ color:var(--zlata); border-bottom-color:var(--zlata); }
/* Přepínač jazyka. Dřív to byly dva nenápadné texty; teď je to zřetelná
   dvojice, kde je na první pohled vidět, co je zapnuté. */
.lista__jazyk{
  display:flex; align-items:center; margin:0;
  border:1px solid rgb(196 160 106 / .45); border-radius:2px; overflow:hidden;
}
.lista__jazyk a{
  padding:8px 14px; text-decoration:none;
  font-family:var(--nadpis); font-size: 13px; letter-spacing:.12em;
  color:var(--zlata); background:transparent;
  transition:background var(--prechod), color var(--prechod);
}
.lista__jazyk a:hover,
.lista__jazyk a:focus-visible{ background:rgb(196 160 106 / .22); }
.lista__jazyk a[aria-current="true"]{ background:var(--zlata); color:var(--cerna); }
.lista__jazyk span{ display:none; }

.lista__hamburger{
  display:none; margin-inline:auto 0; padding:7px 11px;
  border:1px solid #3A342D; border-radius:4px;
  background:none; color:#EDE7DE; font-size: 17px; cursor:pointer;
}

/* ─────────────────────────────────────────────────────────── tlačítka ── */
.tl{
  display:inline-block; padding:13px 30px; border:1px solid var(--zlata);
  color:var(--zlata); background:transparent; font-family:var(--nadpis);
  font-size: 13px; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background var(--prechod), color var(--prechod), border-color var(--prechod);
}
.tl:hover{ background:var(--zlata); color:var(--cerna); }
.tl--tmave{ border-color:var(--zlata-tmava); color:var(--zlata-tmava); }
.tl--tmave:hover{ background:var(--zlata-tmava); color:#fff; }

.stitek{
  font-family:var(--nadpis); font-size: 14px; letter-spacing:.20em;
  text-transform:uppercase; color:var(--text); margin:0 0 10px;
}
.stitek::after{ content:""; display:block; width:44px; height:1px; margin-top:9px; background:var(--zlata); }

/* ────────────────────────────────────────────────────── úvodní plocha ── */
.hero{ position:relative; min-height:520px; display:grid; place-items:center; padding:70px 24px; overflow:hidden; }
.hero__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Ztmavení pro čitelnost textu. Musí ležet nad videem, které má z-index 1. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgb(13 11 9 / .44) 0%, rgb(13 11 9 / .28) 45%, rgb(13 11 9 / .56) 100%);
}

/* Viněta a ztmavení pod textem. Rohy záběru se stáhnou do tmavé barvy
   webu, aby video nekončilo ostrým okrajem, a uprostřed je měkký tmavý
   ovál — okno v záběru má jas přes 240 a bílý nadpis by se v něm ztratil.
   Ovál je rozostřený, takže na videu nevznikne viditelná hrana. */
.hero::before{
  /* Video má z-index 1, vrstva musí být nad ním — se stejnou hodnotou
     by ji překreslilo, protože je v pořadí dál. */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(58% 46% at 50% 46%, rgb(13 11 9 / .46) 0%, rgb(13 11 9 / .27) 55%, transparent 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgb(13 11 9 / .36) 100%),
    linear-gradient(180deg, rgb(13 11 9 / .24) 0%, transparent 18%);
}
.hero__vnitrek{
  position:relative; z-index:3; text-align:center; color:#F6F2EA;
  /* Měkký stín pod písmem — pojistka pro světlé části záběru. */
  text-shadow:0 2px 18px rgb(13 11 9 / .65), 0 1px 3px rgb(13 11 9 / .45);
}
.hero__znak{ width:78px; height:78px; margin:0 auto 22px; color:#F6F2EA; }
.hero__nazev{ font-size: clamp(39px, 5.4vw, 69px); letter-spacing:.06em; margin:0; line-height:1.05; }
.hero__linka{ width:190px; height:1px; margin:16px auto 12px; background:var(--zlata); }
.hero__podnazev{ font-family:var(--nadpis); font-size: clamp(16px,1.7vw,23px); letter-spacing:.30em; margin:0; }
.hero__claim{
  margin:22px 0 0; font-family:var(--nadpis); color:var(--zlata-sv, #E4CFA8);
  font-size: clamp(13.5px,1.5vw,19px); letter-spacing:.16em; text-transform:uppercase;
  text-shadow:0 2px 16px rgb(13 11 9 / .9), 0 0 42px rgb(13 11 9 / .7);
}
/* Odsazení i rozestup řeší mřížka — vlastní okraje by mezi tlačítka
   přidaly dalších 10 až 26 px a lišila by se od podstránek. */
.hero .tl{ margin-top:0; }
.hero__tlacitka .tl + .tl{ margin-left:0; }
.hero__popisek{
  position:absolute; left:24px; bottom:16px; z-index:2;
  font-size: 12px; letter-spacing:.12em; text-transform:uppercase; color:#B8B0A6;
}
.hero__body{ position:absolute; right:26px; top:50%; transform:translateY(-50%); z-index:3; display:flex; flex-direction:column; gap:9px; }
.hero__body button{
  width:12px; height:12px; padding:0; border:0; border-radius:50%;
  background:none; cursor:pointer; display:grid; place-items:center;
}
.hero__body button::before{ content:""; width:6px; height:6px; border-radius:50%; background:rgb(246 242 234 / .35); }
.hero__body button[aria-current="true"]::before{ background:var(--zlata); }
.hero__snimek{ display:none; }
.hero__snimek.je-videt{ display:block; }

/* Malá úvodní plocha na podstránkách. */
/* Všechna záhlaví podstránek jsou stejně vysoká — 480 px jako u služeb.
   Dřív se výška řídila délkou textu a kolísala mezi 336 a 387 px, což
   bylo při proklikávání znát. Obsah se drží uprostřed. */
.zahlavi{
  position:relative; min-height:480px; padding:64px 0;
  display:grid; align-content:center;
  background:var(--tmava-2); color:#F6F2EA; text-align:center; overflow:hidden;
}
.zahlavi__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34; }
.zahlavi__vnitrek{ position:relative; z-index:2; }
.zahlavi h1{ font-size: clamp(30px,3.4vw,46px); text-transform:uppercase; letter-spacing:.08em; margin:0; }
.zahlavi p{ max-width:56ch; margin:14px auto 0; color:#CFC7BC; font-size: 16.5px; }

/* ─────────────────────────────────────────────────────────────── obsah ─ */
.oddil{ padding:76px 0; }
.oddil--svetly{ background:var(--svetla); }
/* Dva oddíly se stejným pozadím za sebou. Odsazení obou se sčítá
   a vzniká dvojnásobná mezera, která vypadá jako chyba — přitom
   předěl není vidět, protože barva je stejná. Druhý v pořadí proto
   horní odsazení nemá.

   Pravidlo je obecné, ne pro jednu stránku: pořadí oddílů si klient
   mění ve správě a dvojice stejných pozadí může vzniknout kdekoli. */
.oddil--svetly + .oddil--svetly,
.oddil--bily + .oddil--bily{ padding-top:0; }

/* Oddíl, který si spodní mezeru nedělá sám. */
.oddil--bezSpodni{ padding-bottom:0; }

/* Po něm se ale horní odsazení ubírat nesmí — spodní tam žádné není
   a mezera by vyšla nulová. Vrací se plná, aby mezi oddíly zbyla
   stejná mezera jako všude jinde. */
.oddil--bezSpodni + .oddil{ padding-top:76px; }
.oddil--bily{ background:var(--bila); }
.oddil h2{ font-size: clamp(25.5px,2.6vw,37px); line-height:1.35; margin:0 0 24px; text-transform:uppercase; }
.oddil p{ font-size: 16.5px; line-height:1.85; color:#514B45; margin:0 0 16px; }
/* Fotografie vyplní celou výšku textového sloupce. Dřív měla pevný
   poměr 3:2, byla vystředěná a nad ní i pod ní zůstával prázdný pás. */
.dvojice{ display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:stretch; }
.dvojice p{ max-width:46ch; }
.dvojice__text{ align-self:center; }
/* Jen fotografie vložená přímo do dvojice se roztahuje na výšku sloupce.
   Obrázky uvnitř rámečků — třeba čtvercový vzorek v detailu — si mají
   držet vlastní poměr stran. */
.dvojice > img{ width:100%; height:100%; min-height:100%; object-fit:cover; display:block; }
.dvojice--obraceno .dvojice__text{ order:2; }

/* ──────────────────────────────────────────────────────────── showroom ─ */
.showroom{ background:var(--tmava-2); color:#E8E1D7; padding:54px 0; }
.showroom__mrizka{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.showroom h2{ color:var(--zlata); font-size: clamp(22px,2.2vw,30px); margin:0 0 16px; text-transform:uppercase; }
.showroom p{ font-size: 15.5px; line-height:1.8; color:#B8B0A6; margin:0 0 22px; }
.showroom__udaje{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; text-align:center; }
.udaj__kolecko{
  width:52px; height:52px; margin:0 auto 12px; border-radius:50%;
  border:1px solid var(--zlata); display:grid; place-items:center; color:var(--zlata);
}
.udaj__kolecko svg{ width:21px; height:21px; }
.udaj p{ margin:0; font-size: 12.5px; line-height:1.75; letter-spacing:.05em; text-transform:uppercase; color:#CFC7BC; }
.udaj a{ text-decoration:none; }
.udaj a:hover{ color:var(--zlata); }

/* ───────────────────────────────────────────────────────────── služby ───
   Čtyři služby vedle sebe. Fotografie nahoře, text pod ní na světlém
   podkladu — přes fotografii byl špatně čitelný. Na užší obrazovce
   se zalomí do dvojic, nikdy nezůstane osamocená karta v řadě. */
.karty{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:20px; margin-top:32px;
}
.karta{
  display:flex; flex-direction:column;
  background:var(--bila); border:1px solid var(--cara);
  text-decoration:none; color:inherit; overflow:hidden;
  transition:border-color var(--prechod);
}
.karta:hover{ border-color:var(--zlata); }
.karta__foto{ position:relative; overflow:hidden; }
.karta__foto img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .5s;
}
.karta:hover .karta__foto img{ transform:scale(1.04); }
.karta__ikona{
  position:absolute; left:22px; bottom:18px; z-index:2;
  width:46px; height:46px; color:#F6F2EA;
  filter:drop-shadow(0 1px 4px rgb(13 11 9 / .6));
}
/* Popis drží čtyři řádky bez ohledu na to, jak se text zalomí v jiném
   prohlížeči — Windows sází písmo o kousek šířeji než Linux a texty by
   jinak končily pokaždé jinde. Delší text se ořízne, kratší dorovná
   prázdným místem, takže karty zůstanou souměrné vždy. */
.karta__vnitrek{
  display:flex; flex-direction:column; flex:1;
  padding:24px 24px 26px;
}
/* Název karty je značka h2, ale vypadá pořád jako dřív jako h3.
   Řádkování se dědí po obalu — obecné `.oddil h2` ho nastavuje na
   1.35 a karty by se tím srazily. */
.karta h3,
.karta .karta__nadpis{
  font-size: 17px; letter-spacing:.13em; text-transform:uppercase;
  margin:0 0 12px; color:var(--text); line-height:inherit;
}
/* Popis drží čtyři řádky bez ohledu na to, jak se text zalomí v jiném
   prohlížeči — Windows sází písmo o kousek šířeji než Linux a texty by
   jinak končily pokaždé jinde. Delší text se ořízne, kratší dorovná
   prázdným místem, takže karty zůstanou souměrné vždy. */
.oddil .karta p,
.karta p{
  font-size: 15px; line-height:1.75; color:#514B45;
  margin:0 0 24px; flex:0 0 auto;
  height:calc(4 * 1.75em);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Prázdné místo pod textem vyplní pružná mezera, aby tlačítko zůstalo dole. */
.karta__vnitrek::before{ content:""; flex:1; }
/* Tlačítko vyplní šířku karty a má pevnou výšku — jinak jsou čtyři
   různě dlouhé texty čtyři různě velká tlačítka. */
.karta .tl{
  align-self:stretch; display:flex; align-items:center; justify-content:center;
  min-height:52px; text-align:center;
}

/* Čtyři sloupce mají pod 1200 px sotva 200 px na kartu a čtyři řádky
   textu se do nich nevejdou. Přepínáme proto na dva už dřív. */
@media (max-width:1200px){ .karty{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .karty{ grid-template-columns:1fr; } }

/* ─────────────────────────────────────────────────── kolekce a vzory ─── */
/* Základní mřížka vzorů. Konkrétní velikost dlaždice je níž u .vzory,
   aby byla stejná na podstránkách i ve vzorníku. */
.vzory{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; margin-top:28px; }
.vzor figure{ margin:0; }
.vzor img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.vzor h3{ font-size: 13.5px; letter-spacing:.07em; text-transform:uppercase; margin:0 0 4px; line-height:1.4; }
.vzor p{ font-size: 13px; line-height:1.6; color:#514B45; margin:0; }

/* ─────────────────────────────────────────────────────────── realizace ─ */
.realizace__mrizka{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:24px; }
.realizace__mrizka--velka{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.realizace figure{ margin:0; position:relative; overflow:hidden; }
.realizace img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .5s; }
.realizace figure:hover img{ transform:scale(1.05); }
/* Popisek realizace. Drží se na jednom řádku — když se zalomil, zůstalo
   na druhém řádku samotné číslo popisné a vypadalo to jako chyba.
   Delší název se raději zkrátí třemi tečkami. */
.realizace figcaption{
  position:absolute; inset:auto 0 0 0; padding:26px 18px 14px;
  background:linear-gradient(180deg, transparent, rgb(13 11 9 / .86));
  color:#F6F2EA; font-family:var(--nadpis); font-size: 11px;
  letter-spacing:.04em; text-transform:uppercase; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.realizace__stred{ text-align:center; margin-top:30px; }

/* ────────────────────────────────────────────────────────── rozbalovák ─ */
.dotaz{ border-bottom:1px solid var(--cara); }
.dotaz summary{
  padding:18px 0; cursor:pointer; list-style:none;
  font-family:var(--nadpis); font-size: 18.5px; letter-spacing:.03em;
  display:flex; justify-content:space-between; gap:20px; align-items:center;
}
.dotaz summary::-webkit-details-marker{ display:none; }
.dotaz summary::after{ content:"+"; color:var(--zlata); font-size: 23px; }
.dotaz[open] summary::after{ content:"–"; }
.dotaz p{ margin:0 0 20px; font-size: 16.5px; line-height:1.85; color:#514B45; max-width:70ch; }

/* ────────────────────────────────────────────────────────── formuláře ── */
.formular{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; max-width:720px; }
.formular__pole--siroke{ grid-column:1 / -1; }
.formular label{ display:block; margin-bottom:6px; font-size: 15px; letter-spacing:.06em; text-transform:uppercase; }
.pole{
  width:100%; min-height:46px; padding:11px 14px; border:1px solid var(--cara);
  border-radius:0; background:var(--bila); font:inherit; font-size: 17px; color:var(--text);
}
.pole:focus{ outline:2px solid var(--zlata-tmava); outline-offset:1px; }
.pole--chyba{ border-color:#B02A2A; }
textarea.pole{ min-height:150px; resize:vertical; line-height:1.7; }
.chyba{ margin:6px 0 0; color:#B02A2A; font-size: 15px; }
.napoveda{ margin:6px 0 0; color:var(--text-slaby); font-size: 15px; }
.zaskrt{ display:flex; gap:10px; align-items:flex-start; font-size: 15.5px; text-transform:none; letter-spacing:0; }
.zaskrt input{ width:18px; height:18px; margin-top:3px; flex:0 0 auto; }
.volby{ display:flex; flex-wrap:wrap; gap:10px 18px; }
/* Honeypot. Nesmí být display:none – část robotů takové pole přeskočí. */
.past{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.tlacitko{
  display:inline-block; padding:14px 32px; border:1px solid var(--zlata-tmava);
  background:var(--zlata-tmava); color:#fff; font-family:var(--nadpis);
  font-size: 14px; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
}
.tlacitko:hover{ filter:brightness(1.1); }
.tlacitko--male{ padding:11px 24px; font-size: 13px; }

.hlaska{ padding:14px 18px; margin:0 0 20px; font-size: 16.5px; border:1px solid; }
.hlaska--uspech{ background:#E8F5EC; border-color:#B7DDC4; color:#1E7A46; }
.hlaska--chyba{ background:#FBECEC; border-color:#E5BFBF; color:#B02A2A; }
.pod-formularem{ margin-top:16px; font-size: 16px; }

/* ─────────────────────────────────────────────────────────────── patka ─ */
.patka{ background:var(--tmava); color:#B8B0A6; padding:52px 0 0; }
/* Sloupec se showroomem dostane víc místa — adresa i parkování se do něj
   musí vejít na jeden řádek. */
.patka__mrizka{ display:grid; grid-template-columns:1.1fr 0.9fr 1.25fr 1.15fr; gap:32px; }
.patka__logo{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.patka__logo{ display:inline-block; padding:0 34px 34px 0; text-decoration:none; }
.patka__logo:focus-visible{ outline:2px solid var(--zlata); outline-offset:4px; }
.patka__logo svg{
  height:120px; width:auto; max-width:100%; color:var(--zlata);
  transition:color var(--prechod);
}
.patka__logo:hover svg,
.patka__logo:focus-visible svg{ color:#F6F2EA; }
.patka__logo b, .patka__logo strong{ display:block; font-family:var(--nadpis); font-size: 16px; font-weight:500; letter-spacing:.13em; color:#EDE7DE; }
.patka__logo i{ display:block; font-style:normal; font-size: 9px; letter-spacing:.24em; color:var(--zlata); text-transform:uppercase; }
/* Nadpisy sloupců patičky. Značka se u nich liší — jeden je h3,
   zbytek obyčejný div — proto vzhled drží třída, ne značka. */
.patka h2,
.patka .patka__nadpis{ font-family:var(--nadpis); font-size: 14px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:#EDE7DE; margin:0 0 16px; line-height:inherit; }
.patka p, .patka li{ font-size: 14.5px; line-height:2; margin:0; }
.patka ul{ list-style:none; margin:0; padding:0; }
.patka a{ text-decoration:none; }
.patka a:hover{ color:var(--zlata); }
.patka__site{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.patka__site a{
  width:36px; height:36px; border:1px solid #3A342D; border-radius:50%;
  display:grid; place-items:center; color:var(--zlata);
  transition:border-color var(--prechod), background var(--prechod);
}
.patka__site a:hover{ border-color:var(--zlata); background:rgb(196 160 106 / .12); }
.patka__site svg{ width:16px; height:16px; }
/* Kontaktní sloupec je poslední a zarovnaný k pravému okraji. */
/* Všechny sloupce patičky zarovnané stejně doleva. Kontakt je poslední
   v pořadí, ale text v něm teče jako všude jinde. */

.patka__spodek{
  margin-top:44px; border-top:1px solid #23201C; padding:16px 0;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size: 13px; color:#6E6862;
}
.patka__spodek a{ text-decoration:none; }

/* ───────────────────────────────────────────────────────── cookie lišta ─
   Přijmout a Odmítnout mají shodné provedení — jedna třída, žádná
   výjimka. Nastavení a Zavřít jsou vedlejší volby, ale plnou velikostí,
   ať se dají na telefonu trefit. */
/* Lišta přijede zespodu vteřinu po načtení. Hned při otevření by
   překryla obsah dřív, než se ho stihne kdokoli chytit. */
.cookies{
  position:fixed; inset:auto 16px 16px; z-index:800;
  transform:translateY(calc(100% + 24px));
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
  max-width:660px; margin-inline:auto; padding:26px 28px;
  background:var(--tmava-2); color:#CFC7BC; border:1px solid #3A342D;
  box-shadow:0 12px 40px rgb(0 0 0 / .35);
}
.cookies[hidden]{ display:none; }
.cookies.je-venku{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .cookies{ transition:none; }
}
.cookies h2,
.cookies .cookies__nadpis{
  margin:0 0 10px; font-size: 15px; letter-spacing:.14em;
  text-transform:uppercase; color:#EDE7DE;
  font-family:var(--nadpis); font-weight:400; line-height:inherit;
}
.cookies p{ margin:0 0 22px; font-size: 15px; line-height:1.75; }
.cookies a{ color:var(--zlata); }

.cookies__volby{ display:flex; gap:12px; flex-wrap:wrap; }
/* Všechny čtyři volby mají shodnou šířku i na jednom řádku — proto
   menší základ, aby se do lišty vešly a žádná se neroztáhla přes celý
   pruh. Na úzké obrazovce se zalomí do dvojic. */
.cookies__tl{
  flex:1 1 150px; min-width:0; min-height:46px; padding:12px 14px;
  border:1px solid var(--zlata); background:transparent; color:var(--zlata);
  font-family:var(--nadpis); font-size: 13px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
}
.cookies__tl:hover{ background:var(--zlata); color:var(--cerna); }
.cookies__tl:focus-visible{ outline:2px solid var(--zlata); outline-offset:2px; }
/* Vedlejší volby se liší jen sytostí rámečku, ne velikostí. */
.cookies__tl--vedlejsi{ border-color:#5C544A; color:#B8B0A6; }
.cookies__tl--vedlejsi:hover{ background:#5C544A; color:#F6F2EA; }

.cookies__zavrit{
  position:absolute; top:10px; right:12px; width:32px; height:32px;
  border:0; background:none; color:#8C8378; font-size:22px; line-height:1; cursor:pointer;
}
.cookies__zavrit:hover{ color:#EDE7DE; }
.cookies__zavrit:focus-visible{ outline:2px solid var(--zlata); outline-offset:2px; }
.cookies h2,
.cookies .cookies__nadpis{ padding-right:36px; }

.cookies__nastaveni[hidden]{ display:none; }
.cookies__skupina{ padding:16px 0; border-top:1px solid #3A342D; }
.cookies__skupina label{ display:flex; gap:14px; align-items:flex-start; cursor:pointer; }
.cookies__skupina input{ width:19px; height:19px; margin-top:3px; flex:0 0 auto; accent-color:var(--zlata); }
.cookies__skupina input:disabled{ cursor:default; opacity:.55; }
.cookies__skupina b, .cookies__skupina strong{
  display:block; margin-bottom:5px; color:#EDE7DE;
  font-family:var(--nadpis); font-size: 14px; font-weight:400;
  letter-spacing:.10em; text-transform:uppercase;
}
.cookies__skupina span{ font-size: 14px; line-height:1.7; }
.cookies__patka{ display:flex; gap:12px; flex-wrap:wrap; padding-top:20px; }

/* ──────────────────────────────────────────────────────── responzivita ─ */
@media (max-width:1340px){
  .lista__logo svg{ height:52px; }
  .lista__menu{ gap:14px; }
  .lista__menu a{ transition:color var(--prechod), border-color var(--prechod); font-size: 12px; letter-spacing:.08em; }
}
@media (max-width:1180px){
  .lista__logo svg{ height:44px; }
  .lista__menu{ gap:11px; }
  .lista__menu a{ transition:color var(--prechod), border-color var(--prechod); font-size: 11.5px; letter-spacing:.06em; }
}
/* Nabídka se sbaluje dřív než zbytek rozvržení. Deset položek se sice
   do 1000 px vejde, ale jen zmenšené natolik, že lišta působí přeplněně. */
@media (max-width:1150px){
  .lista__hamburger{ display:block; flex:0 0 auto; margin-left:2px; }
  .lista__jazyk{ margin-left:auto; }
  .lista__menu{
    display:none; position:absolute; inset:64px 0 auto; z-index:700;
    flex-direction:column; gap:0; padding:8px 0; background:var(--cerna);
    /* Bez linky nahoře — lišta má při rozbalení stejný podklad, takže
       by mezi logem a nabídkou zůstal viditelný předěl. */
  }
  .lista__menu.je-videt{ display:flex; }
  .lista__menu a{ transition:color var(--prechod), border-color var(--prechod); padding:13px 32px; border-bottom:0; }
  /* Rozbalená nabídka visí pod lištou, která zůstává nahoře. */
  .lista__menu{ top:100%; }
}

@media (max-width:1000px){
  .dvojice, .showroom__mrizka{ grid-template-columns:1fr; gap:34px; }
  .dvojice--obraceno .dvojice__text{ order:0; }
  .realizace__mrizka{ grid-template-columns:repeat(2,1fr); }
  .patka__mrizka{ grid-template-columns:1fr 1fr; gap:30px; }

  /* Na úzké obrazovce se do řádku vejde logo, jazyk a hamburger jen
     když se všechno zmenší a odsazení loga stáhne. */
  .lista{ gap:10px; padding:4px 14px; }
  .lista__logo{ padding:10px 10px 10px 0; }
  .lista__logo svg{ height:38px; }
  .lista__jazyk{ margin-left:auto; }
  .lista__jazyk a{ padding:6px 10px; font-size: 11.5px; letter-spacing:.08em; }
  .lista__hamburger{ display:block; flex:0 0 auto; margin-left:2px; }
}
@media (max-width:700px){
  .obal{ width:calc(100% - 36px); }
  .showroom__udaje{ grid-template-columns:1fr 1fr; gap:26px; }
  .patka__mrizka{ grid-template-columns:1fr; }
  .hero{ min-height:440px; }
  .oddil{ padding:52px 0; }
  .formular{ grid-template-columns:1fr; }
  .cookies{ inset:auto 10px 10px; padding:22px 20px; }
  .cookies__tl{ flex:1 1 calc(50% - 6px); }
}
@media (max-width:430px){
  .realizace__mrizka{ grid-template-columns:1fr; }
  .showroom__udaje{ grid-template-columns:1fr; }
  .lista{ padding:12px 18px; gap:14px; }
  .lista__menu{ inset:60px 0 auto; }
  .cookies__tl{ flex:1 1 100%; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* ───────────────────────────────────────────────────────────── vzorník ─── */
.vzornik__filtr{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; }
.vzornik__filtr a{
  padding:10px 20px; border:1px solid var(--cara); background:var(--bila);
  font-family:var(--nadpis); font-size: 13px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--text);
}
.vzornik__filtr a:hover{ border-color:var(--zlata-tmava); color:var(--zlata-tmava); }
.vzornik__filtr a[aria-current="page"]{
  background:var(--zlata-tmava); border-color:var(--zlata-tmava); color:#fff;
}
.oddil h2.vzornik__skupina{
  font-size: 17px; letter-spacing:.16em; text-transform:uppercase;
  margin:82px 0 26px; padding-bottom:12px; border-bottom:1px solid var(--cara);
}
.oddil h2.vzornik__skupina:first-of-type{ margin-top:0; }
/* Mřížka pod nadpisem skupiny nesmí navazovat těsně. */
.vzornik__skupina + .vzornik{ margin-top:30px; }

/* Vzorky menší — s pětadvaceti položkami je přehled důležitější než
   velikost jednotlivé dlaždice. */
.vzornik{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; }
/* Dlaždice ve vzorníku je odkaz — stejné chování jako na podstránkách. */
.vzornik .vzor{
  background:var(--bila); display:flex; flex-direction:column;
  text-decoration:none; color:inherit; border:1px solid var(--cara);
  transition:border-color var(--prechod);
}
.vzornik .vzor:hover{ border-color:var(--zlata); }
.vzornik .vzor figure, .vzornik .vzor__detail{ overflow:hidden; }
.vzornik .vzor__detail{ transition:transform .5s; }
.vzornik .vzor:hover .vzor__detail{ transform:scale(1.04); }
/* Šipka musí zůstat na řádku s textem, jinak visí sama pod ním. */
.vzornik .vzor__vic{
  display:block; margin-top:auto; padding-top:8px; white-space:nowrap;
  font-family:var(--nadpis); font-size: 11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--zlata-tmava);
}
.vzor__detail{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.vzor__telo{ padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; }
/* Název vzoru — stejná velikost ve vzorníku i na podstránkách služeb. */
.vzor__telo h3{ font-size: 13.5px; letter-spacing:.07em; text-transform:uppercase; margin:0 0 4px; line-height:1.4; }
.vzor__kod{
  margin:5px 0 0; font-size: 13px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--zlata-tmava);
}
.vzor__popis{ margin:14px 0 0; font-size: 15.5px; line-height:1.75; color:#514B45; }

/* Technické údaje. Dvojice název – hodnota, aby se daly číst i po telefonu. */
.vzor__udaje{ margin:18px 0 0; padding:0; }
.vzor__udaj{
  display:flex; justify-content:space-between; gap:16px;
  padding:8px 0; border-top:1px solid #EFECE8;
}
.vzor__udaj dt{ font-size: 14px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-slaby); }
.vzor__udaj dd{ margin:0; font-size: 15.5px; text-align:right; }
.vzor__interier{ width:100%; aspect-ratio:3/2; object-fit:cover; margin-top:20px; }
.vzornik__pozn{
  margin:40px 0 0; padding:18px 22px; background:var(--bila);
  border-left:2px solid var(--zlata); font-size: 15.5px; line-height:1.8; color:#514B45;
}

@media (max-width:430px){
  .vzornik{ grid-template-columns:1fr; }
  .vzor__udaj{ flex-direction:column; gap:2px; }
  .vzor__udaj dd{ text-align:left; }
}

/* ═══════════════════════════════════════════════════════════════════════
   OCHRANNÉ OBLASTI
   Po zvětšení písma se text na některých místech dostával těsně
   k tlačítkům. Tady se hlídá odstup — nikde se nic nedotýká.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tlačítko uvnitř karty i oddílu má nad sebou vždy volný pruh. */
.karta p{ margin-bottom: 28px; }
.karta__vnitrek .tl{ margin-top: 4px; }
.oddil p + .tl,
.oddil p + .tl--tmave,
.dvojice__text p + .tl{ margin-top: 12px; }
.hero__claim + .tl{ margin-top: 30px; }
.showroom p + .tl{ margin-top: 6px; }

/* Nadpis oddílu a mřížka pod ním. */
.stitek{ margin-bottom: 16px; }
.karty{ margin-top: 32px; }
.realizace__mrizka{ margin-top: 30px; }
.vzory,
.vzornik{ margin-top: 32px; }

/* Tlačítka vedle sebe se nesmí dotýkat ani při zalomení. */
.tl + .tl{ margin-left: 10px; }
.realizace__stred{ margin-top: 36px; }

/* Vzorník — po zvětšení písma potřebují údaje víc místa. */
.vzor__telo{ padding: 24px 24px 26px; }
.vzor__udaj{ padding: 10px 0; gap: 20px; }
.vzornik__filtr{ gap: 10px; margin-bottom: 38px; }


/* Formulář — popisek, pole i nápověda mají svůj prostor. */
.formular{ gap: 22px 24px; }
.formular label{ margin-bottom: 8px; }
.formular__pole--siroke .tlacitko{ margin-top: 8px; }
.zaskrt{ line-height: 1.65; }

/* Patička — sloupce se po zvětšení písma nesmí slít. */
.patka__mrizka{ gap: 40px; }
.patka h2,
.patka .patka__nadpis{ margin-bottom: 18px; }

/* ═══════════════════════════════════════════════════════════════════════
   POPTÁVKOVÝ FORMULÁŘ
   Rozdělený do čtyř kroků. Není to obecný kontaktní formulář — každá
   otázka tu je proto, že bez odpovědi nejde připravit nabídku.
   ═══════════════════════════════════════════════════════════════════════ */
.poptavka__uvod{ max-width:62ch; margin-bottom:36px; }

.poptavka__krok{
  margin:0 0 30px; padding:28px 30px 26px;
  background:var(--bila); border:1px solid var(--cara);
}
/* Nadpis kroku je stejný štítek jako u ostatních oddílů webu — verzálky,
   prostrkání a zlatá linka pod textem. Kroužek s číslem sem nepatřil,
   v grafice webu nic takového není. */
/* Každý krok je vlastní karta na bílém — čtyři skupiny polí za sebou
   na jednom podkladu splývaly v jeden dlouhý formulář. */
.poptavka__krok{
  border:1px solid var(--cara); background:var(--bila);
  padding:30px 34px 32px; margin:0 0 20px;
}
.poptavka__krok legend{
  float:left; width:100%; padding:0; margin:0 0 26px;
  display:flex; align-items:center; gap:16px;
  font-family:var(--nadpis); font-size: 15px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text);
}
.poptavka__krok legend::after{
  content:""; flex:1; height:1px; background:var(--cara);
}
.poptavka__krok > *{ clear:both; }
.poptavka__cislo{
  flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%; background:var(--zlata-tmava); color:#fff;
  font-size: 14px; letter-spacing:0;
}
@media (max-width:760px){
  .poptavka__krok{ padding:24px 20px 26px; }
}

/* Výběr služby — dlaždice, ne rozbalovací seznam. */
.poptavka__dlazdice{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px; margin-bottom:26px;
}
.volba{ position:relative; display:block; cursor:pointer; }
.volba input{ position:absolute; opacity:0; width:1px; height:1px; }
.volba span{
  display:block; height:100%; padding:16px 18px;
  border:1px solid var(--cara); background:var(--svetla);
}
.volba b, .volba strong{
  display:block; font-family:var(--nadpis); font-size: 15px;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px;
}
.volba em{ display:block; font-style:normal; font-size: 14px; line-height:1.6; color:#5F5952; }
.volba input:checked + span{
  border-color:var(--zlata-tmava); background:var(--bila);
  box-shadow:inset 0 0 0 1px var(--zlata-tmava);
}
.volba input:focus-visible + span{ outline:2px solid var(--zlata-tmava); outline-offset:2px; }

.pole-radek{ display:grid; grid-template-columns:1fr 1fr; gap:22px 24px; }
.pole-radek .formular__pole{ min-width:0; }
.poptavka__krok .formular__pole + .formular__pole{ margin-top:0; }
.poptavka__krok > .formular__pole{ margin-top:22px; }

.poptavka__zaskrty{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px;
}
.poptavka__zaskrty .zaskrt{
  padding:15px 17px; background:var(--svetla); border:1px solid var(--cara);
  align-items:flex-start;
}
.poptavka__zaskrty .zaskrt b, .zaskrt strong{ font-weight:500; }
.poptavka__zaskrty .zaskrt em{
  display:block; margin-top:5px; font-style:normal;
  font-size: 13px; line-height:1.6; color:var(--text-slaby);
}
.poptavka__odeslat{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.poptavka__odeslat .napoveda{ margin:0; }

/* Části formuláře, které dávají smysl jen u některé služby. Bez
   JavaScriptu zůstanou vidět všechny — formulář je pak delší, ale funkční. */
.poptavka [data-jen].je-schovane{ display:none; }

@media (max-width:760px){
  .pole-radek, .poptavka__zaskrty{ grid-template-columns:1fr; }
  .poptavka__krok{ padding:22px 18px; }
  .poptavka__dlazdice{ grid-template-columns:1fr; }
}

/* ─────────────────────────────────────────────────────── videoslider ────
   Záběr může být video i fotografie. Video běží bez zvuku a dokola,
   fotografie slouží jako plakát — ukáže se, než se video načte. */
.hero__video{ object-fit:cover; }
.hero__snimek{ position:absolute; inset:0; display:none; }
.hero__snimek.je-videt{ display:block; }
.hero__snimek picture, .hero__snimek img, .hero__snimek video{
  width:100%; height:100%; object-fit:cover; display:block;
}
@media (prefers-reduced-motion: reduce){
  /* Kdo má vypnuté animace, uvidí jen plakát. */
  .hero__video{ display:none; }
  .hero__snimek{ background-size:cover; background-position:center; }
}

/* Dvě cesty dál — návštěva showroomu a nezávazná poptávka. */
/* Obě tlačítka mají stejné provedení i stejný efekt. Jedno plné a jedno
   obrysové by naznačovalo, že jedna cesta je ta správná — přitom obě
   vedou k témuž, jen jinudy. */
/* Mřížka o dvou stejných sloupcích — obě tlačítka vyjdou stejně široká
   bez ohledu na délku textu. */
.hero__tlacitka{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px; max-width:740px; margin:34px auto 0;
}
/* Tlačítka leží na videu, kde se pozadí mění. Sytější podklad a světlejší
   písmo je drží čitelná i na světlém záběru. */
.hero__tlacitka .tl{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:58px; text-align:center;
  border-color:var(--zlata); color:#F6F2EA;
  background:rgb(13 11 9 / .58);
  backdrop-filter:blur(2px);
  text-shadow:0 1px 10px rgb(13 11 9 / .8);
  transition:background var(--prechod), color var(--prechod);
}
.hero__tlacitka .tl:hover,
.hero__tlacitka .tl:focus-visible{ background:var(--zlata); color:var(--cerna); }
@media (max-width:620px){
  .hero__tlacitka{ grid-template-columns:1fr; }
}


/* ── podstránky vzorů a realizací ─────────────────────────────────────── */
.zahlavi__drobecek{
  margin:0 0 14px; font-family:var(--nadpis); font-size: 13px;
  letter-spacing:.16em; text-transform:uppercase;
}
.zahlavi__drobecek a{ color:var(--zlata); text-decoration:none; }
.zahlavi__drobecek a:hover{ text-decoration:underline; }
.zahlavi__kod{
  margin:12px 0 0; font-family:var(--nadpis); font-size: 14px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--zlata);
}
.vzor__udaje--velke{ margin:0 0 26px; }
.vzor__udaje--velke .vzor__udaj{ padding:13px 0; border-top:1px solid var(--cara); }
.vzor__udaje--velke dt{ font-size: 14px; }
.vzor__udaje--velke dd{ font-size: 16px; }
.vzor__tlacitka{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.vzor__tlacitka .tl + .tl{ margin-left:0; }
/* Jen odkaz obalující fotografii, ne každý odkaz v oddílu — jinak se
   blokem stane i tlačítko pod mřížkou a roztáhne se přes celou šířku. */
.realizace__mrizka a{ text-decoration:none; color:inherit; display:block; }

/* Nadpis skupiny polí ve formuláři návštěvy — stejný jako štítky oddílů. */
.poptavka__legenda{
  padding:0; margin:0 0 14px; font-family:var(--nadpis); font-size: 14px;
  letter-spacing:.20em; text-transform:uppercase; color:var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════
   KARTA VZORU V MŘÍŽCE KOLEKCE
   Třída .vzor se používá na dvou místech — tady v mřížce na stránkách
   služeb a pak ve vzorníku. Pravidla vzorníku jsou v souboru výš, proto
   je tenhle blok až na konci a je zanořený pod .vzory.
   ═══════════════════════════════════════════════════════════════════════ */
/* Stejná velikost jako ve vzorníku — dlaždice na podstránkách služeb
   se dřív kreslily větší a při přechodu na vzorník to bylo znát. */
.vzory{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:18px; margin-top:32px;
}
.vzory .vzor{
  display:flex; flex-direction:column;
  background:var(--bila); border:1px solid var(--cara);
  text-decoration:none; color:inherit; transition:border-color var(--prechod);
}
.vzory .vzor:hover{ border-color:var(--zlata); }
.vzory .vzor figure{ margin:0; overflow:hidden; }
.vzory .vzor img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .5s;
}
.vzory .vzor:hover img{ transform:scale(1.04); }

/* Ochranná oblast textu — bez ní se název lepil na okraj karty. */
.vzory .vzor__text{
  display:flex; flex-direction:column; flex:1;
  padding:14px 16px 16px;
}
.vzory .vzor h3{
  font-size: 13.5px; letter-spacing:.07em; text-transform:uppercase;
  margin:0 0 4px; line-height:1.4;
}
.vzory .vzor__udaj-radek{
  display:block; font-size: 12.5px; color:var(--text-slaby); margin:0 0 8px;
}
.vzory .vzor p{ font-size: 13px; line-height:1.6; color:#514B45; margin:0 0 12px; flex:1; }
.vzory .vzor__vic{
  display:block; margin-top:auto;
  font-family:var(--nadpis); font-size: 11.5px; letter-spacing:.10em;
  text-transform:uppercase; color:var(--zlata-tmava);
}

/* ═══════════════════════════════════════════════════════════════════════
   PODSTRÁNKA SLUŽBY
   ═══════════════════════════════════════════════════════════════════════ */
.zahlavi__tlacitka{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:26px 0 0; }
.zahlavi__tlacitka .tl + .tl{ margin-left:0; }

/* Čím se to vyznačuje — čtyři body vedle sebe. */
.vlastnosti{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px 34px; margin-top:34px;
}
.vlastnost{ padding-top:20px; border-top:1px solid var(--zlata); }
.vlastnost h3{
  font-size: 16px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 12px;
}
.vlastnost p{ font-size: 15px; line-height:1.8; color:#514B45; margin:0; }

/* Jak to probíhá — očíslované kroky, protože pořadí je skutečné. */
.postup{ list-style:none; margin:34px 0 0; padding:0; counter-reset:krok; }
.postup__krok{
  display:flex; gap:24px; align-items:flex-start;
  padding:24px 0; border-top:1px solid var(--cara);
}
.postup__krok:last-child{ border-bottom:1px solid var(--cara); }
.postup__cislo{
  flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--zlata); border-radius:50%;
  font-family:var(--nadpis); font-size: 16px; color:var(--zlata-tmava);
}
.postup__krok h3{
  font-size: 17px; letter-spacing:.08em; text-transform:uppercase; margin:8px 0 10px;
}
.postup__krok p{ font-size: 15px; line-height:1.8; color:#514B45; margin:0; max-width:74ch; }

/* Orientační ceny. */
.cenik{ width:100%; border-collapse:collapse; margin-top:32px; max-width:760px; }
.cenik th{
  text-align:left; font-weight:400; padding:16px 0;
  border-bottom:1px solid var(--cara); font-size: 16px;
}
.cenik td{
  text-align:right; padding:16px 0; border-bottom:1px solid var(--cara);
  font-family:var(--nadpis); font-size: 16px; color:var(--zlata-tmava); white-space:nowrap;
}
.cenik__pozn{
  margin:22px 0 0; padding:18px 22px; background:var(--svetla);
  border-left:2px solid var(--zlata); font-size: 14px; line-height:1.8;
  color:#514B45; max-width:760px;
}
.oddil--bily .cenik__pozn{ background:var(--svetla); }

@media (max-width:560px){
  .postup__krok{ gap:16px; }
  .postup__cislo{ width:38px; height:38px; }
  .cenik th, .cenik td{ font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   JAK PRACUJEME — tři kroky s fotografií
   Předtím to byl úzký sloupec textu vedle prázdné poloviny stránky.
   ═══════════════════════════════════════════════════════════════════════ */
.oddil__perex{ max-width:64ch; margin:0 0 8px; }

.kroky{
  list-style:none; margin:40px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:30px;
}
.krok{ display:flex; flex-direction:column; }
.krok img{
  width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  margin-bottom:24px;
}
.krok__telo{ display:flex; flex-direction:column; flex:1; }
.krok__cislo{
  display:block; font-family:var(--nadpis); font-size: 13px;
  letter-spacing:.22em; color:var(--zlata-tmava); margin-bottom:10px;
}
.krok h3{
  font-size: 17px; letter-spacing:.10em; text-transform:uppercase;
  margin:0 0 12px; padding-bottom:12px; border-bottom:1px solid var(--zlata);
}
.krok p{ font-size: 15px; line-height:1.8; color:#514B45; margin:0; }

@media (max-width:900px){ .kroky{ grid-template-columns:1fr; gap:36px; } }

/* ═══════════════════════════════════════════════════════════════════════
   GALERIE SHOWROOMU
   Hlavní pohled přes celou šířku, pod ním čtyři detaily v řadě.
   Mřížka s velkou dlaždicí přes dva sloupce nechávala prázdné místo.
   ═══════════════════════════════════════════════════════════════════════ */
.galerie{ margin-top:38px; }
.galerie figure{ margin:0; position:relative; overflow:hidden; }
.galerie img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s; }
.galerie figure:hover img{ transform:scale(1.03); }
.galerie figcaption{
  position:absolute; inset:auto 0 0 0; padding:34px 20px 16px;
  background:linear-gradient(180deg, transparent, rgb(13 11 9 / .88));
  color:#F6F2EA; font-size: 14px; line-height:1.5; letter-spacing:.03em;
}
.galerie__hlavni img{ aspect-ratio:21/9; }
.galerie__hlavni figcaption{ padding:44px 26px 20px; font-size: 15px; }
.galerie__rada{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px; margin-top:14px;
}
.galerie__rada img{ aspect-ratio:4/3; }
.galerie__rada figcaption{ font-size: 13px; padding:28px 14px 12px; }

@media (max-width:900px){
  .galerie__rada{ grid-template-columns:1fr 1fr; }
  .galerie__hlavni img{ aspect-ratio:16/9; }
}
@media (max-width:520px){
  .galerie__rada{ grid-template-columns:1fr; }
  .galerie__hlavni img{ aspect-ratio:3/2; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PODSTRÁNKA SLUŽBY — nové rozvržení
   Střídá rytmus: velké záhlaví, tvrzení přes celou šířku, dvojice
   text/foto, kroky na tmavém, vzory, ceny. Předtím to byly tři
   za sebou jdoucí bloky textu.
   ═══════════════════════════════════════════════════════════════════════ */
.sluzba__hlava{
  position:relative; min-height:520px; display:grid; align-items:end;
  padding:80px 0 64px; overflow:hidden;
}
.sluzba__hlava-foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.sluzba__hlava::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgb(13 11 9 / .40) 0%, rgb(13 11 9 / .30) 40%, rgb(13 11 9 / .86) 100%);
}
.sluzba__hlava-vnitrek{ position:relative; z-index:2; color:#F6F2EA; }
.sluzba__hlava h1{
  font-size: clamp(32px, 4.4vw, 56px); letter-spacing:.06em;
  text-transform:uppercase; margin:0 0 18px; line-height:1.1;
}
.sluzba__perex{
  max-width:56ch; margin:0 auto; font-size: 17px; line-height:1.85; color:#D6CFC4;
}
.sluzba__hlava .zahlavi__tlacitka{ justify-content:center; margin:32px auto 0; }

/* Jedna věta, kterou si má člověk odnést. */
/* Tvrzení už není černý blok pod fotografií — dva tmavé pruhy za sebou
   dělaly díru uprostřed stránky. Teď je to světlý oddíl s citací
   a svislou zlatou linkou, navazuje na zbytek webu. */
.tvrzeni{ background:var(--svetla); padding:70px 0; }
.tvrzeni .obal{ display:flex; gap:34px; align-items:flex-start; }
.tvrzeni .obal::before{
  content:""; flex:0 0 auto; width:2px; align-self:stretch;
  background:linear-gradient(180deg, var(--zlata), rgb(196 160 106 / .15));
}
.tvrzeni p{
  margin:0; max-width:26ch; font-family:var(--nadpis);
  font-size: clamp(23px, 2.7vw, 36px); line-height:1.4; letter-spacing:.02em;
  color:var(--text);
}
@media (max-width:620px){
  .tvrzeni{ padding:52px 0; }
  .tvrzeni .obal{ gap:22px; }
  .tvrzeni p{ max-width:none; }
}

/* Body u „proč zrovna my“. */
.body{ list-style:none; margin:26px 0 0; padding:0; }
.body li{
  padding:16px 0 16px 22px; border-top:1px solid var(--cara);
  font-size: 15px; line-height:1.75; color:#514B45; position:relative;
}
/* Odrážka sedí na účaří prvního řádku, ne kus nad ním. */
.body li::before{
  content:""; position:absolute; left:0; top:calc(16px + 0.85em);
  width:10px; height:1px; background:var(--zlata);
}
.body li:last-child{ border-bottom:1px solid var(--cara); }
/* Název vlastnosti kapitálkami — odliší se od popisu bez tučného řezu. */
.body b{
  color:var(--text); font-weight:400;
  font-variant-caps:all-small-caps; letter-spacing:.06em;
  font-size: 1.2em;
}

/* Jak to probíhá — souvislá osa, ne mřížka dlaždic. Šest karet se
   lámalo na 4 + 2 a poslední řádek zůstával poloprázdný. Teď jdou
   kroky pod sebou po jedné lince a fotografie se střídají po stranách. */
.oddil--tmavy{ background:var(--tmava-2); color:#D6CFC4; }
/* Štítek na tmavém podkladu — zlatohnědá z světlé varianty tu byla
   proti tmavému pruhu skoro neviditelná. */
.stitek--svetly{ color:var(--zlata); }
.stitek--svetly::after{ background:var(--zlata); width:64px; height:2px; }

/* Kroky ve dvou sloupcích. V jednom sloupci zůstávala prázdná pravá
   půlka stránky — u šesti kroků obzvlášť. Každý sloupec má vlastní
   svislou linku. */
.etapy{
  margin-top:44px; display:grid; grid-template-columns:1fr 1fr;
  gap:0 60px; align-items:start;
}
.etapy__sloupec{ position:relative; }
/* Osa vede jen mezi číslicemi — nesmí pokračovat pod poslední z nich. */
.etapy__sloupec{ position:relative; }
.etapy__sloupec::before{
  content:""; position:absolute; left:31px; top:32px;   /* střed první číslice */
  height:var(--osa, 0px); width:1px;
  background:linear-gradient(180deg, var(--zlata), rgb(196 160 106 / .35));
}
.etapa{
  display:grid; grid-template-columns:64px minmax(0,1fr);
  gap:0 30px; align-items:start; padding:0 0 34px;
}
.etapa:last-child{ padding-bottom:0; }
.etapa p{ max-width:46ch; }
.etapa__cislo{
  position:relative; z-index:2; width:64px; height:64px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--tmava-2); border:1px solid var(--zlata);
  font-family:var(--nadpis); font-size: 17px; color:var(--zlata);
}
.etapa__telo{ padding-top:16px; }
.etapa h3{
  font-size: 17px; letter-spacing:.10em; text-transform:uppercase;
  margin:0 0 12px; color:#EDE7DE;
}
.etapa p{ font-size: 15px; line-height:1.8; color:#B0A79C; margin:0; max-width:60ch; }


@media (max-width:1000px){
  .etapy{ grid-template-columns:1fr; gap:0; }
  .etapy__sloupec + .etapy__sloupec{ margin-top:34px; }
}
@media (max-width:900px){
  .etapa{ grid-template-columns:52px minmax(0,1fr); gap:0 22px; }
  .etapy__sloupec::before{ left:25px; }
  .etapa__cislo{ width:52px; height:52px; font-size: 15px; }
}

/* Realizace a ceny vedle sebe. */
/* Když služba nemá realizace, ceník se roztáhne přes celou šířku —
   jinak by vedle něj zbyla prázdná polovina stránky. */
.sluzba__spodek{ display:grid; grid-template-columns:1.25fr 1fr; gap:56px; align-items:start; }
.sluzba__spodek--sam{ grid-template-columns:minmax(0,1fr); }
.sluzba__spodek--sam .cenik,
.sluzba__spodek--sam .cenik__pozn{ max-width:none; }
.sluzba__spodek--sam .cenik td{ width:26%; }
.sluzba__realizace{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
.sluzba__spodek .cenik{ margin-top:26px; }

@media (max-width:900px){
  .sluzba__spodek{ grid-template-columns:1fr; gap:44px; }
  .sluzba__hlava{ min-height:420px; padding:60px 0 48px; }
}
@media (max-width:560px){
  .sluzba__realizace{ grid-template-columns:1fr; }
  .tvrzeni{ padding:48px 0; }
  .tvrzeni p{ max-width:none; }
}

/* Tlačítko pod vzorníkem — vlastní odstup, ať se nelepí na poznámku. */
.vzornik__akce{ margin:44px 0 0; }

/* ═══════════════════════════════════════════════════════════════════════
   OCHRANNÉ OBLASTI — tlačítka pod bloky
   Obecné pravidlo .oddil p má vyšší specifičnost než samotná třída,
   takže odsazení tlačítek přebíjelo. Proto stejná váha selektoru.
   ═══════════════════════════════════════════════════════════════════════ */
.oddil p.galerie__akce{ margin: 44px 0 0; }
.oddil p.vzornik__akce{ margin: 48px 0 0; }
.oddil p.vzor__tlacitka{ margin: 34px 0 0; }
.oddil p.zahlavi__tlacitka{ margin: 30px 0 0; }
.oddil .vzornik__pozn + p{ margin-top: 48px; }

/* Věta, kterou si má člověk ze stránky služby odnést. Stojí nad textem
   a je zlatá — dřív měla vlastní pruh, který jen dělal díru ve stránce. */
.duvod__tvrzeni{
  font-family:var(--nadpis); font-size: clamp(18px, 1.7vw, 23px);
  line-height:1.55; letter-spacing:.02em; color:var(--zlata-tmava);
  margin:0 0 22px !important; padding-left:20px;
  border-left:2px solid var(--zlata); max-width:34ch;
}

/* Štítek oddílu na tmavém pruhu. Obecné .oddil p má vyšší specifičnost
   a přebíjelo barvu, takže nadpis splýval s pozadím. */
.oddil .stitek--svetly{ color: var(--zlata); }
.oddil--tmavy .stitek--svetly{ color: var(--zlata); }

/* ═══════════════════════════════════════════════════════════════════════
   PRUH SHOWROOMU NAD PATIČKOU
   Fotografie na pozadí místo plné tmavé plochy — dva tmavé pásy
   za sebou (pruh a patička) dřív splývaly v jeden blok.
   ═══════════════════════════════════════════════════════════════════════ */
.showroom{ position:relative; padding:78px 0; overflow:hidden; background:var(--tmava-2); }
.showroom__foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.30;
}
.showroom::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgb(13 11 9 / .92) 0%, rgb(13 11 9 / .62) 55%, rgb(13 11 9 / .82) 100%);
}
.showroom__vnitrek{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.showroom__text h2{
  font-family:var(--nadpis); font-weight:400; color:#F6F2EA;
  font-size: clamp(23px,2.5vw,32px); line-height:1.35; letter-spacing:.04em;
  margin:0 0 18px; text-transform:uppercase;
}
.showroom__text p{ font-size: 15.5px; line-height:1.8; color:#C9C2B8; margin:0 0 28px; max-width:46ch; }

/* Údaje jako popisové dvojice, ne kolečka s ikonami. */
.showroom__udaje{
  display:grid; grid-template-columns:1fr 1fr; gap:2px; margin:0;
  background:rgb(196 160 106 / .22);
}
/* Karty musí být stejně vysoké i při různě dlouhém textu — jinak jsou
   linky mezi nimi rozházené. Obsah držíme nahoře, výšku vyrovná mřížka. */
.showroom__udaje .udaj{
  background:var(--tmava); padding:24px 26px;
  display:flex; flex-direction:column;
}
.showroom__udaje dd{ margin-top:auto; }
.showroom__udaje dt{
  font-family:var(--nadpis); font-size: 12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--zlata); margin-bottom:10px;
}
.showroom__udaje dd{ margin:0; font-size: 15px; line-height:1.75; color:#D6CFC4; }
.showroom__udaje a{ text-decoration:none; }
.showroom__udaje a:hover{ color:var(--zlata); }

@media (max-width:900px){
  .showroom__vnitrek{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:520px){
  .showroom__udaje{ grid-template-columns:1fr; }
  .showroom{ padding:56px 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ZVĚTŠOVÁNÍ FOTOGRAFIÍ
   ═══════════════════════════════════════════════════════════════════════ */
/* Nadpis vlevo, text vpravo. Mezery uvnitř hlavičky odpovídají oddílu
   „Jak pracujeme" — štítek 16 px nad nadpisem, text zarovnaný k nadpisu. */
.showroom__uvod{
  display:grid; grid-template-columns:1fr 1fr; gap:0 64px; align-items:start;
}
.showroom__uvod h2{ margin:0; }
.showroom__uvod p{ margin:0; font-size: 15.5px; line-height:1.85; color:#514B45; }
@media (max-width:900px){ .showroom__uvod{ grid-template-columns:1fr; gap:22px; } }

.galerie__zvetsit{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:zoom-in; position:relative;
}
.galerie__lupa{
  position:absolute; top:14px; right:14px; width:38px; height:38px;
  display:grid; place-items:center; border:1px solid rgb(246 242 234 / .5);
  border-radius:50%; color:#F6F2EA; font-size: 20px; line-height:1;
  background:rgb(13 11 9 / .35); opacity:0; transition:opacity var(--prechod);
}
.galerie__zvetsit:hover .galerie__lupa,
.galerie__zvetsit:focus-visible .galerie__lupa{ opacity:1; }
.galerie__zvetsit:focus-visible{ outline:2px solid var(--zlata); outline-offset:3px; }
.oddil p.galerie__akce--stred{ text-align:center; }

/* Zvětšená fotografie. */
/* Lupa je prvek <figure> a ten má výchozí okraj 1em nahoře i dole
   a 40 px po stranách. Překryv se tím zmenšil o 80 px na šířku — na
   velkém okně to nebylo znát, na telefonu ale zabral jen část plochy
   a zvětšený snímek zůstal malý. Okraj proto nulujeme. */
.lupa{
  position:fixed; inset:0; z-index:1000; display:none;
  place-items:center; padding:40px 24px;
  width:100%; height:100%; max-width:none; max-height:none;
  margin:0; border:0;
  background:rgb(13 11 9 / .94);
}
.lupa::backdrop{ background:rgb(13 11 9 / .94); }
.lupa[open], .lupa.je-videt{ display:grid; }
/* Zvětšený snímek vyplní dostupné místo — dřív se kreslil ve své
   vlastní velikosti a na velké obrazovce působil drobně. */
.lupa img{
  width:min(1400px, 100%); height:auto;
  max-height:86vh; object-fit:contain;
}
.lupa figcaption{
  margin-top:20px; text-align:center; color:#C9C2B8;
  font-size: 14px; letter-spacing:.06em;
}
.lupa__zavrit{
  position:absolute; top:20px; right:24px; width:46px; height:46px;
  border:1px solid rgb(246 242 234 / .35); border-radius:50%;
  background:none; color:#F6F2EA; font-size: 24px; line-height:1; cursor:pointer;
}
.lupa__zavrit:hover{ border-color:var(--zlata); color:var(--zlata); }

/* ═══════════════════════════════════════════════════════════════════════
   PŘEBÍJENÍ OBECNÝCH PRAVIDEL ODDÍLU
   .oddil h2 a .oddil p mají vyšší specifičnost než samotná třída, takže
   komponentám přebíjely odsazení i velikost písma. Tady se to vrací
   se stejnou vahou selektoru.
   ═══════════════════════════════════════════════════════════════════════ */

/* Obchodní jméno se nesmí lámat — „s.r.o." na druhém řádku vypadá rozbitě. */
.oddil h2.nazev-firmy{
  font-size: clamp(15px, 1.45vw, 21px);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: .02em;
  max-width: 100%;
}

/* Poznámka o dřevu pod mřížkou vzorníku. */
.oddil p.vzornik__pozn{ margin: 56px 0 0; }
.oddil p.cenik__pozn{ margin: 24px 0 0; }
.oddil p.oddil__perex{ margin: 0 0 8px; }
.oddil p.sluzba__perex{ margin: 0; }
.oddil p.duvod__tvrzeni{ margin: 0 0 22px; }

/* ═══════════════════════════════════════════════════════════════════════
   VIDEOSLIDER
   Fotografie je pod videem jako plakát — ukáže se, než se video načte,
   a zůstane tomu, kdo má v systému vypnuté animace.
   ═══════════════════════════════════════════════════════════════════════ */
/* Fotografie leží pod videem a nikdy se neschovává. Když video selže,
   nenačte se nebo ho prohlížeč zastaví, zůstane pod ním obraz — nikdy
   ne prázdná plocha, přes kterou by prosvítalo pozadí stránky. */
.hero__snimek{ background:var(--cerna); }
.hero__plakat{ position:absolute; inset:0; width:100%; height:100%; z-index:0; object-fit:cover; }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; z-index:1; object-fit:cover; }
/* Zaseknuté video se skryje a nechá vyniknout fotografii pod ním. */
.hero__video.je-vadne{ display:none; }
@media (prefers-reduced-motion: reduce){
  .hero__video{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ZÁHLAVÍ PODSTRÁNKY SLUŽBY
   Jedna fotografie, text na tmavém pruhu dole. Menší než úvodní plocha —
   na podstránce má člověk začít číst, ne obdivovat obrázek.
   ═══════════════════════════════════════════════════════════════════════ */
.sluzba__hlava{
  position:relative; min-height:480px; display:grid; align-items:end;
  padding:0; overflow:hidden; background:var(--cerna);
}
.sluzba__hlava-foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.sluzba__hlava::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgb(13 11 9 / .30) 0%, rgb(13 11 9 / .22) 42%,
    rgb(13 11 9 / .78) 76%, rgb(13 11 9 / .95) 100%);
}
/* Záhlaví podstránky je vycentrované stejně jako úvodní plocha
   a ostatní záhlaví — jinak by se zarovnání na webu měnilo stránku
   od stránky. */
.sluzba__hlava-vnitrek{
  position:relative; z-index:2; color:#F6F2EA; padding:0 0 48px;
  text-align:center;
}
.sluzba__hlava-vnitrek .sluzba__perex{ margin-left:auto; margin-right:auto; }
.sluzba__hlava h1{ text-shadow:0 2px 24px rgb(13 11 9 / .6); }
.sluzba__perex{ color:#E4DDD2; text-shadow:0 1px 14px rgb(13 11 9 / .7); }

/* Dvojice tlačítek v záhlaví podstránky. Přesně totéž provedení jako
   v úvodní ploše — obojí leží na fotografii, takže i chování musí být
   stejné: sytější podklad, světlé písmo a zlatý obrys. */
.oddil p.zahlavi__tlacitka,
.sluzba__hlava .zahlavi__tlacitka{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:stretch; gap:16px; max-width:740px; margin:34px auto 0;
}
/* Tlačítka v obyčejném záhlaví (vzorník, realizace) vypadají stejně
   jako v záhlaví podstránky služby — leží také na fotografii. */
.zahlavi .zahlavi__tlacitka{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  align-items:stretch; gap:16px; max-width:740px; margin:34px auto 0;
}
/* Úvodní plocha i záhlaví podstránek sdílejí jedno pravidlo, aby se
   tlačítka nikde nelišila velikostí ani zalomením textu. */
.hero__tlacitka .tl,
.zahlavi .zahlavi__tlacitka .tl,
.sluzba__hlava .zahlavi__tlacitka .tl{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:58px; text-align:center; white-space:nowrap;
  border-color:var(--zlata); color:#F6F2EA;
  background:rgb(13 11 9 / .58);
  backdrop-filter:blur(2px);
  text-shadow:0 1px 10px rgb(13 11 9 / .8);
  transition:background var(--prechod), color var(--prechod);
}
.zahlavi .zahlavi__tlacitka .tl:hover,
.zahlavi .zahlavi__tlacitka .tl:focus-visible,
.sluzba__hlava .zahlavi__tlacitka .tl:hover,
.sluzba__hlava .zahlavi__tlacitka .tl:focus-visible{
  background:var(--zlata); color:var(--cerna); text-shadow:none;
}

@media (max-width:620px){
  /* Na telefonu jdou tlačítka pod sebe — dvě vedle sebe by měla sotva
     170 px a text by se lámal do tří řádků. Úvodní plocha se chová
     stejně jako záhlaví podstránek. */
  /* Úvodní plocha se chová stejně jako záhlaví podstránek — tlačítka
     pod sebou, stejně vysoká, delší popisek se nezalomí. */
  .hero__tlacitka{ display:grid; grid-template-columns:1fr; gap:16px; }
  .hero__tlacitka .tl{
    width:100%; min-height:58px; justify-content:center;
    white-space:nowrap; padding-inline:12px;
  }
  /* Vodorovné odsazení z řádkového rozvržení tady nemá co dělat —
     tlačítka jsou pod sebou a mezeru řeší mřížka. */
  .hero__tlacitka .tl + .tl{ margin-left:0; }
  .zahlavi .zahlavi__tlacitka,
  .sluzba__hlava .zahlavi__tlacitka{ grid-template-columns:1fr; }
  /* Na úzké obrazovce se popisek nezalomí — místo toho zmenšíme písmo
     a stáhneme prostrkání, aby se text vešel na jeden řádek. Výška tak
     zůstává stejná na úvodu i na podstránkách. */
  .hero__tlacitka .tl,
  .zahlavi .zahlavi__tlacitka .tl,
  .sluzba__hlava .zahlavi__tlacitka .tl{
    white-space:nowrap;
    font-size: clamp(10px, 3.1vw, 13px);
    letter-spacing:.10em;
    padding-inline:10px;
  }
}

@media (max-width:900px){
  /* Na užší obrazovce se text láme do víc řádků, takže výška musí být
     větší — jinak by obsah záhlaví přerostl a stránky by se zase lišily. */
  .sluzba__hlava{ min-height:520px; }
  .zahlavi{ min-height:520px; }
  .sluzba__hlava-vnitrek{ padding-bottom:38px; }
}
@media (max-width:620px){
  .sluzba__hlava{ min-height:600px; }
  .zahlavi{ min-height:600px; }
}
@media (max-width:440px){
  /* Na telefonu se dvojice tlačítek skládá pod sebe a nejdelší perexy
     mají šest řádků — výška musí pokrýt i ten nejdelší. */
  .sluzba__hlava{ min-height:660px; }
  .zahlavi{ min-height:660px; }
  .sluzba__perex{ font-size: 15px; }
}

@media (max-width:620px){
  .sluzba__hlava .zahlavi__tlacitka{ grid-template-columns:1fr; }
}

/* Galerie realizace — hlavní fotografie a další pod ní. */
.real__hlavni{ display:block; width:100%; }
.real__hlavni img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
/* Galerie v detailu realizace. Stejné provedení jako galerie u služeb —
   pevné tři sloupce, poměr 4:3, lupa a přiblížení při najetí.

   Dřív se sloupce skládaly podle šířky (auto-fit). Při šesti fotkách
   z toho na širokém okně vyšlo 4 + 2 a druhý řádek zůstal nedokončený
   u levého okraje. Pevná trojice dělí šest na 3 + 3. */
.real__galerie{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px; margin-top:32px;
}
.real__galerie .galerie__zvetsit{
  position:relative; display:block; width:100%; padding:0; border:0;
  background:none; cursor:zoom-in; overflow:hidden;
}
.real__galerie img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .6s;
}
.real__galerie .galerie__zvetsit:hover img{ transform:scale(1.04); }
.real__galerie .galerie__lupa{
  position:absolute; right:12px; bottom:12px; width:34px; height:34px;
  display:grid; place-items:center; border:1px solid rgb(246 242 234 / .7);
  color:#F6F2EA; font-size:18px; line-height:1;
  background:rgb(13 11 9 / .35); opacity:0; transition:opacity var(--prechod);
}
.real__galerie .galerie__zvetsit:hover .galerie__lupa,
.real__galerie .galerie__zvetsit:focus-visible .galerie__lupa{ opacity:1; }

@media (max-width:900px){
  .real__galerie{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
}
@media (max-width:560px){
  .real__galerie{ grid-template-columns:1fr; }
}

/* „Proč zrovna my" — text ve dvou sloupcích, bez fotografie. */
.procMy{ display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:start; }
.procMy__uvod h2{ margin:0 0 22px; }
.oddil .procMy__text p{ margin:0 0 4px; }
@media (max-width:900px){ .procMy{ grid-template-columns:1fr; gap:28px; } }


/* ═══════════════════════════════════════════════════════════════════════
   FORMULÁŘ VE VRSTVĚ
   Poptávku i žádost o návštěvu jde otevřít odkudkoli, aniž by člověk
   opustil stránku, kterou čte. Bez JavaScriptu vrstva nenaskočí
   a odkazy vedou na plnohodnotné stránky.
   ═══════════════════════════════════════════════════════════════════════ */
.vrstva{
  position:fixed; inset:0; z-index:900; display:grid; place-items:start center;
  padding:40px 20px; overflow-y:auto;
  background:rgb(13 11 9 / .82);
}
.vrstva[hidden]{ display:none; }
.vrstva__okno{
  position:relative; width:min(880px, 100%);
  background:var(--svetla); padding:52px 54px 48px;
  box-shadow:0 30px 80px -30px rgb(0 0 0 / .7);
}
/* Pruh s křížkem. Drží se u horního okraje i po srolování — formulář
   je dlouhý a tlačítko dřív odjelo s obsahem pryč. Sám pruh je jen
   neviditelná lišta o nulové výšce, aby neposouval obsah. */
.vrstva__lista{
  position:sticky; top:16px; z-index:5;
  /* Bez podkladu a bez výšky — pruh by se při rolování rýsoval přes
     obsah jako šedý pás. Křížek stojí v pravém odsazení rámečku, kam
     obsah formuláře nedosahuje, takže krytí není potřeba. */
  height:0; margin:0; display:flex; justify-content:flex-end;
  background:none;
}

/* Křížek stojí v pravém odsazení rámečku — tedy uvnitř, ale mimo obsah
   formuláře — a je v něm vodorovně vystředěný. Odsazení má 54 px,
   tlačítko 44 px, takže po obou stranách zbývá 5 px. */
@media (min-width:921px){
  .vrstva__zavrit{ margin-right:-49px; }
}

.vrstva__zavrit{
  width:44px; height:44px;
  border:1px solid var(--cara); background:var(--bila); color:var(--text-slaby);
  font-size: 24px; line-height:1; cursor:pointer;
  box-shadow:0 8px 24px -10px rgb(13 11 9 / .55);
  transition:border-color var(--prechod), color var(--prechod);
}
.vrstva__zavrit:hover{ border-color:var(--zlata-tmava); color:var(--zlata-tmava); }
.vrstva__okno .poptavka__uvod{ max-width:none; }
.vrstva__okno .stitek{ margin-top:0; }

/* Potvrzení po odeslání. */
.vrstva__hotovo{ text-align:center; padding:40px 0 16px; }
.vrstva__hotovo[hidden]{ display:none; }
.vrstva__znak{
  width:64px; height:64px; margin:0 auto 24px; display:grid; place-items:center;
  border:1px solid var(--zlata); border-radius:50%;
  color:var(--zlata-tmava); font-size: 26px;
}
.vrstva__hotovo h2,
.vrstva__hotovo .vrstva__hotovo-nadpis{
  font-size: clamp(22px,2.2vw,30px); text-transform:uppercase;
  letter-spacing:.06em; margin:0 0 14px;
  font-family:var(--nadpis); font-weight:400; line-height:inherit;
}
.vrstva__hotovo p{ max-width:52ch; margin:0 auto 28px; color:#514B45; }

@media (max-width:760px){
  .vrstva{ padding:0; }
  .vrstva__okno{ padding:64px 20px 32px; min-height:100%; }
  /* Na telefonu je odsazení rámečku úzké, tlačítko proto zmenšíme,
     ať se do něj vejde a nesahá na obsah. */
  .vrstva__lista{ top:12px; }
  .vrstva__zavrit{ width:38px; height:38px; font-size: 21px; }
}
@media (prefers-reduced-motion: reduce){
  .vrstva{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   UVÍTÁNÍ PŘI PRVNÍM PŘÍCHODU

   Značka se vykreslí uprostřed tmavé plochy, pod ní se rozjede zlatá
   linka, a pak se plocha rozestoupí odshora i odzdola jako opona.
   Trvá to 1,6 s a spustí se jednou za návštěvu.

   Běží jen s JavaScriptem — bez něj se vrstva vůbec nezobrazí, takže
   nemůže zakrýt obsah, kdyby se něco nepovedlo.
   ═══════════════════════════════════════════════════════════════════════ */
.uvitani{
  position:fixed; inset:0; z-index:1000; overflow:hidden;
  display:grid; place-items:center;
  pointer-events:none;
  /* Podklad drží jen dvě poloviny opony níž — kdyby měla vrstva plnou
     barvu sama, rozestup opony by nebyl vidět. Než dorazí tenhle
     stylopis, se nic nekreslí, takže bílá plocha nehrozí. */
  background:transparent;
}
.uvitani[hidden]{ display:none; }

/* Pojistka, kdyby skript neběžel: opona po chvíli sama odejde, ať
   nezůstane přes obsah. */
@keyframes uvitani-nouze{
  0%, 60%{ opacity:1; visibility:visible; }
  100%   { opacity:0; visibility:hidden; }
}
html:not(.uvitani-bezi):not(.uvitani-hotovo) .uvitani{
  animation:uvitani-nouze 3.6s ease forwards;
}

/* Dvě poloviny opony. */
.uvitani::before,
.uvitani::after{
  content:""; position:absolute; left:0; right:0; height:50%;
  background:var(--cerna);
  transition:transform 1.7s cubic-bezier(.76,0,.24,1);
}
.uvitani::before{ top:0; }
.uvitani::after{ bottom:0; }

.uvitani__znak{
  position:relative; z-index:2; display:block;
  width:min(360px, 62vw); color:var(--zlata);
  opacity:0; transform:scale(.88);
  animation:uvitani-znak 2.4s cubic-bezier(.2,.7,.3,1) forwards;
}
.uvitani__znak svg{ width:100%; height:auto; display:block; }

.uvitani__linka{
  position:absolute; z-index:2; top:calc(50% + 132px); left:50%;
  width:0; height:1px; background:var(--zlata); transform:translateX(-50%);
  animation:uvitani-linka 1.8s 1.2s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes uvitani-znak{
  from{ opacity:0; transform:scale(.88); }
  60%{ opacity:1; }
  to{ opacity:1; transform:scale(1); }
}
@keyframes uvitani-linka{
  from{ width:0; opacity:0; }
  to{ width:280px; opacity:1; }
}

/* Odchod: značka zhasne a opona se rozestoupí. */
.uvitani.je-pryc .uvitani__znak,
.uvitani.je-pryc .uvitani__linka{ opacity:0; transition:opacity .6s; }
.uvitani.je-pryc::before{ transform:translateY(-100%); }
.uvitani.je-pryc::after{ transform:translateY(100%); }

/* Obsah pod oponou se zvedne, jakmile se rozestoupí. */
/* Během uvítání se nedá rolovat — jinak by se dalo opony „projet" a
   obsah by se objevil pod ještě zataženým plátnem. Držíme šířku
   posuvníku, aby stránka neposkočila do stran. */
html.uvitani-bezi,
html.uvitani-bezi body{
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}

.uvitani-bezi .hero__vnitrek > *,
.uvitani-bezi .sluzba__hlava-vnitrek > *,
.uvitani-bezi .zahlavi__vnitrek > *{
  opacity:0; transform:translateY(18px);
}
.uvitani-hotovo .hero__vnitrek > *,
.uvitani-hotovo .sluzba__hlava-vnitrek > *,
.uvitani-hotovo .zahlavi__vnitrek > *{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.uvitani-hotovo .hero__vnitrek > *:nth-child(2){ transition-delay:.08s; }
.uvitani-hotovo .hero__vnitrek > *:nth-child(3){ transition-delay:.16s; }
.uvitani-hotovo .hero__vnitrek > *:nth-child(4){ transition-delay:.24s; }
.uvitani-hotovo .hero__vnitrek > *:nth-child(5){ transition-delay:.32s; }
.uvitani-hotovo .hero__vnitrek > *:nth-child(6){ transition-delay:.40s; }

@media (prefers-reduced-motion: reduce){
  .uvitani{ display:none !important; }
  .uvitani-bezi .hero__vnitrek > *,
  .uvitani-bezi .sluzba__hlava-vnitrek > *,
  .uvitani-bezi .zahlavi__vnitrek > *{ opacity:1; transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRÁVNÍ TEXTY
   Číslované články s odsazenými body. Delší text potřebuje rytmus,
   jinak se v něm nedá nic najít.
   ═══════════════════════════════════════════════════════════════════════ */
.pravni{ max-width:860px; }
.pravni__uvod{ font-size: 16.5px; line-height:1.85; margin:28px 0 8px; }
.pravni__clanek{ margin-top:44px; }
.oddil .pravni__clanek h2{
  font-size: 19px; letter-spacing:.10em; text-transform:uppercase;
  margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid var(--cara);
  display:flex; gap:12px; align-items:baseline;
}
.pravni__cislo{ color:var(--zlata-tmava); }
.oddil .pravni__clanek p{
  position:relative; padding-left:52px; margin:0 0 16px;
  font-size: 15.5px; line-height:1.85; color:#514B45;
}
.pravni__bod{
  position:absolute; left:0; top:0; width:42px;
  font-family:var(--nadpis); font-size: 14px; color:var(--zlata-tmava);
}
.oddil .pravni__zaver{
  margin-top:44px; padding:22px 26px; background:var(--bila);
  border-left:2px solid var(--zlata); font-size: 15.5px; line-height:1.8;
}
.hlaska--pozor{
  padding:18px 22px; background:#FBF4E6; border:1px solid #E8D5AE;
  color:var(--zlata-tmava); font-size: 15px; line-height:1.75;
}
@media (max-width:620px){
  .oddil .pravni__clanek p{ padding-left:44px; }
}

/* Výklad, co cookies vlastně jsou. Odděleno linkou od vlastní volby,
   aby bylo poznat, kde končí vysvětlení a začíná rozhodování. */
.cookies__doba-nadpis--prvni{ margin-top:0 !important; }

/* Podrobnosti v cookie liště. Delší text potřebuje vlastní rolování,
   aby lišta na nízké obrazovce nepřerostla okno. */
.cookies__nastaveni{ max-height:60vh; overflow-y:auto; }
.cookies__doba{ padding:16px 0 4px; border-top:1px solid #3A342D; }
.cookies__doba-nadpis{
  margin:0 0 8px !important; color:#EDE7DE;
  font-family:var(--nadpis); font-size: 12px;
  letter-spacing:.12em; text-transform:uppercase;
}
.cookies__doba p{ margin:0 0 5px !important; font-size: 13px; }
.cookies__zmena{ margin:14px 0 0 !important; font-size: 13px; line-height:1.7; }
.cookies p{ font-size: 14.5px; }


/* ═══════════════════════════════════════════════════════════════════════
   ZAŠKRTÁVACÍ POLÍČKA
   Výchozí modrá od prohlížeče do webu nepatří — accent-color je přebarví
   na zlatou všude, kde se používají.
   ═══════════════════════════════════════════════════════════════════════ */
input[type="checkbox"],
input[type="radio"]{ accent-color: var(--zlata-tmava); }
.cookies input[type="checkbox"]{ accent-color: var(--zlata); }

/* Praktické údaje na stránce Showroom — čtyři karty vedle sebe. */
.showroom__karty{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px; margin:34px 0 0;
}
.showroom__karty .udaj{
  padding:24px 26px; background:var(--bila); border:1px solid var(--cara);
  display:flex; flex-direction:column;
}
.showroom__karty dd{ margin-top:auto; }
.showroom__karty dt{
  font-family:var(--nadpis); font-size: 12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--zlata-tmava); margin-bottom:10px;
}
.showroom__karty dd{ margin:0; font-size: 15.5px; line-height:1.75; color:#514B45; }
.oddil p.showroom__pozn{
  margin:30px 0 0; padding:20px 24px; background:var(--bila);
  border-left:2px solid var(--zlata); max-width:74ch;
}

/* ═══════════════════════════════════════════════════════════════════════
   KONTAKTNÍ ÚDAJE
   Čtyři karty hned pod záhlavím. Kdo klikne na Kontakt, chce nejčastěji
   jen telefon nebo adresu — nemá je hledat pod dlouhým formulářem.
   ═══════════════════════════════════════════════════════════════════════ */
.kontakt__karty{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px; margin-top:34px;
}
.kontakt__karta{
  padding:28px 30px; background:var(--svetla); border:1px solid var(--cara);
  display:flex; flex-direction:column;
}

.oddil .kontakt__karty p{ margin:0; }
/* Nadpis karty s ikonou. Ikona drží stejnou tloušťku čáry jako značka. */
.oddil .kontakt__karty .udaj__nazev{
  display:flex; align-items:center; gap:10px;
  font-family:var(--nadpis); font-size: 13.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--zlata-tmava); margin-bottom:16px;
}
.udaj__ikona{ flex:0 0 auto; width:22px; height:22px; color:var(--zlata-tmava); }
.udaj__ikona svg{ width:100%; height:100%; display:block; }
/* Nadpisové písmo je verzálkové, proto ho necháváme jen na telefon
   a e-mail. Adresa a fakturační údaje jdou tělovým písmem, jinak by se
   název firmy vysázel kapitálkami. */
.oddil .kontakt__karty .udaj__hlavni{
  font-family:var(--nadpis); font-size: 22px; line-height:1.5; color:var(--text);
  /* Dlouhý e-mail se musí zalomit, jinak vyleze z karty. */
  overflow-wrap:anywhere; word-break:break-word;
}
.oddil .kontakt__karty .udaj__hlavni--email{
  font-family:var(--telo); font-size: 18.5px; letter-spacing:0; text-transform:none;
}
.oddil .kontakt__karty .udaj__hlavni--male{
  font-family:var(--telo); font-size: 18px; line-height:1.7; letter-spacing:0;
}
.kontakt__karty .udaj__hlavni a{ text-decoration:none; color:inherit; }
.kontakt__karty .udaj__hlavni a:hover{ color:var(--zlata-tmava); }
/* Poznámka se zarovná ke spodku, ať jsou karty souměrné i při
   různě dlouhém textu. */
.oddil .kontakt__karty .udaj__pozn{
  margin-top:auto !important; padding-top:14px; font-family:var(--telo);
  font-size: 15.5px; line-height:1.65; letter-spacing:0;
  text-transform:none; color:var(--text-slaby);
}


/* ═══════════════════════════════════════════════════════════════════════
   KALENDÁŘ A OVLÁDACÍ PRVKY PROHLÍŽEČE
   Výchozí modrá od prohlížeče se do webu nehodí. accent-color přebarví
   vybraný den v kalendáři, zaškrtávátka i posuvníky.
   ═══════════════════════════════════════════════════════════════════════ */
input[type="date"],
input[type="time"],
input[type="number"],
select{ accent-color: var(--zlata-tmava); color-scheme: light; }

/* Ikona kalendáře v poli. */
input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer; opacity:.55;
  filter:invert(38%) sepia(38%) saturate(700%) hue-rotate(3deg) brightness(92%);
  transition:opacity var(--prechod);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator{ opacity:1; }

/* Označený text ve formulářích. */
::selection{ background:var(--zlata); color:var(--cerna); }

/* ═══════════════════════════════════════════════════════════════════════
   FAKTURAČNÍ ÚDAJE VE FORMULÁŘI
   IČO stojí první a hned vedle je tlačítko, které zbytek načte
   z veřejného rejstříku.
   ═══════════════════════════════════════════════════════════════════════ */
/* Oddíl firmy sahá přes obě sloupce formuláře a uvnitř má vlastní
   mřížku — jinak by se úzká pole tísnila v jednom sloupci a vedle nich
   zůstávalo prázdné místo. */
.firma{
  padding-top:10px; margin-top:6px; border-top:1px solid var(--cara);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 22px;
}
.firma > .firma__nadpis{ grid-column:1 / -1; }
/* IČO s tlačítkem zabírá celý řádek, pod ním jdou pole po dvou. */
.firma > .formular__pole:has(.ico){ grid-column:1 / -1; }
.firma__nadpis{
  margin:0 0 16px !important; font-family:var(--nadpis);
  font-size: 13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--zlata-tmava);
}
.ico{ display:flex; gap:10px; align-items:stretch; }
.ico input{ flex:1 1 auto; min-width:0; }
.ico__nacist{
  flex:0 0 auto; white-space:nowrap; font-size: 12px; padding:0 18px;
  cursor:pointer;
}
.ico__nacist[disabled]{ opacity:.55; cursor:progress; }
.napoveda--vada{ color:var(--ne, #A3392F); }
@media (max-width:760px){
  .firma{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .ico{ flex-direction:column; }
  .ico__nacist{ padding:12px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   STRÁNKA O NÁS
   Dlouhý text potřebuje rytmus. Nadpis přes celou šířku, první dva
   odstavce vedle sebe, pruh s čísly a teprve pak zbytek u fotografie.
   ═══════════════════════════════════════════════════════════════════════ */
/* Nadpis vlevo, text vpravo. Dřív stál nadpis sám nad textem a vedle
   něj zůstávala prázdná půlka stránky. */
.onas__uvod{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:0 70px; align-items:start;
}
.onas__hlavicka{ position:sticky; top:120px; }
.oddil .onas__nadpis{
  font-size: clamp(26px,3.1vw,42px); line-height:1.25; margin:0;
}
.oddil .onas__uvod p{ margin:0 0 20px; }
.oddil .onas__uvod p:last-child{ margin-bottom:0; }
/* První odstavec je vstupní brána do textu — o něco větší. */
.oddil .onas__uvod .onas__prvni{
  font-size: 19.5px; line-height:1.8; color:var(--text);
}

/* Pruh s čísly. */
.onas__cisla-oddil{ padding:60px 0; }
.onas__cisla{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:34px; margin:0; text-align:center;
}
.onas__cislo dt{
  font-family:var(--nadpis); font-size: clamp(38px,4.4vw,58px);
  line-height:1; color:var(--zlata); margin-bottom:12px;
}
.onas__cislo dd{
  margin:0; font-size: 14px; letter-spacing:.10em; text-transform:uppercase;
  color:#CFC7BC;
}

/* Zbytek textu u fotografie. */
.onas__zbytek{
  display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center;
}
.oddil .onas__text p{ margin:0 0 18px; }
.oddil .onas__text .onas__zaver{
  margin:26px 0 0; padding-left:20px; border-left:2px solid var(--zlata);
  font-family:var(--nadpis); font-size: 18px; line-height:1.7; color:var(--text);
}
.onas__foto{ margin:0; }
.onas__foto img{ width:100%; height:auto; display:block; }

@media (max-width:900px){
  .onas__uvod{ grid-template-columns:1fr; gap:26px 0; }
  .onas__hlavicka{ position:static; }
  .onas__zbytek{ grid-template-columns:1fr; gap:34px; }
  .onas__cisla-oddil{ padding:44px 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VLASTNÍ ROZBALOVACÍ SEZNAM
   Nabídku nativního <select> kreslí systém a značkové barvy ignoruje.
   Tenhle seznam kreslíme sami, takže vybraná položka svítí zlatě, ne modře.
   Bez JavaScriptu zůstane vidět původní <select>.
   ═══════════════════════════════════════════════════════════════════════ */
.vyber{ position:relative; }
.vyber__puvodni{
  position:absolute; opacity:0; pointer-events:none;
  width:100%; height:100%; left:0; top:0;
}
.vyber__tlacitko{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; text-align:left; cursor:pointer; background:var(--bila);
  font-family:var(--telo); font-size: 15.5px; color:var(--text);
}
.vyber__tlacitko::after{
  content:""; flex:0 0 auto; width:9px; height:9px; margin-right:2px;
  border-right:1.5px solid var(--zlata-tmava); border-bottom:1.5px solid var(--zlata-tmava);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--prechod);
}
.vyber__tlacitko[aria-expanded="true"]::after{ transform:rotate(-135deg) translateY(-2px); }
.vyber__tlacitko--prazdne{ color:var(--text-slaby); }
.vyber__tlacitko:focus-visible{ outline:2px solid var(--zlata); outline-offset:2px; }

.vyber__seznam{
  position:absolute; z-index:60; left:0; right:0; top:calc(100% + 4px);
  margin:0; padding:6px 0; list-style:none; max-height:280px; overflow-y:auto;
  background:var(--bila); border:1px solid var(--cara);
  box-shadow:0 18px 40px -18px rgb(13 11 9 / .35);
}
.vyber__seznam[hidden]{ display:none; }
.vyber__polozka{
  padding:11px 18px; cursor:pointer; font-size: 15.5px; line-height:1.5;
  transition:background var(--prechod), color var(--prechod);
}
.vyber__polozka:hover{ background:#F3EDE2; }
.vyber__polozka.je-vybrana{ background:var(--zlata-tmava); color:var(--bila); }
.vyber__polozka--prazdna{ color:var(--text-slaby); }

/* ═══════════════════════════════════════════════════════════════════════
   VLASTNÍ KALENDÁŘ
   Systémový kalendář kreslí prohlížeč a barvy webu ignoruje. Tenhle je
   náš, takže vybraný den svítí zlatě. Na dotykových zařízeních zůstává
   systémový — na telefonu se ovládá líp.
   ═══════════════════════════════════════════════════════════════════════ */
.datum{ position:relative; }
.datum__kalendar{
  position:absolute; z-index:60; left:0; top:calc(100% + 6px); width:300px;
  background:var(--bila); border:1px solid var(--cara);
  box-shadow:0 18px 40px -18px rgb(13 11 9 / .35); padding:14px;
}
.datum__kalendar[hidden]{ display:none; }
.datum__hlava{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
}
.datum__mesic{
  font-family:var(--nadpis); font-size: 14px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text);
}
.datum__krok{
  width:30px; height:30px; border:1px solid var(--cara); background:var(--bila);
  color:var(--zlata-tmava); font-size: 17px; line-height:1; cursor:pointer;
  transition:border-color var(--prechod), background var(--prechod);
}
.datum__krok:hover{ border-color:var(--zlata); background:#F3EDE2; }
.datum__mrizka{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.datum__dvt{
  text-align:center; font-size: 11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-slaby); padding-bottom:6px;
}
.datum__den{
  aspect-ratio:1/1; border:0; background:transparent; cursor:pointer;
  font-family:var(--telo); font-size: 14px; color:var(--text);
  transition:background var(--prechod), color var(--prechod);
}
.datum__den:hover:not(.je-zakazany){ background:#F3EDE2; }
.datum__den.je-vybrany{ background:var(--zlata-tmava); color:var(--bila); }
.datum__den.je-zakazany{ color:#C9C2B8; cursor:default; }
.datum__patka{
  display:flex; justify-content:space-between; gap:10px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--cara);
}
.datum__akce{
  border:0; background:transparent; cursor:pointer; padding:4px 2px;
  font-family:var(--nadpis); font-size: 12px; letter-spacing:.10em;
  text-transform:uppercase; color:var(--zlata-tmava);
  transition:color var(--prechod);
}
.datum__akce:hover{ color:var(--text); }

/* Systémovou ikonu kalendáře v poli skryjeme, otevírá se klepnutím. */
.datum__pole::-webkit-calendar-picker-indicator{ display:none; }

/* ═══════════════════════════════════════════════════════════════════════
   DETAIL VZORU
   Vzorek je čtvercový snímek kazety. V obdélníkovém rámu se ořezával
   a z celého vzoru byl vidět jen pruh uprostřed.
   ═══════════════════════════════════════════════════════════════════════ */
/* Vzorky pocházejí z malých náhledů. Rám proto omezujeme na velikost,
   při které ještě drží kresba — roztažené na celý sloupec vypadaly
   rozmazaně. */
.vzor__foto{ margin:0 auto; max-width:400px; width:100%; }
.vzor__foto img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block;
  border:1px solid var(--cara);
  image-rendering:auto;
}
.oddil p.vzor__doplnujeme{
  margin:0 0 24px; padding:16px 20px; background:var(--bila);
  border-left:2px solid var(--zlata); font-size: 15px; line-height:1.75;
  max-width:56ch;
}

/* Důvody návštěvy showroomu — úvodní odstavec a pod ním seznam.
   Rozvržení odpovídá oddílu „Jak pracujeme" na stránce O nás. */
.showroom__duvody{ margin-top:34px; }
.oddil p.showroom__uvodni{ max-width:70ch; margin:0 0 28px; }
.showroom__duvody .body{ margin:0; }

.showroom__hlavicka .stitek{ margin-bottom:16px; }
.oddil .showroom__hlavicka h2{ margin:0; }
.oddil p.showroom__text{ margin:0; align-self:start; padding-top:calc(16px + 1.1em); }
@media (max-width:900px){
  .showroom__uvod{ grid-template-columns:1fr; gap:20px 0; }
  .oddil p.showroom__text{ padding-top:0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   GALERIE HOTOVÝCH PODLAH
   Tři fotografie v řadě, klepnutím se zvětší. Poměr stran držíme pevně,
   aby řádky lícovaly i při různě vysokých snímcích.
   ═══════════════════════════════════════════════════════════════════════ */
.galerie-podlahy{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px; margin-top:34px;
}
.galerie-podlahy figure{ margin:0; }
.galerie-podlahy .galerie__zvetsit{
  position:relative; display:block; width:100%; padding:0; border:0;
  background:none; cursor:zoom-in; overflow:hidden;
}
.galerie-podlahy img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .6s;
}
.galerie-podlahy .galerie__zvetsit:hover img{ transform:scale(1.04); }
.galerie-podlahy .galerie__lupa{
  position:absolute; right:12px; bottom:12px; width:34px; height:34px;
  display:grid; place-items:center; border:1px solid rgb(246 242 234 / .7);
  color:#F6F2EA; font-size: 18px; line-height:1;
  background:rgb(13 11 9 / .35); opacity:0; transition:opacity var(--prechod);
}
.galerie-podlahy .galerie__zvetsit:hover .galerie__lupa,
.galerie-podlahy .galerie__zvetsit:focus-visible .galerie__lupa{ opacity:1; }

@media (max-width:900px){
  .galerie-podlahy{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
}
@media (max-width:560px){
  .galerie-podlahy{ grid-template-columns:1fr; }
}

/* Identifikační údaje v patičce — o stupeň potlačené oproti kontaktu. */
.patka__udaje{ display:inline-block; margin-top:6px; font-size: 14px; opacity:.8; }

/* Nadpis oddílu se showroomem je delší než ostatní — o stupeň menší,
   aby se vešel na dva řádky a nerozbil rytmus stránky. */
.oddil .showroom__hlavicka h2{ font-size: clamp(22px, 2.3vw, 31px); }


/* ═══════════════════════════════════════════════════════════════════════
   ZÁHLAVÍ DETAILŮ NA UŽŠÍ OBRAZOVCE
   Detail vzoru a detail realizace nemají v záhlaví tlačítka, jen název
   a jeden řádek údajů. Plná výška by na telefonu zabrala skoro celou
   obrazovku, aniž by něco sdělila — proto ji výrazně zkracujeme.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  .zahlavi--drobne{ min-height:260px; padding:34px 0; }
  .zahlavi--drobne h1{ font-size: clamp(26px, 7vw, 34px); }
  .zahlavi--drobne .zahlavi__foto{ opacity:.28; }
}
@media (max-width:520px){
  .zahlavi--drobne{ min-height:220px; padding:28px 0; }
}

/* Tlačítka na úvodní ploše mají stejnou šířku jako na podstránkách.
   Úvod nepoužívá .obal, proto mu srovnáváme vnitřní odsazení podle
   něj — obal má šířku „100 % bez 36 px", u širších oken 48 px. */
/* Tlačítka na úvodní ploše lícují s podstránkami. Úvodní blok se dřív
   smršťoval podle obsahu, takže tlačítka vycházela o kus užší než
   v záhlaví podstránek — proto ho roztahujeme na celou šířku a strop
   dáváme stejný, tedy 740 px jako u záhlaví. */
.hero__vnitrek{ width:100%; }
.hero__tlacitka{ max-width:740px; margin-inline:auto; }

@media (max-width:900px){
  /* Nad 700 px má obal odsazení 64 px, pod ním 36 px. */
  .hero{ padding-inline:32px; }
}
@media (max-width:700px){
  .hero{ padding-inline:18px; }
}


/* Označení údaje a jeho číslo se nesmí rozdělit na dva řádky. */
.udaj__par{ white-space:nowrap; }


/* ═══════════════════════════════════════════════════════════════════════
   PŘEPÍNAČ JAZYKŮ
   V liště se ukazuje jen na širší obrazovce. Jakmile se nabídka sbalí
   pod tlačítko, přesune se dovnitř — v úzké liště by tlačil logo.
   V nabídce má podobu dvou dlaždic přes celou šířku, aby vypadal jako
   volba, ne jako odkaz navíc pod položkami.
   ═══════════════════════════════════════════════════════════════════════ */
.lista__jazyk--v-menu{ display:none; }

@media (max-width:1150px){
  .lista__jazyk--v-liste{ display:none; }
  .lista__hamburger{ margin-left:auto; }

  .lista__jazyk--v-menu{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    margin:10px 0 0; padding:16px 32px 20px;
    border-top:1px solid #23201C;
  }
  .lista__jazyk--v-menu a{
    display:flex; align-items:center; justify-content:center;
    min-height:46px; padding:0 12px;
    border:1px solid #3A342D; color:#B8B0A6;
    font-family:var(--nadpis); font-size: 12.5px; letter-spacing:.14em;
    text-transform:uppercase; text-decoration:none;
    transition:border-color var(--prechod), color var(--prechod), background var(--prechod);
  }
  .lista__jazyk--v-menu a:hover{ border-color:var(--zlata); color:var(--zlata); }
  .lista__jazyk--v-menu a[aria-current]{
    background:var(--zlata); border-color:var(--zlata); color:var(--cerna);
  }
}


/* Rozbalená nabídka a lišta nad ní tvoří jednu plochu. */
.lista.je-rozbalena{ background:var(--cerna); }


/* ═══════════════════════════════════════════════════════════════════════
   Vlastní formuláře

   Vlastní vzhled nemají — používají třídy ručních formulářů (.formular,
   .formular__pole, .pole, .napoveda, .zaskrt). Kdyby měly vlastní, musel
   by se jejich vzhled dorovnávat a při každé úpravě stylopisu by se zas
   rozešel.

   Zbývá jediné pravidlo: podmíněné pole se schovává atributem hidden
   a to musí přebít mřížku, která poli nastavuje display.
   ═══════════════════════════════════════════════════════════════════════ */

form[action*="/formular/"] [hidden]{ display: none; }


/* ═══════════════════════════════════════════════════════════════════════
   Listování ve zvětšené fotografii

   Šipky sedí po stranách obrázku, mimo něj. Na úzké obrazovce se
   posunou k dolnímu okraji — vedle obrázku by na ně nezbylo místo
   a překrývaly by fotografii, kvůli které se vrstva otevřela.
   ═══════════════════════════════════════════════════════════════════════ */

.lupa__krok{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; padding:0;
  display:grid; place-items:center;
  border:1px solid rgb(246 242 234 / .35);
  border-radius:50%;
  background:rgb(13 11 9 / .45);
  color:#F6F2EA; font-size:30px; line-height:1;
  cursor:pointer;
  transition:background var(--prechod), border-color var(--prechod);
}
.lupa__krok:hover,
.lupa__krok:focus-visible{
  background:rgb(13 11 9 / .7);
  border-color:rgb(246 242 234 / .8);
}
.lupa__krok--zpet{ left:24px; }
.lupa__krok--vpred{ right:24px; }
.lupa__krok[hidden]{ display:none; }

/* Pořadí fotografie pod popiskem — člověk ví, kolik jich ještě zbývá. */
.lupa__poradi{
  display:block; margin-top:6px;
  font-size:13px; letter-spacing:.12em;
  opacity:.65;
}
.lupa__poradi[hidden]{ display:none; }

@media (max-width:720px){
  .lupa__krok{
    top:auto; bottom:20px; transform:none;
    width:48px; height:48px; font-size:26px;
  }
  .lupa__krok--zpet{ left:20px; }
  .lupa__krok--vpred{ right:20px; }
}


/* ── klepací místa na telefonu ─────────────────────────────────────
   Odkazy v patičce a v přepínači jazyků jsou jen text, takže jejich
   výška odpovídá písmu — na dotykovém displeji vyšla 16 px a trefit
   se do nich bylo obtížné. Doporučená nejmenší plocha je 44 px;
   dosáhneme jí odsazením, aby se rozestupy nerozhodily. */
@media (max-width: 760px) {
  .patka a,
  .patka__site a,
  .jazyky a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }

  /* Řádky by se odsazením roztáhly dvojnásobně — vrátíme je zpět. */
  .patka li { line-height: 1.4; }
  .patka li a { line-height: 44px; }

  /* Telefon a e-mail stojí uvnitř odstavce s adresou. Obecné pravidlo
     na .patka p a je přebíjelo pravidlo o řádkování, proto se hodnoty
     vynucují. Adresa sama zůstává textem, mění se jen odkazy. */
  .patka a[href^="tel:"],
  .patka a[href^="mailto:"] {
    display: inline-block !important;
    min-height: 44px !important;
    line-height: 44px !important;
  }

  /* Odkaz na technické údaje ve vzorníku byl 11 px — pod hranicí
     čitelnosti na telefonu. */
  /* Dvě dřívější pravidla (.vzornik .vzor__vic a .vzory .vzor__vic)
     mají vyšší přesnost, proto se musí přebít stejně přesně. */
  .vzornik .vzor__vic,
  .vzory .vzor__vic {
    font-size: 13px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ──────────────────────────────────────────────── katalog ke stažení ─── */
/* Obálka vlevo, text vpravo. Obálka je na výšku (A4), takže její sloupec
   musí být úzký — v širokém by se oddíl protáhl přes celou výšku listu. */
.katalog__mrizka{
  display:grid; grid-template-columns:minmax(190px, 270px) 1fr;
  gap:56px; align-items:center;
}
.katalog__obalka{ margin:0; }
.katalog__obalka img{
  width:100%;
  border:1px solid rgb(196 160 106 / .22);
  box-shadow:0 18px 40px rgb(0 0 0 / .34);
}
.katalog__telo p{ max-width:52ch; }
.katalog__akce{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:28px;
}
/* Formát a velikost souboru vedle tlačítka. Návštěvník má vědět, co si
   stahuje, dřív než klepne — na mobilních datech je to rozdíl. */
.katalog__udaje{
  font-family:var(--nadpis); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-slaby);
}
.oddil--tmavy .katalog__udaje{ color:rgb(214 207 196 / .70); }

/* Text na tmavém podkladu. .oddil p má pevnou tmavou barvu, která na
   tmavém pruhu splývá s pozadím. Dosud to nevadilo, protože žádný tmavý
   oddíl delší text neměl — katalog ho má. */
.oddil--tmavy p{ color:#C9C1B6; }
.oddil--tmavy h2{ color:#EDE7DE; }

@media (max-width: 860px){
  .katalog__mrizka{ grid-template-columns:1fr; gap:34px; }
  .katalog__obalka{ max-width:230px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Drobnosti, které dřív stály jako vložené styly v šablonách

   Kontroly zdrojového kódu hlásí vložené styly jako chybu a při každém
   načtení stránky se posílají znovu. Jsou to tři jednořádkové úpravy,
   ale právě ty se objevují na úvodní stránce.
   ═══════════════════════════════════════════════════════════════════════ */
.oddil--bez-spodku{ padding-bottom:0; }

/* Skupina polí, která slouží jen k seskupení pro odečítač obrazovky —
   rámeček ani odsazení mít nemá. */
.formular__skupina--bez-ramu{ border:0; padding:0; margin:0; }

/* Druhý nadpis ve sloupci patičky potřebuje odstup od seznamu nad ním.
   Selektor musí být stejně silný jako obecné `.patka h2`, jinak ho
   přebije a odstup zmizí. */
.patka .patka__nadpis--odsazeny{ margin-top:26px; }

/* Nadpis poptávkového formuláře a formuláře návštěvy.

   Týž kus HTML se vykresluje dvakrát: jako oddíl stránky uvnitř
   `.oddil` a jako obsah vyskakovací vrstvy. Dřív to byla značka h2
   a každé místo si ji obarvilo samo — v oddílu obecným `.oddil h2`,
   ve vrstvě výchozím vzhledem prohlížeče. Značka se změnila, vzhled
   ne, takže obě podoby drží tahle dvojice pravidel.

   Hodnoty níž jsou přesně to, co prohlížeč u h2 ve vrstvě spočítal:
   velikost 1.5em, odstupy .83em a žádná verzálková úprava. */
.formular__nadpis{
  font-family:var(--nadpis); font-weight:400; letter-spacing:.03em;
  font-size:1.5em; text-transform:none; margin:.83em 0;
}
/* Uvnitř oddílu vypadá jako ostatní nadpisy oddílů. */
.oddil .formular__nadpis{
  font-size: clamp(25.5px,2.6vw,37px); line-height:1.35;
  margin:0 0 24px; text-transform:uppercase;
}

/* Sklad opakovaných značek. Drží obsah loga, na které se pak na stránce
   jen odkazuje — nic se z něj nekreslí přímo. */
.svg-sklad{ position:absolute; width:0; height:0; overflow:hidden; }