/* Stylesheet für Dietmars Homepage
  responsives Layout rev.180326-1 

*/
/* ====================================================  GALERIE ==================================================== */
.galerie-frame {
  border: 1px solid #c2c2c2 ! important;
  /*margin: 0 auto ! important;*/
  margin: 0px 40px 40px 40px ! important;
  background-color: #e3e3e3 ! important;
  /*width: 182px ! important;*/
  width:9rem;! important;
  text-align: left ! important;
  overflow: hidden ! important;
  height: 8rem;! important;
  /*height: 182px ! important;*/
  position: relative ! important;
  color: inherit;
  float: left ! important;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;
  border-radius:5px
}
.hidden-container {
	display: none;
}
.highslide-gallery ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.galerie-image{
  width:16rem;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;
  border-radius:5px
}
.galerie-image-link:hover{
  background-color:#4ae
}
.galerie-image-link{
  display:inline-block;
  padding:4px;
  /*margin:0 0.5rem 1rem 0.5rem;*/
  margin:0.7rem 0rem 0rem 0.7rem;
  background-color:#fff;
  line-height:0;
  -webkit-transition:background-color 0.1s ease-out;
  -moz-transition:background-color 0.1s ease-out;-o-transition:background-color 0.1s ease-out;
  transition:background-color 0.1s ease-out;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;
  border-radius:6px
}
.description p {
  margin: 0 0 0.5em ! important;
  height: 2em ! important;
  text-align: center ! important;
}

.sideimg {
        flex: 1 30%;
        margin: 1%;
        padding: 1em;
      }

      .moreless-btn {
        background: none;
        border: none;
        color: var(--accent1-color);
        margin-bottom: 1.5em;
        padding: 0;
        font-size: 16px;
        cursor: pointer;
        float: right;
      }

@media (prefers-color-scheme: dark) {
:root {
    .moreless-btn {
        color: var(--accent2-color);
    }
    .moreless-btn:hover {
        background-color: transparent;
        color: var(--accent2-color);
        font-weight: 450;
      }
}
}      
      
      .moreless-btn::before {
        content: "►";  
        margin-right: .5em;
        display:inline-block;
	    text-decoration: none;    
}  
     
      
      .shortText.small {
        -webkit-mask-image: -webkit-gradient(
          linear,
          left top,
          left bottom,
          from(rgba(0, 0, 0, 1)),
          to(rgba(0, 0, 0, 0))
        );
      }

      .shortText span.more {
        display: inline;
      }

      .shortText.small span.more {
        display: none;
      }

      .shortText:not(.small) span.dots {
        display: none;
      }
/***********************************************************/
.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: '►weiterlesen';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: '►weniger anzeigen';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: var(--accent1-color);
  font-size: .9em;
  line-height: 2;
  border: none;
}

/***********************************************************/
      .content-image-fleft-link {
        display: inline-block;
        padding: 4px;
        margin: 0 0.5rem 1rem 0.5rem;
        background-color: #fff;
        line-height: 0;
        -webkit-transition: background-color 0.1s ease-out;
        -moz-transition: background-color 0.1s ease-out;
        -o-transition: background-color 0.1s ease-out;
        transition: background-color 0.1s ease-out;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
        clear: both;
        float: left;
      }
      .content-image-fleft-link:hover {
        background-color: darkred;
      }

      .side-image {
        width: 100%;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
      }
      .grid-image-link {
        display: inline-block;
        padding: 4px;
        /*margin:0 0.5rem 1rem 0.5rem;*/
        background-color: #fff;
        line-height: 0;
        -webkit-transition: background-color 0.1s ease-out;
        -moz-transition: background-color 0.1s ease-out;
        -o-transition: background-color 0.1s ease-out;
        transition: background-color 0.1s ease-out;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
        clear: both;
      }
      .side-image-link {
        display: inline-block;
        padding: 4px;
        /*margin:0 0.5rem 1rem 0.5rem;*/
        background-color: #fff;
        line-height: 0;
        -webkit-transition: background-color 0.1s ease-out;
        -moz-transition: background-color 0.1s ease-out;
        -o-transition: background-color 0.1s ease-out;
        transition: background-color 0.1s ease-out;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
        /* clear: both;*/
      }
      .side-image-link:hover {
        background-color: #4ae;
      }

      .grid-image-link:hover {
        background-color: transparent;
      }

      .content-image {
        /*width:21rem;*/
        max-width: 15rem;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
      }
      .content-image-link {
        display: inline-block;
        padding: 4px;
        margin: 0.5rem 0.5rem 1rem 0.5rem;
        background-color: #fff;
        line-height: 0;
        -webkit-transition: background-color 0.1s ease-out;
        -moz-transition: background-color 0.1s ease-out;
        -o-transition: background-color 0.1s ease-out;
        transition: background-color 0.1s ease-out;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
        clear: both;
      }
      .content-image-link:hover {
        background-color: #4ae;
      }
  
      .content-image-fright-link {
        display: inline-block;
        padding: 4px;
        margin: 0 0.5rem 1rem 0.5rem;
        background-color: #fff;
        line-height: 0;
        -webkit-transition: background-color 0.1s ease-out;
        -moz-transition: background-color 0.1s ease-out;
        -o-transition: background-color 0.1s ease-out;
        transition: background-color 0.1s ease-out;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
        clear: both;
        float: right;
      }
      .content-image-fright-link:hover {
        background-color: darkred;
      }

/****************************************************************************/
 /* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 8px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */  
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}


/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: darkred;
  color: white;
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=reset] {
  background-color: darkred;
  color: white;
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: orange;
}

input[type=reset]:hover {
  background-color: orange;
}

.mycontainer {
  background: no-repeat top .5em right .5em var(--background3-color);
  box-shadow: -0.3em .6em .6em 0 rgba(0, 0, 0, .75);
  padding: 0 1em 1em;
}

/*#site-slogan {
  clear: right;
  color: white;
  float: right;
  text-align: center;
  font-style: italic;
  margin-right: 20px;
  margin-left: 600px;
}*/

#site-slogan {
  font-size: 12px;
  text-align: center;
  font-style: italic;
  margin: 2em 1.5em 1em .5em;  
}


.left    { text-align: left; }
.right   { text-align: right; }
.center  { text-align: center; }
.justify { text-align: justify; }
.start   { text-align: start; }
.end     { text-align: end; }


#back-to-top {
  font-family: sans-serif;
  font-size: 15pt;
  padding: 19px;
  text-decoration: none;      
  display: none;
  position: fixed;
  bottom: 30px;
  right: 15px; 
  background: #454543;
  background: -moz-linear-gradient(top,#454543 0%,#393939 100%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#454543) ,color-stop(100%,#393939));
  background: -webkit-linear-gradient(top,#454543 0%,#393939 100%);
  background: -o-linear-gradient(top,#454543 0%,#393939 100%);
  background: -ms-linear-gradient(top,#454543 0%,#393939 100%);
  background: linear-gradient(top,#454543 0%,#393939 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454543',endColorstr='#393939',GradientType=0);
  color: #fff;
  border-radius: 25px;
  cursor: pointer;
  z-index: 9999;
  transition: opacity 0.3s ease;
  box-shadow: 0 5px 25px black;
  -webkit-box-shadow: 0 5px 25px black;
  -moz-box-shadow: 0 5px 25px black;  
    
}
#back-to-top:hover {
  background: #5b5b5b;
  background: -moz-linear-gradient(top,#5b5b5b 0%,#393939 100%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5b5b5b) ,color-stop(100%,#393939));
  background: -webkit-linear-gradient(top,#5b5b5b 0%,#393939 100%);
  background: -o-linear-gradient(top,#5b5b5b 0%,#393939 100%);
  background: -ms-linear-gradient(top,#5b5b5b 0%,#393939 100%);
  background: linear-gradient(top,#5b5b5b 0%,#393939 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5b5b5b',endColorstr='#393939',GradientType=0);
}
#tourreport {
  flex: 1 60%;
  margin: 1%;
}

hr.division {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

pre.text-box {
  font-family:'Courier New',monospace;
  font-size: 12px;  
  border-style:solid;
  border-width:2px;
  padding:5px;
  border-color:#e1e1e1;
  background:#ffffff;
  color:#000000;
}
pre.code-box {
  font-family:'Courier New',monospace;
  font-size: 12px;   
  border-style:solid;
  border-width:1px;
  padding: 1ex;
  border-color:#eeee77;
  background:#ffffee;
  color:#000000;
}

span.sc0 {
}
span.sc2 {
  color: #008000;
}
span.sc4 {
  color: #ff8000;
}
span.sc5 {
  font-weight: bold;
  color: #0000ff;
}
span.sc9 {
  color: #804000;
}
span.sc10 {
  font-weight: bold;
  color: #000080;
}
span.sc11 {
}
span.sc16 {
  color: #8000ff;
}