) — stejná výška 3px, stejná barva.
Dřív měl button height:auto + padding a pruh kreslil přes ::before, takže
se oproti sousedům „rozšiřoval". Teď je button sám ten 3px pruh; větší
klikací plocha se dělá NEVIDITELNÝM overlayem (::before, absolutní), který
nezvětšuje samotný pruh ani neposouvá layout. */
button.k-progress-bar {
appearance: none;
border: none;
padding: 0;
height: 3px; /* stejné jako div segment */
flex: 1;
background: var(--orange); /* dokončený = vždy oranžový (jako .active) */
opacity: 1;
cursor: pointer;
border-radius: 0;
position: relative;
transition: filter .15s ease;
}
button.k-progress-bar::before { /* jen klikací plocha, neviditelná, nemění velikost pruhu */
content: "";
position: absolute;
left: 0; right: 0; top: -8px; bottom: -8px;
}
button.k-progress-bar:hover { filter: brightness(1.15); }
button.k-progress-bar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.k-sb-model { padding-bottom: 18px; border-bottom: 1px solid var(--divider); }
.k-sb-model-name { font-size: 30px; font-weight: 800; margin: 0; }
.k-sb-model-change { font-size: 13px; font-weight: 700; margin: 8px 0 0; cursor: pointer; }
.k-sb-model-change:hover { text-decoration: underline; }
/* Panel = obsah sidebaru bez patičky (na mobilu se schovává pod burger).
Musí být sám flex sloupec, aby uvnitř scrolloval jen výpis voleb. */
.k-sb-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.k-sb-recap { flex: 1; min-height: 0; padding-top: 20px; overflow-y: auto; }
.k-sb-param { margin-bottom: 18px; }
.k-sb-param-label { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.k-sb-param-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.k-sb-param-value { font-size: 14px; opacity: .92; margin: 0; }
.k-sb-param-price { font-size: 14px; opacity: .92; margin: 0; white-space: nowrap; }
.k-sb-total {
padding-top: 16px; margin-top: 8px;
border-top: 1px solid var(--divider);
}
.k-sb-total-row { display: flex; justify-content: space-between; gap: 12px; }
.k-sb-total-row.main { font-weight: 700; font-size: 16px; }
.k-sb-total-row.vat { font-size: 14px; opacity: .9; margin-top: 4px; }
.k-sb-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
/* Skrytá cena (default per vendor) */
.k-price-hidden .k-sb-param-price,
.k-price-hidden .k-sb-total-value,
.k-price-hidden .k-price-tag { visibility: hidden; }
/* ============================================================
Step type: LIST (typ vrat, pohon)
============================================================ */
.k-list { display: flex; flex-direction: column; gap: 8px; }
.k-list-item {
position: relative; /* kotva pro DALŠÍ v rohu karty */
display: flex; align-items: center; gap: 24px;
border: 3px solid #fff;
padding: 18px 16px;
cursor: pointer;
transition: .25s;
}
/* DALŠÍ ve vybrané kartě sedí v pravém dolním rohu (návrh). Je menší než
tlačítko v sidebaru, aby se vešlo pod vrata a nepřekrývalo obrázek. */
.k-list-next {
position: absolute; right: 16px; bottom: 16px;
padding: 10px 20px; font-size: 13px;
}
.k-list-item:hover { border-color: var(--orange); }
.k-list-item.selected { border-color: var(--orange); }
.k-list-item-body { flex: 1; }
/* Texty o stupeň menší — na velkém monitoru působily „hrozně velké" (Freelo 32573739, 23.9.2026) */
.k-list-item-name { font-size: 22px; font-weight: 400; margin: 0 0 10px; }
.k-list-item-bullets { margin: 0 0 16px; padding-left: 20px; color: var(--muted); font-weight: 300; font-size: 15px; }
.k-list-item-bullets li { margin: 2px 0; }
.k-list-item-price { font-size: 16px; margin: 0; }
.k-list-item-price .lbl { color: var(--muted); margin-right: 10px; }
.k-list-item-img {
width: 42%; max-width: 360px; flex-shrink: 0;
display: grid; place-items: center;
}
.k-list-item-img img { width: 100%; }
.k-ph-door {
width: 100%; aspect-ratio: 16/10;
background: var(--tile-placeholder);
display: grid; place-items: center; color: #b0b0b0; font-size: 13px;
}
/* ============================================================
Step type: TILES (provedeni, struktura, barvy, proskleni, dvere)
============================================================ */
.k-tiles {
display: grid;
/* menší dlaždice (připomínka klienta 21.7.2026, Freelo screenshot):
4 v řadě s pevným stropem šířky místo roztažení na celý sloupec,
zarovnané doleva — zbylé místo zůstává volné vpravo */
grid-template-columns: repeat(4, minmax(0, 185px));
gap: 24px 28px;
}
/* Dvojice (Hladká / Woodgrain, Bez / S prosklením) dřív měly vlastní mřížku
se dvěma sloupci do 185 px — ve čtyřech sloupcích se dlaždice do stropu
nevešly (~150 px), ve dvou ano, takže dvojice byly větší než čtveřice
(Freelo 32573739). Na desktopu proto jede stejná čtyřsloupcová mřížka,
jen se dva sloupce nechají prázdné; `cols-2` má význam už jen na mobilu. */
.k-tiles.cols-2 { grid-template-columns: repeat(4, minmax(0, 185px)); }
/* Barvy: menší dlaždice než u ostatních kroků — je to plocha odstínu, ne
fotka panelu, takže nepotřebuje výšku vrat. Od 5.8.2026 na přání klienta
OBDÉLNÍK NAŠIŘKO místo čtverce (3:2) a 5 vzorků v řadě — 14 odstínů se
vejde do 3 řad místo 4 a paletu jde projít bez dlouhého scrollování. */
.k-tiles.k-tiles-color { grid-template-columns: repeat(5, minmax(0, 150px)); gap: 20px 24px; }
.k-tiles-color .k-tile-swatch { aspect-ratio: 3 / 2; }
/* Dlaždice, které jsou fotkou celých vrat (prosklení, umístění dveří — step.velkeFotky):
ve 185px sloupci „zbytečně malé" proti ostatním fotkám (Freelo 32666981). */
.k-tiles.k-tiles-foto { grid-template-columns: repeat(3, minmax(0, 230px)); }
.k-tile { cursor: pointer; }
.k-tile-swatch {
/* Rámeček má VŽDY stejný poměr, ať má fotka z katalogu jakýkoli.
min-height/overflow jsou nutné: box s aspect-ratio má automatické
minimum podle obsahu, takže by ho výška obrázku jinak přetlačila
(odtud dřívější 175×214 u provedení vs. 175×320 u struktury). */
aspect-ratio: var(--tile-ar);
min-height: 0;
overflow: hidden;
background: var(--tile-placeholder);
border: 3px solid #fff;
transition: .2s;
}
.k-tile:hover .k-tile-swatch,
.k-tile.selected .k-tile-swatch { border-color: var(--orange); }
/* fotky (panely, barvy, okna, pohon) vyplní dlaždici → rámeček sedí na obrázek */
.k-tile-img { background: #fff; }
.k-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.k-tile-label { margin: 12px 0 0; font-size: 16px; font-weight: 400; }
.k-tile-sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.k-tile-price { margin: 8px 0 0; font-size: 14px; color: var(--orange); font-weight: 500; }
/* texture swatches (struktura) */
.tex-hladka { background: #e9ecef; }
.tex-stucco { background: #dfe1e3; background-image: radial-gradient(#c9cccf 1px, transparent 1.4px); background-size: 6px 6px; }
.tex-woodgrain{ background: repeating-linear-gradient(0deg, #e6e8ea 0 3px, #dadce0 3px 6px); }
.tex-imitace { background: repeating-linear-gradient(90deg, #6b4226 0 4px, #5a381f 4px 8px, #7a4c2c 8px 12px); }
/* window-pattern tiles (proskleni volby) */
.k-win {
aspect-ratio: var(--tile-ar);
border: 3px solid #fff; background: #eceef0;
display: flex; flex-direction: column; justify-content: flex-start;
padding: 8px; gap: 6px; transition: .2s;
}
.k-tile:hover .k-win, .k-tile.selected .k-win { border-color: var(--orange); }
.k-win-row { flex: 1; background: #dfe2e5; border-radius: 1px; }
.k-win-row.glass { background: #a9c6d6; }
/* dvoukřídlá vrata – umístění oken v křídlech (ne v sekcích) */
.k-wings { flex-direction: row; gap: 8px; }
.k-wing {
flex: 1; background: #dfe2e5; border-radius: 1px;
display: flex; justify-content: center; align-items: flex-start; padding: 12% 14% 0;
}
.k-wing-glass { width: 100%; aspect-ratio: 1/1; background: #a9c6d6; }
/* doplňující dotaz ke kroku (např. požadovaný počet oken v sekci) */
.k-note { margin-top: 28px; max-width: 420px; display: flex; flex-direction: column; gap: 8px; }
.k-note label { font-size: 16px; color: var(--muted); }
.k-note input {
padding: 12px 14px; font-family: inherit; font-size: 15px;
border: 1px solid #c9c9c9; border-radius: 0;
}
.k-note input { font-weight: 600; color: var(--ink); }
.k-note input::placeholder { font-weight: 400; color: #b8b8b8; }
.k-note input:focus { outline: none; border-color: var(--orange); }
/* Výběry NAD náhledem vrat (krok Okno: kolik oken + ve kterých sekcích).
Zadání je otázka, náhled je jeho výsledek → patří nad kresbu. */
.k-pickers { margin-top: 32px; display: flex; flex-direction: column; gap: 28px; }
.k-pickers .k-note { margin-top: 0; }
.k-picker-label { font-size: 16px; color: var(--muted); margin: 0 0 12px; }
.k-picker-hint { font-size: 13px; color: #9a9a9a; margin: 10px 0 0; }
.k-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.k-chip {
font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
min-width: 52px; padding: 11px 18px; cursor: pointer;
background: #fff; border: 1px solid #c9c9c9; border-radius: 0;
transition: border-color .12s, background-color .12s, color .12s;
}
.k-chip:hover { border-color: var(--orange); }
.k-chip.on { background: var(--orange); border-color: var(--orange); color: #fff; }
/* sekce uvnitř sloučeného kroku (vzhled = provedení + struktura + barva) */
.k-group-sec { margin-bottom: 52px; }
.k-group-sec:last-child { margin-bottom: 0; }
.k-group-title {
font-size: 21px; font-weight: 400; margin: 0 0 20px;
padding-bottom: 12px; border-bottom: 1px solid var(--divider);
}
/* velký náhled zvoleného provedení (krok Vzhled) — pod volbami, plynule
prolne (fade in/out) při přepnutí provedení */
/* Rámeček fotky SEDNE NA POMĚR STRAN té konkrétní fotky (--foto-pomer, dopl-
ňuje app.js → nastavPomerFotky). Dřív měl rámeček pevný poměr 3/2 a fotka
se do něj ořízla přes `cover` — u fotek NA VÝŠKU (1050 × 1400) tím zmizely
skoro dvě třetiny vrat a zbyl výřez uprostřed (připomínka klienta 18.9.2026,
Freelo 32573387). Řídicí rozměr je teď VÝŠKA (`--foto-vyska`): šířku si
fotka dopočítá z poměru, takže se nic neořezává a fotka na výšku je prostě
užší. `max-width: 100 %` hlídá opačný extrém (panorama 1400 × 630) — tam se
strop dotkne šířky a sníží se celý řádek.
Sloupec proto NENÍ `flex: 1 1 0` (roztáhl by se přes celé místo a fotka by
v něm plavala uprostřed), ale `0 1 auto` — obtáhne fotku a výřez panelu jde
hned za ni. Strop 68 % drží místo pro sloupec s výřezem (30 % + mezera). */
.k-vzhled-preview { max-width: 980px; margin: 48px 0 0; --foto-vyska: clamp(240px, 24vw, 320px); }
.k-vzhled-preview[hidden] { display: none; }
.k-vzhled-row { display: flex; gap: 20px; align-items: stretch; }
.k-vzhled-col { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; max-width: 68%; }
.k-vzhled-col .k-vzhled-photo {
flex: 0 0 auto; min-height: 0;
aspect-ratio: auto;
width: calc(var(--foto-vyska) * var(--foto-pomer, 1.5));
max-width: 100%;
/* Výška je u všech fotek STEJNÁ (Freelo 32573739, 23.9.2026 — panorama byla
nižší než fotka na výšku). Fotka na výšku se dál neořezává (šířka z poměru);
jen širokou panoramu, která narazí na strop šířky, ořízne `cover` po stranách. */
height: var(--foto-vyska);
}
.k-vzhled-col .k-vzhled-photo img { object-fit: cover; }
.k-vzhled-col-panel { flex: 0 0 30%; max-width: 300px; }
/* Výšku řádku určuje fotka, výřez panelu se k ní dotáhne — dřív měl vlastní
poměr 490/618 a končil o kus výš nebo níž (připomínka klienta 20.8.2026).
Výřez proto leží v rámečku absolutně: kdyby stál v toku, přinesl by si
vlastní výšku a u nižších fotek (panorama) by pod ně přečuhoval. */
.k-vzhled-col-panel .k-vzhled-panel { position: relative; flex: 1 1 auto; min-height: 0; }
.k-vzhled-col-panel .k-vzhled-panel-img { position: absolute; inset: 0; height: auto; aspect-ratio: auto; }
.k-vzhled-photo {
position: relative; aspect-ratio: 3 / 2; overflow: hidden;
background: var(--tile-placeholder);
}
/* `contain`, ne `cover`: rámeček má poměr té fotky, takže se obojí chová
stejně — ale než app.js poměr doplní (a u fotky, která se nenačte), se
`contain` nic neořízne. */
.k-vzhled-photo img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: contain; display: block;
}
/* Výřez panelu: užší sloupec vpravo od fotky, popisek jako v katalogu —
tmavě šedý pruh přes spodek obrázku, bílý tučný text. */
.k-vzhled-panel { margin: 0; position: relative; }
.k-vzhled-panel-img { display: block; aspect-ratio: 490 / 618; background: var(--tile-placeholder); }
.k-vzhled-panel-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.k-vzhled-panel-label {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 7px 8px;
background: #757575; color: #fff;
font-size: 13px; font-weight: 700; text-align: center;
}
/* Nový výřez naskakuje průhledný a vyvolá se — stejné časování jako fotka. */
.k-vzhled-panel-img img.k-fade-in { opacity: 0; transition: opacity .7s ease; }
.k-vzhled-panel-img img.k-fade-in.shown { opacity: 1; }
/* nová fotka: startuje průhledná, .shown ji pomalu vyvolá */
.k-vzhled-photo img.k-fade-in { opacity: 0; transition: opacity .7s ease; }
.k-vzhled-photo img.k-fade-in.shown { opacity: 1; }
/* stará fotka jako překryv, který zmizí (.gone) — vznikne crossfade */
.k-vzhled-photo img.k-vzhled-old { opacity: 1; transition: opacity .7s ease; z-index: 2; }
.k-vzhled-photo img.k-vzhled-old.gone { opacity: 0; }
/* Dvě fotky realizace na jednu kombinaci (viz preview.images v config.js):
leží přes sebe a druhá se pořád dokola vyvolává a zase mizí — vznikne
plynulé střídání obou. Řeší to CSS, ne časovač v JS: animace se sama
uspí, když je záložka na pozadí, a respektuje prefers-reduced-motion. */
.k-vzhled-slide { position: absolute; inset: 0; }
.k-vzhled-duo .k-vzhled-slide-2 { z-index: 1; opacity: 0; animation: k-vzhled-duo 11s ease-in-out infinite; }
@keyframes k-vzhled-duo {
0%, 40% { opacity: 0; }
50%, 90% { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.k-vzhled-photo img { transition: none !important; opacity: 1 !important; }
.k-vzhled-panel-img img { transition: none !important; opacity: 1 !important; }
/* bez animace by druhá fotka trvale překrývala první → schová se */
.k-vzhled-duo .k-vzhled-slide-2 { animation: none; display: none; }
}
/* Na úzkém displeji (zadání 15.9.2026): fotka a výřez panelu zůstávají vedle
sebe, ale v nízkém pruhu — pod sebou zabíraly skoro celou obrazovku
(612 px). Strop výšky je nízký, fotka si k němu dopočítá šířku. */
@media (max-width: 560px) {
/* Výšku už nedrží řádek, ale `--foto-vyska` (šířku si fotka dopočítá
z poměru) — pevných 210 px řádku fotku zase ořezávalo. */
.k-vzhled-preview { margin-top: 24px; --foto-vyska: 230px; }
.k-vzhled-row { gap: 8px; }
.k-vzhled-col-panel { flex: 0 0 34%; max-width: none; }
.k-vzhled-col .k-realizace-note { font-size: 11px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-vzhled-panel-label { font-size: 11px; padding: 4px; }
}
/* realizace gallery */
.k-realizace { margin-top: 56px; }
/* galerie navazující na živý náhled barvy — bez nadpisu, blíž k němu */
.k-realizace-navazuje { margin-top: 20px; }
.k-realizace-title { font-size: 21px; font-weight: 400; margin: 0 0 20px; }
/* Fotka je katalogová, odstín na ní se může lišit od skutečného laku —
pod galerií i pod přebarveným náhledem proto stojí upozornění. */
/* Popisek stojí NAD fotkami (13.8.2026), proto odsazení dolů. Po nadpisu
sekce se přitáhne blíž, ať drží u sebe jako jeden blok. */
.k-realizace-note { margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.k-realizace-title + .k-realizace-note { margin-top: -8px; }
/* Od zavedení sbalené galerie (15.9.2026) stojí mezi nadpisem a popiskem
skryté tlačítko `.k-galerie-toggle` (na desktopu display:none, ale pořád
v DOM) — sousední selektor výš proto nadpis s popiskem už nenajde vedle
sebe. Popisek navíc leží uvnitř `.k-galerie-obsah`, ne přímo za tlačítkem. */
.k-realizace-title + .k-galerie-toggle + .k-galerie-obsah > .k-realizace-note:first-child { margin-top: -8px; }
/* živý náhled barvy (krok Barva): fotka + barevná vrstva přes masku křídla */
.k-tint-photo { position: relative; max-width: 260px; } /* 360 → 260 px (Freelo 32573739, 23.9.2026) */ /* 546 px bylo „zbytečně velké" (Freelo 32573739) — 360 px, doleva jako galerie */
.k-tint-photo img { width: 100%; display: block; }
.k-tint-layer {
position: absolute; inset: 0;
mix-blend-mode: multiply; /* barva × jas podkladu → zachované stíny a drážky */
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
pointer-events: none;
transition: background .25s; /* plynulé přebarvení při klikání mezi odstíny */
}
/* Galerie realizací: tři fotky vedle sebe, všechny STEJNĚ VELKÉ (5.8.2026).
Dřív se kreslily v původním rozlišení, takže vedle sebe stály fotky
různých velikostí. Poměr je pevný (4:3) a obrázek se do něj ořízne přes
object-fit — zdrojové fotky jsou na 4:3 předstříhané, takže se nic
podstatného neuřízne. */
/* Mřížka má VŽDY tři sloupce, ať je fotek jedna, dvě nebo tři — fotka je
tak u každé volby stejně velká. Dřív se počet sloupců řídil počtem fotek
(`data-cols`, nastavuje app.js) a jedna/dvě fotky byly o 35 % větší —
při přepínání „Bez / S prosklením" tím ilustrační fotka skákala mezi
velikostmi (Freelo 32573739, 18.9.2026). Prázdné místo vpravo je
přijatelnější než skok. `data-cols` zůstává v DOM pro mobilní přepis. */
.k-realizace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 980px; }
.k-realizace-grid figure { margin: 0; }
.k-realizace-grid figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.k-realizace-grid .k-ph-photo {
aspect-ratio: 4/3; background: var(--tile-placeholder);
display: grid; place-items: center; color: #b0b0b0; font-size: 13px;
}
/* Tlačítko sbalené galerie existuje jen na mobilu — na desktopu je galerie
vidět rovnou, jako dřív. */
.k-galerie-toggle { display: none; }
/* interaktivní náhled prosklení (krok proskleni) — vzor + počet oken
z poznámky se vykreslí přímo na přední pohled vrat, nad dlaždice vzorů */
/* náhled stojí samostatně pod dlaždicemi kroku „Okno" (dřív byl uvnitř bloku
s vzory prosklení, který měl vlastní odsazení shora) */
.k-glazing-preview { max-width: 760px; margin: 32px 0; }
.k-glazing-preview svg { width: 100%; height: auto; }
/* klikatelné místo na okno v náhledu */
.k-glazing-preview .k-slot { cursor: pointer; }
.k-glazing-preview .k-slot:hover > :first-child { stroke: var(--orange); stroke-width: 2; }
.k-glazing-preview .k-slot:not(.on):hover { opacity: .85; }
/* ============================================================
Step type: DIMENSIONS (rozmery)
============================================================ */
.k-dim-diagram { max-width: 760px; margin: 0 0 44px; }
.k-dim-diagram svg { width: 100%; height: auto; display: block; }
/* zvýraznění kóty, kterou zákazník právě vyplňuje */
.k-dim-diagram [data-dim] { transition: opacity .15s; }
.k-dim-diagram.hl [data-dim] { opacity: .18; }
.k-dim-diagram.hl [data-dim].on { opacity: 1; }
/* Schéma podle Figmy (sekční vrata i vrata s dveřmi): fotka garáže je
podklad v CSS — při psaní se překresluje jen SVG s kótami, takže se
obrázek nenačítá znovu a neproblikává. Poměr stran 806:374 je z návrhu
celé stránky — v rámečku musí být vidět celá vrata i s podlahou.
Šířka není zastropená: ve Figmě schéma vyplňuje celý sloupec obsahu,
proto se roztáhne až na jeho šířku (podklad je 1612 px, na retinu stačí). */
.k-dim-schema {
max-width: none;
aspect-ratio: 806 / 374;
box-sizing: border-box;
border: 2px solid #d9d9d9;
/* Render je v návrhu na 68 % krytí (fill-opacity 0.68 nad bílou stránkou) —
bílá vrstva v gradientu dělá totéž, aniž bychom pálili průhlednost do JPG.
Velikost 100 % 100 % odpovídá preserveAspectRatio="none" z Figmy. */
background:
linear-gradient(rgba(255, 255, 255, .32), rgba(255, 255, 255, .32)),
#fff url('../assets/schema-rozmery-2.jpg') center / 100% 100% no-repeat;
}
.k-dim-schema svg { height: 100%; }
/* Vedlejší kóty — nadpraží a ostění. Šipka je oranžová jako u hlavních
rozměrů (návrh), rozlišuje je jen popisek: v klidu světlý (#909090),
při nastavování ztmavne a ztuční, aby bylo jasně vidět, co se mění. */
.k-dim-sec text { transition: fill .15s; }
.k-dim-schema.hl .k-dim-sec.on text { fill: #2f2f2f; font-weight: 600; }
/* Návrh má popisky na ~12 px, ale plátno 806 se kreslí na ~690 px, takže
na obrazovce vycházely na 10 px a byly nečitelné (Freelo 32573739,
18.9.2026). 15 px v jednotkách plátna = ~13 px na obrazovce; nejdelší
popisek („šířka ostění / vpravo 540 mm") se pořád vejde k okraji. */
.k-dim-schema text { font-size: 15px; font-weight: 400; }
/* Schéma se škáluje s šířkou obsahu, takže na užší obrazovce by popisky
spadly na 6–8 px. Písmo je proto v uživatelských jednotkách SVG větší —
velikosti jsou zvolené tak, aby se nejdelší popisek („vpravo 300 mm")
ještě vešel do plátna 806. */
@media (max-width: 860px) { .k-dim-schema text { font-size: 16px; } }
/* Mřížka polí je stejně široká jako schéma nad ní (v návrhu končí pravý
sloupec přesně na jeho hraně), proto sloupce nejsou zastropené na pevnou
šířku, ale dělí si celý sloupec obsahu. */
/* Svislá mezera drží rozteč řádků z návrhu: popisek od popisku 100 px, obsah
pole zabere 56 (24 popisek + 8 mezera + 24 řádek s posuvníkem). */
.k-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 56px; }
/* U sekčních vrat jde vedle polí parametrická kresba (mění se podle zadaných
mm — schéma nad ní je fixní ilustrace z Figmy). Pole proto stojí v JEDNOM
sloupci vlevo a kresba zabere místo po druhém. */
/* Sloupec s poli 377 → 440 px (5.8.2026): po zvětšení posuvníku a bubliny
by na dráhu zbylo míň místa než v návrhu, takže by slider vyšel opticky
ještě kratší, než na co si klient stěžoval. */
.k-dim-cols { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 40px; align-items: start; }
.k-inputs-col { grid-template-columns: minmax(0, 1fr); }
.k-dim-mini { position: sticky; top: 24px; }
.k-dim-mini svg { width: 100%; height: auto; display: block; }
/* Kresba je proti původnímu kroku zmenšená (plátno 760 se vejde do ~470 px),
takže popisky kót musí být v uživatelských jednotkách větší, jinak by
vyšly na 8 px. */
.k-dim-mini svg text { font-size: 19px; }
.k-dim-mini [data-dim] { transition: opacity .15s; }
.k-dim-mini.hl [data-dim] { opacity: .18; }
.k-dim-mini.hl [data-dim].on { opacity: 1; }
/* Na užším okně by se kresba i pole zmáčkly — kresba jde pod pole a pole se
vrátí do dvou sloupců, jak to bylo. */
@media (max-width: 1200px) {
.k-dim-cols { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.k-inputs-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-dim-mini { position: static; max-width: 520px; }
}
/* Pole podle návrhu (Group 234.svg, sloupec 377 px): popisek na svém řádku,
pod ním posuvník a na jeho konci bublina, u hlavních rozměrů ještě ikona.
Dráha se roztahuje do zbylého místa (v návrhu 272 px = sloupec bez bubliny,
ikony a mezer), místo po ikoně se drží i u polí bez nápovědy — jinak by
pravé hrany bublin nesouhlasily (viz .k-input-info-slot). */
.k-input-box { display: flex; flex-direction: column; }
.k-input-box > label { font-size: 20px; font-weight: 500; line-height: 24px; margin-bottom: 8px; }
.k-input-row { display: flex; align-items: center; gap: 8px; }
/* ---------- Posuvník + bublina s hodnotou (návrh z Figmy) ----------
Vyplněná část dráhy je gradient řízený proměnnou --fill, kterou při
každé změně přepočítá app.js (prohlížeče neumí obarvit jen levou část
samy). Jezdec je assetem z Figmy (Vector.svg): kruh
se středem 6,4 a poloměrem 6 OŘÍZNUTÝ rámem 12 x 8 — výsledek je tvar
12 px široký a 8 px vysoký, tedy širší než vyšší a přesně do dráhy
(rovná horní i spodní hrana, boky vyklenuté obloukem kruhu). Kreslí ho
ten samý vektor jako pozadí jezdce, aby oblouky seděly na pixel; elipsa
ani pilulka z CSS mají jiné boky. Dráha je Vector copy.svg: 344 x 8,
plné zaoblení, #D9D9D9. */
/* Zvětšeno 5.8.2026 (připomínka klienta „slider je moc malý"): dráha 8 → 14 px,
jezdec 12 x 8 → 21 x 14 px. Poměr jezdce (1,5 : 1) i jeho tvar zůstal
z Figmy — jen se škáluje background-size, kresba je vektor. Šířka jezdce
musí sedět s RANGE_THUMB v app.js, jinak oranžová část dráhy nedojede
přesně do jeho středu. */
.k-range {
-webkit-appearance: none; appearance: none;
flex: 1 1 auto; min-width: 0; height: 14px; margin: 0; padding: 0;
border: none; border-radius: 999px; cursor: pointer;
background: linear-gradient(var(--orange), var(--orange)) left / var(--fill, 0%) 100% no-repeat, #d9d9d9;
}
.k-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 21px; height: 14px; border: none; border-radius: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M6 10C9.31371 10 12 7.31371 12 4C12 0.686291 9.31371 -2 6 -2C2.68629 -2 0 0.686291 0 4C0 7.31371 2.68629 10 6 10Z' fill='%23000'/%3E%3C/svg%3E") center / 21px 14px no-repeat;
cursor: grab;
}
.k-range::-moz-range-thumb {
width: 21px; height: 14px; border: none; border-radius: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M6 10C9.31371 10 12 7.31371 12 4C12 0.686291 9.31371 -2 6 -2C2.68629 -2 0 0.686291 0 4C0 7.31371 2.68629 10 6 10Z' fill='%23000'/%3E%3C/svg%3E") center / 21px 14px no-repeat;
cursor: grab;
}
.k-range:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
/* hodnota je pořád editovatelná — zákazník musí umět zadat přesné mm */
.k-input-val {
flex: 0 0 auto; width: 96px; height: 34px; padding: 0 8px;
font-family: inherit; font-size: 18px; font-weight: 600; line-height: 30px; text-align: center;
color: #fff; background: var(--orange);
border: 2px solid var(--orange); border-radius: 5px;
}
.k-input-val::placeholder { color: rgba(255, 255, 255, .75); font-weight: 400; }
.k-input-val:focus { outline: none; border-color: var(--ink); }
/* Kolečko s nápovědou = vektor z Figmy (viz infoIcon v app.js). „i" je
v kolečku vyříznuté, takže prosvítá pozadí — proto tu není žádné
vlastní pozadí ani písmo, jen velikost (cca 3/4 výšky bubliny). */
.k-input-info, .k-input-info-slot {
flex: none; display: block; position: relative;
width: 22px; height: 22px;
color: var(--orange); cursor: help;
}
/* pole bez nápovědy drží místo po ikoně, aby pravé hrany bublin seděly */
.k-input-info-slot { cursor: default; }
.k-input-info svg { width: 100%; height: 100%; display: block; }
.k-input-info:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 50%; }
/* Vlastní bublina s nápovědou — nativní `title` naskočí až po vteřině
a to zpoždění prohlížeč nedovolí změnit. Tahle se rozsvítí hned,
jen s krátkým prolnutím (150 ms, žádná prodleva před ním).
`visibility` se přepíná skokem, ale při skrývání až po doznění
opacity — jinak by bublina zmizela dřív, než stihne vyblednout. */
.k-tip {
position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
z-index: 20; width: max-content; max-width: 240px;
padding: 7px 11px; border-radius: 4px;
background: #3a3a3a; color: #fff;
font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .15s ease, visibility 0s linear .15s;
}
.k-input-info:hover .k-tip,
.k-input-info:focus-visible .k-tip {
opacity: 1; visibility: visible;
transition: opacity .15s ease, visibility 0s linear 0s;
}
/* V návrhu se pod polem počítá jen se šedým údajem, proto si chyba
nedrží místo dopředu — naskočí až když je co hlásit. */
.k-input-err:not(:empty) { margin-top: 6px; color: var(--orange); font-size: 12px; }
/* ============================================================
Step type: CONTACT (shrnuti)
============================================================ */
/* úvodní text nad formulářem (obsah v config.js → intro) */
.k-contact-intro { max-width: 620px; margin: 0 0 32px; }
.k-contact-intro-title { font-size: 22px; font-weight: 400; margin: 0 0 12px; }
.k-contact-intro-text { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
.k-form { max-width: 620px; display: flex; flex-direction: column; gap: 22px; }
.k-form input, .k-form textarea {
width: 100%; padding: 18px 20px; font-family: inherit; font-size: 16px;
border: 2px solid var(--orange); border-radius: 0; background: #fff;
}
.k-form textarea { resize: vertical; min-height: 96px; }
.k-form input:focus, .k-form textarea:focus { outline: none; border-color: var(--orange-hover); }
/* Chyba pod polem. Rámeček polí je oranžový i v klidu (tak je vzhled
postavený), takže chybu nese tmavší červená + text — samotná změna barvy
rámečku by tu byla skoro neviditelná, a barva sama by stejně nestačila. */
.k-field { display: flex; flex-direction: column; }
.k-field-err { font-size: 14px; line-height: 1.4; color: #c02c17; margin-top: 6px; }
.k-field-err:empty { display: none; }
.k-form input.err, .k-form textarea.err { border-color: #c02c17; background: #fff8f7; }
/* Město + PSČ vedle sebe */
.k-form-row { display: flex; gap: 22px; align-items: flex-start; }
.k-form-row > .k-field { flex: 1; }
.k-form-row > .k-field:last-child { max-width: 180px; }
.k-form-msg { font-size: 15px; margin-top: 8px; }
.k-form-msg.ok { color: #1b7a34; }
.k-form-msg.err { color: var(--orange); }
/* ---------- GDPR: souhlas se zpracováním osobních údajů ----------
Povinný checkbox + krátká informace; podrobnosti jsou v
,
aby formulář nebyl stěna textu. Klikací plocha je celý