@charset "utf-8";
/* =========================================================
   responsive.css  —  přidat jako POSLEDNÍ stylesheet v <head>
   (přepisuje pevné šířky ze starých CSS, originály neměnit)
   ========================================================= */

/* 1) Univerzální box model — šířky včetně paddingu/borderu */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Obrázky se nikdy nepřetečou přes rodiče */
img { max-width: 100%; height: auto; }

/* 3) Pružné kontejnery místo pevných px  ------------------- */
.row {
  width: 100%;
  max-width: 1000px;   /* zachová desktop vzhled */
  margin: 0 auto;
  padding: 0 15px;
}
.middle {
  width: 100%;
  max-width: 960px;
  float: none;         /* ruší starý float layout */
}
.shell {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}
.cent  { width: 100%; max-width: 680px; }
.cent2 { width: 100%; max-width: 400px; }

/* 4) Sloupce: na desktopu float, na mobilu pod sebou ------- */
@media (max-width: 768px) {
  .col,
  .cols,
  .linea, .lineb,
  .middle {
    float: none !important;
    width: 100% !important;
    display: block;
  }

  /* dvojité menu: skryj klasické, ukaž <select> */
  .top-nav.cssmenu { display: none; }
  .nav_v2 {
    display: block;
    width: 100%;
    padding: 12px;
    font-size: 16px;   /* min. 16px = iOS nezoomuje input */
  }

  /* footer sloupce pod sebe */
  .footer-cols .col { float: none; width: 100%; margin-bottom: 1em; }

  /* kontejnery tabulky ať nejsou širší než viewport (jinak ořez vpravo) */
  .container, .content2, .shell, .table-scroll {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
}

/* 5) Na desktopu naopak select schovej (má ho jen mobil) --- */
@media (min-width: 769px) {
  .nav_v2 { display: none; }
}

/* 6) Slider — pružná výška/šířka místo 960×240 px ---------- */
@media (max-width: 768px) {
  .images { width: 100%; height: auto; }
  .images .pane,
  .images .panens {
    position: static;
    width: 100%;
    top: auto; left: auto;
  }
  .pane .panetext,
  .panens .panetext { width: 100%; }
  .pane .panein,
  .panens .panein { display: none; }  /* dekorativní obrázek na mobilu pryč */
  .slidetabs { display: none; }
}

/* 7) Čitelnost textu na mobilu ----------------------------- */
@media (max-width: 768px) {
  body { font-size: 16px; line-height: 1.5; }
  h1 { font-size: 1.8em; }
  h2 { font-size: 1.4em; }
}

/* =========================================================
   FALLBACK: když JavaScript neběží (nebo selže načtení),
   ukaž aspoň první panel slideru místo prázdného místa.
   Vyžaduje <html class="no-js"> a řádek JS níže (viz návod).
   ========================================================= */
.no-js .images .pane { display: none; }
.no-js .images .pane:first-child {
  display: block;
  position: relative;
  opacity: 1;
}

/* =========================================================
   Vizuálně skrytý prvek – zůstává čitelný pro čtečky obrazovky
   (použito u <label> mobilního menu kvůli přístupnosti)
   ========================================================= */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   8) Globální pojistka proti vodorovnému přetečení stránky
   (starý layout má místy pevné px širší než mobilní viewport)
   ========================================================= */
html, body { max-width: 100%; overflow-x: hidden; }

/* =========================================================
   9) Široké datové tabulky (cenové matice apod.)
   Tabulky mají vlastní layout algoritmus – box-sizing ani
   float-pravidla je neovlivní. Na úzkém displeji se pevná
   tabulka roztáhne přes viewport a rozbije celou stránku.
   Řešení: obalový rámec scrolluje tabulku vodorovně sám,
   layout stránky zůstane netknutý a obsah čitelný.

   Ideál je obalit tabulku do <div class="table-scroll">, ale
   fallback níže funguje i bez zásahu do HTML: scrollování
   nasadí přímo na tabulku, jen musí umět vlastní šířku.
   ========================================================= */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;   /* plynulý scroll na iOS */
}

@media (max-width: 768px) {
  /* Kartové zobrazení široké tabulky: každý řádek = karta.
     Staré CSS (nastred/pozadi) používá na buňkách position/float/
     pevnou výšku – proto tvrdý reset s !important, jinak se karty
     vytrhnou z toku a překrývají se přes sebe. */
  .table-scroll { overflow-x: visible !important; }

  table.nastred,
  table.nastred tbody {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    position: static !important;
    float: none !important;
  }

  table.nastred tr.hlava,
  table.nastred thead { display: none !important; }   /* hlavička sloupců na mobilu pryč */

  table.nastred tr {
    display: block !important;
    box-sizing: border-box !important;   /* padding+border se vejde do 100 % (jinak ořez vpravo) */
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 16px !important;
    padding: 10px 12px !important;
    border: 2px solid #dfc8a7 !important;
    border-radius: 6px !important;
    background: #fff !important;
    overflow: visible !important;   /* NE hidden – jinak se ořezávají/mizí obrázky */
  }

  table.nastred.m tr {
    border: 2px solid #5B8DBA !important;
  }
  table.nastred.a tr {
    border: 2px solid #a3a1a6 !important;
  }
  
  /* clearfix: udrží kartu kolem plovoucího obsahu bez ořezu */
  table.nastred tr::after {
    content: "";
    display: block;
    clear: both;
  }

  table.nastred td {
    display: block !important;
    box-sizing: border-box !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    text-align: left !important;
    padding: 4px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    vertical-align: top;
    overflow: visible !important;
  }

  /* popisek sloupce před hodnotou (z atributu data-label v HTML) */
  table.nastred td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    display: block;
    color: #555;
    margin-top: 4px;
  }
  /* první buňka (název + obrázek) bez popisku, obrázek na střed a v toku */
  table.nastred td.tdcell-title::before { content: "" !important; }
  table.nastred td.tdcell-title h3 { margin: 6px 0; }
  table.nastred td.tdcell-title img,
  table.nastred img.left {
    float: none !important;
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 6px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* malé ikony (info) uvnitř cenových buněk nechat inline, neroztahovat */
  table.nastred td.big img {
    float: none !important;
    position: static !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 4px 0 0 !important;
  }

  /* pozadí tabulky mívá pevnou výšku přes background – zrušit */
  table.pozadi,
  table.pozadi tr,
  table.pozadi td { background-image: none !important; } 
  
  /* cenové buňky .big nesmí být pozicované ani mít pevnou výšku */
  table.nastred td.big {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
  }
  table.nastred td.big big { display: inline; }
}


.proces-osa{
  list-style:none;margin:2rem 0;padding:0;
  display:flex;flex-direction:column;   /* mobil = svisle */
}
.proces-krok{
  position:relative;
  display:flex;align-items:center;gap:.75rem;
  padding:0 0 1.5rem 0;
}
.proces-bod{
  flex:0 0 40px;
  width:40px;height:40px;border-radius:50%;
  background:#5372da;color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;
}
.proces-text{font-size:1rem}

/* spojovací čára – svisle (mobil) */
.proces-krok::before{
  content:"";position:absolute;
  left:19px;top:40px;width:2px;height:100%;
  background:#5372da;z-index:1;
}
.proces-krok:last-child::before{display:none}

/* ===== desktop: vodorovně ===== */
@media (min-width:768px){
  .proces-osa{flex-direction:row;justify-content:space-between}
  .proces-krok{
    flex:1;flex-direction:column;text-align:center;
    gap:.5rem;padding:0 .5rem;
  }
  .proces-text{margin-top:0}
  /* čára – vodorovně, mezi body */
  .proces-krok::before{
    left:auto;top:19px;
    left:50%;width:100%;height:2px;
    z-index:1;
  }
  .proces-krok:last-child::before{display:none}
}


.top-nav ul li a{ padding-left: 16px; padding-right: 16px;}