/* =========================================================================
   www.misocz.cz - verejny web, verze 2026
   Pozadi stranky (podweb.jpg - binarni "matrix") zustava puvodni.
   ========================================================================= */

:root {
  --inkoust: #12324d;       /* nadpisy, paticka */
  --modra: #1572b6;         /* hlavni barva (odkazy, tlacitka) */
  --modra-tmava: #0f5a91;
  --nebe: #29a3dd;
  --nebe-tint: #eaf5fc;
  --linka: #d9e6f0;
  --text: #24323d;
  --tlumeny: #5b6b78;
  --zelena: #8cc04b;        /* shodne s internetovymi objednavkami */
  --zelena-tmava: #5e8f22;
  --oranzova: #f4a52a;
  --oranzova-tmava: #d98a0c;
  --cervena: #c8382b;
  --displej: #0e2233;
  --stin: 0 1px 2px rgba(18, 50, 77, .06), 0 8px 24px rgba(18, 50, 77, .08);
  --radius: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-nadpis: Bahnschrift, "DIN Alternate", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, "DejaVu Sans Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  /* puvodni pozadi webu */
  background: #fff url('../img/podweb.jpg') repeat-x top;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--modra); text-underline-offset: 2px; }
a:hover { color: var(--modra-tmava); }
:focus-visible { outline: 3px solid var(--oranzova); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--font-nadpis); color: var(--inkoust); line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: clamp(28px, 4.2vw, 44px); font-weight: 700; margin: 0 0 14px; }
h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; margin: 40px 0 14px; }
h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
p { margin: 0 0 14px; }

.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.preskocit { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 8px; }
.preskocit:focus { left: 8px; }

/* ---------- list (bila stranka uprostred pozadi) ---------- */

.list {
  max-width: 1140px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(18, 50, 77, .05), 0 10px 50px rgba(18, 50, 77, .14);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; padding: 0 40px 40px; }

/* ---------- horni lista ---------- */

.lista {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 40px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linka);
}

.znacka { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--inkoust); flex: none; }
.znacka img { width: 44px; height: 44px; border-radius: 6px; }
.znacka-text { display: flex; flex-direction: column; line-height: 1.1; }
.znacka-text b { font-family: var(--font-nadpis); font-size: 21px; letter-spacing: -.01em; }
.znacka-text small { font-size: 12.5px; color: var(--tlumeny); }

.navigace { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav-seznam { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-seznam > li { position: relative; }
.nav-odkaz {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--inkoust);
  text-decoration: none;
  cursor: pointer;
}
.nav-odkaz .ico { width: 16px; height: 16px; transition: transform .15s; }
.nav-odkaz:hover, .nav-skupina:hover > .nav-odkaz, .nav-skupina.otevrena > .nav-odkaz { background: var(--nebe-tint); color: var(--modra); }
.nav-odkaz[aria-current], .nav-skupina.aktivni > .nav-odkaz { color: var(--modra); box-shadow: inset 0 -2px 0 var(--modra); border-radius: 10px 10px 4px 4px; }

.nav-podmenu {
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  min-width: 300px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--linka);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(18, 50, 77, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.nav-podmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-skupina:hover .nav-podmenu, .nav-skupina:focus-within .nav-podmenu, .nav-skupina.otevrena .nav-podmenu {
  opacity: 1; visibility: visible; transform: none;
}
.nav-skupina:hover > .nav-odkaz .ico, .nav-skupina.otevrena > .nav-odkaz .ico { transform: rotate(180deg); }
.nav-podmenu a { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--text); }
.nav-podmenu a b { display: block; font-weight: 650; color: var(--inkoust); }
.nav-podmenu a small { display: block; font-size: 13px; color: var(--tlumeny); }
.nav-podmenu a:hover, .nav-podmenu a[aria-current] { background: var(--nebe-tint); }
.nav-podmenu a[aria-current] b { color: var(--modra); }

.menu-prepinac { display: none; }

/* ---------- tlacitka ---------- */

.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--modra);
  color: #fff;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14);
  transition: background-color .15s, transform .15s;
}
.tlacitko:hover { background: var(--modra-tmava); color: #fff; }
.tlacitko:active { transform: translateY(1px); }
.tlacitko .ico { width: 18px; height: 18px; }
.tlacitko-demo { background: var(--zelena); color: #fff; }
.tlacitko-demo:hover { background: var(--zelena-tmava); }
.tlacitko-oranzove { background: var(--oranzova); color: #21180a; }
.tlacitko-oranzove:hover { background: var(--oranzova-tmava); color: #21180a; }
.tlacitko-pruhledne { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.tlacitko-pruhledne:hover { background: rgba(255, 255, 255, .26); }
.tlacitko-svetle { background: #fff; color: var(--inkoust); box-shadow: inset 0 0 0 1.5px var(--linka); }
.tlacitko-svetle:hover { background: var(--nebe-tint); color: var(--inkoust); }

.odkaz-sipka { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--modra); text-decoration: none; }
.odkaz-sipka .ico { width: 18px; height: 18px; transition: transform .15s; }
a.odkaz-sipka:hover .ico, a:hover .odkaz-sipka .ico { transform: translateX(3px); }

/* ---------- uvod: hero ---------- */

.hero, .zahlavi {
  position: relative;
  margin: 24px 0 0;
  border-radius: 22px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(100deg, rgba(10, 52, 92, .96) 0%, rgba(16, 96, 160, .90) 45%, rgba(30, 150, 214, .72) 100%),
    url('../img/web/klavesnice.jpg') center / cover no-repeat;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: center;
  padding: 52px 48px;
}
.hero h1, .zahlavi h1 { color: #fff; }
.hero h1 { max-width: 16em; }
.nadtitulek { font-family: var(--font-nadpis); font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #a9dcf7; margin-bottom: 10px; }
.perex { font-size: 18px; line-height: 1.55; color: #e3f2fc; max-width: 40em; margin: 0; }
.hero .perex { margin-bottom: 26px; }
.hero-akce { display: flex; flex-wrap: wrap; gap: 12px; }

/* demo jako displej terminalu */
.displej {
  background: var(--displej);
  border-radius: 18px;
  padding: 22px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 40px rgba(0, 0, 0, .3);
}
.displej-stitek { font-size: 14px; font-weight: 600; color: #a9c4d8; margin-bottom: 14px; }
.displej-udaje { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.displej-udaje div { background: #071622; border-radius: 10px; padding: 10px 12px; box-shadow: inset 0 0 0 1px rgba(140, 192, 75, .25); }
.displej-udaje dt { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #7f98ab; }
.displej-udaje dd { margin: 0; font-family: var(--font-mono); font-size: 28px; font-weight: 700; letter-spacing: .08em; color: #a8e063; text-shadow: 0 0 12px rgba(140, 192, 75, .45); }
.displej .tlacitko { width: 100%; }

/* ---------- zahlavi podstranek ---------- */

.zahlavi { padding: 40px 48px 42px; }
.zahlavi-vnitrek { max-width: 760px; }
.zahlavi h1 { margin-bottom: 10px; }
.drobecky { font-size: 14px; color: #a9dcf7; margin-bottom: 8px; }
.drobecky a { color: #fff; }

/* ---------- sekce ---------- */

.sekce-hlava { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; margin: 48px 0 18px; }
.sekce-hlava h2 { margin: 0; }
.sekce-hlava p { margin: 0; color: var(--tlumeny); }

/* podpora */
.kontakty {
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.kontakt-radek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 28px;
  padding: 16px 24px;
}
.kontakt-radek + .kontakt-radek { border-top: 1px solid var(--linka); }
.kontakt-kdo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; }
.kontakt-role { font-size: 15px; color: var(--tlumeny); min-width: 170px; }
.kontakt-jmeno { font-weight: 600; color: var(--inkoust); }
.kontakt-doba { flex-basis: 100%; font-size: 14px; color: var(--tlumeny); }
.kontakt-cislo {
  font-size: 20px;
  font-weight: 600;
  color: var(--inkoust);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
  user-select: all;
  cursor: text;
}
.kontakt-volat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--modra); background: var(--nebe-tint);
}
.kontakt-volat:hover { background: #d6eaf8; color: var(--modra-tmava); }
.kontakt-volat .ico { width: 16px; height: 16px; }
.kontakt-hlavni { background: var(--nebe-tint); }
.kontakt-hlavni .kontakt-role { color: var(--modra); font-weight: 600; }
.kontakt-hlavni .kontakt-volat { background: var(--modra); color: #fff; }
.kontakt-hlavni .kontakt-volat:hover { background: var(--modra-tmava); color: #fff; }
.kontakt-maily { grid-template-columns: minmax(0, 1fr) auto; }
.kontakt-adresy { display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: flex-end; font-size: 17px; font-weight: 600; }
.kontakt-adresy a { text-decoration: none; }
.kontakt-adresy a:hover { text-decoration: underline; }

.ke-stazeni { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.soubor {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--nebe-tint);
  color: var(--text);
  text-decoration: none;
  transition: background-color .15s;
}
.soubor:hover { background: #d9ecf9; color: var(--text); }
.soubor strong { display: block; color: var(--inkoust); line-height: 1.3; }
.soubor small { display: block; font-size: 13.5px; color: var(--tlumeny); }
.soubor-ikona { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: #fff; color: var(--modra); box-shadow: inset 0 0 0 1px var(--linka); }
.soubor-pdf { color: var(--modra); }

/* o systemu */
.o-systemu { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; margin-top: 8px; }
.o-systemu-obr { margin-top: 56px; }

.fajfky { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 8px; }
.fajfky li { display: flex; gap: 10px; align-items: flex-start; }
.fajfky .ico { width: 22px; height: 22px; padding: 3px; margin-top: 1px; border-radius: 50%; background: var(--zelena); color: #fff; stroke-width: 3; }

/* produkty */
.karty-produkty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.produkt {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.produkt:hover { box-shadow: var(--stin); transform: translateY(-3px); border-color: #b7d6ec; color: var(--text); }
.produkt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--linka); background: var(--nebe-tint); }
.produkt-text { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.produkt-text strong { font-family: var(--font-nadpis); font-size: 18px; color: var(--inkoust); }
.produkt-text > span:not(.odkaz-sipka) { font-size: 14.5px; color: var(--tlumeny); line-height: 1.45; }
.produkt-text .odkaz-sipka { margin-top: auto; padding-top: 6px; }
.produkt-hlavni { grid-column: span 2; flex-direction: row; }
.produkt-hlavni img { width: 50%; aspect-ratio: auto; min-height: 0; border-bottom: 0; border-right: 1px solid var(--linka); }
.produkt-hlavni .produkt-text { flex: 1; justify-content: center; padding: 24px 26px; }
.produkt-hlavni strong { font-size: 22px; }

/* novinky */
.novinky-obsah { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.novinky-seznam { list-style: none; margin: 0; padding: 0; counter-reset: novinka; }
.novinky-seznam li { position: relative; padding: 0 0 18px 26px; border-left: 2px solid var(--linka); margin-left: 6px; }
.novinky-seznam li:last-child { padding-bottom: 0; }
.novinky-seznam li::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--oranzova); box-shadow: 0 0 0 4px #fff; }

/* ---------- obrazky + prohlizec ---------- */

.obrazek { margin: 0; }
.obrazek a { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--linka); background: var(--nebe-tint); }
.obrazek img { width: 100%; transition: transform .3s; }
.obrazek a:hover img { transform: scale(1.03); }
.lupa { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(18, 50, 77, .78); color: #fff; opacity: 0; transition: opacity .15s; }
.obrazek a:hover .lupa, .obrazek a:focus-visible .lupa { opacity: 1; }
.obrazek figcaption { font-size: 14px; color: var(--tlumeny); line-height: 1.4; margin-top: 8px; }
.obrazek > img { border-radius: 12px; border: 1px solid var(--linka); }

.prohlizec {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 56px 72px 24px;
  border: 0;
  background: rgba(8, 20, 32, .92);
  color: #fff;
}
.prohlizec[open] { display: grid; place-items: center; }
.prohlizec::backdrop { background: transparent; }
.prohlizec figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 100%; }
.prohlizec img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); background: #fff; }
.prohlizec figcaption { font-size: 15px; text-align: center; color: #d5e3ee; }
.prohlizec button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.prohlizec button:hover { background: rgba(255, 255, 255, .24); }
.prohlizec button .ico { width: 26px; height: 26px; }
.prohl-zavri { top: 12px; right: 16px; }
.prohl-pred { left: 12px; top: 50%; margin-top: -24px; }
.prohl-dal { right: 12px; top: 50%; margin-top: -24px; }
.prohlizec.jeden .prohl-pred, .prohlizec.jeden .prohl-dal { display: none; }

/* ---------- podstranky ---------- */

.clanek { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; margin-top: 36px; }
.clanek-siroky { grid-template-columns: minmax(0, 1fr); }
.text { max-width: 720px; }
.clanek-siroky .text { max-width: none; }
.text > h2:first-child { margin-top: 0; }
.uvodni { font-size: 18px; color: var(--inkoust); }
.galerie { display: grid; gap: 22px; position: sticky; top: 96px; }

.verze { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.verze div { padding: 16px 18px; border-radius: 14px; background: var(--nebe-tint); }
.verze strong { display: block; font-family: var(--font-nadpis); font-size: 20px; color: var(--modra); }
.verze span { font-size: 15px; color: var(--tlumeny); }

.moduly { display: grid; gap: 14px; }
.moduly section { padding: 18px 20px 6px; border: 1px solid var(--linka); border-left: 4px solid var(--zelena); border-radius: 12px; }

.doplnky { margin: 0; display: grid; gap: 2px; }
.doplnky dt { font-weight: 700; color: var(--inkoust); margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.doplnky dt::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--oranzova); flex: none; }
.doplnky dd { margin: 0 0 0 20px; }

.kroky { list-style: none; counter-reset: krok; padding: 0; margin: 20px 0; display: grid; gap: 16px; }
.kroky > li { counter-increment: krok; position: relative; padding-left: 54px; min-height: 40px; }
.kroky > li::before {
  content: counter(krok);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--modra); color: #fff;
  font-family: var(--font-nadpis); font-weight: 700; font-size: 18px;
}
.kroky p { margin-bottom: 6px; }

.stitky { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.stitky li { padding: 6px 12px; border-radius: 999px; background: var(--nebe-tint); color: var(--inkoust); font-size: 14.5px; font-weight: 600; }

.demo-pruh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 26px; padding: 18px 20px; border-radius: 16px; background: var(--displej); color: #c8d8e4; }
.demo-pruh strong { display: block; color: #fff; font-size: 17px; }
.demo-pruh b { font-family: var(--font-mono); color: #a8e063; font-size: 18px; letter-spacing: .05em; }

.parametry { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; }
.parametry div { padding: 12px 14px; border-radius: 12px; background: var(--nebe-tint); }
.parametry dt { font-size: 13px; color: var(--tlumeny); }
.parametry dd { margin: 0; font-family: var(--font-nadpis); font-weight: 700; font-size: 17px; color: var(--inkoust); }

.klavesy { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
kbd {
  display: inline-grid; place-items: center;
  min-width: 30px; height: 30px; margin-right: 8px; padding: 0 6px;
  border-radius: 7px; border: 1px solid #b9cddd; border-bottom-width: 3px;
  background: #fff; font-family: var(--font-mono); font-weight: 700; color: var(--inkoust);
}

.terminaly-odkazy { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0 8px; }
.produkt-maly { flex-direction: row; }
.produkt-maly img { width: 150px; aspect-ratio: auto; object-fit: cover; border-bottom: 0; border-right: 1px solid var(--linka); }

.varianty { display: grid; gap: 26px; }
.varianta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: start; padding: 24px; border: 1px solid var(--linka); border-radius: 18px; }
.varianta-text h3 { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.varianta-text p + h3 { margin-top: 22px; }
.cislo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--modra); color: #fff; font-size: 16px; }
.pozn { font-size: 14.5px; color: var(--tlumeny); padding-left: 12px; border-left: 3px solid var(--linka); }
.obrazek-schema a { background: #fff; }
.zvyraznit { margin-top: 24px; padding: 14px 18px; border-radius: 12px; background: #fff6e6; border-left: 4px solid var(--oranzova); color: #5a3b05; font-weight: 600; }

.symboly-sloupce { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 22px; }
.symboly-sloupce section { padding: 16px; border-radius: 14px; background: var(--displej); color: #c8d8e4; }
.symboly-sloupce h3 { color: #fff; font-size: 15px; margin-bottom: 10px; }
.symboly { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.symboly li { display: flex; align-items: center; gap: 10px; }
.seg {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 34px; border-radius: 6px;
  background: #050f17; color: #ff5a3c;
  font-family: var(--font-mono); font-weight: 700; font-size: 20px;
  text-shadow: 0 0 8px rgba(255, 90, 60, .6);
}
.seg-porce { font-size: 22px; line-height: 1; }

/* ukazka */
.fotogalerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 32px; }
.fotogalerie img { aspect-ratio: 3 / 2; object-fit: cover; }

/* cenik jako jidelni listek */
.listek {
  max-width: 820px;
  margin: 36px auto 0;
  padding: 40px 48px 24px;
  border-radius: 20px;
  background: #fffdf7;
  border: 1px solid #efe5cf;
  box-shadow: var(--stin), inset 0 0 0 8px #fffdf7, inset 0 0 0 9px #efe1c4;
}
.listek-chod + .listek-chod { margin-top: 30px; }
.listek h2 {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 12px;
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--modra);
}
.listek h2::after { content: ""; flex: 1; height: 1px; background: #e6d8b8; }
.listek ul { list-style: none; margin: 0; padding: 0; }
.listek li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.listek .nazev { flex: 0 1 auto; }
.listek .hlavni .nazev { font-weight: 700; color: var(--inkoust); }
.listek .tecky { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted #cbbd9c; transform: translateY(-4px); }
.listek .cena { flex: none; font-family: var(--font-nadpis); font-weight: 700; color: var(--inkoust); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* vyzva */
.vyzva {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px;
  margin-top: 56px; padding: 26px 30px;
  border-radius: 20px; background: var(--nebe-tint);
}
.vyzva h2 { margin: 0 0 4px; font-size: 22px; }
.vyzva p { margin: 0; color: var(--tlumeny); }
.vyzva-akce { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

/* ---------- paticka ---------- */

.paticka { background: var(--inkoust); color: #b8cadb; font-size: 15px; padding: 44px 40px 0; }
.paticka-sloupce { display: grid; grid-template-columns: 1fr 1.3fr 1fr 1.1fr; gap: 32px; }
.paticka h2 { color: #fff; font-size: 16px; margin: 0 0 14px; letter-spacing: .02em; }
.paticka-maily { line-height: 2; }
.paticka a { color: #e3eef7; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.paticka a:hover { color: #fff; text-decoration: underline; }
.paticka .ico { width: 18px; height: 18px; color: var(--nebe); }
.adresa { display: flex; gap: 8px; }
.adresa .ico { margin-top: 3px; }
.telefony { margin: 0; display: grid; gap: 2px; }
.telefony dt { font-size: 13.5px; }
.telefony dt small { display: block; color: #8fa6ba; }
.telefony dd { margin: 0 0 10px; font-weight: 650; font-variant-numeric: tabular-nums; }
.paticka-odkazy { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.copyright { margin: 36px 0 0; padding: 18px 0 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; text-align: center; color: #8fa6ba; }
.copyright a { font-weight: 650; }

/* ---------- tablet ---------- */

@media (max-width: 1080px) {
  .karty-produkty { grid-template-columns: 1fr 1fr; }
  .paticka-sloupce { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  main { padding: 0 24px 32px; }
  .lista { padding: 10px 24px; }
  .menu-prepinac {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    min-height: 44px; padding: 8px 14px; border: 1px solid var(--linka); border-radius: 12px;
    background: #fff; font: inherit; font-weight: 650; color: var(--inkoust); cursor: pointer;
  }
  .navigace {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 12px;
    max-height: calc(100vh - 70px); overflow: auto;
    padding: 12px 24px 20px;
    background: #fff; border-bottom: 1px solid var(--linka);
    box-shadow: 0 20px 30px rgba(18, 50, 77, .15);
  }
  .lista.menu-otevrene .navigace { display: flex; }
  .nav-seznam { flex-direction: column; align-items: stretch; }
  .nav-odkaz { width: 100%; justify-content: space-between; padding: 12px; font-size: 17px; }
  .nav-odkaz[aria-current], .nav-skupina.aktivni > .nav-odkaz { box-shadow: none; }
  .nav-podmenu { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; display: none; border: 0; box-shadow: none; padding: 0 0 6px 10px; }
  .nav-skupina.otevrena .nav-podmenu { display: block; }
  .nav-skupina:hover > .nav-odkaz .ico { transform: none; }
  .nav-skupina.otevrena > .nav-odkaz .ico { transform: rotate(180deg); }
  .navigace .tlacitko-demo { width: 100%; }

  .hero { grid-template-columns: 1fr; padding: 36px 28px; gap: 28px; }
  .zahlavi { padding: 30px 28px; }
  .o-systemu, .novinky-obsah, .clanek { grid-template-columns: 1fr; gap: 28px; }
  .o-systemu-obr { margin-top: 0; max-width: 480px; }
  .galerie { position: static; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .varianta { grid-template-columns: 1fr; }
  .symboly-sloupce { grid-template-columns: 1fr 1fr; }
  .parametry { grid-template-columns: 1fr 1fr; }
}

/* ---------- mobil ---------- */

@media (max-width: 600px) {
  body { font-size: 15.5px; }
  main { padding: 0 14px 28px; }
  .lista { padding: 8px 14px; gap: 12px; }
  .znacka img { width: 38px; height: 38px; }
  .znacka-text b { font-size: 19px; }
  .menu-prepinac span { display: none; }
  .navigace { padding: 8px 14px 18px; }
  .hero, .zahlavi { margin-top: 14px; border-radius: 18px; }
  .hero { padding: 28px 20px; }
  .zahlavi { padding: 24px 20px; }
  .perex { font-size: 16.5px; }
  .hero-akce .tlacitko { flex: 1; }
  .displej-udaje dd { font-size: 24px; }
  .karty-produkty, .ke-stazeni, .verze, .terminaly-odkazy { grid-template-columns: 1fr; }
  .produkt-hlavni { grid-column: auto; flex-direction: column; }
  .produkt-hlavni img { width: 100%; border-right: 0; border-bottom: 1px solid var(--linka); aspect-ratio: 4 / 3; }
  .produkt-maly img { width: 110px; }
  .sekce-hlava { margin-top: 36px; }
  .symboly-sloupce { grid-template-columns: 1fr; }
  .varianta { padding: 16px; }
  .listek { padding: 26px 18px 14px; margin-top: 20px; }
  .listek li { flex-wrap: wrap; gap: 0 8px; }
  .listek .tecky { min-width: 16px; }
  .vyzva { padding: 22px 18px; }
  .vyzva-akce .tlacitko { width: 100%; }
  .paticka { padding: 34px 18px 0; }
  .paticka-sloupce { grid-template-columns: 1fr; gap: 26px; }
  .prohlizec { padding: 56px 8px 80px; }
  .prohl-pred, .prohl-dal { top: auto; bottom: 16px; margin-top: 0; }
  .prohl-pred { left: calc(50% - 60px); }
  .prohl-dal { right: calc(50% - 60px); }
}

@media (min-width: 1300px) {
  .list { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  body { background: #fff; }
  .list { box-shadow: none; }
  .lista, .vyzva, .paticka-sloupce, .lupa, .prohlizec { display: none !important; }
  .hero, .zahlavi { color: var(--inkoust); background: none; padding: 0; }
  .hero h1, .zahlavi h1, .perex { color: var(--inkoust); }
  .galerie { position: static; }
}
.str-cenik .vyzva .odkaz-sipka { display: none; }

@media (max-width: 600px) {
  .produkt img, .produkt-hlavni img { aspect-ratio: 16 / 9; }
  .kontakt-radek, .kontakt-maily { grid-template-columns: 1fr auto; padding: 14px 16px; gap: 6px 12px; }
  .kontakt-kdo { grid-column: 1 / -1; }
  .kontakt-role { min-width: 0; }
  .kontakt-cislo { font-size: 19px; }
  .kontakt-adresy { grid-column: 1 / -1; justify-content: flex-start; flex-direction: column; }
}

/* stranka Kontakt */
.kontakt-stranka { grid-template-columns: minmax(0, 1fr) 340px; }
.kontakt-stranka .text { max-width: none; }
.kontakt-stranka .ke-stazeni { grid-template-columns: 1fr; }
.kontakt-boky { display: grid; gap: 16px; position: sticky; top: 96px; }
.kontakt-boky section { padding: 22px 24px; border-radius: var(--radius); }
.kontakt-boky h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 20px; }
.kontakt-boky p:last-child { margin-bottom: 0; }
.karta-adresa { background: var(--nebe-tint); }
.karta-adresa .adresa { font-size: 17px; color: var(--inkoust); }
.karta-adresa .adresa .ico { margin-top: 4px; color: var(--modra); }
.karta-hodiny { background: #fff; border: 1px solid var(--linka); }
.karta-hodiny dl { margin: 0; display: grid; gap: 0; }
.karta-hodiny dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; }
.karta-hodiny dl div + div { border-top: 1px solid var(--linka); }
.karta-hodiny dt { color: var(--tlumeny); }
.karta-hodiny dd { margin: 0; font-weight: 600; color: var(--inkoust); font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
  .kontakt-stranka, .uv { grid-template-columns: 1fr; }
  .kontakt-boky { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .kontakt-boky { grid-template-columns: 1fr; }
}

/* stranka Vzdalene pripojeni */
.uv { grid-template-columns: minmax(0, 1fr) 320px; }
.uv-stazeni { display: flex; gap: 24px; align-items: center; padding: 24px; margin-bottom: 26px; border: 1px solid var(--linka); border-radius: var(--radius); background: var(--nebe-tint); }
.uv-stazeni img { width: 96px; height: 96px; flex: none; }
.uv-stazeni h2 { margin: 0 0 6px; }
.uv-stazeni p { color: var(--tlumeny); margin-bottom: 14px; }
.kontakt-boky .kontakt-cislo { font-size: 20px; }
@media (max-width: 960px) {
  .uv { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .uv-stazeni { flex-direction: column; align-items: flex-start; padding: 18px; }
  .uv-stazeni img { width: 72px; height: 72px; }
}

/* stranka Povyseni trid (navod) */
.navod { max-width: 1000px; margin-top: 32px; }
.navod section + section { margin-top: 12px; }
.navod-upozorneni { padding: 16px 20px; border-radius: 12px; background: #fff6e6; border-left: 4px solid var(--oranzova); color: #5a3b05; }
.navod-upozorneni p { margin: 0; }
.navod-upozorneni p + p { margin-top: 6px; }
.navod-pozn { color: var(--tlumeny); margin-top: -4px; }
.navod-kroky { list-style: none; counter-reset: krok; margin: 18px 0 0; padding: 0; }
.navod-kroky > li {
  counter-increment: krok;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 16px 32px;
  align-items: start;
  padding: 0 0 26px 54px;
}
.navod-kroky > li::before {
  content: counter(krok);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--modra); color: #fff; font-weight: 700;
}
.navod-kroky > li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 44px; bottom: 8px; width: 2px; background: var(--linka); }
.navod-kroky-bez > li { padding-left: 0; }
.navod-kroky-bez > li::before, .navod-kroky-bez > li::after { display: none; }
.navod-text p { margin: 6px 0 10px; }
.navod-kroky > li:not(:has(figure, .navod-obrazky)) .navod-text { grid-column: 1 / -1; }
.navod-obrazky { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.obrazek-uzky { max-width: 300px; }
.navod-obrazky .obrazek-uzky { max-width: none; }
.cesta { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--nebe-tint); color: var(--inkoust); font-weight: 600; white-space: nowrap; }
.navod-opakovat { margin: 0 0 8px 54px; padding: 14px 18px; border-radius: 12px; background: var(--nebe-tint); }
.navod-opakovat p { margin: 0; }
.navod-pdf { margin-top: 28px; }
.navod-pdf a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
@media (max-width: 760px) {
  .navod-kroky > li { grid-template-columns: 1fr; padding-left: 46px; }
  .navod-kroky-bez > li { padding-left: 0; }
  .navod-opakovat { margin-left: 0; }
  .cesta { white-space: normal; }
}

/* uvod: obrazek u "Komplexni reseni" zarovnany s nadpisem */
.o-systemu .o-systemu-obr { margin-top: 40px; }

/* uvod: produkty jako seznam (styl jako navod) */
.produkty > h2, .novinky > h2 { margin-top: 48px; }
.seznam-produktu { list-style: none; margin: 18px 0 0; padding: 0; }
.seznam-produktu > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 12px 32px;
  align-items: center;
  padding: 10px 0 10px 20px;
  border-left: 4px solid var(--zelena);
}
.seznam-produktu > li + li { margin-top: 14px; }
.produkt-popis h3 { font-size: 20px; margin: 0 0 6px; }
.produkt-popis h3 a { color: var(--inkoust); text-decoration: none; }
.produkt-popis h3 a:hover { color: var(--modra); }
.produkt-popis p { color: var(--tlumeny); margin: 0 0 10px; }
.produkt-obr { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--linka); }
.produkt-obr img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; transition: transform .3s; }
.produkt-obr:hover img { transform: scale(1.03); }
.novinky .navod-kroky h3 { margin-top: 6px; }
@media (max-width: 760px) {
  .seznam-produktu > li { grid-template-columns: minmax(0, 1fr) 110px; gap: 12px; padding-left: 14px; align-items: start; }
  .produkt-popis h3 { font-size: 18px; }
}

/* uvod: obrazek v modrem pruhu (vydej obedu) */
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 374px); padding-bottom: 36px; }
.hero-obr { display: block; align-self: end; margin: -24px -8px 0 0; }
.hero-obr img { width: 100%; height: auto; filter: drop-shadow(0 16px 28px rgba(0, 20, 40, .3)); }
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero-obr { max-width: 323px; justify-self: center; margin: 0; }
}

/* zahlavi podstranek: perex na celou sirku pruhu */
.zahlavi-vnitrek { max-width: none; }
.zahlavi .perex { max-width: 60em; }

/* ---------- horni menu: modra tlacitka stejne sirky ---------- */
.nav-seznam { gap: 8px; }
.nav-seznam > li > .nav-odkaz {
  width: 128px;
  height: 42px;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 11px;
  background: linear-gradient(180deg, #2386cf 0%, var(--modra) 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .14), 0 2px 6px rgba(21, 114, 182, .25);
  transition: background-color .15s, box-shadow .15s, transform .15s;
}
.nav-seznam > li > .nav-odkaz:hover,
.nav-skupina:hover > .nav-odkaz,
.nav-skupina.otevrena > .nav-odkaz {
  background: linear-gradient(180deg, #1a77bd 0%, var(--modra-tmava) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 4px 12px rgba(21, 114, 182, .32);
}
.nav-seznam > li > .nav-odkaz:active { transform: translateY(1px); }
.nav-seznam > li > .nav-odkaz[aria-current],
.nav-skupina.aktivni > .nav-odkaz {
  background: var(--inkoust);
  color: #fff;
  border-radius: 11px;
  box-shadow: inset 0 -3px 0 var(--nebe), 0 2px 6px rgba(18, 50, 77, .3);
}
.nav-seznam > li > .nav-odkaz .ico { width: 15px; height: 15px; opacity: .9; }
.nav-podmenu { top: calc(100% + 10px); left: 0; }

@media (max-width: 1080px) {
  .nav-seznam > li > .nav-odkaz { width: 112px; font-size: 14.5px; }
}

@media (max-width: 960px) {
  .nav-seznam { gap: 8px; }
  .nav-seznam > li > .nav-odkaz { width: 100%; height: 48px; justify-content: space-between; padding: 0 16px; font-size: 16px; }
  .nav-podmenu { padding: 6px 0 2px 8px; }
}

/* menu: text presne uprostred tlacitka (sipka nezavisle vpravo) */
.nav-seznam > li > .nav-odkaz {
  position: relative;
  line-height: 1;
  padding: 0 26px;
  transition: box-shadow .15s, transform .15s;
}
.nav-seznam > li > .nav-odkaz .ico {
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -7.5px;
  transition: transform .15s;
}
@media (max-width: 960px) {
  .nav-seznam > li > .nav-odkaz { padding: 0 44px 0 16px; justify-content: flex-start; }
  .nav-seznam > li > .nav-odkaz .ico { right: 16px; }
}
.nav-seznam > li > .nav-odkaz { width: 138px; }
.nav-seznam > li > .nav-odkaz .ico { right: 10px; }
@media (max-width: 1080px) {
  .nav-seznam > li > .nav-odkaz { width: 124px; font-size: 14px; padding: 0 22px; }
}
@media (max-width: 960px) {
  .nav-seznam > li > .nav-odkaz { width: 100%; font-size: 16px; padding: 0 44px 0 16px; }
  .nav-seznam > li > .nav-odkaz .ico { right: 16px; }
}

/* menu: svisle vystredeni textu nezavisle na pismu (Segoe UI na Windows sedi v radku nize) */
.nav-seznam > li > .nav-odkaz .nav-text {
  display: block;
  line-height: 1.2;
  text-box: trim-both cap alphabetic;      /* novejsi prohlizece: stred = stred velkych pismen */
}
.nav-seznam > li > .nav-odkaz[aria-current],
.nav-skupina.aktivni > .nav-odkaz { box-shadow: 0 2px 6px rgba(18, 50, 77, .3); }
.nav-seznam > li > .nav-odkaz[aria-current]::after,
.nav-skupina.aktivni > .nav-odkaz::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--nebe);
}

/* menu: bez linky u vybrane polozky */
.nav-seznam > li > .nav-odkaz[aria-current]::after,
.nav-skupina.aktivni > .nav-odkaz::after { content: none; }

/* ---------- cenik (karty s tabulkami) ---------- */
.cenik {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
  align-items: start;
}
.cenik-karta {
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(18, 50, 77, .04);
}
.cenik-karta:first-child { grid-row: span 3; }
.cenik-hlava {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  background: var(--nebe-tint);
  border-bottom: 1px solid var(--linka);
}
.cenik-hlava h2 { margin: 0; font-size: 19px; }
.cenik-hlava .odkaz-sipka { font-size: 14px; white-space: nowrap; }
.cenik-tabulka { width: 100%; border-collapse: collapse; }
.cenik-tabulka th, .cenik-tabulka td { padding: 13px 22px; vertical-align: baseline; border-bottom: 1px solid #edf3f8; }
.cenik-tabulka tr:last-child th, .cenik-tabulka tr:last-child td { border-bottom: 0; }
.cenik-tabulka th { text-align: left; font-weight: 400; color: var(--text); }
.cenik-tabulka td { text-align: right; white-space: nowrap; font-weight: 650; color: var(--inkoust); font-variant-numeric: tabular-nums; }
.cenik-tabulka tr.hlavni th { font-weight: 650; color: var(--inkoust); }
.cenik-tabulka tr.hlavni td { color: var(--modra); font-size: 17px; }
.cenik-tabulka tbody tr:hover { background: #f7fbfe; }
.zdarma { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #e7f4da; color: #3f6d12; font-size: 14px; }
@media (max-width: 860px) {
  .cenik { grid-template-columns: 1fr; }
  .cenik-karta:first-child { grid-row: auto; }
}
@media (max-width: 600px) {
  .cenik-hlava, .cenik-tabulka th, .cenik-tabulka td { padding-left: 14px; padding-right: 14px; }
  .cenik-tabulka td { padding-left: 8px; }
}

/* kontakt: oddelit telefony od souboru ke stazeni */
.kontakt-stranka .ke-stazeni { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--linka); }

/* logo: puvodni velikost, text bliz k ikone a radky k sobe */
.znacka { align-items: center; gap: 9px; }
.znacka img { width: 44px; height: 44px; }
.znacka-text { line-height: 1; gap: 4px; }
.znacka-text b { line-height: 1; text-box: trim-both cap alphabetic; }
.znacka-text small { font-size: 12.5px; line-height: 1; text-box: trim-both cap alphabetic; }
@media (max-width: 600px) { .znacka img { width: 38px; height: 38px; } }

/* uvod: kontakty a soubory ke stazeni ve dvou sloupcich */
.podpora { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0 20px; align-items: start; }
.podpora > .sekce-hlava { grid-column: 1 / -1; }
.podpora > .ke-stazeni { margin-top: 0; grid-template-columns: 1fr; gap: 14px; }
.podpora > .ke-stazeni .soubor { padding: 18px 20px; }
@media (max-width: 960px) {
  .podpora { grid-template-columns: 1fr; }
  .podpora > .ke-stazeni { margin-top: 14px; }
}

/* kontakty: mensi telefony, jmeno na jednom radku s roli */
.kontakt-radek { gap: 8px 18px; padding: 14px 20px; }
.kontakt-role { min-width: 140px; font-size: 14.5px; }
.kontakt-jmeno { white-space: nowrap; }
.kontakt-cislo { font-size: 17px; }
.kontakt-volat { padding: 5px 11px; font-size: 13.5px; }
.kontakt-adresy { font-size: 15.5px; gap: 4px 18px; }

/* provozni doba technicke podpory jako tmave modre pole vpravo */
.soubor-doba { background: var(--inkoust); color: #fff; }
.soubor-doba:hover { background: var(--inkoust); color: #fff; }
.soubor-doba strong { color: #fff; }
.soubor-doba small { color: #fff; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.soubor-doba .soubor-ikona { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
.kontakt-stranka .soubor-doba { display: none; }   /* na strance Kontakt je provozni doba v boku */

/* kontakty: bez preteceni na uzkych sirkach */
.kontakt-maily { grid-template-columns: auto minmax(0, 1fr); }
.kontakt-adresy a { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .kontakt-volat { font-size: 0; gap: 0; padding: 7px; }
  .kontakt-volat .ico { width: 18px; height: 18px; }
}

/* uvod: podnadpis podpory pod nadpisem */
.podpora > .sekce-hlava { flex-direction: column; align-items: flex-start; gap: 6px; }

/* provozni doba: stejna modra jako tlacitka menu */
.soubor-doba, .soubor-doba:hover { background: linear-gradient(180deg, #2386cf 0%, var(--modra) 100%); }
.soubor-doba .soubor-ikona { background: rgba(255, 255, 255, .18); }

/* uvod: soubory vpravo zacinaji na urovni nadpisu */
.podpora > .sekce-hlava { grid-column: 1; grid-row: 1; }
.podpora > .kontakty { grid-column: 1; grid-row: 2; }
.podpora > .ke-stazeni { grid-column: 2; grid-row: 1 / 3; margin-top: 48px; }
@media (max-width: 960px) {
  .podpora > .sekce-hlava, .podpora > .kontakty, .podpora > .ke-stazeni { grid-column: 1; grid-row: auto; }
  .podpora > .ke-stazeni { margin-top: 14px; }
}

/* paticka: oranzove ikony */
.paticka .ico { color: var(--oranzova); }

/* uvod: produkty ve dvou sloupcich */
.seznam-produktu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.seznam-produktu > li + li { margin-top: 0; }
.seznam-produktu > li { grid-template-columns: minmax(0, 1fr) 170px; gap: 12px 20px; align-items: start; }
@media (max-width: 960px) {
  .seznam-produktu { grid-template-columns: 1fr; }
}

/* svisle linky modre misto zelenych */
.seznam-produktu > li { border-left-color: var(--modra); }
.moduly section { border-left-color: var(--modra); }

/* uvod: pole vpravo roztazena na vysku leveho bloku (od nadpisu po spodek kontaktu) */
@media (min-width: 961px) {
  .podpora > .ke-stazeni { align-self: stretch; grid-auto-rows: 1fr; }
  .podpora > .kontakty { align-self: end; }
}

/* paticka: telefonni cisla oranzove */
.paticka .telefony dd a { color: var(--oranzova); }
.paticka .telefony dd a:hover { color: #ffc266; }

/* uvod: novinky v ramecku (jako Mozne sestavy) */
.novinky > .navod-kroky { padding: 24px 24px 2px; border: 1px solid var(--linka); border-radius: 18px; }
@media (max-width: 600px) { .novinky > .navod-kroky { padding: 16px 16px 0; } }

/* uvod: popisek obrazku v novinkach na stred */
.novinky .obrazek figcaption { text-align: center; }


/* popisek obrazku zarovnany na stred (internetove objednavky) */
.obrazek.popis-stred figcaption { text-align: center; }

/* internetove objednavky na hlavni - obrazek vycentrovany */
.produkt-obr img[src*='intobj2'] { object-position: center; }

/* menu: tlacitka o 8 px nizsi (42 -> 34 px, mobil 48 -> 40 px) */
.nav-seznam > li > .nav-odkaz { height: 34px; }
@media (max-width: 960px) {
  .nav-seznam > li > .nav-odkaz { height: 40px; }
}

/* menu: domecek (uvod) jako prvni tlacitko jen s ikonou, ostatni tlacitka uzsi */
.nav-seznam > li > .nav-odkaz { width: 128px; }
.nav-seznam > li.nav-domu > .nav-odkaz { width: 46px; padding: 0; justify-content: center; }
.nav-seznam > li.nav-domu > .nav-odkaz .ico { position: static; margin: 0; width: 19px; height: 19px; opacity: 1; }
.nav-seznam > li.nav-domu > .nav-odkaz .nav-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.nav-seznam > li.nav-domu > .nav-odkaz[aria-current]::after { left: 10px; right: 10px; }
@media (max-width: 1080px) {
  .nav-seznam > li > .nav-odkaz { width: 116px; }
  .nav-seznam > li.nav-domu > .nav-odkaz { width: 42px; }
}
@media (max-width: 960px) {
  .nav-seznam > li > .nav-odkaz,
  .nav-seznam > li.nav-domu > .nav-odkaz { width: 100%; justify-content: flex-start; gap: 10px; padding: 0 44px 0 16px; }
  .nav-seznam > li.nav-domu > .nav-odkaz .nav-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .nav-seznam > li.nav-domu > .nav-odkaz .ico { width: 18px; height: 18px; }
}

/* popisky pod vsemi obrazky na stred */
.obrazek figcaption { text-align: center; }

/* paticka: odkaz Cookies info vedle copyrightu */
.copyright-odd { margin: 0 10px; color: #5f7890; }
.copyright .copyright-cookies { font-weight: 400; color: #b8cadb; }
.copyright .copyright-cookies:hover { color: #fff; }
/* stranka Cookies */
.tabulka-cookies { width: 100%; border-collapse: collapse; margin: 6px 0 20px; font-size: 15px; }
.tabulka-cookies th, .tabulka-cookies td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linka); }
.tabulka-cookies th { background: var(--nebe-tint); color: var(--inkoust); font-size: 14px; }
.tabulka-cookies td:last-child { white-space: nowrap; color: var(--tlumeny); }
@media (max-width: 640px) { .tabulka-cookies td:last-child { white-space: normal; } }
.cookies-stranka .tabulka-obal { overflow-x: auto; }

/* pruh s demem: svetlejsi modra, bily text, mensi */
.demo-pruh { margin-top: 20px; padding: 12px 16px; gap: 10px 14px; border-radius: 14px; background: var(--nebe); color: #fff; font-size: 15px; }
.demo-pruh strong { color: #fff; font-size: 16px; }
.demo-pruh b { color: #fff; font-size: 16px; }
.demo-pruh .tlacitko-demo { padding: 9px 16px; font-size: 15px; background: #fff; color: var(--modra-tmava); box-shadow: 0 2px 6px rgba(15, 90, 145, .25); }
.demo-pruh .tlacitko-demo:hover { background: var(--nebe-tint); color: var(--modra-tmava); }

/* identifikace firmy (paticka, kontakt) */
.firma-udaje { margin: 30px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; line-height: 1.6; text-align: center; color: #8fa6ba; }
.firma-udaje + .copyright { margin-top: 10px; padding-top: 0; border-top: 0; }
.firma-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; margin: 4px 0 10px; font-size: 15px; }
.firma-dl div { display: contents; }
.firma-dl dt { color: var(--tlumeny); }
.firma-dl dd { margin: 0; font-weight: 600; color: var(--inkoust); }
.firma-or { font-size: 13.5px; color: var(--tlumeny); line-height: 1.5; }