html,body
{
background-color: rgb(255,255,255);
color: rgb(48,81,160);
font-family: Verdana;
font-size: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
height: 100%;
margin-bottom: 0px;
}
@media only screen and (max-width: 399px) { html,body{} }
@media only screen and (min-width: 400px) and (max-width: 769px) { html,body{} }
@media only screen and (min-width: 770px) and (max-width: 1199px) { html,body{display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; flex-wrap: wrap;-webkit-align-items: flex-start; align-items: flex-start;} }
@media only screen and (min-width: 1200px) { html,body{display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; flex-wrap: wrap;-webkit-align-items: flex-start; align-items: flex-start;} }
a
{
color: rgb(48,81,160);
text-decoration: none;
transition: color 0.5s;
}
a:hover, a:focus, a:active
{
color: rgb(255,204,41);
transition: color 0.5s;
}
@-webkit-keyframes wackeln
{
0% { margin-left: 0px; padding-right: 5px;}
50% { margin-left: 5px; padding-right: 0px;}
100% { margin-left: 0px; padding-right: 5px;}
}
@keyframes wackeln
{
0% { margin-left: 0px; padding-right: 5px;}
50% { margin-left: 5px; padding-right: 0px;}
100% { margin-left: 0px; padding-right: 5px;}
}
a img#img_finger_link_ueberschrift
{
height: auto;
width: auto;
padding-right: 5px;
}
@media only screen and (max-width: 399px) { a img#img_finger_link_ueberschrift {max-height: 14px;} }
@media only screen and (min-width: 400px) and (max-width: 769px) { a img#img_finger_link_ueberschrift {max-height: 16px;} }
@media only screen and (min-width: 770px) and (max-width: 1199px) { a img#img_finger_link_ueberschrift {max-height: 20px;} }
@media only screen and (min-width: 1200px) { a img#img_finger_link_ueberschrift {max-height: 24px;} }
a img#img_finger_link_text
{
height: auto;
width: auto;
max-height: 14px;
padding-right: 5px;
}
a:hover img#img_finger_link_ueberschrift, a:hover img#img_finger_link_text
{
height: auto;
width: auto;
-webkit-animation: wackeln 1.5s infinite;
animation: wackeln 1.5s infinite;
}
input#checkbox_unsichtbar
{
}
input#radiobutton_unsichtbar
{
}
/* ####################################################### */
/* ######################## MENUE ########################*/
/* ####################################################### */
#header
{
position: fixed;
top: 0;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
align-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
z-index: 998;
background-color: rgba(255,255,255,1);
box-shadow: 0px 1px 10px rgb(48,81,160);
width: 100%;
margin-left: auto;
margin-right: auto;
}
@media only screen and (max-width: 399px) { #header{} }
@media only screen and (min-width: 400px) and (max-width: 769px) { #header{} }
@media only screen and (min-width: 770px) and (max-width: 1199px) { #header{} }
@media only screen and (min-width: 1200px) { #header{} }
header
{
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
z-index: 998;
width: 100%;
margin-left: auto;
margin-right: auto;
}
@media only screen and (max-width: 399px)
{ header{flex-direction: column; -webkit-align-items: center; align-items: center; align-content: space-between; -webkit-justify-content: space-between; justify-content: space-between; width: 100%;} }
@media only screen and (min-width: 400px) and (max-width: 1199px)
{ header{flex-direction: column; -webkit-align-items: center; align-items: center; align-content: space-between; -webkit-justify-content: space-between; justify-content: space-between; width: 100%;} }
@media only screen and (min-width: 1200px) and (max-width: 1599px)
{ header{flex-direction: row; -webkit-align-items: center; align-items: center; align-content: space-between; -webkit-justify-content: space-between; justify-content: space-between; width: 80%;} }
@media only screen and (min-width: 1600px)
{ header{flex-direction: row; -webkit-align-items: center; align-items: center; align-content: space-between; -webkit-justify-content: space-between; justify-content: space-between; width: 80%;} }
a#menue_titel, a#menue_titel_mobil
{
flex-direction: column;
align-content: flex-start;
-webkit-justify-content: center;
justify-content: center;
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
z-index: 980;
}
@media only screen and (max-width: 399px) { a#menue_titel{display: none; -webkit-align-items: center; align-items: center; width: 100%; font-size: 26px;} }
@media only screen and (min-width: 400px) and (max-width: 1199px) { a#menue_titel{display: none; -webkit-align-items: center; align-items: center; width: 80%; font-size: 30px;} }
@media only screen and (min-width: 1200px) and (max-width: 1599px) { a#menue_titel{display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; align-items: flex-start; width: 50%; font-size: 45px;} }
@media only screen and (min-width: 1600px) { a#menue_titel{display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; align-items: flex-start; width: 50%; font-size: 55px;} }
@media only screen and (max-width: 399px) { a#menue_titel_mobil {display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; align-items: flex-start; width: 100%; font-size: 26px; background: rgb(255,255,255); position: absolute; top: -10px; left: 0px; } }
@media only screen and (min-width: 400px) and (max-width: 1199px) { a#menue_titel_mobil{display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; align-items: flex-start; width: 100%; font-size: 30px; background: rgb(255,255,255); position: absolute; top: -10px; left: 0px; } }
@media only screen and (min-width: 1200px) and (max-width: 1599px) { a#menue_titel_mobil{display: none; -webkit-align-items: flex-start; align-items: flex-start; width: 50%; font-size: 45px;} }
@media only screen and (min-width: 1600px) { a#menue_titel_mobil{display: none; -webkit-align-items: flex-start; align-items: flex-start; width: 50%; font-size: 55px;} }
img#logo_header, img#logo_header_mobil
{
width: auto;
height: auto;
transition: max-height 1.5s ease;
z-index: 981;
max-height: 70px;
}
@media only screen and (max-width: 399px) { img#logo_header, img#logo_header_mobil {max-width: 70%;}}
@media only screen and (min-width: 400px) and (max-width: 1199px) { img#logo_header, img#logo_header_mobil {max-width: 60%;}}
#menue_desktop
{
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
flex-wrap: wrap;
-webkit-align-items: stretch;
align-items: stretch;
align-content: center;
-webkit-justify-content: space-around;
justify-content: space-around;
position: relative;
width: 100%;
}
#menue_desktop_rahmen
{
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
align-content: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
}
#menue_desktop_rahmen a
{
z-index: 998;
width: 100%;
box-sizing: borer-box;
margin-left: 7px;
margin-right: 7px;
margin-top: 2px;
margin-bottom: 2px;
padding-top: 4px;
padding-bottom: 4px;
color: rgb(48,81,160);
font-weight: bold;
transition: color 1s, text-shadow 1s;
}
#menue_desktop_rahmen a:hover, #menue_desktop_rahmen a:focus, #menue_desktop_rahmen a:active
{
color: rgb(255,204,41);
transition: color 0.5s, text-shadow 0.5s;
}
#menue_mobil
{
z-index: 990;
display: none;
flex-direction: column;
flex-wrap: wrap;
-webkit-align-items: center;
align-items: flex-end;
align-content: flex-end;
-webkit-justify-content: flex-start;
justify-content: flex-start;
position: absolute;
top: 0;
width: 100%;
height: 10%;
margin: 20px 0 0 0;
padding-top: 2px;
padding-bottom: 30px;
font-weight: bold;
}
@media only screen and (max-width: 768px) { #menue_mobil {right: 0px;}}
@media only screen and (min-width: 769px) and (max-width: 1199px) {#menue_mobil {right: 60px;}}
#menue_mobil input#strg_menue_mobil
{
display: none;
}
#menue_mobil label#label_menue_mobil
{
position: relative;
margin-top: -10px;
border-radius: 5px;
cursor: pointer;
font-size: 80%;
color: rgb(0,155,205);
text-shadow: 2px 2px 2px rgb(200,100,0);
background-color: rgb(255,255,255);
padding: 3px 8px;
}
#menue_mobil label#label_menue_mobil:hover
{
}
label#label_menue_mobil::after
{
z-index: 991;
position: relative;
content: url("../images/global/menue.png");
}
#menue_mobil input#strg_menue_mobil:not(:checked) ~ .steuerung
{
display: none;
}
#menue_mobil input#strg_menue_mobil:checked ~ label#label_menue_mobil:after
{
z-index: 991;
content: url("../images/global/menue_zu.png");
}
#menue_mobil input#strg_menue_mobil:checked ~ .steuerung
{
display: flex;
margin-bottom: 0px;
}
#strg
{
position: absolute;
left: 0;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
flex-wrap: wrap;
-webkit-align-items: flex-start;
align-items: flex-start;
align-content: stretch;
-webkit-justify-content: stretch;
justify-content: stretch;
box-sizing: border-box;
width: 100%;
top: -20px;
padding-bottom: 15px;
background: rgb(255,255,255);
box-shadow: 0px 5px 5px rgba(48,81,160,0.7);
}
@media only screen and (max-width: 768px) { #strg {margin-left: 0px;}}
@media only screen and (min-width: 769px) and (max-width: 1199px) {#strg {margin-left: 60px;}}
#strg #menue_mobil_rahmen
{
margin-right: 0px;
text-align: center;
box-sizing: border-box;
padding: 0;
width: 100%;
background-color: rgb(255,255,255);
box-sizing: border-box;
transition: 0.5s;
}
#strg #menue_mobil_rahmen:hover
{
color: rgb(255,204,41);
background-color: rgb(48,81,160);
transition: 0.5s;
}
#strg #menue_mobil_rahmen a
{
}
#strg #menue_mobil_rahmen a #menue_mobil_innen
{
padding: 5px 0 5px 0;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++ Stoerer +++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*
@keyframes stoerer_fold
{
0% { height: 0px; }
100% { height: 100px; }
}
@keyframes stoerer_alle_turniere
{
0% { height: 0px; }
100% { height: 30px; }
}
*/
#stoerer
{
position: fixed;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
flex-wrap: no-wrap;
-webkit-align-items: stretch;
align-items: stretch;
align-content: stretch;
-webkit-justify-content: stretch;
justify-content: stretch;
z-index: 998;
top: 0;
box-sizing: border-box;
}
@media only screen and (max-width: 399px)
{ #stoerer {width: 100%; margin-top: 100px;} }
@media only screen and (min-width: 400px) and (max-width: 769px)
{ #stoerer {width: 400px; margin-top: 100px;} }
@media only screen and (min-width: 770px) and (max-width: 1199px)
{ #stoerer {width: 400px; margin-top: 70px;} }
@media only screen and (min-width: 1200px)
{ #stoerer {width: 400px; margin-top: 75px;} }
@media only screen and (max-width: 399px)
{
@keyframes stoerer_slide
{
0% { left: -410px; }
100% { left: 0%; }
}
.stoerer_slide
{
left: -410px;
animation-name: stoerer_slide;
animation-duration: 1.5s;
animation-delay: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
}
@media only screen and (min-width: 400px) and (max-width: 769px)
{
@keyframes stoerer_slide
{
0% { left: -410px; }
100% { left: 0px; }
}
.stoerer_slide
{
left: -410px;
animation-name: stoerer_slide;
animation-duration: 1.5s;
animation-delay: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
}
@media only screen and (min-width: 770px) and (max-width: 1199px)
{
@keyframes stoerer_slide
{
0% { left: -410px; }
100% { left: 0px; }
}
.stoerer_slide
{
left: -410px;
animation-name: stoerer_slide;
animation-duration: 1.5s;
animation-delay: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
}
@media only screen and (min-width: 1200px)
{
@keyframes stoerer_slide
{
0% { left: -410px; }
100% { left: 0px; }
}
.stoerer_slide
{
left: -410px;
animation-name: stoerer_slide;
animation-duration: 1.5s;
animation-delay: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
}
#stoerer_content
{
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
align-content: center;
-webkit-justify-content: space-around;
justify-content: space-around;
width: 370px;
background-image: linear-gradient(to right, rgb(50,50,50), rgb(200,100,0));
box-shadow: 1px 1px 3px rgb(255,255,255);
}
#stoerer_content a
{
text-shadow: 1px 1px 1px rgba(0,0,0,1);
}
#stoerer_content a:hover
{
}
#stoerer_ueberschrift
{
width: 100%;
text-align: center;
font-weight: bold;
background-color: rgba(0,0,0,0.2);
box-sizing: border-box;
padding: 5px 0px;
}
#stoerer h2
{
font-size: 100%;
text-align: center;
width: 100%;
margin-top: 2px;
margin-bottom: 2px;
margin-right: 30px;
box-sizing: border-box;
}
.stoerer_fold
{
/*
height: 0px;
overflow: hidden;
animation-name: stoerer_fold;
animation-duration: 1.0s;
animation-delay: 4.5s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
*/
height: 100px;
}
#stoerer_bild_details
{
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
-webkit-align-items: stretch;
align-items: stretch;
align-content: center;
-webkit-justify-content: space-around;
justify-content: space-around;
width: 100%;
height: 100px;
margin-right: 30px;
box-sizing: border-box;
}
#stoerer_bild_details img
{
width: auto;
max-width: 40%;
height: auto;
max-height: 95px;
}
#stoerer_details
{
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-webkit-align-items: flex-start;
align-items: flex-start;
align-content: center;
-webkit-justify-content: space-around;
justify-content: space-around;
}
#stoerer_details img
{
width: 15px;
height: auto;
}
#stoerer_details p
{
margin-top: 3px;
margin-bottom: 3px;
}
#stoerer_alle_turniere
{
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
align-content: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
text-align: center;
font-weight: bold;
background-color: rgba(0,0,0,0.2);
box-sizing: border-box;
margin-top: 5px;
}
.stoerer_alle_turniere
{
/*
height: 0px;
overflow: hidden;
animation-name: stoerer_alle_turniere;
animation-duration: 0.3s;
animation-delay: 5.5s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
*/
height: 30px;
}
#stoerer_checkbox
{
width: 30px;
min-height: 100px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 1px 1px 3px rgb(255,255,255);
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
#stoerer_checkbox label
{
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#stoerer_checkbox input
{
display: none;
}
#stoerer_checkbox input:not(:checked) ~ .stoerer_checkbox_innen_no_checked
{
display: flex;
}
#stoerer_checkbox input:not(:checked) ~ .stoerer_checkbox_innen_checked
{
display: none;
}
#stoerer_checkbox input:checked ~ .stoerer_checkbox_innen_no_checked
{
display: none;
}
#stoerer_checkbox input:checked ~ .stoerer_checkbox_innen_checked
{
display: flex;
}
#stoerer_checkbox_innen_no_checked, #stoerer_checkbox_innen_checked
{
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
align-content: center;
-webkit-justify-content: center;
justify-content: center;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background: rgb(175,175,175);
font-weigth: bolder;
text-shadow: 1px 1px 1px rgb(0,0,0);
}
#stoerer_checkbox_innen_no_checked:hover, #stoerer_checkbox_innen_checked:hover
{
color: rgb(200,100,0);
text-shadow: -1px -1px 1px rgb(0,0,0);
background-color: rgb(125,125,125);
}
/*
label#label_menue_mobil::after
{
position: relative;
content: url("../images/global/menue.png");
}
#stoerer_checkbox input:not(:checked) ~ .steuerung
{
left: 0px;
transition: left 3s linear;
}
#menue_mobil input#strg_menue_mobil:checked ~ label#label_menue_mobil:after
{
content: url("../images/global/menue_zu.png");
}
#stoerer_checkbox input:checked ~ .steuerung
{
left: -380px;
transition: left 3s linear;
}
*/
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++ Scrollbar +++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#scrollbar
{
position: fixed;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
align-items: center;
align-content: space-between;
z-index: 998;
}
@media only screen and (max-width: 399px)
{ #scrollbar {bottom: 0; flex-direction: row; -webkit-justify-content: space-around; justify-content: space-around; width: 100%; padding-bottom: 40px; background-color: rgba(225,225,225,1);} }
@media only screen and (min-width: 400px) and (max-width: 769px)
{ #scrollbar {bottom: 0; flex-direction: row; -webkit-justify-content: space-around; justify-content: space-around; width: 100%; padding-bottom: 40px; background-color: rgba(225,225,225,1);} }
@media only screen and (min-width: 770px) and (max-width: 1199px)
{ #scrollbar {right: 0; flex-direction: column; -webkit-justify-content: center; justify-content: center; width: auto; height: 100%; background-color: rgba(225,225,225,0);} }
@media only screen and (min-width: 1200px)
{ #scrollbar {right: 0; flex-direction: column; -webkit-justify-content: center; justify-content: center; width: auto; height: 100%; background-color: rgba(225,225,225,0);} }
#scrollbar_button
{
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: flex-start;
align-items: flex-start;
align-content: center;
-webkit-justify-content: center;
justify-content: center;
}
@media only screen and (max-width: 399px) { #scrollbar_button{flex-direction: column-reverse; border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: rgba(225,225,225,1);} }
@media only screen and (min-width: 400px) and (max-width: 769px) { #scrollbar_button{flex-direction: column-reverse; border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: rgba(225,225,225,1);} }
@media only screen and (min-width: 770px) and (max-width: 1199px) { #scrollbar_button{flex-direction: row-reverse; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-color: rgba(255,255,255,1);} }
@media only screen and (min-width: 1200px) { #scrollbar_button{flex-direction: row-reverse; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-color: rgba(255,255,255,1);} }
#scrollbar_button img
{
height: auto;
margin: 5px 10px;
border-radius: 10px;
cursor: pointer;
}
@media only screen and (max-width: 399px) { #scrollbar_button img {width: 35px;} }
@media only screen and (min-width: 400px) and (max-width: 769px) { #scrollbar_button img {width: 35px;} }
@media only screen and (min-width: 770px) and (max-width: 1199px) { #scrollbar_button img {width: 40px;} }
@media only screen and (min-width: 1200px) { #scrollbar_button img {width: 40px;} }
.scrollbar_button_heller label, .scrollbar_button_heller a#button_link
{
-webkit-filter: grayscale(1) brightness(1.5);
filter: grayscale(1) brightness(1.5);
transition: filter 0.5s ease;
}
.scrollbar_button_dunkler label, .scrollbar_button_dunkler a#button_link
{
-webkit-filter: grayscale(1) brightness(0.7);
filter: grayscale(1) brightness(0.7);
transition: filter 0.5s ease;
}
#scrollbar_button label:hover, #scrollbar_button a#button_link:hover
{
-webkit-filter: grayscale(0) brightness(1);
filter: grayscale(0) brightness(1);
transition: filter 0.5s ease;
}
#scrollbar_button input[type=checkbox]:checked + label
{
-webkit-filter: grayscale(0) brightness(1);
filter: grayscale(0) brightness(1);
transition: filter 0.5s ease;
}
#scrollbar_button input#strg_scrollbar_oeffnungszeiten {display: none;}
input.strg_scrollbar_oeffnungszeiten:not(:checked) ~ .scrollbar_oeffnungszeiten {display: none;}
input.strg_scrollbar_oeffnungszeiten:checked ~ .scrollbar_oeffnungszeiten {display: flex;}
.scrollbar_oeffnungszeiten
{ position: fixed; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex;
flex-direction: column; height: auto; min-height: 40px;}
@media only screen and (max-width: 399px)
{ .scrollbar_oeffnungszeiten {left: 0; bottom: 0; width: 100%; margin-bottom: 85px; padding: 5px 6px; border-top-left-radius: 5px; border-top-right-radius: 5px; background: rgba(225,225,225,1);} }
@media only screen and (min-width: 400px) and (max-width: 769px)
{ .scrollbar_oeffnungszeiten {left: 0; bottom: 0; width: 100%; margin-bottom: 85px; padding: 5px 6px; border-top-left-radius: 5px; border-top-right-radius: 5px; background: rgba(225,225,225,1);} }
@media only screen and (min-width: 770px) and (max-width: 1199px)
{ .scrollbar_oeffnungszeiten {right: 0; width: auto; min-width: 250px; margin-right: 50px; padding: 4px 10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: rgba(255,255,255,1);} }
@media only screen and (min-width: 1200px)
{ .scrollbar_oeffnungszeiten {right: 0; width: auto; min-width: 250px; margin-right: 50px; padding: 4px 10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: rgba(255,255,255,1);} }
#scrollbar_button input#strg_scrollbar_telefon {display: none;}
input.strg_scrollbar_telefon:not(:checked) ~ .scrollbar_telefon {display: none;}
input.strg_scrollbar_telefon:checked ~ .scrollbar_telefon {display: flex;}
.scrollbar_telefon
{ position: fixed; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex;
flex-direction: column; height: auto; min-height: 40px; background: rgb(225,225,225);}
@media only screen and (max-width: 399px)
{ .scrollbar_telefon {left: 0; bottom: 0; width: 100%; margin-bottom: 85px; padding: 5px 6px; border-top-left-radius: 5px; border-top-right-radius: 5px; background: rgba(225,225,225,1);} }
@media only screen and (min-width: 400px) and (max-width: 769px)
{ .scrollbar_telefon {left: 0; bottom: 0; width: 100%; margin-bottom: 85px; padding: 5px 6px; border-top-left-radius: 5px; border-top-right-radius: 5px; background: rgba(225,225,225,1);} }
@media only screen and (min-width: 770px) and (max-width: 1199px)
{ .scrollbar_telefon {right: 0; width: auto; min-width: 250px; margin-right: 50px; padding: 4px 10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: rgba(255,255,255,1);} }
@media only screen and (min-width: 1200px)
{ .scrollbar_telefon {right: 0; width: auto; min-width: 250px; margin-right: 50px; padding: 4px 10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: rgba(255,255,255,1);} }
#scrollbar_button input#strg_scrollbar_whatsapp {display: none;}
input.strg_scrollbar_whatsapp:not(:checked) ~ .scrollbar_whatsapp {display: none;}
input.strg_scrollbar_whatsapp:checked ~ .scrollbar_whatsapp {display: flex;}
.scrollbar_whatsapp
{ position: fixed; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex;
flex-direction: column; height: auto; min-height: 40px; background: rgb(225,225,225);}
@media only screen and (max-width: 399px)
{ .scrollbar_whatsapp {left: 0; bottom: 0; width: 100%; margin-bottom: 85px; padding: 5px 6px; border-top-left-radius: 5px; border-top-right-radius: 5px; background: rgba(225,225,225,1);} }
@media only screen and (min-width: 400px) and (max-width: 769px)
{ .scrollbar_whatsapp {left: 0; bottom: 0; width: 100%; margin-bottom: 85px; padding: 5px 6px; border-top-left-radius: 5px; border-top-right-radius: 5px; background: rgba(225,225,225,1);} }
@media only screen and (min-width: 770px) and (max-width: 1199px)
{ .scrollbar_whatsapp {right: 0; width: auto; min-width: 250px; margin-right: 50px; padding: 4px 10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: rgba(255,255,255,1);} }
@media only screen and (min-width: 1200px)
{ .scrollbar_whatsapp {right: 0; width: auto; min-width: 250px; margin-right: 50px; padding: 4px 10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: rgba(255,255,255,1);} }
#scrollbar_button input#strg_scrollbar_mail {display: none;}
input.strg_scrollbar_mail:not(:checked) ~ .scrollbar_mail {display: none;}
input.strg_scrollbar_mail:checked ~ .scrollbar_mail {display: flex;}
.scrollbar_mail
{ position: fixed; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex;
flex-direction: column; height: auto; min-height: 40px; background: rgb(225,225,225);}
@media only screen and (max-width: 399px)
{ .scrollbar_mail {left: 0; bottom: 0; width: 100%; margin-bottom: 85px; padding: 5px 6px; border-top-left-radius: 5px; border-top-right-radius: 5px; background: rgba(225,225,225,1);} }
@media only screen and (min-width: 400px) and (max-width: 769px)
{ .scrollbar_mail {left: 0; bottom: 0; width: 100%; margin-bottom: 85px; padding: 5px 6px; border-top-left-radius: 5px; border-top-right-radius: 5px; background: rgba(225,225,225,1);} }
@media only screen and (min-width: 770px) and (max-width: 1199px)
{ .scrollbar_mail {right: 0; width: auto; min-width: 250px; margin-right: 50px; padding: 4px 10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: rgba(255,255,255,1);} }
@media only screen and (min-width: 1200px)
{ .scrollbar_mail {right: 0; width: auto; min-width: 250px; margin-right: 50px; padding: 4px 10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: rgba(255,255,255,1);} }
#scrollbar_button input#strg_scrollbar_adresse {display: none;}
input.strg_scrollbar_adresse:not(:checked) ~ .scrollbar_adresse {display: none;}
input.strg_scrollbar_adresse:checked ~ .scrollbar_adresse {display: flex;}
.scrollbar_adresse
{ position: fixed; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex;
flex-direction: column; height: auto; min-height: 40px; background: rgb(225,225,225);}
@media only screen and (max-width: 399px)
{ .scrollbar_adresse {left: 0; bottom: 0; width: 100%; margin-bottom: 85px; padding: 5px 6px; border-top-left-radius: 5px; border-top-right-radius: 5px; background: rgba(225,225,225,1);} }
@media only screen and (min-width: 400px) and (max-width: 769px)
{ .scrollbar_adresse {left: 0; bottom: 0; width: 100%; margin-bottom: 85px; padding: 5px 6px; border-top-left-radius: 5px; border-top-right-radius: 5px; background: rgba(225,225,225,1);} }
@media only screen and (min-width: 770px) and (max-width: 1199px)
{ .scrollbar_adresse {right: 0; width: auto; min-width: 250px; margin-right: 50px; padding: 4px 10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: rgba(255,255,255,1);} }
@media only screen and (min-width: 1200px)
{ .scrollbar_adresse {right: 0; width: auto; min-width: 250px; margin-right: 50px; padding: 4px 10px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background: rgba(255,255,255,1);} }
#gmeg_map_canvas {width: 300px; height: 300px; max-width: 100%; margin-bottom: -50px;}
#strg_scrollbar p {margin-top: 1px; margin-bottom: 1px; text-align: left;}
#strg_scrollbar p a img {margin-left: 0px; margin-bottom: 0px;}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++ STARTBILD GANZES FENSTER +++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#head
{
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
flex-wrap: wrap;
-webkit-align-items: flex-end;
align-items: flex-end;
align-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
position: relative;
top: 0;
margin-top: 0px;
margin-bottom: 0px;
width: 100%;
background-color: rgb(48,81,160);
background-position: top;
background-size: cover;
background-repeat: no-repeat;
text-align: right;
}
@media only screen and (max-width: 399px) { #head {height: 95%;} }
@media only screen and (min-width: 400px) and (max-width: 769px) { #head {height: 95%;} }
@media only screen and (min-width: 770px) and (max-width: 1199px) { #head {height: 100%;} }
@media only screen and (min-width: 1200px) { #head {height: 100%;} }
#head #head_bild_rahmen
{
z-index: 499;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
flex-wrap: wrap;
-webkit-align-items: flex-end;
align-items: flex-end;
align-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
@-webkit-keyframes wechseln
{
0% { opacity: 1; transform: translateY(0px); z-index: 502; }
% { opacity: 1; transform: translateY(0px); }
% { opacity: 0; transform: translateY(-100%); }
100% { opacity: 1; transform: translateY(-100%); }
}
@keyframes wechseln
{
0% { opacity: 1; transform: translateY(0px); z-index: 502; }
% { opacity: 1; transform: translateY(0px); }
% { opacity: 0; transform: translateY(-100%); }
100% { opacity: 1; transform: translateY(-100%); }
}
#head #head_bild_rahmen #head_bild
{
z-index: 500;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
flex-wrap: wrap;
-webkit-align-items: center;
align-items: center;
align-content: center;
-webkit-justify-content: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#head #head_bild_rahmen #head_bild img
{
position: relative;
}
/*
@media only screen and (max-width: 699px) and (orientation: portrait) { #head #head_bild_rahmen #head_bild img {width: auto; height: 100%;} }
@media only screen and (max-width: 699px) and (orientation: landscape) { #head #head_bild_rahmen #head_bild img {width: 100%; height: auto;} }
@media only screen and (min-width: 700px) and (max-width: 1049px) and (orientation: portrait) { #head #head_bild_rahmen #head_bild img {width: auto; height: 100%;} }
@media only screen and (min-width: 700px) and (max-width: 1049px) and (orientation: landscape) { #head #head_bild_rahmen #head_bild img {width: 100%; height: auto;} }
@media only screen and (min-width: 1050px) and (orientation: landscape) { #head #head_bild_rahmen #head_bild img {width: 100%; height: auto;} }
*/
@media only screen and (min-aspect-ratio: 3/2) and (orientation: portrait) { #head #head_bild_rahmen #head_bild img {width: auto; height: 100%;} }
@media only screen and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) { #head #head_bild_rahmen #head_bild img {width: auto; height: 100%;} }
@media only screen and (min-aspect-ratio: 3/2) and (orientation: landscape) { #head #head_bild_rahmen #head_bild img {width: 100%; height: auto;} }
@media only screen and (max-width: 699px) and (orientation: portrait) { #head #head_bild_rahmen #head_bild img {width: auto; height: 100%;} }
@media only screen and (min-width: 700px) and (max-width: 1049px) and (orientation: portrait) { #head #head_bild_rahmen #head_bild img {width: auto; height: 100%;} }
#head #head_bild_rahmen p
{
z-index: 503;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
}
#head #head_bild_rahmen p#platzhalter
{
display: none;
}
@media only screen and (max-width: 399px) { #head #head_bild_rahmen p#platzhalter {height: 0%;} }
@media only screen and (min-width: 400px) and (max-width: 769px) { #head #head_bild_rahmen p#platzhalter {height: 0%;} }
@media only screen and (min-width: 770px) and (max-width: 1199px) { #head #head_bild_rahmen p#platzhalter {height: 10%;} }
@media only screen and (min-width: 1200px) { #head #head_bild_rahmen p#platzhalter {height: 10%;} }
#head #head_bild_rahmen p#titel
{
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
flex-wrap: wrap;
-webkit-align-items: flex-end;
align-items: flex-end;
align-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
box-sizing: border-box;
/* height: 100%; */
color: rgb(48,81,160);
text-shadow: 0px 0px 2px rgb(255,255,255);
background-image: linear-gradient(to right, rgba(50,50,50,0) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%);
}
@media only screen and (max-width: 399px) { #head #head_bild_rahmen p#titel {margin-bottom: 25px; padding: 10px 10px; font-size: 140%;} }
@media only screen and (min-width: 400px) and (max-width: 769px) { #head #head_bild_rahmen p#titel {margin-bottom: 25px; padding: 10px 10px; font-size: 175%;} }
@media only screen and (min-width: 770px) and (max-width: 1199px) { #head #head_bild_rahmen p#titel {margin-bottom: 15px; padding: 15px 15px; font-size: 175%;} }
@media only screen and (min-width: 1200px) { #head #head_bild_rahmen p#titel {margin-bottom: 15px; padding: 20px 20px; font-size: 175%;} }
#head #head_bild_rahmen p#titel small
{
margin-top: 10px;
color: rgb(48,81,160);
text-shadow: 0px 0px 2px rgb(255,255,255);
font-weight: normal;
cursor: default;
}
@media only screen and (max-width: 399px) { #head #head_bild_rahmen p#titel small {font-size: 60%;} }
@media only screen and (min-width: 400px) and (max-width: 769px) { #head #head_bild_rahmen p#titel small {font-size: 60%;} }
@media only screen and (min-width: 770px) and (max-width: 1199px) { #head #head_bild_rahmen p#titel small {font-size: 60%;} }
@media only screen and (min-width: 1200px) { #head #head_bild_rahmen p#titel small {font-size: 60%;} }
#head #head_bild_rahmen p#titel a
{
color: rgb(255,255,100);
text-shadow: 3px 3px 3px rgb(0,0,0);
cursor: default;
}
#head #head_bild_rahmen p#titel a img
{
width: auto;
height: auto;
max-width: 60%;
max-height: 150px;
}
#head #head_bild_rahmen p#titel a sup
{
font-size: 25%;
}
#head p#pfeil
{
display: none;
height: 10%;
font-size: 400%;
}
p#pfeil
{
width: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 5px;
box-sizing: border-box;
transform: rotate(180deg);
border-radius: 100%;
}
p#pfeil:hover
{
color: rgba(255,255,255,1);
cursor: pointer;
}
p#pfeil a
{
color: rgba(255,255,255,0.5);
text-shadow: -1px -1px 1px rgb(0,0,0);
}
p#pfeil a:hover
{
color: rgba(255,255,255,0.7);
}
p.pfeil
{
opacity: 0.7;
transition: opacity 1s;
}
p.f-pfeil
{
opacity: 0;
transition: opacity 1s;
}
p.f-pfeil a
{
cursor: default;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++ WEITERER INHALT +++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#container
{
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
flex-wrap: wrap;
-webkit-align-items: stretch;
align-items: stretch;
align-content: flex-start;
-webkit-justify-content: center;
justify-content: center;
position: relative;
width: 100%;
text-align: justify;
}
#content
{
}
@media only screen and (max-width: 399px) { #content{width: 95%;} }
@media only screen and (min-width: 400px) and (max-width: 769px) { #content{width: 90%;} }
@media only screen and (min-width: 770px) and (max-width: 1199px) { #content{width: 80%;} }
@media only screen and (min-width: 1200px) { #content{width: 80%;} }
#alle
{
width: 95%;
margin-top: 0px;
margin-bottom: 30px;
text-align: right;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++ WEITERER INHALT +++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#footer
{
position: relative;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
-webkit-align-items: space-around;
align-items: space-around;
align-content: space-around;
-webkit-justify-content: space-around;
justify-content: space-around;
position: relative;
box-sizing: border-box;
width: 100%;
background-repeat: no-repeat;
background-position: top;
box-shadow: 0px -2px 20px rgba(48,81,160,0.2);
}
@media only screen and (max-width: 399px) {#footer {background-color: rgb(255,255,255);}}
@media only screen and (min-width: 400px) and (max-width: 769px) {#footer {background-color: rgb(255,255,255);}}
/*
@media only screen and (min-width: 770px) and (max-width: 1199px) {#footer {background-color: rgb(200,200,200);}}
@media only screen and (min-width: 1200px) {#footer {background-color: rgb(200,200,200);}}
*/
@media only screen and (min-width: 770px) and (max-width: 1199px) {#footer {background-color: rgba(48,81,160,0.2);}}
@media only screen and (min-width: 1200px) {#footer {background-color: rgba(48,81,160,0.2);}}
#vor_footer
{
position: relative;
height: 30px;
background-image: linear-gradient(to top, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
}
#footer_text
{
position: relative;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: space-around;
align-items: space-around;
align-content: space-around;
-webkit-justify-content: space-around;
justify-content: space-around;
box-sizing: border-box;
width: 100%;
padding-top: 30px;
padding-bottom: 30px;
font-size: 90%;
}
@media only screen and (max-width: 399px) {#footer_text {flex-direction: column-reverse; margin-bottom: 30px;}}
@media only screen and (min-width: 400px) and (max-width: 769px) {#footer_text {flex-direction: column-reverse; margin-bottom: 40px;}}
@media only screen and (min-width: 770px) and (max-width: 1199px) {#footer_text {flex-direction: row;}}
@media only screen and (min-width: 1200px) {#footer_text {flex-direction: row;}}
#footer div#footer_box
{
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
@media only screen and (max-width: 399px) {#footer div#footer_box {width: auto; margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;}}
@media only screen and (min-width: 400px) and (max-width: 769px) {#footer div#footer_box {width: auto; margin-left: 10px; margin-right: 10px; margin-top: 15px; margin-bottom: 15px;}}
@media only screen and (min-width: 770px) and (max-width: 1199px) {#footer div#footer_box {width: 33%; margin-top: 5px; margin-bottom: 5px;}}
@media only screen and (min-width: 1200px) {#footer div#footer_box {width: 25%; margin-top: 5px; margin-bottom: 5px;}}
#footer div#footer_box img
{
width: auto;
height: auto;
}
@media only screen and (max-width: 399px) {#footer div#footer_box img {max-width: 65px; max-height: 65px;}}
@media only screen and (min-width: 400px) and (max-width: 769px) {#footer div#footer_box img {max-width: 95px; max-height: 95px;}}
@media only screen and (min-width: 770px) and (max-width: 1199px) {#footer div#footer_box img {max-width: 125px; max-height: 125px;}}
@media only screen and (min-width: 1200px) {#footer div#footer_box img {max-width: 125px; max-height: 125px;}}
#footer div#footer_box #container_row
{
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
flex-wrap: wrap;
-webkit-align-items: stretch;
align-items: stretch;
align-content: stretch;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: auto;
}
#footer div#footer_box #container_row img
{
height: 30px;
width: auto;
margin-left: 15px;
margin-right: 15px;
}
.footer_box_links
{
}
@media only screen and (max-width: 399px) {.footer_box_links {text-align: center; margin-top: 10px;}}
@media only screen and (min-width: 400px) and (max-width: 769px) {.footer_box_links {text-align: center; margin-top: 10px;}}
@media only screen and (min-width: 770px) and (max-width: 1199px) {.footer_box_links {text-align: center;}}
@media only screen and (min-width: 1200px) {.footer_box_links {text-align: center;}}
.footer_box_mitte
{
}
@media only screen and (max-width: 399px) {.footer_box_mitte {text-align: center; margin-top: 10px;}}
@media only screen and (min-width: 400px) and (max-width: 769px) {.footer_box_mitte {text-align: center; margin-top: 10px;}}
@media only screen and (min-width: 770px) and (max-width: 1199px) {.footer_box_mitte {text-align: center;}}
@media only screen and (min-width: 1200px) {.footer_box_mitte {text-align: center;}}
.footer_box_rechts
{
}
@media only screen and (max-width: 399px) {.footer_box_rechts {text-align: center; margin-top: 10px;}}
@media only screen and (min-width: 400px) and (max-width: 769px) {.footer_box_rechts {text-align: center; margin-top: 10px;}}
@media only screen and (min-width: 770px) and (max-width: 1199px) {.footer_box_rechts {text-align: right;}}
@media only screen and (min-width: 1200px) {.footer_box_rechts {text-align: right;}}
/* ------------------------------------------------------------------------- */
/* ------------------------------- Animation ------------------------------- */
/* ------------------------------------------------------------------------- */
.animate-right
{
opacity: 0;
visibility: hidden;
transform: translate(-200px, 0)
}
.animate-right.animated
{
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms;
-moz-transition: -moz-transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms;
transition: transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms
}
.animate-left
{
opacity: 0;
visibility: hidden;
transform: translate(200px, 0)
}
.animate-left.animated
{
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms;
-moz-transition: -moz-transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms;
transition: transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms
}
.animate-up
{
opacity: 0;
visibility: hidden;
-webkit-transform: translate(0, 100px);
-moz-transform: translate(0, 100px);
transform: translate(0, 100px)
}
.animate-up.animated
{
opacity: 1;
visibility: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms;
-moz-transition: -moz-transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms;
transition: transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms
}