/* ==========================================================================
   R.C. Mannesmann — styl webu
   Vychází z design-tmp/index.html; rozšířeno o domovskou stránku a přehledy.
   Rozdělení sekcí odpovídá budoucím WP theme parts.
   ========================================================================== */

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

:root {
  --navy:   #002E5B;
  --teal:   #15779b;
  --teal-d: #1a8fb5;
  --gray:   #f4f4f4;
  --border: #dde2e8;
  --muted:  #7c7c7c;
  --ink:    #2b2b2b;
  --crit:   #c0392b;
  --wrap:   1100px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--gray);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.container { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip {
  position: absolute; left: -9999px; top: 0; background: #fff; color: var(--navy);
  padding: 10px 16px; z-index: 999; font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- TOP BAR ---------- */
.topbar { background: var(--navy); color: rgba(255,255,255,.7); font-size: 12px; padding: 6px 0; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar a { color: rgba(255,255,255,.7); }
.topbar a:hover { color: #fff; }
.topbar-right { display: flex; gap: 20px; align-items: center; }

/* Přepínač jazyka. Oddělený svislou linkou, ať nesplyne s odkazy
   vedle sebe; aktivní jazyk není odkaz, jen zvýrazněný text. */
.lang-switch { display: inline-flex; gap: 8px; align-items: center;
  padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .3); }
.lang-switch a { opacity: .75; }
.lang-switch a:hover { opacity: 1; }
.lang-on { font-weight: 700; }

/* ---------- HEADER + NAV ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 200; }
/* Kotva pro rozbalovací panel — ten se má vázat na šířku hlavičky,
   ne na položku menu. */
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 20px; position: relative; }
.logo img { height: 44px; width: auto; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--border);
  padding: 8px 12px; font-size: 18px; cursor: pointer; color: var(--navy);
}
nav > ul { display: flex; list-style: none; }
/* Položky menu nejsou kotvou: oddíly jsou jen dva a jsou zarovnané
   doprava, takže panel kotvený k položce vyčníval mimo obsah stránky. */
nav > ul > li { position: static; }
nav > ul > li > a {
  display: flex; align-items: center; gap: 5px; padding: 16px 13px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy); white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
nav > ul > li > a:hover, nav > ul > li.active > a { color: var(--teal); border-bottom-color: var(--teal); }
nav > ul > li > a .arr { font-size: 9px; color: var(--muted); transition: transform .2s; }
nav > ul > li:hover > a .arr { transform: rotate(180deg); }

.dd {
  display: none; position: absolute; top: 100%; left: 0; background: #fff;
  border: 1px solid var(--border); border-top: 2px solid var(--teal);
  box-shadow: 0 8px 24px rgba(0,0,0,.10); z-index: 200;
}
nav > ul > li:hover .dd, nav > ul > li:focus-within .dd { display: block; }
.dd.mega { left: 0; right: 0; min-width: 0; padding: 22px 26px 26px; }
/* Můstek přes mezeru mezi položkou menu a panelem. Bez něj kurzor cestou
   dolů opustí položku, :hover zhasne a panel se zavře dřív, než na něj
   dojedeš. */
.dd.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; }
/* Odkaz na stránku oddílu — potřebný jen na mobilu, kde ťuknutí na
   položku menu rozbaluje místo navigace. */
.dd-all { display: none; }
/* Panel s jedním nebo dvěma sloupci se neroztahuje přes celou hlavičku —
   obsah by seděl vlevo a zbytek zel prázdnotou (WC Stop). Drží se
   u pravého okraje, tedy pod svou položkou v menu. */
@media (min-width: 861px) {
  .dd.mega.cols-1 { left: auto; right: 0; width: 320px; }
  .dd.mega.cols-2 { left: auto; right: 0; width: 620px; }
}
.dd.simple { min-width: 230px; padding: 8px 0; }
.dd.simple a { display: block; padding: 8px 18px; font-size: 13px; white-space: nowrap; }
.dd.simple a:hover { background: var(--gray); color: var(--teal); }
/* Mřížka místo flexu: sloupců je pět, do řady se vejdou tři, takže se
   menu láme. Flex zalomené řady neodděloval a nadpis druhé řady
   („Waschtisch M16-M20") se lepil na poslední položku nad sebou. */
.mega-cols { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
@media (min-width: 861px) {
  .mega-cols.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega-cols.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-cols.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mc { padding: 0 16px; border-right: 1px solid var(--border); }
.mc:nth-child(3n+1) { padding-left: 0; }
.mc:nth-child(3n) { border-right: none; padding-right: 0; }
.mc:last-child { border-right: none; }
/* Skupin je pět a šablona je sází po třech do dvou bloků. Bloky na sebe
   navazovaly bez odstupu, takže nadpis druhé řady („Waschtisch M16-M20")
   se lepil na poslední položku nad sebou. */
.mega-cols + .mega-cols {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
}
.mc-title {
  /* Niki (RCM, 2026-08-24): nadpisy skupin v menu „ein wenig größer
     und Fett". Tučné už byly, drobné bylo písmo — 10 px na versálkách
     se špatně čte. */
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--teal); padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.mc ul { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.mc ul li a { display: block; padding: 5px 6px; font-size: 12px; border-radius: 3px; }
.mc ul li a:hover { background: var(--gray); color: var(--teal); }
.mc ul li a.cur { color: var(--teal); font-weight: 700; }

/* ---------- BREADCRUMB ---------- */
.breadcrumb { background: #fff; border-bottom: 1px solid var(--border); padding: 9px 0; font-size: 12px; color: var(--muted); }
.breadcrumb .container { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.breadcrumb a { color: var(--teal); }
.breadcrumb a:hover { text-decoration: underline; }
.bcs { color: var(--border); }

/* ---------- HOME ---------- */
.hero { background: #fff; border-bottom: 1px solid var(--border); padding: 56px 0; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { font-size: 34px; font-weight: 300; color: var(--navy); line-height: 1.2; margin-bottom: 14px; }
.hero h1 b { font-weight: 700; }
.hero p { font-size: 15px; color: #555; line-height: 1.7; margin-bottom: 22px; max-width: 52ch; }
.hero-tag { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.hero-tag b { color: var(--teal); }
.hero-stats { display: flex; gap: 0; border: 1px solid var(--border); background: var(--gray); }
.hs { flex: 1; padding: 16px 18px; border-right: 1px solid var(--border); }
.hs:last-child { border-right: none; }
.hs-n { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1; }
.hs-l { font-size: 11px; color: var(--muted); margin-top: 5px; }
.hero-img { border: 1px solid var(--border); background: #fff; padding: 24px; }
.hero-img img { max-height: 380px; width: auto; margin: 0 auto; object-fit: contain; }
/* Náladová fotka není produktová: jde na spad, bez bílého rámu. */
.hero-img--photo { padding: 0; border: none; }
.hero-img--photo img { max-height: none; width: 100%; height: auto; display: block; }

.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cat-card { background: #fff; border: 1px solid var(--border); display: block; transition: border-color .15s; }
.cat-card:hover { border-color: var(--teal); }
.cat-card .cc-img { aspect-ratio: 4/3; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; }
.cat-card .cc-img img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.cat-card .cc-body { padding: 16px 18px; }
.cat-card h3 { font-size: 15px; color: var(--navy); margin-bottom: 4px; }
.cat-card p { font-size: 12px; color: var(--muted); }

/* ---------- SECTIONS ---------- */
.sec { margin-top: 44px; }
.sec:first-child { margin-top: 0; }
.sec-title { font-size: 16px; font-weight: 700; color: var(--navy); border-bottom: 2px solid var(--border); padding-bottom: 8px; margin-bottom: 18px; }
.page { padding: 36px 0 56px; }
.page-head { margin-bottom: 26px; }
.page-head h1 { font-size: 26px; font-weight: 300; color: var(--navy); line-height: 1.25; }
.page-head h1 b { font-weight: 700; }
.page-head p { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ---------- PRODUCT CARDS ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.prod-card { background: #fff; border: 1px solid var(--border); transition: border-color .15s; display: flex; flex-direction: column; }
.prod-card:hover { border-color: var(--teal); }
.pci { aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; padding: 14px; overflow: hidden; }
.pci img { width: 100%; height: 100%; object-fit: contain; }
.pci.empty { background: var(--gray); color: var(--border); font-size: 34px; }
.pcb { padding: 12px; border-top: 1px solid var(--border); }
.pcn { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 3px; line-height: 1.35; }
.pcs { font-size: 11px; color: var(--muted); }

/* ---------- PRODUCT PAGE ---------- */
.product-layout { display: grid; grid-template-columns: 400px 1fr; gap: 48px; align-items: start; }
.gal-main { position: relative; background: #fff; border: 1px solid var(--border); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 28px; overflow: hidden; }
/* Značka „obrázek jde zvětšit". Viditelná pořád, ne až při najetí —
   na dotykových zařízeních žádné najetí neexistuje. */
.gal-zoom {
  position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.10); transition: all .15s;
}
.gal-main:hover .gal-zoom { background: var(--teal); border-color: var(--teal); color: #fff; }
.gal-main img { max-height: 300px; width: auto; object-fit: contain; transition: opacity .2s; }
.gal-main.empty { color: var(--border); font-size: 54px; background: var(--gray); }
.gal-thumbs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.thumb { width: 62px; height: 62px; border: 2px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; padding: 4px; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb.active, .thumb:hover { border-color: var(--teal); }

.cat-label { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--teal); font-weight: 700; margin-bottom: 6px; }
.prod-title { font-size: 22px; font-weight: 300; color: var(--navy); line-height: 1.3; margin-bottom: 4px; }
.prod-title b { font-weight: 700; }
.prod-sub { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.prod-desc { font-size: 14px; color: #444; line-height: 1.65; margin-bottom: 4px; }
.div { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* variant selector */
.vs-section { margin: 18px 0 0; }
.vs-group { margin-bottom: 14px; }
.vs-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.vs-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.vs-chip {
  display: flex; align-items: center; gap: 7px; border: 2px solid var(--border); background: #fff;
  padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--navy);
  transition: all .12s; white-space: nowrap; font-family: inherit;
}
.vs-chip:hover { border-color: var(--teal); }
.vs-chip[aria-pressed="true"] { border-color: var(--teal); background: #eaf5fb; color: var(--teal); }
/* Hodnota, která s aktuálním výběrem neexistuje: ztlumená, ale klikatelná
   — po kliknutí se zbytek výběru dopočítá na nejbližší vyráběnou variantu. */
.vs-chip.far { opacity: .5; }
.vs-chip.far:hover { opacity: 1; border-color: var(--teal); }
.vs-chip .chip-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
.selected-code { font-size: 12px; font-weight: 700; color: var(--teal); font-family: monospace; display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.selected-code .sc-label { font-family: Arial, sans-serif; font-weight: 400; font-size: 11px; color: var(--muted); }
.fixed-axes { font-size: 12px; color: var(--muted); margin-top: 10px; }
.fixed-axes b { color: var(--ink); }

/* tables */
.vtbl, .spec-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.vtbl thead tr { background: var(--navy); color: #fff; }
.vtbl thead td { padding: 10px 12px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.vtbl tbody tr { border-bottom: 1px solid var(--border); }
.vtbl tbody tr:last-child { border-bottom: none; }
.vtbl tbody tr:hover { background: #f0f7fa; }
.vtbl tbody td { padding: 9px 12px; vertical-align: middle; }
.vtbl .mono { font-family: monospace; font-size: 12px; }
.vtbl .mono a { color: var(--teal); border-bottom: 1px dotted currentColor; }
.vtbl .mono a:hover { border-bottom-style: solid; }
.vtbl td .nopic { color: var(--crit); font-size: 15px; line-height: 1; }
/* Tabulka se na úzkém displeji posouvá uvnitř svého rámu — stránka
   sama nepřetéká. Aby ale bylo poznat, že vpravo něco pokračuje,
   nese okraj stín; ten zmizí, jakmile je tabulka odrolovaná na konec.
   Řešeno jen CSS: dva bílé překryvy „local" maskují dva stíny „scroll". */
.tbl-wrap {
  overflow-x: auto; background: #fff; border: 1px solid var(--border);
  background-image:
    linear-gradient(to right, #fff 40%, rgba(255,255,255,0)),
    linear-gradient(to left,  #fff 40%, rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0 50%, rgba(0,46,91,.20), rgba(0,46,91,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,46,91,.20), rgba(0,46,91,0));
  background-position: left center, right center, left center, right center;
  background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.cdot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; margin-right: 6px; border: 1px solid rgba(0,0,0,.15); }
.spec-tbl tr:nth-child(even) td { background: var(--gray); }
.spec-tbl td { padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: top; }
.spec-tbl td:first-child { font-weight: 700; color: var(--navy); width: 42%; }

/* download + cta */
.dl-link {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--teal); color: var(--teal);
  padding: 9px 18px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin-top: 20px; transition: all .12s; background: #fff;
}
.dl-link:hover { background: var(--teal); color: #fff; }
.cta-box { margin-top: 24px; padding: 16px 18px; background: var(--gray); border: 1px solid var(--border); }
.cta-box p { font-size: 13px; color: #444; margin-bottom: 10px; }
.btn-cta {
  display: inline-block; background: var(--teal); color: #fff; padding: 10px 22px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border: none; cursor: pointer; font-family: inherit;
}
.btn-cta:hover { background: var(--teal-d); }
.note { border: 1px solid var(--border); background: #fff; padding: 14px 18px; font-size: 12px; color: #444; margin-top: 16px; }
.note b { display: block; color: var(--navy); margin-bottom: 4px; }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.7); padding: 40px 0 20px; margin-top: 48px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 32px; }
.site-footer .logo img { height: 32px; filter: brightness(0) invert(1); }
.ftag { font-size: 8px; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.45); margin: 8px 0 12px; }
.ftag b { color: var(--teal); }
.fabout { font-size: 12px; line-height: 1.65; }
.fct { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: #fff; margin-bottom: 12px; }
.flinks { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.flinks a { font-size: 12px; color: rgba(255,255,255,.6); }
.flinks a:hover { color: #fff; }
.fbot { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; display: flex; justify-content: space-between; font-size: 11px; flex-wrap: wrap; gap: 10px; }
.flegal { display: flex; gap: 18px; }
.flegal a { color: rgba(255,255,255,.45); }
.flegal a:hover { color: #fff; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  /* Logo a hamburger drží na jednom řádku, menu se láme pod ně.
     Bez pevného pořadí se hamburger při úzkém okně propadl pod logo
     a zarovnal doleva. */
  /* Logo se musí umět zmenšit, ne tlačit hamburger na další řádek.
     S pevnou výškou 34 px bylo široké ~265 px a při 360 px se s
     tlačítkem a odsazením na řádek nevešlo. Teď se škáluje na
     dostupné místo; tlačítko si drží svou šířku. */
  .container { padding: 0 16px; }
  .header-inner { flex-wrap: wrap; padding: 10px 0; gap: 10px; }
  /* Strop šířky odvozený od místa, které po tlačítku zbývá — jinak si
     logo drží šířku z poměru stran a při 320 px hamburger vytlačí.
     Odsud se škáluje samo, další breakpoint není potřeba. */
  .logo { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 62px); }
  .logo img { width: auto; height: auto; max-width: 100%; max-height: 32px; }
  .nav-toggle { display: block; flex: 0 0 auto; order: 2; }
  nav { display: none; order: 3; flex: 0 0 100%; }
  nav.open { display: block; }

  nav > ul { flex-direction: column; border-top: 1px solid var(--border); }
  nav > ul > li { border-bottom: 1px solid var(--border); }
  /* Prst potřebuje plochu, ne odkaz vysoký 20 px. */
  nav > ul > li > a {
    padding: 15px 2px; margin: 0; border-bottom: none;
    justify-content: space-between; font-size: 13px;
  }
  nav > ul > li > a .arr { font-size: 11px; transition: transform .18s; }
  nav > ul > li.open > a { color: var(--teal); }
  nav > ul > li.open > a .arr { transform: rotate(180deg); }

  /* Rozbalovací část je harmonika — otevřená je jen ta, na kterou se
     ťuklo. Dřív byly na mobilu rozbalené všechny naráz, tedy 45 položek
     pod sebou. */
  .dd, .dd.mega {
    position: static; display: none; border: none; box-shadow: none;
    min-width: 0; width: auto; padding: 0 0 10px;
  }
  nav > ul > li:hover .dd { display: none; }
  nav > ul > li.open > .dd { display: block; }
  .dd.mega::before { content: none; }

  .mega-cols + .mega-cols {
    row-gap: 0; margin-top: 0; padding-top: 0; border-top: none;
  }
  .mc { border-right: none; padding: 0; }
  .dd-all {
    display: block; padding: 12px 6px; font-size: 13px; font-weight: 700;
    color: var(--teal); border-bottom: 1px solid var(--border);
  }
  .mc-title { margin: 10px 0 2px; padding-bottom: 6px; }
  .mc ul li a { padding: 11px 6px; font-size: 13px; }

  .product-layout { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 620px) {
  /* Tabulky se překlopí do bloků: každý řádek je kartička, popisek
     sloupce se bere z data-label. Posouvání do stran tím odpadá
     i s náznakem stínu, který ho označoval. */
  .tbl-wrap { overflow-x: visible; border: 0; background: none; background-image: none; }
  .vtbl thead { display: none; }
  .vtbl, .vtbl tbody, .vtbl tr, .vtbl td { display: block; width: auto; }
  .vtbl tbody tr {
    border: 1px solid var(--border); background: #fff;
    margin-bottom: 10px; padding: 4px 0;
  }
  .vtbl tbody tr:hover { background: #fff; }
  .vtbl tbody td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; padding: 7px 14px; text-align: right;
  }
  .vtbl tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto; text-align: left;
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 700; color: var(--muted);
  }
  .vtbl tbody td[data-label="Art.-Nr."] {
    background: var(--gray); border-bottom: 1px solid var(--border);
    padding-top: 9px; padding-bottom: 9px; margin-bottom: 4px;
  }
  .vtbl tbody td .cdot { margin-right: 4px; }

  .cat-grid, .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { flex-wrap: wrap; }
  .hs { flex: 1 1 50%; border-bottom: 1px solid var(--border); }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ══════════════════════════════════════════════════════════════
   OBSAH Z DATASHEETU
   Převzato 1:1 z návrhu design-tmp/index.html — sekce
   Strahleigenschaften / Anwendungsbereiche / Technische
   Eigenschaften / Achtung.
   ══════════════════════════════════════════════════════════════ */

.content-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 760px) { .content-2col { grid-template-columns: 1fr; gap: 28px; } }

/* popis produktu pod nadpisem */
.prod-desc { font-size: 14px; color: #444; line-height: 1.65; margin-bottom: 12px; }

/* typ paprsku */
.stream-row { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0; }
.stream-img { width: 110px; flex-shrink: 0; border: 1px solid var(--border); background: #fff; }
.stream-img img { width: 100%; display: block; }
.stream-text { font-size: 13px; color: #444; line-height: 1.6; }
.stream-text b { color: var(--navy); }

/* piktogramy použití */
.tbl-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin: 18px 0 8px; }
.app-grid { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0; }
/* Sloupec je široký na nejdelší německou složeninu ("Warmwasserbereiter").
   Automatické dělení slov se nepoužívá — Chrome z "drucklose" udělá
   "drucklo-se". Zalomení uprostřed slova zůstává jen jako pojistka. */
.app-item { text-align: center; font-size: 11px; color: #444; width: 112px; line-height: 1.3; overflow-wrap: break-word; }
.app-icon-wrap { width: 60px; height: 60px; border: 1px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 5px; overflow: hidden; padding: 6px; }
.app-icon-wrap img { width: 100%; height: 100%; object-fit: contain; }
/* Záložní stav, kdyby popisek ikonu neměl — na webu dnes nenastává. */
.app-icon-wrap.blank::after { content: "·"; color: var(--border); font-size: 24px; }

/* varovné rámečky */
.att-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 4px; }
@media (max-width: 560px) { .att-row { grid-template-columns: 1fr; } }
.att-box { background: #c0392b; color: #fff; padding: 10px 14px; font-size: 12px; line-height: 1.5; }
.att-box b { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }

/* závěrečná poznámka */
.disclaimer { border: 1px solid var(--border); padding: 14px 18px; font-size: 12px; color: #444; margin-top: 16px; background: #fff; }
.disclaimer b { display: block; color: var(--navy); margin-bottom: 4px; }
.src-note { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* stahování + poptávka vedle sebe, jako v návrhu */
.dl-cta { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 760px) { .dl-cta { grid-template-columns: 1fr; } }
.dl-cta .dl-col { display: flex; flex-direction: column; gap: 8px; }
.dl-cta .dl-link { margin-top: 0; justify-content: center; }
.dl-cta .cta-box { margin-top: 0; }

/* Jednosloupcová varianta: tabulka se roztáhne, ale řádky zůstanou
   čitelné — hodnota se drží u popisku, ne u pravého okraje. */
.content-1col { max-width: 760px; }

/* odznak funkce (Easy Clean, Auto Clean) — z návrhu */
.ec-badge { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); background: #fff; padding: 8px 14px; margin: 12px 0; }
.ec-badge img { height: 44px; width: auto; }
.ec-badge-text { font-size: 12px; color: #444; line-height: 1.5; }
.ec-badge-text b { color: var(--navy); }

/* obrázky vyříznuté z datasheetu (křivka, kóty) */
.fig-box { background: #fff; border: 1px solid var(--border); padding: 18px 22px; overflow-x: auto; }
/* Výška je stropem, ne šířka: ploché výkresy se nezmění, ale skoro
   čtvercové (Profi Spray 783×743, basic Spray 1400×1344) se přestanou
   roztahovat přes celý sloupec a zabírat půl obrazovky.
   Hlásila Niki (RCM, 2026-08-24): „bitte kleiner darstellen". */
.fig-box img {
  width: auto; max-width: 100%; height: auto; max-height: 380px;
  display: block; margin: 0 auto;
}
/* Vektor je ostrý v každé velikosti, takže se drží v čitelné šířce
   místo roztažení přes celý sloupec. */
.fig-box--vector { padding: 22px 26px; }
.fig-box--vector img { max-width: 820px; margin: 0 auto; min-width: 380px; }
.fig-note { font-size: 11px; color: var(--muted); margin-top: 8px; }

/* odrážkové body z listů, které nemají sekce datasheetu */
.feat-list { list-style: none; margin: 8px 0 4px; }
.feat-list li { position: relative; padding: 4px 0 4px 18px; font-size: 13px; color: #444; line-height: 1.55; }
.feat-list li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 6px; height: 6px; background: var(--teal); }

/* ══════════════════════════════════════════════════════════════
   ZVĚTŠENÍ OBRÁZKU
   Bez knihovny. Zavření vede vždy přes historii prohlížeče, aby
   tlačítko Zpět overlay zavřelo místo odchodu ze stránky —
   podle Baymard to 37 % webů dělá špatně.
   ══════════════════════════════════════════════════════════════ */
.lb {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(11, 22, 34, .93);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 64px;
}
.lb-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; background: #fff; cursor: default;
}
/* Tlačítka leží NAD obrázkem a mají vlastní podklad. Bez něj mizela:
   obrázek má bílé pozadí, na mobilu vyplní celou šířku a bílé šipky
   po stranách překryl. Rozměr nejméně 46 px — plocha pro prst. */
.lb button {
  position: absolute; z-index: 2; border: 0; color: #fff;
  cursor: pointer; line-height: 1; font-family: inherit;
  background: rgba(11, 22, 34, .55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  min-width: 46px; min-height: 46px; border-radius: 50%;
}
.lb-close { top: 12px; right: 12px; font-size: 22px; }
.lb-nav { top: 50%; transform: translateY(-50%); font-size: 34px; padding-bottom: 4px; }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
.lb button:hover, .lb button:focus-visible { background: var(--teal); }
.lb-count {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: .08em;
}
@media (max-width: 620px) {
  .lb { padding: 64px 8px 56px; }
  .lb-nav { min-width: 48px; min-height: 48px; }
}

/* ══════════════════════════════════════════════════════════════
   DOPORUČENÉ PRODUKTY
   Bez hvězdičky: ta v e-shopech znamená hodnocení a Baymard
   (SecondBrain, 3.1) uvádí „pouze star rating bez počtu recenzí"
   jako anti-vzor. Doporučení proto nese slovo, ne symbol.
   ══════════════════════════════════════════════════════════════ */
.sec-lead { font-size: 13px; color: var(--muted); margin: -8px 0 16px; max-width: 62ch; }

/* štítek na kartě */
.cc-tag {
  display: inline-block; margin-bottom: 6px;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--teal); border: 1px solid var(--teal); border-radius: 2px;
  padding: 2px 6px;
}
.cat-card.is-feat { border-color: #bcd7e2; }

/* zvýraznění v menu — jen tučně a barvou značky. Tečka tu byla,
   ale nic nesdělovala: byla aria-hidden, takže čtečka ji nepřečte,
   a bez popisku si ji nikdo nespojí s doporučením. */
.mc ul li a.feat { font-weight: 700; color: var(--navy); }

/* rozcestník do oddílů na domovské */
.entry-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 620px) { .entry-row { grid-template-columns: 1fr; } }
.entry {
  display: block; background: #fff; border: 1px solid var(--border);
  padding: 20px 22px; transition: border-color .15s;
}
.entry:hover { border-color: var(--teal); }
.entry-name { display: block; font-size: 16px; font-weight: 700; color: var(--navy); }
.entry-n { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }

/* úvodní obrázek je odkaz na produkt */
a.hero-img { position: relative; display: block; }
a.hero-img:hover { border-color: var(--teal); }
.hero-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 16px; font-size: 12px; font-weight: 700; color: var(--navy);
  background: rgba(255,255,255,.92); border-top: 1px solid var(--border);
}

/* matice klíč × pouzdro ze Schlüsselübersicht */
.km-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.km { border-collapse: collapse; font-size: 12px; min-width: 640px; }
.km th, .km td { border: 1px solid var(--border); padding: 5px 6px; text-align: center; }
.km th[scope="row"] { text-align: left; white-space: nowrap; font-weight: 600; background: #fafbfc; }
.km thead th { background: #fafbfc; font-weight: 600; line-height: 1.3; }
.km .km-art { display: block; font-family: var(--mono, ui-monospace, monospace); font-size: 11px; }
.km .km-a { color: #6b7c85; }
.km .km-yes { background: #e5f2e0; color: #2e7d32; font-weight: 700; }
.km .km-var { background: #dbe9f2; color: var(--navy); font-weight: 600; white-space: nowrap; }

/* doplňky (adaptéry, servisní klíč) — nejsou provedení produktu */
.acc-sec { margin-top: 14px; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.acc-card { display: flex; gap: 10px; align-items: center; border: 1px solid var(--border); padding: 8px; background: #fff; }
.acc-img { width: 56px; height: 56px; flex: 0 0 56px; display: flex; align-items: center; justify-content: center; color: var(--border); }
.acc-img img { width: 100%; height: 100%; object-fit: contain; }
.acc-name { font-size: 13px; font-weight: 600; line-height: 1.35; }
.acc-art { font-size: 12px; color: #6b7c85; margin-top: 2px; }
.acc-row td { background: #fbfcfd; }
.acc-tag { display: inline-block; margin-left: 8px; padding: 1px 6px; font-size: 10px;
           letter-spacing: .06em; text-transform: uppercase; color: #6b7c85;
           border: 1px solid var(--border); vertical-align: 1px; }

/* seznam servisních klíčů po skupinách */
.kl-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 10px 0 16px; }
.kl-group h3 { font-size: 13px; margin: 0 0 6px; color: var(--navy); }
.kl-list { list-style: none; margin: 0; padding: 0; }
.kl-list li { padding: 5px 0; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.45; }
.kl-art { display: block; font-family: var(--mono, ui-monospace, monospace); font-weight: 600; }
.kl-fits { display: block; color: #6b7c85; }
.km-group { background: #eef3f6; font-size: 11px; letter-spacing: .02em; }

/* „který klíč pasuje" — hlavní cesta na stránce klíčů */
.kf { border-collapse: collapse; width: 100%; font-size: 13px; }
.kf th, .kf td { border-bottom: 1px solid var(--border); padding: 7px 8px; text-align: left; vertical-align: top; }
.kf th[scope="row"] { font-weight: 600; white-space: nowrap; width: 42%; }
.kf-art { display: inline-block; margin: 0 6px 3px 0; padding: 2px 7px; border: 1px solid var(--border);
          background: #fff; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
@media (max-width: 560px) { .kf th[scope="row"] { width: auto; white-space: normal; } }
.kf-sel { margin: 4px 0 10px; font-size: 13px; }
.kf-sel .sc-label { color: #6b7c85; }
.kf-sel #selected-art { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; }
.kf-sel #selected-name { color: #6b7c85; }
a.kf-art, a.kl-pick { text-decoration: none; color: var(--navy); cursor: pointer; }
a.kf-art:hover, a.kl-pick:hover { background: #eef3f6; }
a.kl-pick { display: inline-block; margin-right: 8px; }

/* výběr klíče pod galerií */
.key-pick { margin-top: 0; }
/* Vedle hlavního obrázku je víc místa než pod ním — dlaždice mohou
   být větší a řada se láme až na širším sloupci. */
.key-pick .kp-tile { width: 84px; }
.key-pick .kp-img { width: 54px; height: 54px; }
.kp-title { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.kp-group { margin-bottom: 10px; }
.kp-head { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #6b7c85; margin-bottom: 4px; }
.kp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.kp-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 74px;
           padding: 5px 3px; background: #fff; border: 1px solid var(--border); cursor: pointer; }
.kp-tile:hover { border-color: #9bb7c4; }
.kp-tile.is-active { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.kp-img { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
.kp-img img { width: 100%; height: 100%; object-fit: contain; }
.kp-none { color: #c3ced6; font-size: 20px; }
.kp-no { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; color: #44515a; }
.kp-var { font-weight: 700; color: var(--navy); }
.kp-fits { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #44515a; }
.kp-fits-label { color: #6b7c85; }
a.km-art { text-decoration: none; color: var(--navy); }
a.km-art:hover { text-decoration: underline; }
a.km-art.is-active { background: var(--navy); color: #fff; }
.kp-sel { margin: 8px 0 0; font-size: 12px; }
.kp-sel #selected-art { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; }
.kp-sel #selected-name { color: #6b7c85; }

/* Vlastnosti vybrané varianty pod přepínačem — ne volba, jen údaj. */
.sel-details { margin-top: 4px; color: #6b7c85; font-size: 14px; }
.sel-details:empty { display: none; }

/* K čemu doplněk je — název z ceníku je zkratkovitý. */
.acc-note { margin-top: 4px; color: #6b7c85; font-size: 13px; line-height: 1.4; }
.kp-size { font-size: 10px; color: #6b7c85; }


/* Výzva ke kontaktu na úvodní stránce (Niki, RCM 2026-08-24). */
.cta-wide { text-align: center; padding: 30px 24px; }
.cta-wide h2 { margin: 0 0 10px; font-size: 22px; }
.cta-wide p { max-width: 620px; margin: 0 auto 18px; color: var(--muted); }

/* ---------- výběr datenblätter ke stažení ---------- */
.ds-bar { position: sticky; top: 0; z-index: 20; background: var(--navy);
  color: #fff; margin-bottom: 18px; }
.ds-bar-in { max-width: 1180px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; font-size: 13px; }
.ds-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ds-btn { background: transparent; color: inherit; border: 1px solid currentColor;
  border-radius: 3px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.ds-btn:hover { background: rgba(255,255,255,.12); }
.ds-bar .btn-cta { padding: 6px 14px; font-size: 12px; }
.ds-bar .btn-cta[disabled] { opacity: .45; cursor: default; }
.ds-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ds-head .ds-btn { color: var(--teal); border-color: var(--border);
  text-transform: none; letter-spacing: 0; }
.ds-head .ds-btn:hover { background: var(--bg); }
.dl-check { width: 34px; text-align: center; }
.dl-check input { width: 16px; height: 16px; cursor: pointer; }
@media (max-width: 700px) {
  .ds-bar-in { flex-direction: column; align-items: stretch; }
}

/* ---------- právní stránky přebrané ze starého katalogu ---------- */
.legal { background: #fff; border: 1px solid var(--border); padding: 26px 30px;
  font-size: 14px; line-height: 1.75; color: #333; }
.legal h2 { font-size: 17px; margin: 24px 0 8px; color: var(--navy); }
.legal h2:first-child { margin-top: 0; }
.legal h3, .legal h4 { font-size: 15px; margin: 18px 0 6px; color: var(--navy); }
.legal p { margin: 0 0 12px; }
.legal a { color: var(--teal); }
.legal ul, .legal ol { margin: 0 0 12px 20px; }
.legal li { margin-bottom: 4px; }