.seda {background-color: #808080;}
.svetlemodra {background-color:#CEE8FF;}
/*.svetlemodra {background-color:#00BFFF}*/
.bila {background-color:#FFFFFF;}
.dobloku {text-align: justify;margin-left:15px;margin-top:10px;margin-right:15px;}
.doblokumodre  {text-align: justify;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#CEE8FF;}
.doblokumodrevnoreno  {text-align: justify;margin-top:10px;background-color:#CEE8FF;}
.doblokumodra {text-align: justify;margin-left:15px;margin-top:10px;margin-right:15px;background-color: rgb(119,187,221);}
.dolevamodra {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color: rgb(119,187,221);}



body {
    background-image: url("obrazky/zakladni/pozadi.webp");
    background-repeat: repeat;
    background-attachment: scroll;
    background-color: #f8f9fa;
    color: black;
    font-family: "Times New Roman", Calibri, serif;
    font-size: clamp(16px, 1.1vw, 18px);
}


.nastred {text-align: center;}
.nastred img {max-width: 100%; height: auto; display: block;  margin: 0 auto;}

a:link  {color: navy; font-style: italic; font-weight: 600;}
a:visited {color: blue; font-style: italic; font-weight: 600;}
a:active    {color: red; font-style: italic; font-weight: 600;}

.vetsimezera {line-height: 160%;} 
.pevne {background-color: #FF8793;}

p, i, select, option, label {font-size:18px;line-height: 150%;margin-top:25px;}

.logo  {width: 120px; border-width: 20px; border-style: solid; border-color: #CEE8FF; float: left; width: 50px; }
.ul {float: left; border: 3; }

div {font-size:18px, border-radius:8px; padding-top: 2px; padding-bottom: 2px; };

.ctverecek {  width: 120px;     border-width: 20px;  border-style: solid;     float: right;     border: 3;  } 
.rozbalovaci-bloky { width: 90%; max-width: 900px; margin: 30px auto; } 
.rozbalovaci-blok { width: 100%; margin-bottom: 12px; } 
        
.rozbalovaci-blok summary { position: relative; background: #CEE8FF; color: #234B6F; border: 1px solid #7FAAC8; 
border-left: 18px solid #6A9FC4; border-radius: 5px 9px 9px 5px; padding: 16px 25px 16px 30px; text-align: left; 
cursor: pointer; font-size: 18px; line-height: 1.45; box-shadow: 3px 3px 5px rgba(0,0,0,0.18); 
list-style-position: inside; } 
        
.rozbalovaci-blok summary::before { content: ""; position: absolute; left: 5px; top: 7px; bottom: 7px; width: 2px; 
background: #B7D8EE; } 
        
/* ozdobná linka na hřbetu */ 
.rozbalovaci-blok summary::after { content: ""; position: absolute; left: 2px; right: 10px; bottom: 5px; 
height: 1px; background: #9BC2DD; } 
      
/* při najetí */ 
.rozbalovaci-blok summary:hover { background: #BFE0F7; } 
        
/* otevřená kniha */ 
.rozbalovaci-blok[open] summary { background: #BFE0F7; border-left-color: #568DB5; border-radius: 5px 9px 0 0; 
box-shadow: none; } 
        
/* obsah otevřené knihy */ 
.rozbalovaci-blok .detail-box { display: block; padding: 25px; background: #FFFFFF; border: 1px solid #7FAAC8; 
border-top: none; border-radius: 0 0 9px 9px; box-shadow: 3px 3px 5px rgba(0,0,0,0.12); } 
        
/* =============================== MOBIL =============================== */ 
@media (max-width: 600px) {
.rozbalovaci-bloky { width: 100%; max-width: none; margin: 30px 0; padding: 0; box-sizing: border-box; }
.rozbalovaci-blok { width: 100%; margin: 0 0 12px 0; padding: 0; box-sizing: border-box; }
.rozbalovaci-blok summary { padding: 15px 18px 15px 24px; font-size: 18px; }
.rozbalovaci-blok .detail-box { padding: 18px; }
} 

/*----------kód pro formuláře na stránce přihlášení a kontakt------------------*/

/* Style inputs, select elements and textareas */
select.special, textarea.special{
  /*width: 100%;*/
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/* Style the label to display next to the inputs */
label {
  padding: 0px 12px 12px 0;
  display: inline-block;
}

/* Style the submit button */
input[type=submit].special {
 /* background-color: #04AA6D;*/
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=password].special, input[type=text].special{font-family: "Times New Roman"; font-size: 20px;padding: 5px 2px;margin:4px;} 
/* Style the container */
.container {
  border-radius: 5px;
  background-color: svetlemodra;
  padding: 20px;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 15%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 85%;
  margin-top: 25px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit].special {width: 100%; margin-top:0 ;}
  input[type=text].special,input[type=password].special {width: 95%;}
}



/*------------konec kódu pro formuláře přihlášení a kontakt-----------------------*/



/*-----------zadání stylů pro zobrazování poznámek nad slovíčkem */
 .tooltip {
            color: blue;
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 200px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%; /* Umístí tooltip nad slovo */
            left: 50%;
            margin-left: -100px; /* Polovina šířky tooltipu pro centrování */
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
            
        }
        /* Konec zadání stylů pro zobrazování poznámek na slovíčkem*/





/*
Zde definujeme bloky místo tabulky pro mobily*/

/* ===== MOBIL (výchozí stav) ===== */
.grid-blok {
    display: grid;
    grid-template-columns: 1fr;   /* 1 pod druhým */
    gap: 20px;
    margin: 0 auto;
    padding: 0 10px;              /* malé odsazení od kraje na mobilu */
}

/* styl pro klikací obdélník */
.box {
    display: block;
    background: #d0f0c0;
    transition: all 0.2s ease;
    padding: 30px 20px;
    text-align: center;
    border: 2px solid #000;
    border-radius: 12px;
    text-decoration: none;
    color: black;
    font-size: 18px;
}



/* hover efekt */
.box:hover {
    background: #d0ebd2;
    transform: translateY(-5px);
}





.rastr-wrapper {
  display: flex;
  gap: 20px;              /* mezera mezi bloky */
}

.rastrlevyvnitrnibily,
.rastrpravyvnitrnibily {
  flex: 1;                /* oba stejná šířka */
  box-sizing: border-box;
  background: white;
  position: relative;

  overflow: hidden;       /* zabrání přetékání */
  padding: 10px;
}


.rastrlevyvnitrnizluty {

box-sizing:border-box;
width: 100%;
margin: 0% auto;
background:navajowhite;
border: #FFFFFF solid 0;
position:relative;
height:40%;

}

.rastrpravyvnitrnizluty {
box-sizing:border-box;
width: 100%;
margin: 0% auto;
background:navajowhite;
border: #FFFFFF solid 0;
position:relative;
height:40%;
}

.rastrlevyvnitrni {

box-sizing:border-box;
width: 100%;
margin: 0% auto;
background:pink;
border: #FFFFFF solid 0;
position:relative;
height:40%;

}

.rastrpravyvnitrni {
box-sizing:border-box;
width: 100%;
margin: 0% auto;
background:pink;
border: #FFFFFF solid 0;
position:relative;
height:40%;
}


.rastrlevyvnitrnislovicka {

box-sizing:border-box;
width: 100%;
margin: 0% auto;
background:pink;
border: #FFFFFF solid 0;
position:relative;


}

.rastrpravyvnitrnislovicka {
box-sizing:border-box;
width: 100%;
margin: 0% auto;
background:pink;
border: #FFFFFF solid 0;
position:relative;

}

/*
.rastrhlavni {
box-sizing:border-box;
width: 100%;
margin: 0% auto;
background:	#FFFFFF;
border:	#FFFFFF solid 0;
position:relative;
}
*/


.rastrhlavni { box-sizing: border-box; width: 100%; margin: 0 auto; background: #FFFFFF; border: 0;
    position: relative; padding: 1.5%; }

.dolevabila  {text-align: left;margin-left:2%;margin-top:2%;margin-right:2%;background-color:#FFFFFF;}

.dolevavnitrnipink {text-align: left; padding: 10px 3%;background-color:#ffc0cb;}
.dolevavnitrnibila  {text-align: left; padding: 10px 3%;background-color:#FFFFFF;}
.dolevavnitrnisvetlemodra  {text-align: left; padding: 10px 3%;background-color:#CEE8FF;}
.dolevavnitrniantiquewhite {text-align: left; padding: 10px 3%;background-color:#faebd7;}

.rastrhlavni .svetlemodra {padding: 10px;}

@media (min-width: 1000px) { 
.rastrhlavni { box-sizing: border-box; width: 78%; padding: 1%; margin: 0 auto; border: 0;    }
.dolevabila  {text-align: left;margin-left:1.5%;margin-top:1.5%;margin-right:1.5%;background-color:#FFFFFF;}

.dolevavnitrnibila  {text-align: left; padding: 10px 1.5%;background-color:#FFFFFF;}
.dolevavnitrnipink {text-align: left; padding: 10px 1.5%;background-color:#ffc0cb;}
.dolevavnitrnisvetlemodra {text-align: left; padding: 10px 1.5%;background-color:#CEE8FF;}
.dolevavnitrniantiquewhite {text-align: left; padding: 10px 1.5%;background-color:#faebd7;}
}

/* ===== MOBIL ===== */
.odkazy-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 30px auto;
  padding: 0 10px;
}

.odkaz-karta {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.odkaz-karta h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
}

.odkaz-karta p {
  margin-bottom: 15px;
  line-height: 1.5;
  color: #444;
}

.odkaz-karta {
  background: #f5f7fa;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
}

.odkaz-karta a:hover {
  text-decoration: underline;
}

/* ------------------- MOBILE FIRST ------------------- */
.cenik-accordion {
  width: 100%;
  max-width: 400px;   /* pro mobily */
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.cenik-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.cenik-header {
  background: #004080; /* tmavší modrá základní */
  color: white;
  padding: 15px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s; /* plynulý přechod barvy při hover */
}

.cenik-header:hover {
  background: #00264d; /* ještě tmavší modrá při najetí myši */
}

.cenik-content {
  display: none;
  padding: 12px;
  background: #f9f9f9;
  font-size: 14px;
  line-height: 1.5;
}

.active .cenik-content {
  display: block;
}

noscript .cenik-content {
  display: block !important;
}

/* 1?? Základní styl – vhodné pro mobil (mobile-first) */




.box {
    background-color: #A3D9A5; /* jemná základní zelená */
    color: black;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: background-color 0.3s;
}

.box:hover,
.box.active {
    background-color: #6BA66B; /* tmavší zelená při hover/aktivní */
    color: white;
}

/* detail-box pod bloky */
.detail-box {
    display: none;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    margin-top: 10px;
}



.detail-box.active {
    display: block;
}

.boxref {
    background-color: #FFF4CC; /* jemná zlatá */
    color: #333;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: background-color 0.3s;
}

.boxref:hover,
.boxref.active {
    background-color: #FFD966; /* výraznější zlatá */
    color: #000;
}

.uvod-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.uvod-text {
    flex: 2;
     text-align: left;
}

.uvod-foto {
    flex: 1;
    text-align: center;
}

.uvod-foto img {
    width: 220px;   /* větší než původní */
    max-width: 100%;
    border-radius: 10px;
}
/* 2?? Styl pro větší obrazovky (desktop) */

.img-container {
    width: 100%;
    max-width: 800px; /* omezení šířky na desktopu */
    margin: auto;     /* centrování */
}

.img-detail {
    width: 100%;      /* naplní šířku kontejneru */
    height: auto;     /* zachování proporcí */
}


/* ZÁKLAD = MOBIL (pod sebou) */
.dva-sloupce {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* SLOUPCE */
.sloupec {
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* DESKTOP (od 700px vedle sebe) */
@media (min-width: 700px) {
  .dva-sloupce {
    flex-direction: row;
    gap: 40px;
  }

  .sloupec {
    flex: 1;
  }
}



@media (min-width: 1000px) { 

.rastrlevyvnitrni {width: 50%; float:left;margin-left:0%;height:20%;}
.rastrpravyvnitrni {width: 50%; float:right;margin-right:0%;height:20%;}
.rastrlevyvnitrnislovicka {width: 50%; float:left;margin-left:0%;}
.rastrpravyvnitrnislovicka {width: 50%; float:right;margin-right:0%;}
.rastrlevyvnitrnibily {width: 50%; float:left;margin-left:0%;}
.rastrpravyvnitrnibily {width: 50%; float:right;margin-right:0%;}


}


@media (min-width: 800px)
{
.rastrlevyvnitrnislovicka {width: 50%; float:left;margin-left:0%;}
.rastrpravyvnitrnislovicka {width: 50%; float:right;margin-right:0%;}


}

/* ===== TABLET ===== */
@media (min-width: 600px) {
    .grid-blok {
        grid-template-columns: repeat(2, 1fr); /* 2 vedle sebe */
    }
    .cenik-accordion {
    max-width: 700px;
  }
  .cenik-header {
    padding: 15px;
    font-size: 18px;
  }
  .cenik-content {
    padding: 15px;
    font-size: 16px;
  }
}



/* ===== DESKTOP ===== */
@media (min-width: 900px) {
    .grid-blok {
        grid-template-columns: repeat(3, 1fr); /* 3 vedle sebe */
        max-width: 1200px;
    }
}

/* ===== TABLET / PC ===== */
@media (min-width: 700px) {
  .odkazy-wrapper {
    grid-template-columns: 1fr 1fr;
    max-width: 900px;
  }
}

/* Responzivně pro PC */
@media screen and (min-width: 768px) {
  .blok-header { font-size: 18px; padding: 15px 20px; }
  .blok-content { font-size: 16px; padding: 15px 20px; }
}

@media screen and (max-width: 768px) {
    .uvod-flex {
        flex-direction: column;
        text-align: center;
    }

    .uvod-foto img {
        width: 160px;
        margin-bottom: 15px;
    }
}

/* Tablety */
@media (max-width: 1023px) {
    .img-container {
        max-width: 600px;
    }
}

/* Mobily */
@media (max-width: 767px) {
    .img-container {
        max-width: 100%;
        padding: 0 10px; /* menší odsazení od okrajů */
    }
}

input[type=file], input[type=button], input[type=submit]{font-family: "Times New Roman"; font-size: 20px;padding: 7px 15px;margin:4px;}
input[type=text],input[type=email]  {font-family: "Times New Roman"; font-size: 20px;padding: 5px 3px;margin:4px;} 
input.mujtext {font-family: "Times New Roman"; font-size: 20px;padding: 5px 3px;margin:4px;} 
textarea {font-family: "Times New Roman"; font-size: 20px; padding: 5px 3px; margin: 4px;}
textarea.mujtext {font-family: "Times New Roman"; font-size: 20px; padding: 5px 3px; margin: 4px;}
select {font-family: "Times New Roman"; font-size: 20px;padding: 5px 3px} 

@media screen and (max-width: 600px)
{
textarea, input[type=text], input[type=email],input[type=file], input.mujtext, select {width: 95%;}
submit {width:40%;}

}


.doblokusvetlemodra {text-align: justify;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#CEE8FF;}
.dolevasvetlemodra {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#CEE8FF;}

.zajimavamodra {background-color: #87cefa;}
.doblokuzajimavamodra  {text-align: justify;margin-left:15px;margin-top:10px;margin-right:15px;background-color: #87cefa;}


/*  background-color: #F8F9FA;  */
.sedobila {background-color:#DEE2E6}
.dolevasedobila {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#DEE2E6}


.cervena {background-color: rgb(228,112,129);}
.modra {background-color: rgb(119,187,221);}
.tmavejsimodra {background-color:#CEE9FF;}
.orchid  {background-color:#da70d6;border-radius: 8px;}
.deeppink {background-color:#ff1493;}
.hotpink {background-color:#ff69b4;}
.paletviolet  {background-color:#db7093;}
.bila {background-color:#FFFFFF;}
.pink {background-color:#ffc0cb;}
.salmon {background-color:#fa8072;} 
.lightcoral {background-color:#f08080;}
.lightsalmon {background-color:#ffa07a;}
.antiquewhite {background-color:#faebd7;}
.navajowhite {background-color:#ffdead;} 
.khaki {background-color:#f0a68c;}  
.palegreen {background-color:#98fb98;}
.lime {background-color:#00ff00;} 
.limegreen {background-color:#32cd32;}
.springgreen {background-color:#00ff7f;}
.aquamarine {background-color:#7fffd4;}
.turquoise {background-color:#40e0d0;}
.aqua {background-color:#00ffff;}
.paleturquoise {background-color:#afeeee;}
.darkturquoise {background-color:#00ced1;}
.lightblue {background-color:	#add8e6;}
.deepskyblue {background-color:#00bfff;}
.dodgerblue {background-color:#1e90ff;}
.cornflowerblue {background-color:#151b8d;} 
.plum {background-color:#dda0dd;}
.lightseagreen {background-color:#20b2aa;}
.mediumseagreen {background-color:#3cb371	;}
.chartreuse {background-color:#7fff00;}
.yellowgreen {background-color:#9acd32;}
.violet {background-color:#ee82ee;}
.fuchsia {background-color:#ff00ff;}
.gainsboro {background-color:#dcdcdc;}
.lightskyblue {background-color:#87cefa;}
.silver {background-color:#c0c0c0;}
.tomato {background-color:#ff6347;}
.skyblue {background-color:#87ceeb;}
.thistle {background-color:#d8bfd8;} 


.menuorchid  {background-color:#da70d6;text-align: center; margin-top:15px; line-height: 250%;}
.menudeeppink {background-color:#ff1493;text-align: center; margin-top:15px; line-height: 250%;}
.menuhotpink {background-color:#ff69b4;text-align: center; margin-top:15px; line-height: 250%;}
.menupaletviolet  {background-color:#db7093;text-align: center; margin-top:15px; line-height: 250%;}
.menupink {background-color:#ffc0cb;text-align: center; margin-top:15px; line-height: 250%;}
.menusalmon {background-color:#fa8072;text-align: center; margin-top:15px; line-height: 250%;} 
.menulightcoral {background-color:#f08080;text-align: center; margin-top:15px; line-height: 250%;}
.menulightsalmon {background-color:#ffa07a;text-align: center; margin-top:15px; line-height: 250%;}
.menuantiquewhite {background-color:#faebd7;text-align: center; margin-top:15px; line-height: 250%;}
.menunavajowhite {background-color:#ffdead;text-align: center; margin-top:15px; line-height: 250%;} 
.menukhaki {background-color:#f0a68c;text-align: center; margin-top:15px; line-height: 250%;}  
.menupalegreen {background-color:#98fb98;text-align: center; margin-top:15px; line-height: 250%;}
.menulime {background-color:#00ff00;text-align: center; margin-top:15px; line-height: 250%;} 
.menulimegreen {background-color:#32cd32;text-align: center; margin-top:15px; line-height: 250%;}
.menuspringgreen {background-color:#00ff7f;text-align: center; margin-top:15px; line-height: 250%;}
.menuaquamarine {background-color:#7fffd4;text-align: center; margin-top:15px; line-height: 250%;}
.menuturquoise {background-color:#40e0d0;text-align: center; margin-top:15px; line-height: 250%;}
.menuaqua {background-color:#00ffff; text-align: center;margin-top:15px; line-height: 250%;}
.menupaleturquoise {background-color:#afeeee;text-align: center; margin-top:15px; line-height: 250%;}
.menudarkturquoise {background-color:#00ced1;text-align: center;margin-top:15px; line-height: 250%;}
.menulightblue {background-color:	#add8e6;text-align: center; margin-top:15px; line-height: 250%;}
.menudeepskyblue {background-color:#00bfff;text-align: center; margin-top:15px; line-height: 250%;}
.menudodgerblue {background-color:#1e90ff;text-align: center; margin-top:15px; line-height: 250%;}
.menucornflowerblue {background-color:#151b8d;text-align: center; margin-top:15px; line-height: 250%;}
.menuthistle {background-color:#d8bfd8;text-align: center; margin-top:15px; line-height: 250%;} 
.menuplum {background-color:#dda0dd;text-align: center; margin-top:15px; line-height: 250%;}
.menulightseagreen {background-color:#20b2aa;text-align: center; margin-top:15px; line-height: 250%;}
.menumediumseagreen {background-color:#3cb371	;text-align: center; margin-top:15px; line-height: 250%;}
.menuchartreuse {background-color:#7fff00;text-align: center; margin-top:15px; line-height: 250%;}
.menuyellowgreen {background-color:#9acd32;text-align: center; margin-top:15px; line-height: 250%;}
.menuviolet {background-color:#ee82ee;text-align: center; margin-top:15px; line-height: 250%;}
.menufuchsia {background-color:#ff00ff;text-align: center; margin-top:15px; line-height: 250%;}
.menugainsboro {background-color:#dcdcdc;text-align: center; margin-top:15px; line-height: 250%;}
.menulightskyblue {background-color:#87cefa;text-align: center; margin-top:15px; line-height: 250%;}
.menuskyblue {background-color:#87ceeb;text-align: center; margin-top:15px; line-height: 250%;}



.dolevaseda  {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#808080;}
.dolevaorchid  {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#da70d6;}
.dolevadeeppink {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#ff1493;}
.dolevahotpink {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#ff69b4;}
.dolevapaletviolet  {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#db7093;}
.dolevapink {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#ffc0cb;}
.dolevasalmon {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#fa8072;} 
.dolevalightcoral {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#f08080;}
.dolevalightsalmon {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#ffa07a;}
.dolevaantiquewhite {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#faebd7;}
.dolevanavajowhite {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#ffdead;} 
.dolevakhaki {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#f0a68c;}  
.dolevapalegreen {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#98fb98;}
.dolevalime {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#00ff00;} 
.dolevalimegreen {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#32cd32;}
.dolevaspringgreen {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#00ff7f;}
.dolevaaquamarine {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#7fffd4;}
.dolevaturquoise {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#40e0d0;}
.dolevaaqua {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#00ffff;}
.dolevapaleturquoise {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#afeeee;}
.dolevadarkturquoise {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#00ced1;}
.dolevalightblue {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:	#add8e6;}
.dolevadeepskyblue {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#00bfff;}
.dolevadodgerblue {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#1e90ff;}
.dolevacornflowerblue {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#151b8d;} 
.dolevaplum {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#dda0dd;}
.dolevalightseagreen {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#20b2aa;}
.dolevamediumseagreen {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#3cb371	;}
.dolevachartreuse {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#7fff00;}
.dolevayellowgreen {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#9acd32;}
.dolevaviolet {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#ee82ee;}
.dolevafuchsia {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#ff00ff;}
.dolevagainsboro {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#dcdcdc;}
.dolevalightskyblue {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#87cefa;}
.dolevaskyblue {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#87ceeb;}
.dolevathistle {text-align: left;margin-left:15px;margin-top:10px;margin-right:15px;background-color:#d8bfd8;} 


.doblokucervena  {text-align: justify;margin-left:15px;margin-top:10px;margin-right:15px;background-color: rgb(228,112,129);}
.doblokubila  {text-align: justify;margin-left:15px;margin-top:10px;margin-right:15px;background-color: white;}

.zvyraznenipoptavky {text-align: center; background-color: rgb(228,112,129); margin-top:15px; line-height: 250%;}
.peknamodra {text-align: center; background-color: #1e90ff; margin-top:15px; line-height: 250%;}

/*
.nastred {text-align: center;}
.nastred img {max-width: 100%; height: auto; display: block;  margin: 0 auto;}

a:link  {color: navy; font-style: italic; font-weight: 600;}
a:visited {color: blue; font-style: italic; font-weight: 600;}
a:active    {color: red; font-style: italic; font-weight: 600;}

.vetsimezera {line-height: 160%;} 
.pevne {background-color: #FF8793;}

p, i, select, option, label {font-size:18px;line-height: 150%;margin-top:25px;}
div {font-size:18px, border-radius:8px; padding-top: 2px; padding-bottom: 2px; };
*/


/*třída na zarovnání tlačítek v online systému*/
.zarovnanitlacitek {text-align: left;}
@media screen and (max-width: 600px)
{
.zarovnanitlacitek {text-align: center;}
}

/* Hlavička stránky - Služby + Ostatní, kontakt a logo */
.hlavicka { width: 100%; background-color: #CEE8FF; box-sizing: border-box; }
.menu-hlavni { width: 100%; }
.kontakt-a-logo { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; }
.kontakt-a-logo .logo { flex: 0 0 50px; width: 50px; height: 50px; margin-top: -19px;}
.kontakt-a-logo .contact-inline { flex: 1; }
/* řádek s kontaktními údaji v hlavičce pro mobil */
@media (max-width: 700px) 
{
.kontakt-a-logo { gap: 10px;}
.kontakt-a-logo .logo { width: 45px; height: 45px; flex-basis: 45px; }
.contact-inline { font-size: 14px; }
}

/*odkaz na online cvičení na stránce vyuka_nemciny.php*/
.online-cviceni { margin: 20px 0; padding: 15px; background-color: #f2f2f2; border-radius: 8px; text-align: center; }
.cviceni-odkaz { font-size: 1.1em; font-weight: bold; text-decoration: none; color: #0055a5; }
.cviceni-odkaz:hover { text-decoration: underline; color: #003366; }

/*konec stránky ve footer:*/
.footer-odkazy {text-align:center; line-height:1.8; }
.footer-odkazy a { text-decoration:none; }
.footer-odkazy a:hover { text-decoration:underline; }
.marginkontakt {margin-left:10px;margin-top:10px;margin-right:10px;}

/*input {font-family:"Times New Roman";line-height: 150%;font-size:18px;}*/
input[type=file]  {font-size: 20px;padding: 7px 15px;margin:4px;}  
input[type=text]  {font-size: 20px;padding: 5px 3px;margin:4px;} 
input.mujtext { font-size: 20px;padding: 5px 3px;margin:4px;} 
textarea {font-size: 18px; padding: 5px 3px; margin: 4px;}
select { font-size: 20px;padding: 5px 3px}
input.normalnitlacitko { font-size: 20px;padding: 7px 15px;margin:4px;}  


li {line-height: 150%;font-size:18px; line-height: 150%;}
ul li form {line-height: 150%;font-size:18px;}

.marginadresa {margin-left:18px;margin-top:10px;margin-right:10px;line-height: 150%;}
.marginnadpis {line-height:200%;margin-top:0px;}
.margindalsihlavnilevy {margin-left:10px;margin-top:10px;margin-right:10px;line-height:200%;}
.margindalsilevy {margin-left:30px; line-height: 200%;}
.marginhlavnilevy {margin-left:10px;margin-top:10px;margin-right:10px;}
.marginstrednilevy {margin-left:15px;margin-top:8px;margin-right:10px;}
.marginjinyhlavnilevy {background-color:#CEE9FF;margin-left:10px;margin-top:10px;margin-right:10px;}
.marginsuperlevy {margin-left:160px;}
.marginlevy {margin-left:18px; margin-top:10px; line-height: 200%;}
.marginprvnilevy {margin-left:30px; margin-top:10px; line-height: 200%;}
.margindalsilevy {margin-left:30px; line-height: 120%;}
.nulovavyska {margin-left:10px;margin-top:0px;line-height:0px;}
.pravy {margin-left:200px;margin-top:10px;margin-right:10px;line-height:160%;}
table {border-collapse:collapse;}

td pre { line-height: 170%;} 
td pre strong{ line-height: 170%;}
h1.vlastni {font-size:25pxn;font-style: italic;font-weight:600;line-height: 160%;}
h3.letopocet {font-size:20px;padding:0px;margin:20px;}   
h1 {font-size: 22px;line-height: 110%;} 
h2 {font-size: 20px;line-height: 110%;}
h3 {font-size: 20px;}
h4, td h5, td h6 {font-size: 20px; padding:0; margin: 0;}
/*.odstavecsnadpisy { font-; foweight: 500;}          */
/*textarea {font-family: "Times New Roman";font-size:18px;}*/  
 
.vetsimezera {line-height: 160%;} 

/*-----------zadání stylů pro zobrazování tooltipů nad slovíčkem */
.tooltip { color: blue; position: relative; display: inline-block; cursor: pointer;  }
.tooltip .tooltiptext 
{ visibility: hidden; width: 200px; background-color: black; color: #fff; text-align: center;
border-radius: 5px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; /* Umístí tooltip nad slovo */
left: 50%; margin-left: -100px; /* Polovina šířky tooltipu pro centrování */ opacity: 0; transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1;}
/* Konec zadání stylů pro zobrazování poznámek na slovíčkem*/


/* šedý button - velmi důležitý */
.buttonsedy,
label.buttonsedy {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 6px 20px;
    border: 1px solid #6e6377;
    background: linear-gradient(to bottom, #a2bdc7, #6e6377);
    text-shadow: #453e4b 1px 1px 1px;
    font: normal normal normal 18px Arial;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer; /* důležité pro label */
    margin: 0 2px; /* malé odsazení mezi tlačítky */
}

.buttonsedy:hover,
label.buttonsedy:hover,
.buttonsedy:focus,
label.buttonsedy:focus {
    border: 1px solid #8a7c95;
    background: #484141;
    color: #ffffff;
    text-decoration: none;
}

.buttonsedy:active,
label.buttonsedy:active {
    background: linear-gradient(to bottom, #616877, #6e6377);
}


/* tlačítko myButton */
.myButton {  box-shadow: inset 0px 0px 0px -7px #f0f7fa; background: linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
    background-color: #33bdef; border-radius: 21px; border: 2px solid #057fd0; display: inline-block; cursor: pointer;
    color: #ffffff; font-family: Arial; font-size: 21px; font-weight: bold; padding: 14px 55px; text-decoration: none;
    text-shadow: 0px -1px 0px #5b6178;
}
.myButton:hover { background: linear-gradient(to bottom, #019ad2 5%, #33bdef 100%); background-color: #019ad2; }
.myButton:active { position: relative; top: 1px; }

/*tlačítko button2*/
.button2 
{display: inline-block; text-align: center; vertical-align: middle; padding: 12px 24px; border: 1px solid #a12727;
border-radius: 8px; background: #ad39a9; background: -webkit-gradient(linear, left top, left bottom, from(#ad39a9), to(#5683d1));
background: -moz-linear-gradient(top, #ad39a9, #5683d1); background: linear-gradient(to bottom, #ad39a9, #5683d1);
-webkit-box-shadow: #ff5959 0px 0px 40px 0px; -moz-box-shadow: #ff5959 0px 0px 40px 0px; 
box-shadow: #ff5959 0px 0px 40px 0px; text-shadow: #591717 1px 1px 1px; font: normal normal bold 20px times new roman;
color: #ffffff; text-decoration: none; 
}
.button2:hover, .button2:focus 
{ background: #d044cb; background: -webkit-gradient(linear, left top, left bottom, from(#d044cb), to(#679dfb));
background: -moz-linear-gradient(top, #d044cb, #679dfb); background: linear-gradient(to bottom, #d044cb, #679dfb);
color: #ffffff; text-decoration: none;
}
.button2:active 
{ background: #682265; background: -webkit-gradient(linear, left top, left bottom, from(#682265), to(#5683d1));
background: -moz-linear-gradient(top, #682265, #5683d1); background: linear-gradient(to bottom, #682265, #5683d1);
}


/*tlačítko button 3*/
.button3 
{
display: inline-block; text-align: center; vertical-align: middle; padding: 12px 24px; border: 1px solid #a12727;
background: -webkit-gradient(linear, left top, left bottom, from(#0eb6cc), to(#3972b0));
border-radius: 8px; background: #0eb6cc; background: -moz-linear-gradient(top, #0eb6cc, #3972b0);
background: linear-gradient(to bottom, #0eb6cc, #3972b0); text-shadow: #591717 1px 1px 1px;
font: normal normal bold 20px times new roman; color: #ffffff; text-decoration: none;
}
.button3:hover, .button3:focus 
{
background: #11daf5; background: -webkit-gradient(linear, left top, left bottom, from(#11daf5), to(#304fca));
background: -moz-linear-gradient(top, #11daf5, #304fca); background: linear-gradient(to bottom, #11daf5, #304fca);
color: #ffffff; text-decoration: none;
}
.button3:active 
{ background: #086d7a; background: -webkit-gradient(linear, left top, left bottom, from(#086d7a), to(#3972b0));
background: -moz-linear-gradient(top, #086d7a, #3972b0); background: linear-gradient(to bottom, #086d7a, #3972b0);
}


/*tlačítko buttonmensi3*/
.buttonmensi3 
{display: inline-block; text-align: center; vertical-align: middle; padding: 6px 20px; border: 1px solid #a12727; 
border-radius: 8px; background: #0eb6cc; 
background: -webkit-gradient(linear, left top, left bottom, from(#0eb6cc), to(#3972b0));
background: -moz-linear-gradient(top, #0eb6cc, #3972b0); background: linear-gradient(to bottom, #0eb6cc, #3972b0);
-webkit-box-shadow: #ff5959 0px 0px 40px 0px; -moz-box-shadow: #ff5959 0px 0px 40px 0px;
box-shadow: #ff5959 0px 0px 40px 0px; text-shadow: #591717 1px 1px 1px; font: normal normal bold 20px times new roman;
color: #ffffff; text-decoration: none;
}
.buttonmensi3:hover, .buttonmensi3:focus 
{background: #11daf5; background: -webkit-gradient(linear, left top, left bottom, from(#11daf5), to(#304fca));
background: -moz-linea-gradient(top, #11daf5, #304fca); background: linear-gradient(to bottom, #11daf5, #304fca);
color: #ffffff; text-decoration: none;
}
.buttonmensi3:active 
{ background: #086d7a; background: -webkit-gradient(linear, left top, left bottom, from(#086d7a), to(#3972b0));
background: -moz-linear-gradient(top, #086d7a, #3972b0); background: linear-gradient(to bottom, #086d7a, #3972b0);
}

/* Hlavní panel Menu - oprava hlavního panelu na jednotně modrou */

#menu-bar { width: 100%; box-sizing: border-box; margin: 0; padding: 6px; height: 50px; line-height: 100%;
    border-radius: 24px; box-shadow: 2px 2px 3px #0366b3; background-color: #0366b3; border: solid 1px #0366b3;
    position: relative; z-index: 999; display: block;
}
#menu-bar li 
{ margin: 0 0 6px 0; padding: 0 6px; float: left; position: relative; list-style: none; }
#menu-bar a 
{ font-weight: bold; font-family: 'times new roman'; font-size: 18px; color: #e7e5e5; text-decoration: none; 
display: block; padding: 6px 20px; margin: 0 0 6px 0; border-radius: 10px; text-shadow: 2px 2px 3px #000000;
}

/* Podpoložky rozbalovacího menu – ostré písmo a jednotná šířka */
#menu-bar ul a 
{ box-sizing: border-box; width: 100%; font-family: 'Times New Roman', serif; font-size: 18px; font-weight: bold;  
color: #FFFFFF; text-shadow: none; padding: 6px 12px; margin: 0; border-radius: 0;
}
/* Položky rozbalovacího menu */
#menu-bar ul li { float: none; width: 100%; margin: 0; padding: 0; box-sizing: border-box; }

#menu-bar .active a, #menu-bar li:hover > a 
{background-color: #0492d4; color: #FFFFFF; box-shadow: 0 1px 1px rgba(0, 0, 0, .2); text-shadow: none; }
#menu-bar ul a:hover 
{
background-color: #0492d4 !important; /* jednotná modrá při hover v submenu */ color: #FFFFFF !important;
}
#menu-bar li:hover > ul 
{ display: block; }
#menu-bar ul 
{ background-color: #0366b3; /* dropdown modrá */ display: none; margin: 0; padding: 0; width: 185px;
  position: absolute; top: 40px; left: 0; border: solid 1px #0366b3; border-radius: 10px; box-shadow: 2px 2px 3px #0366b3;
}

/* Formulářové položky v online systému */
#menu-bar ul li form 
{ margin: 0; padding: 6px 12px; color: #FFFFFF; font-family: 'Times New Roman', serif; font-size: 16px; font-weight: bold;
text-shadow: none; white-space: nowrap;
}

/* Text a obrázek ve formulářových položkách */
#menu-bar ul li form input { vertical-align: middle; }
/*Konec menu baru*/


.tistenaveta { font-family:"Calibri"; font-size: 121%;text-align: left;}



    /*třídy pro obrázky měnící se na základních stránkách*/
.hero-slider {width:600px; max-width:100%; overflow:hidden; position:relative; height:auto; margin:0 auto; }
.hero-slide { width:100%; position:absolute; top:0; left:100%; transition:left 1s ease; }
.hero-slide:first-child {position:relative; }
.hero-slide.aktivni { left:0;}
.hero-slide img { width:100%; max-width:100%; height:auto; display:block; }
/*chování třídy pro běžící obrázky na telefonu*/
@media (max-width:600px) 
{ 
.hero-slider { width:100%;}
}

/*třída pro tlačítko Zavolat   */
.btn-call {
  display:inline-block;
  padding:10px 20px;
  background:#0ea5e9;
  color:#fff;
  font-weight:bold;
  border-radius:50px;
  text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
}
.btn-call:hover {
  background:#0284c7;
}

 /* Marquee banner – základ */
  .marquee {
    position: relative;
    overflow: hidden;
    background: #0ea5e9;   /* modrý proužek – můžeš změnit */
    color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .marquee--light { background:#fffbdd; color:#222; border-bottom:1px solid #f0e6a8; }

  .marquee__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto; /* běžící text | CTA + zavřít */
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
  }

  /* Běžící linka (stopa) */
  .marquee__track {
    position: relative;
    overflow: hidden;
    height: 28px; /* výška řádku */
  }

  /* Běžící obsah – duplikovaný pro plynulou smyčku */
  .marquee__content {
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: marqueeScroll 22s linear infinite;
  }
  .marquee__content--dup {
    left: 100%;
    animation: marqueeScrollDup 22s linear infinite;
  }

  /* Pauza na hover (jen když uživatel chce animace) */
  .marquee:hover .marquee__content,
  .marquee:hover .marquee__content--dup {
    animation-play-state: paused;
  }

  /* CTA a zavírací tlačítko */
  .marquee__cta {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  }
  .marquee-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 7px 10px; border-radius: 4px; font-weight: 700;
    text-decoration: none; border: 2px solid #fff; color: #0ea5e9;
    background: #fff; white-space: nowrap;
  }
  .marquee--light .marquee-btn {
    border-color:#0ea5e9; color:#fff; background:#0ea5e9;
  }
  .marquee-btn:hover, .marquee-btn:focus { filter: brightness(0.95); }

  .marquee__close {
    background: transparent; color: currentColor; border: none;
    font-size: 20px; line-height: 1; padding: 6px; cursor: pointer;
    border-radius: 4px;
  }
  .marquee__close:hover, .marquee__close:focus {
    background: rgba(255,255,255,.15);
  }
  .marquee--light .marquee__close:hover, .marquee--light .marquee__close:focus {
    background: rgba(0,0,0,.06);
  }

  /* Animace – plynulá smyčka dvou pásů */
  @keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
  }
  @keyframes marqueeScrollDup {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
  }

  /* Přístupnost: omezit pohyb */
  @media (prefers-reduced-motion: reduce) {
    .marquee__content, .marquee__content--dup {
      animation: none;
      position: static;
      display: inline;
    }
    .marquee__track { height: auto; }
  }

  /* Responsivita */
  @media (max-width: 720px) {
    .marquee__inner { grid-template-columns: 1fr; gap: 8px; }
    .marquee__cta { justify-content: flex-start; }
  }