html {
    touch-action: manipulation;
    }
    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif; /* Použití běžného systémového fontu */
      background-color: #f7f7f7; /* Světlé pozadí pro lepší čitelnost */
      color: #333; /* Tmavě šedá barva textu */
      line-height: 1.6; /* Výška řádku pro lepší čitelnost */
    }
    odkazy {
      color-link:#0000ee  
    }
    header {
      /* Ztmavení obrázku pomocí lineárního gradientu pro lepší kontrast textu */
      background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('/K1.jpeg');
      background-position: center; /* Centrování obrázku na pozadí */
      background-size: cover; /* Obrázek pokryje celou plochu headeru */
      background-repeat: no-repeat; /* Zamezení opakování obrázku */
      height: 100vh; /* Výška headeru na celou výšku viewportu */
      display: flex;
      flex-direction: column; /* Pro případné další prvky pod textem */
      justify-content: center; /* Vertikální centrování obsahu */
      align-items: center; /* Horizontální centrování obsahu */
      color: white; /* Barva textu v headeru */
      text-shadow: 0 0 10px rgba(0,0,0,0.7); /* Stín textu pro lepší čitelnost na obrázku */
      text-align: center; /* Centrování textu */
      padding: 20px; /* Vnitřní odsazení */
    }
    header h1 {
      font-size: clamp(2.5em, 5vw, 3.5em); /* Responzivní velikost písma nadpisu */
      margin-bottom: 0.2em;
    }
    header p {
      font-size: clamp(1em, 2.5vw, 1.3em); /* Responzivní velikost písma podnadpisu */
    }
    nav {
      position: fixed; /* Fixní pozice navigace nahoře */
      top: 0;
      left: 0;
      right: 0;
      z-index: 100; /* Z-index pro překrytí ostatních prvků (kromě cookie banneru) */
      background-color: #333; /* Tmavé pozadí navigace */
      padding: 12px 0; /* Vnitřní odsazení navigace */
      box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Jemný stín pod navigací */
    }
    .nav-container {
      display: flex;
      justify-content: space-between; /* Rozložení prvků v navigaci */
      align-items: center; /* Vertikální zarovnání prvků */
      max-width: 1000px; /* Maximální šířka kontejneru navigace */
      margin: 0 auto; /* Centrování kontejneru */
      padding: 0 20px; /* Vnitřní odsazení kontejneru */
    }
    .nav-logo {
      color: white;
      font-weight: bold;
      font-size: 1.3em;
      text-decoration: none; /* Odstranění podtržení u loga/názvu */
    }
    .nav-logo:hover {
      color: #4CAF50; /* Změna barvy loga při najetí myší */
    }
    .nav-toggle {
      display: none; /* Skrytí tlačítka pro mobilní menu na desktopu */
      color: white;
      font-size: 1.8em;
      cursor: pointer;
      background: none; /* Odstranění pozadí tlačítka */
      border: none; /* Odstranění ohraničení tlačítka */
      padding: 5px;
    }
    .nav-links {
      display: flex; /* Zobrazení odkazů vedle sebe */
      gap: 20px; /* Mezera mezi odkazy */
    }
    .nav-links a {
      color: white;
      text-decoration: none;
      font-weight: bold;
      padding: 8px 0; /* Odsazení pro lepší klikatelnost a vizuální efekt */
      position: relative; /* Pro absolutní pozicování ::after pseudoelementu */
    }
    .nav-links a::after { /* Efekt podtržení při najetí myší */
      content: '';
      position: absolute;
      width: 100%;
      transform: scaleX(0); /* Výchozí stav - skryté podtržení */
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #4fff56; /* Barva podtržení */
      transform-origin: bottom right;
      transition: transform 0.25s ease-out; /* Animace podtržení */
    }
    .nav-links a:hover::after {
      transform: scaleX(1); /* Zobrazení podtržení při najetí */
      transform-origin: bottom left;
    }
    .nav-links a:hover {
      color: #ddd; /* Lehké zesvětlení textu odkazu při najetí */
    }

    /* Styly pro mobilní navigaci */
    @media (max-width: 768px) {
      .nav-toggle {
        display: block; /* Zobrazení tlačítka pro mobilní menu */
      }
      .nav-links {
        flex-direction: column; /* Odkazy pod sebou */
        background-color: #333;
        width: 100%;
        position: absolute; /* Absolutní pozice pro rozbalení pod navigaci */
        top: 100%; /* Pozice pod hlavní navigační lištou */
        left: 0;
        padding: 0;
        max-height: 0; /* Výchozí stav - sbalené menu (pro animaci) */
        overflow: hidden; /* Skrytí obsahu, který přesahuje max-height */
        transition: max-height 0.3s ease-out; /* Animace rozbalení/sbalení */
      }
      .nav-links.active {
        max-height: 300px; /* Dostatečná výška pro zobrazení všech odkazů */
        padding: 10px 0; /* Vertikální odsazení v rozbaleném menu */
      }
      .nav-links a {
        padding: 12px 20px; /* Odsazení odkazů v mobilním menu */
        text-align: center; /* Centrování textu odkazů */
        width: 100%;
        box-sizing: border-box; /* Padding a border se započítají do šířky */
      }
      .nav-links a:hover {
         background-color: #444; /* Změna pozadí odkazu při najetí v mobilním menu */
      }
      .nav-links a::after { /* Skrytí efektu podtržení na mobilu, pokud není žádoucí */
        display: none;
      }
    }
    section {
      padding: 60px 20px; /* Větší vnitřní odsazení sekcí */
      max-width: 1000px; /* Maximální šířka obsahu sekcí */
      margin: auto; /* Centrování obsahu sekcí */
    }
    section h2 {
        text-align: center; /* Centrování nadpisů sekcí */
        margin-bottom: 40px; /* Odsazení pod nadpisem */
        font-size: 2.2em; /* Velikost písma nadpisů */
        color: #333;
    }
    .gallery {
      display: grid; /* Použití CSS Grid pro galerii */
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responzivní sloupce */
      gap: 25px; /* Mezery mezi položkami galerie */
    }
    .gallery img, .gallery video {
      width: 100%; /* Plná šířka položky galerie */
      aspect-ratio: 16 / 9; /* Poměr stran pro konzistentní vzhled */
      object-fit: cover; /* Obrázky/videa vyplní prostor bez deformace */
      border-radius: 8px; /* Zaoblené rohy */
      box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Jemný stín */
      transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Animace při najetí */
    }
    .gallery img:hover, .gallery video:hover {
      transform: scale(1.04); /* Lehké zvětšení při najetí */
      box-shadow: 0 6px 15px rgba(0,0,0,0.2); /* Výraznější stín při najetí */
    }
    footer {
      background-color: #222; /* Tmavé pozadí patičky */
      color: white; /* Barva textu v patičce */
      text-align: center;
      padding: 30px 20px; /* Vnitřní odsazení patičky */
      margin-top: 40px; /* Odsazení patičky od posledního obsahu */
    }
    .footer-cookie-settings {
      background: none;
      border: none;
      color: #4fff56; /* Barva odkazu/tlačítka pro nastavení cookies */
      text-decoration: underline;
      cursor: pointer;
      display: inline-block;
      margin-top: 15px;
      padding: 5px;
      font-size: 0.9em;
    }
    .footer-cookie-settings:hover {
      color: #6fbf73; /* Změna barvy při najetí */
    }

    /* Styly pro Cookie Banner */
    .cookie-banner {
      position: fixed; /* Fixní pozice banneru dole */
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(34, 34, 34, 0.95); /* Lehce průhledné tmavé pozadí */
      backdrop-filter: blur(5px); /* Efekt rozmazání pod bannerem (pokud prohlížeč podporuje) */
      color: #fff;
      padding: 20px;
      z-index: 10000; /* Nejvyšší z-index, aby byl nad vším ostatním */
      font-size: 0.9em; /* Menší písmo v banneru */
      box-shadow: 0 -3px 10px rgba(0,0,0,0.3); /* Stín nad bannerem */
      display: none; /* Výchozí stav - skrytý (zobrazí se pomocí JS) */
    }
    .cookie-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap; /* Zalamování prvků na menších obrazovkách */
      gap: 15px; /* Mezery mezi textem a tlačítky */
    }
    .cookie-main p {
      margin: 0 0 10px 0; /* Odsazení pod textem banneru */
      flex: 1 1 100%; /* Text zabere plnou šířku na malých obrazovkách */
    }
    .cookie-main p:last-of-type { margin-bottom: 0;} /* Odstranění spodního marginu u posledního odstavce */
    .cookie-buttons {
      display: flex;
      gap: 10px; /* Mezery mezi tlačítky */
      flex-wrap: wrap;
      justify-content: center; /* Centrování tlačítek na menších obrazovkách */
      flex: 1 1 100%; /* Tlačítka také zaberou plnou šířku */
    }
    @media (min-width: 768px) { /* Na větších obrazovkách text a tlačítka vedle sebe */
        .cookie-main p {
            flex: 1 1 60%; /* Text zabere 60% šířky */
             margin-bottom: 0;
        }
        .cookie-buttons {
            flex: 1 1 35%; /* Tlačítka zaberou 35% šířky */
            justify-content: flex-end; /* Tlačítka zarovnaná doprava */
        }
    }
    .cookie-buttons button, .cookie-settings button {
      background-color: #008b06; /* Zelená barva tlačítek */
      color: white;
      border: none;
      padding: 10px 15px; /* Vnitřní odsazení tlačítek */
      border-radius: 5px; /* Zaoblené rohy tlačítek */
      cursor: pointer;
      font-weight: bold;
      transition: background-color 0.2s ease; /* Animace změny pozadí */
    }
    .cookie-buttons button:hover, .cookie-settings button:hover {
      background-color: #45a049; /* Tmavší zelená při najetí */
    }
    .cookie-buttons button.secondary { /* Styl pro sekundární tlačítka (např. "Jen nezbytné") */
        background-color: #555; /* Tmavě šedá barva */
    }
    .cookie-buttons button.secondary:hover {
        background-color: #666; /* Světlejší šedá při najetí */
    }
    .cookie-settings {
      margin-top: 20px; /* Odsazení panelu s nastavením */
      background-color: #444; /* Pozadí panelu s nastavením */
      padding: 20px;
      border-radius: 8px;
      display: none; /* Výchozí stav - skrytý */
    }
    .cookie-settings h4 {
      margin-top: 0;
      margin-bottom: 15px;
      color: #fff;
    }
    .cookie-settings label {
      display: flex; /* Pro zarovnání checkboxu a textu */
      align-items: center;
      margin-bottom: 12px;
      color: #eee; /* Světlejší barva textu v nastavení */
      cursor: pointer;
    }
    .cookie-settings input[type="checkbox"] {
        margin-right: 10px; /* Mezera mezi checkboxem a textem */
        accent-color: #4CAF50; /* Barva zaškrtávátka (pokud prohlížeč podporuje) */
        width: 18px; /* Větší checkbox pro lepší klikatelnost */
        height: 18px;
    }
    .cookie-links {
        margin-top: 15px; /* Odsazení odkazu na zásady */
    }
    .cookie-links a {
        color: #4CAF50; /* Barva odkazu */
        text-decoration: underline;
    }
    .cookie-links a:hover {
        color: #6fbf73; /* Změna barvy při najetí */
    }
    .lightbox-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0,0,0,0.8);
       display: none;
       justify-content: center;
       align-items: center;
       z-index: 999;
    }

    .lightbox-overlay img {
      max-width: 90%;
      max-height: 90%;
      box-shadow: 0 0 20px #000;
}