/*
    Author     : Daniel Romahn
*/

/* definitionen */

/*:root{
    --white: #fff;
    --black: #000;
    --gray: #606970;
    --lightgray: #EEEEEE;
}*/

html, body {
    /*background-color: #bbdcff;*/
}


.header{
    height: 63px;
}

.inhalt {
    position: relative;
    min-height: calc((100vh - 63px) - 0px);
    /*margin: 0 auto;*/
}
.nav-hover:hover{
    color: var(--bs-success) !important;
}

.contentdiv{
    overflow-y: scroll;
    height: 93vh !important;
}

/* footer */
.sticky-footer{
    position:relative;
    bottom: 0;
    height: 0px;
}

.infooter{
    margin-left: -15px;
    margin-right: -15px;
}
/* footer end */

.card-panel {
    min-height: calc((100vh - 100px) - 0px);
}

input[required]:valid, select[required]:valid{
    border: 1px solid green !important;
}

input[required]:invalid, select[required]:invalid {
    border: 1px solid red !important;
}

/* farben */

.text-lightgray{
    color: var(--lightgray);
}

.bg-lightgray{
    background-color: var(--lightgray);
}

/* breiten */

.w-10{
    min-width: 10% !important;
}

.w-20{
    min-width: 20% !important;
}

.w-30{
    min-width: 30% !important;
}
.w-150{
    width: 150% !important;
}

.input-width-220{
    max-width: 220px !important;
}

/*Bilderbegrenzungen*/
.gallerie--vorschau32{
    max-height: 32px;
    max-width: 32px;
}

.gallerie--vorschau100{
    max-height: 100px;
    max-width: 100px;
}

.gallerie--vorschau150{
    max-height: 150px;
    max-width: 150px;
}

.gallerie--vorschau200{
    max-height: 200px;
    max-width: 200px;
}

.gallerie--vorschau300{
    max-height: 300px;
    max-width: 300px;
}

.gallerie--vorschau400{
    max-height: 400px;
    max-width: 400px;
}

.gallerie--bild500{
    max-height: 500px;
}

.imggray {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.imggray:hover {
    -webkit-filter: grayscale(0%);  /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

.finger{
    cursor: pointer;
}

.modal-full-landscape {
    margin: 1.75rem auto;
    max-width: calc(70% - (1.75rem * 2));
    height: auto;
}
.modal-full-portrait {
    margin: 1.75rem auto;
    max-height: calc(85% - (1.75rem * 2));
    max-width: 32vw;
}

.btn-block {
    display: block;
    width: 100%;
}

/* schatten */

.box-shadowaussen{
    -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.3);
}


/* Cookiewarner */

/*#cookiedingsbums a {
    color:var(--black);
    text-decoration:none;
}

#cookiedingsbums a:hover {
    text-decoration:underline;
}

#cookiedingsbums div {
    padding:10px;
    padding-right:40px;
}

#cookiedingsbums {
    outline: 1px solid #7b92a9;
    text-align: center;
    border-top: 1px solid var(--white);
    background: #d6e0eb;
    background: -moz-linear-gradient(top, #d6e0eb 0%, #f2f6f9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d6e0eb), color-stop(100%,#f2f6f9));
    background: -webkit-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%);
    background: -o-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%);
    background: -ms-linear-gradient(top, #d6e0eb 0%,#f2f6f9 100%);
    background: linear-gradient(to bottom, #d6e0eb 0%,#f2f6f9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#d6e0eb', endColorstr='#f2f6f9',GradientType=0 );
    position:fixed;
    bottom:0px;
    z-index:10000;
    width:100%;
    font-size:12px;
    line-height:16px;
}

#cookiedingsbumsCloser {
    color: #777;
    font: 14px/100% arial, sans-serif;
    position: absolute;
    right: 5px;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    top: 5px;
    cursor:pointer;
    border-top:1px solid white;
    border-left:1px solid white;
    border-bottom:1px solid #7b92a9;
    border-right:1px solid #7b92a9;
    padding:4px;
    background: #ced6df;  Old browsers 
    background: -moz-linear-gradient(top, #ced6df0, #f2f6f9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ced6df), color-stop(100%,#f2f6f9));
    background: -webkit-linear-gradient(top, #ced6df0,#f2f6f9 100%);
    background: -o-linear-gradient(top, #ced6df0,#f2f6f9 100%);
    background: -ms-linear-gradient(top, #ced6df0,#f2f6f9 100%);
    background: linear-gradient(to bottom, #ced6df0,#f2f6f9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(    startColorstr='#ced6df', endColorstr='#f2f6f9',GradientType=0 );
}

#cookiedingsbumsCloser:hover {
    border-bottom:1px solid white;
    border-right:1px solid white;
    border-top:1px solid #7b92a9;
    border-left:1px solid #7b92a9;
}*/

/* gallery */
.gal {
    -webkit-column-count: 6; /* Chrome, Safari, Opera */
    -moz-column-count: 6; /* Firefox */
    column-count: 6;
}

/*.gal .imggray{ width: 100%; padding-bottom: 15px;}*/
.gal .imgstyle{
    width: 100%;
    padding-bottom: 15px;
}
@media (max-width: 500px) {

    .gal {
        -webkit-column-count: 1; /* Chrome, Safari, Opera */
        -moz-column-count: 1; /* Firefox */
        column-count: 1;
    }

}


/* rating */

/*.rating {
    float:left;
}

 :not(:checked) is a filter, so that browsers that don’t support :checked don’t
  follow these rules. Every browser that supports :checked also supports :not(), so
  it doesn’t make the test unnecessarily selective 
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:170%;
    color:#ddd;
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: gold;

}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;

}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: gold;

}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}*/


.delay {
  animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}