:root {
    --gap: 40px;
  /* Základ */
  --color-bg: 0, 0, 0;
  --color-text: 255, 255, 255;

  /* Primární akcent – Lean Green */
  --color-primary: 0, 200, 83;
  --color-primary-hover: 0, 230, 118;

  /* Sekundární akcent – Six Sigma Blue */
  --color-secondary: 41, 121, 255;
  --color-secondary-hover: 83, 147, 255;

  /* Třetí akcent – Process Yellow */
  --color-accent: 255, 214, 0;

  /* Kritické stavy */
  --color-danger: 255, 82, 82;

  /* Neutrální / sekundární text a ikony */
  --color-muted: 176, 190, 197;

  /* Další neutrály */
  --color-border: 66, 66, 66;
  --color-surface: 18, 18, 18;
}
*,
*:after,
*:before {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    border-radius: 0;

}

html, body {
    height: 100%;
    min-height: 100%;
    position: relative !important;
    
   
}

body {
    background-color: rgba(var(--color-bg), 1);
    font-family: "Poppins", sans-serif;
    color: rgba(var(--color-text), 1);
    line-height: 1.6;
    font-size: 16px;
    font-weight: 400;
}
.body-homepage {background-image: url(../img/martin_bastl.webp) , url(../img/bg.webp);
    background-repeat: no-repeat, no-repeat;
    background-position: calc(100% - 80px) 120px, right bottom;
    background-size: contain,cover;
    background-attachment: fixed, scroll;}
h1, h2, h3, h4, h5, .button  {font-weight: 700;}
.home h1, .home h2, .home h3, .home h4, .home h5, .button  {font-weight: 700;color: rgba(var(--color-text), 1);}

/* Společné pravidlo pro všechny nadpisy */
h1, h2, h3, h4, h5 {
   /* font-family: 'Merriweather', sans-serif;*/
    line-height: 1.2;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

/* Specifická pravidla pro jednotlivé nadpisy dle typografické stupnice */
h1 {
    font-size: 6rem;
    line-height: 1.2;
    margin-top: 0rem;
}

h2 {
    font-size: 3rem;
    line-height: 1.3;
    margin-top: 1.75rem;
}

h3 {
    font-size: 2.125rem;
    line-height: 1.4;
    margin-top: 1.5rem;
}

h4 {
    font-size: 1.125rem;
    line-height: 1.5;
    margin-top: 1.25rem;
}

h5 {
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 1rem;
}

/* Pravidla pro běžný text a seznamy */
p, li {
    font-size: 1.125rem; /* Základní velikost písma pro běžný text */
    line-height: 1.75; 
    margin-bottom: 1rem;
}

small {font-size: 0.75rem;}
strong {font-weight: bold}
em {font-style: italic;}
sup {vertical-align: super;font-size: smaller;}

a, .button {transition: all 0.3s ease;}



section {display: block; position: relative;width: 100%; height: auto; padding: 120px 0;margin: 0;float: left}
.container {max-width: 1320px;margin:auto;height: 100%;padding: 0px;}
.home {min-height: 100vh;display: flex;padding: 0;
/*   justify-content: center;*/
  align-items: center;}
.home h1, .home h2, .home h3, .home h4, .home h5, .home p {width: 50%;display: inline-block;margin-top: 0;margin-bottom: 20px}
.home h1 {margin: 0;padding: 0}
.home h2 {color:rgba(var(--color-accent), 1);margin-top: 0;padding-top: 0}
/* Styl pro tlačítko */
.buttons {display: inline-block;width: 100%}
.button {
    background-color: rgba(var(--color-secondary), 1); /* Základní barva pozadí */
    color: #fff;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid rgba(var(--color-secondary), 1);
    text-align: center;
    display: inline-block;border-radius: 30px;
}

/* Hover efekt */
.button:hover {
    background-color: rgba(var(--color-secondary-hover), 1);; /* Tmavší barva pozadí při hoveru */
    transform: scale(1.05); /* Lehký zoom efekt */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Jemný stín pod tlačítkem */
}

/* Klikací efekt (aktivace tlačítka) */
.button:active {
    transform: scale(1); /* Zmenšení zpět při kliknutí */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Menší stín při kliknutí */
}
.button-light {
    background-color: rgba(var(--color-text), 0); /* Základní barva pozadí */
    color: rgba(var(--color-text), 0.5);
    border: 1px solid rgba(var(--color-text), 0.5);
    margin-left: 20px;
    
    padding: 1rem;
    width: 60px;
    height: 60px;/**/
    
}
.button-light:hover {
    background-color: rgba(var(--color-text), 0); /* Základní barva pozadí */
    color: rgba(var(--color-text), 1);
    border: 1px solid rgba(var(--color-text), 1);
    
}

.black-outline {
  position: relative;
  display: inline-block;
  color: #000;

  /* 1px čistě vnější outline */
  text-shadow:
    -1px -1px 0 #fff,
     0px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  0px 0 #fff,
     1px  0px 0 #fff,
    -1px  1px 0 #fff,
     0px  1px 0 #fff,
     1px  1px 0 #fff;
}

.black-outline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -60px;      /* doladíš podle fontu */
  width: 100%;
  height: 120px;       /* doladíš podle toho, jak vysoký chceš tvar */

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595.2755737 841.8898315' preserveAspectRatio='none'>\
<path fill='white' d='M227.6675171,399.1437827c145.4488547-17.0511984-71.2210708-4.2020393-108.5572538-4.6324041-13.4782668-3.4817692-80.3599301,10.5346895-74.140306-8.5432149,22.7148339-5.196525,36.0669282-7.5378292,56.7730441-7.2967018,31.8534534-4.2739492,65.7258979-4.1283871,97.9414812-3.6727745,98.528413-4.5588383,199.5366101,1.0358296,296.5569857-11.7756637,3.4616716,3.1589948,12.3614232-.6549938,16.8692319,1.7750241,2.9418088,3.8701507,13.0633653,14.1722896,3.3776427,16.8073044.0010361-.000269,1.3171511,2.1833014,1.3171511,2.1833014-50.6692051,9.6638187-109.1539306,8.144013-161.6803031,16.9846905-17.3350724,3.9288245-151.679532,16.8471555-99.2780737,18.1251167,15.8015677,4.0388345,68.3486973-1.7142734,72.4090617,14.4758422-38.2112681,14.813677-95.6888978-1.7282357-139.4479612,3.5612706-20.9525428-1.0351092-44.9053612-.3279063-64.470779-5.0726255-2.4615585-13.7995217.9229502-22.1248877,17.2813315-22.5100247,27.5640175-4.2257397,56.6095099-7.0521586,85.0487468-10.4091406Z'/>\
</svg>");

  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}








ul {
  list-style: none; /* Zruší výchozí odrážky seznamu */
  padding: 0;
  margin: 0;
}

ul.checklist {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
    margin-bottom: 2rem;
}

ul.checklist li {
  position: relative;
  padding-left: 28px; /* mezera pro ikonku */
  margin-bottom: 14px;
}

ul.checklist li::before {
  content: "\f00c"; /* Font Awesome check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solid */
  position: absolute;
  left: 0;
  top: 8px;
  font-size: 16px;
  line-height: 1;
    color: rgba(var(--color-accent), 1);
}
table  {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}
table tr {
  border-bottom: 1px solid rgba(var(--color-text), 0.5);
  padding: .35em;
}
table tr:last-of-type {
  border-bottom: 0px solid rgba(var(--color-text), 1);;
}
table th,
table td {
  padding: 1.6rem;
}

table th {
  border-bottom: 2px solid rgba(var(--color-text), 1);
  letter-spacing: .1em;
  text-transform: uppercase;
    width: auto;
}


.cleaner, .cleaner40px, .cleaner80px, .cleaner120px {width:100%;height:1px;float: left;clear: both}
.cleaner40px {height:40px;}
.cleaner80px {height:80px;}
.cleaner120px {height:120px;}


.blocks {
    display: flex;
    justify-content: space-between;
    gap: var(--gap);
    width: 100%;
}

.block-1-4 {
    flex: 1;
    max-width: calc((100% - 120px) / 4); 
    height: auto;
}
.block-1-3 {
    flex: 1;
    max-width: calc((100% - 80px) / 3); 
    height: auto;border-radius: 10px;
}
.block-1-2 {
    flex: 1;
    max-width: calc((100% - 40px) / 2); 
    height: auto;
}


#certifikaty {background: #004A97;
background: linear-gradient(45deg,rgba(0, 74, 151, 0.85) 0%, rgba(0, 156, 225, 0.85) 100%);}
#specializace, #kontakt {background-color: rgba(var(--color-surface), 0.9);color: #fff}
#specializace h1, #specializace h4 {color: #fff}
#specializace h4 {margin-bottom: 0;font-weight: bold;}
#specializace img, #certifikaty img {height:80px; width: auto}
#specializace a, #certifikaty a, #kontakt a {box-shadow: inset 0 -1px 0 0  rgba(var(--color-accent), 0.7); }
#specializace a:hover, #certifikaty a:hover, #kontakt a:hover {box-shadow: inset 0 -2px 0 0  rgba(var(--color-accent), 1); }
#kontakt {text-align: center}
#kontakt .block-1-3 {background-color: rgba(var(--color-text), 0.05);padding: 2rem;text-align: center; -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);}
#kontakt .block-1-3 i {color: rgba(var(--color-accent), 1);background-color: rgba(var(--color-accent), 0.2);padding: 1.6rem;text-align: center;font-size: 2rem;border-radius: 100px;height: 80px;width: 80px}


.align-center {text-align: center}

.copyright {text-align: center;font-size: 0.618rem;line-height: 10px;padding-top: 20px;opacity: 0.5;width: 100%;display: inline-block}
.copyright a span {display: none}
#kontakt .copyright a {box-shadow: inset 0 -1px 0 0 rgba(var(--color-accent), 0);}
.copyright img {height: 10px;width: auto;margin-bottom: 0;margin-left: 3px;vertical-align: middle;}

/*** lang ***/
/*.lang {position: fixed;top:80px;right:0;z-index: 99}
.lang li {display: block;width: 40px;height: 40px;line-height: 40px;margin: 0;padding: 0}
.lang li a {display: block;width: 40px;height: 40px;line-height: 40px; background-color: rgba(var(--colorlightblue), 1);color: rgba(var(--colorblack), 1);text-align: center;text-decoration: none;border: 1px solid rgba(255, 255, 255, 0.50)}
.lang li a:hover {color:#fff;background-color: rgba(var(--colorblue), 1);}*/
/*** lang-end ***/


.subtitle {
    color: rgba(var(--color-accent), 1);
    margin-bottom: 0;padding-bottom: 0;
}
.line {
    display: inline-block;
    width: 2rem; 
    height: 1px;
    background-color: rgba(var(--color-accent), 1);
}
.title {
    margin-top: 0;padding-top: 0;
}

/*** resp ***/
@media (min-width: 1930px) { }
/*.body-homepage {
    background-size: 55% auto, cover;}
}*/
@media (max-width: 1370px) {
    .container {padding: 80px 40px;} }

@media (max-width: 768px) { }

@media (max-width: 992px) {

.body-homepage {background-position: right bottom, right bottom;}
h1 {font-size: 3rem;}
h2 {font-size: 1.5rem;}
h3 {font-size: 1.125rem;}
h4 {font-size: 1.125rem;}
h5 {font-size: 1rem;}
.home h1, .home h2, .home h3, .home h4, .home h5, .home p {width: 100%;}
}
@media (max-width: 1200px) {  }



/* ============================
   RESPONSIVE — GLOBAL
============================ */

/* 1400px – větší notebooky */
@media (max-width: 1400px) {
  h1 { font-size: 4.5rem; }
  h2 { font-size: 2.5rem; }
  .container { padding: 60px 40px; }
}

/* 1200px – běžné notebooky */
@media (max-width: 1200px) {
  .blocks {
    gap: 30px;
  }
  .block-1-4,
  .block-1-3 {
    max-width: calc((100% - 30px) / 2);
  }
  .block-1-2 {
    max-width: 100%;
  }
}

/* 992px – tablety na šířku */
@media (max-width: 992px) {

  /* Home sekce */
  .home {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* zarovnání dolů */
    align-items: flex-start;   /* zruší centrování */
    min-height: 100vh;
    padding-bottom: 40px;      /* doladění odsazení */
  }

  .home .container {
    width: 100%;
      margin: 0;
      padding-bottom: 0;
      background-color: rgba(var(--color-bg), 0.7);
  }
  .home h1,
  .home h2,
  .home h3,
  .home h4,
  .home h5,
  .home p {
    width: 100%;
    margin-bottom: 20px;
  }

  /* Typografie */
  h1 { font-size: 3rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.3rem; }

  /* Bloky */
  .blocks {
    flex-wrap: wrap;
      flex-direction: column;
  }
  .block-1-4,
  .block-1-3,
  .block-1-2 {
    width: 100%;
      max-width: 100%;
  }

  /* Obrázky certifikátů */
  #specializace img,
  #certifikaty img {
    height: 60px;
  }

  .container {
    padding: 60px 30px;
  }
  .buttons {
    text-align: center;
  }
}

/* 768px – tablety na výšku / větší mobily */
@media (max-width: 768px) {

  body {
    font-size: 15px;
  }

  p, li {
    font-size: 1rem;
    line-height: 1.6;
  }

  .button {
    width: 100%;
    padding: 1rem;
    font-size: 0.9rem;
      margin-bottom: 20px;
  }

  .button-light {
    margin-left: 0;
    width: 50px;
    height: 50px;
  }

  section {
    padding: 80px 0;
  }

  .container {
    padding: 40px 20px;
  }
}

/* 576px – mobily */
@media (max-width: 576px) {

  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.1rem; }

  .body-homepage {
    background-position: center bottom, center bottom;
    background-size: cover, cover;
    background-attachment: scroll;
  }

  #kontakt .block-1-3 {
    padding: 1.5rem;
  }

  #kontakt .block-1-3 i {
    height: 60px;
    width: 60px;
    font-size: 1.5rem;
    padding: 1rem;
  }
}


/* ============================
   RESPONSIVE TABLE — iOS SAFE
   (STACKED CARDS UX)
============================ */

@media (max-width: 768px) {

  table {
    border: 0;
    width: 100%;
  }

  table thead {
    display: none !important;
  }

  table tr {
    display: block;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(var(--color-text), 0.2);
    border-radius: 10px;
    padding: 1rem;
    background-color: rgba(var(--color-surface), 0.6);
  }

  table td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border: none;
    text-align: right;
  }

  table td::before {
    content: attr(data-label);
    font-weight: bold;
    color: rgba(var(--color-accent), 1);
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-right: 1rem;
    flex-shrink: 0;
  }

  /* Ikony v tabulce */
  table td i {
    font-size: 1.2rem;
    color: rgba(var(--color-accent), 1);
  }
}