html,body { box-sizing: border-box; background-color: rgba(255,255,255,1); color: rgba(0,0,0,1); font-family: Verdana; font-size: 100%; width: 100%; height: 100%; margin: 0px auto 0px auto; padding: 0; hyphens: auto; word-wrap: break-word; overflow-wrap: break-word; } @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: rgba(0,0,255,1); text-decoration: none; transition: color 0.5s; } a:hover, a:focus, a:active { color: rgba(0,0,200,1); text-decoration: underline; 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 ########################*/ /* ####################################################### */ /* ########## MOBILE ANSICHT ########## */ /* .menue a, .submenue1 a, submenue2 a { color: rgba(0,0,255,1); } .menue a:hover, .submenue1 a:hover, submenue2 a:hover { color: rgba(0,0,255,1); } */ @media only screen and (max-width: 769px) { input#mobil_menue_an_aus { display: none; } label.lbl_mobil_menue_an_aus { z-index: 990; display: block; background-color: rgba(255,255,0,1); width: 60px; height: 50px; position: fixed; right: 0; top: 0; border-radius: 0px; box-shadow: -1px 1px 1px rgba(0,0,255,1); } .line { position: absolute; display: block; left:5px; width: 50px; height: 4px; background: rgba(0,0,255,1); border-radius: 2px; transition: 0.5s; transform-origin: center; } .line:nth-child(1) { top: 12px; } .line:nth-child(2) { top: 24px; } .line:nth-child(3) { top: 36px; } input#mobil_menue_an_aus:checked + label.lbl_mobil_menue_an_aus .line:nth-child(1) { transform: translateY(12px) rotate(-45deg); } input#mobil_menue_an_aus:checked + label.lbl_mobil_menue_an_aus .line:nth-child(2) { opacity: 0; } input#mobil_menue_an_aus:checked + label.lbl_mobil_menue_an_aus .line:nth-child(3) { transform: translateY(-12px) rotate(45deg); } .menue { z-index: 900; position: fixed; display: none; top: 0; width: 100%; height: 100%; padding: 51px 0px 0px 0px; font-weight: bold; overflow-x: hidden; overflow-y: scroll; background-color: rgba(255,255,0,1); } input#mobil_menue_an_aus:checked ~ .menue { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; align-content: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; } #menue_link_mobil { cursor: pointer; text-align: left; color: rgba(0,0,255,1); background-color: rgba(255,255,0,1); border-top: solid 1px rgba(0,0,255,1); transition: color 0.5s ease; } .menue_innen_mobil { 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: flex-start; justify-content: flex-start; width: 100%; padding: 5px; } #menue_link_mobil .menue_innen_mobil img { display: none; width: auto; height: 18px; max-width: 100%; max-height: 100%; margin: 0px 5px 0px 0px; filter: grayscale(0%); transition: filter 0.5s ease; } #menue_link_mobil:focus, #menue_link_mobil:active, #menue_link_mobil:hover { color: rgba(255,255,0,1); background-color: rgba(0,0,255,1); transition: color 0.5s ease; } #menue_link_mobil:focus .menue_innen_mobil .menue_name_mobil, #menue_link_mobil:active .menue_innen_mobil .menue_name_mobil, #menue_link_mobil:hover .menue_innen_mobil .menue_name_mobil { color: rgba(255,255,0,1); background-color: rgba(0,0,255,1); } #menue_link_mobil:focus .menue_innen_mobil img, #menue_link_mobil:active .menue_innen_mobil img, #menue_link_mobil:hover .menue_innen_mobil img { filter: grayscale(100%); transition: filter 0.5s ease; } #menue_link_mobil .menue_innen .menue_name_mobil { 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: center; justify-content: center; flex-grow: 1; margin: 0px 0px 0px 5px; color: rgba(0,0,255,1); background-color: rgba(255,255,0,1); } #menue_link {display: none;} .menue_innen {display: none;} #menue_name {display: none;} #menue_logo { position: absolute; bottom: 0; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; -webkit-align-items: center; align-items: center; align-content: flex-start; -webkit-justify-content: center; justify-content: center; box-sizing: border-box; width: 100%; height: 50%; } #menue_logo img { position: relative; width: auto; height: auto; max-width: 80%; max-height: 60%; } } /* ########## DESKTOPANSICHT ########## */ @media only screen and (min-width: 770px) { input#mobil_menue_an_aus { display: none; } label.lbl_mobil_menue_an_aus { display: none; } .menue { z-index: 900; position: fixed; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; align-content: space-between; -webkit-justify-content: flex-start; justify-content: flex-start; left: 0; width: auto; height: auto; margin-top: 80px; padding: 0; font-weight: bold; pointer-events: none; } .menue:hover { } #menue_link { position: relative; 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: flex-start; justify-content: flex-start; width: auto; height: auto; margin: 0; padding: 0; pointer-events: none; } #menue_link a { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; pointer-events: auto; color: rgba(0,0,255,1); } #menue_link a:focus .menue_name, #menue_link a:active .menue_name, #menue_link a:hover .menue_name { color: rgba(0,0,255,1); background-color: rgba(255,255,0,1); left: 45px !important; transition: 0.8s ease; } #menue_link a:focus .menue_icon, #menue_link a:active .menue_icon, #menue_link a:hover .menue_icon { background-color: rgba(255,255,0,1); } #menue_link a:focus .menue_icon img, #menue_link a:active .menue_icon img, #menue_link a:hover .menue_icon img { transition: 0.5s ease; } .menue_innen { position: relative; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; -webkit-align-items: center; align-items: center; align-content: center; -webkit-justify-content: flex-start; justify-content: flex-start; left: 0; width: auto; height: 100%; padding: 0px; pointer-events: none; } #menue_link .menue_innen .menue_icon { z-index: 910; position: relative; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; -webkit-align-items: center; align-items: center; align-content: center; -webkit-justify-content: center; justify-content: center; left: 0; width: 50px; height: 45px; margin: 0; background-color: rgba(255,255,0,1); border-top-right-radius: 5px; border-bottom-right-radius: 5px; transition: 1s ease; cursor: pointer; pointer-events: auto; } #menue_link .menue_innen .menue_icon img { position: relative; cursor: pointer; width: 30px; height: 30px; transition: 0.5s ease; pointer-events: none; } #menue_link .menue_innen .menue_name { z-index: 909; position: absolute; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; -webkit-align-items: center; align-items: center; align-content: center; -webkit-justify-content: flex-start; justify-content: flex-start; padding-left: 10px; width: 200px; height: 45px; top: 0px; left: 45px; color: rgba(0,0,255,1); background-color: rgba(255,255,0,1); border-top-right-radius: 5px; border-bottom-right-radius: 5px; transition: 1.5s ease; pointer-events: auto; } #menue_link_mobil {display: none;} .menue_innen_mobil {display: none;} #menue_name_mobil {display: none;} #menue_logo {display: none;} } @media only screen and (max-width: 1199px) { #menue_desktop { display: none; } #menue_mobil { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } } @media only screen and (min-width: 1200px) { #menue_desktop { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; } #menue_mobil { display: none; } } /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* +++++++++++++++++++++ STARTBILD GANZES FENSTER +++++++++++++++++++++ */ /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ #head { position: relative; 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: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; top: 0; margin-top: 0px; margin-bottom: 0px; width: 100%; height: auto; background-color: rgb(0,0,255); background-position: top; background-size: cover; background-repeat: no-repeat; text-align: center; } /* @media only screen and (orientation: portrait) { #head {height: auto;} } @media only screen and (orientation: landscape) { #head {height: 100%;} } */ /* @media only screen and (max-width: 399px) { #head {height: 50%;} } @media only screen and (min-width: 400px) and (max-width: 769px) { #head {height: 65%;} } @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 { position: relative; 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; top: 0; margin: 0; width: 100%; height: auto; text-align: center; } #head #head_bild img { position: relative; width: 100%; height: auto; } #head #head_text { z-index: 800; position: absolute; 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: flex-start; -webkit-justify-content: center; justify-content: center; box-sizing: border-box; width: 100%; left: -20%; padding: 0px 0px 0px 22%; background-image: linear-gradient(to right, rgba(255,255,0,1) 0%, rgba(255,255,0,1) 60%, rgba(0,0,255,1) 60%, rgba(0,0,255,1) 100%); box-shadow: -1px -1px 15px rgba(0,0,0,0.4) inset; transform: skewX(-45deg) scaleY(cos(-45deg)); } @media only screen and (max-width: 399px) { #head #head_text { bottom: -20px; min-height: 40px; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #head #head_text { bottom: -25px; min-height: 50px; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #head #head_text { bottom: -45px; min-height: 90px; } } @media only screen and (min-width: 1200px) { #head #head_text { bottom: -45px; min-height: 90px; } } #head #head_text p#titel { position: relative; text-align: left; padding: 0px 10px 0px 0px; color: rgba(255,255,255,1); text-shadow: 1px 1px 3px rgba(0,0,0,1); transform: skewX(35deg) scaleY(cos(0deg)); } @media only screen and (max-width: 399px) { #head #head_text p#titel { margin: 5px 0px 5px 0px; font-size: 100%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #head #head_text p#titel { margin: 7px 0px 7px 0px; font-size: 120%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #head #head_text p#titel { margin: 10px 0px 10px 0px; font-size: 175%; } } @media only screen and (min-width: 1200px) { #head #head_text p#titel { margin: 10px 0px 10px 0px; font-size: 175%; } } #head #head_text p#titel small { margin-top: 10px; color: rgba(255,255,255,1); text-shadow: 1px 1px 3px rgba(0,0,0,1); font-weight: normal; cursor: default; } @media only screen and (max-width: 399px) { #head #head_text p#titel small { font-size: 50%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #head #head_text p#titel small { font-size: 60%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #head #head_text p#titel small { font-size: 60%; } } @media only screen and (min-width: 1200px) { #head #head_text p#titel small { font-size: 70%; } } #head #head_text p#titel_sub { position: relative; text-align: left; padding: 0px 10px 0px 0px; color: rgba(255,255,255,1); text-shadow: 1px 1px 3px rgba(0,0,0,1); transform: skewX(30deg) scaleY(cos(45deg)); font-weight: normal; cursor: default; } @media only screen and (max-width: 399px) { #head #head_text p#titel_sub { margin: 5px 0px 5px 0px; font-size: 70%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #head #head_text p#titel_sub { margin: 7px 0px 7px 0px; font-size: 80%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #head #head_text p#titel_sub { margin: 10px 0px 10px 0px; font-size: 90%; } } @media only screen and (min-width: 1200px) { #head #head_text p#titel_sub { margin: 10px 0px 10px 0px; font-size: 100%; } } #head #head_logo { z-index: 800; position: absolute; 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; box-sizing: border-box; width: 17%; right: 0; padding: 10px; } @media only screen and (max-width: 399px) { #head #head_logo { bottom: -25px; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #head #head_logo { bottom: -40px; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #head #head_logo { bottom: -65px; } } @media only screen and (min-width: 1200px) { #head #head_logo { bottom: -80px; } } #head #head_logo img { position: relative; width: auto; max-width: 100%; } @media only screen and (max-width: 399px) { #head #head_logo img { height: 40px; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #head #head_logo img { height: 70px; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #head #head_logo img { height: 120px; } } @media only screen and (min-width: 1200px) { #head #head_logo img { height: 150px; } } #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; } #feld_container { 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%; min-height: 50%; background-position: center; background-repeat: no-repeat; background-attachment: fixed; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; /* padding-top: 30px; padding-bottom: 30px; */ overflow-x: hidden; } #feld_container_schleier_vor { width: 100%; height: 70px; margin-bottom: -70px; background-image: linear-gradient(to top, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 100%); } #feld_container_schleier { 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%; height: 100%; background: rgba(255,255,255,0.7); } #feld_container_schleier_hinter { width: 100%; height: 70px; margin-top: -70px; background-image: linear-gradient(to bottom, rgba(255,255,255,0) 25%, rgba(255,255,255,1) 100%); } #platzhalter { width: 100%; height: 50px; background-color: rgb(0,0,0); } #feld_container_vor { width: 100%; height: 70px; margin-bottom: -70px; background-image: linear-gradient(to top, rgba(255,255,255,0.7) 25%, rgba(255,255,255,1) 100%); z-index: 10; } #feld_container_hinter { width: 100%; height: 70px; margin-top: -70px; margin-bottom: 80px; background-image: linear-gradient(to bottom, rgba(255,255,255,0.7) 25%, rgba(255,255,255,1) 100%); z-index: 10; } #feld_content { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; align-items: flex-start; align-content: flex-start; -webkit-justify-content: space-around; justify-content: space-around; padding-top: 30px; padding-bottom: 30px; } @media only screen and (max-width: 399px) { #feld_content{flex-direction: column; width: 95%;} } @media only screen and (min-width: 400px) and (max-width: 769px) { #feld_content{flex-direction: column; width: 90%;} } @media only screen and (min-width: 770px) and (max-width: 1199px) { #feld_content{flex-direction: row; width: 80%;} } @media only screen and (min-width: 1200px) { #feld_content{flex-direction: row; width: 80%;} } #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: 0px; text-align: right; } #content_image { 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; box-sizing: border-box; margin-top: 20px; padding-left: 2%; padding-right: 2%; padding-top: 1%; padding-bottom: 1%; width: 50%; overflow: hidden; } @media only screen and (max-width: 399px) { #content_image{display: none;} } @media only screen and (min-width: 400px) and (max-width: 769px) { #content_image{display: none;} } @media only screen and (min-width: 770px) and (max-width: 1199px) { #content_image{display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex;} } @media only screen and (min-width: 1200px) { #content_image{display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex;} } #content_image img { height: auto; max-height: 100%; width: auto; max-width: 100%; } #content_image video { height: auto; width: auto; max-width: 100%; } #content_image img:hover { } #content_image a img { height: auto; max-height: 100%; width: auto; max-width: 100%; -webkit-transition: transform 1.5s ease-in; -moz-transition: transform 1.5s ease-in; transition: transform 1.5s ease-in; } #content_image a img:hover { -moz-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); -webkit-transition: transform 1.5s ease-out; -moz-transition: transform 1.5s ease-out; transition: transform 1.5s ease-out; } #content_bild { box-sizing: border-box; padding-left: 2%; padding-right: 2%; padding-top: 1%; padding-bottom: 1%; text-align: center; } @media only screen and (max-width: 399px) { #content_bild{width: 96%;} } @media only screen and (min-width: 400px) and (max-width: 769px) { #content_bild{width: 96%;} } @media only screen and (min-width: 770px) and (max-width: 1199px) { #content_bild{width: 45%;} } @media only screen and (min-width: 1200px) { #content_bild{width: 45%;} } #content_bild img { margin-top: 20px; width: auto; height: auto; max-width: 100%; border-radius: 10px; } @media only screen and (max-width: 399px) { #content_bild img{max-height: 180px;} } @media only screen and (min-width: 400px) and (max-width: 769px) { #content_bild img{max-height: 250px;} } @media only screen and (min-width: 770px) and (max-width: 1199px) { #content_bild img{max-height: 300px;} } @media only screen and (min-width: 1200px) { #content_bild img{max-height: 400px;} } #content_text, #content_text_100 { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; align-content: center; -webkit-justify-content: center; justify-content: center; box-sizing: border-box; padding-left: 2%; padding-right: 2%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } @media only screen and (max-width: 399px) { #content_text{width: 95%;} } @media only screen and (min-width: 400px) and (max-width: 769px) { #content_text{width: 95%;} } @media only screen and (min-width: 770px) and (max-width: 1199px) { #content_text{width: 50%;} } @media only screen and (min-width: 1200px) { #content_text{width: 50%;} } #content_text_100 { width: 100%; } h1 { text-align: center; color: rgba(0,0,0,1); } @media only screen and (max-width: 399px) { h1 { margin-top: 35px; font-size: 130%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { h1 { margin-top: 45px; font-size: 150%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { h1 { margin-top: 70px; font-size: 180%; } } @media only screen and (min-width: 1200px) { h1 { margin-top: 70px; font-size: 200%; } } h2 { text-align: center; } @media only screen and (max-width: 399px) { h2 { font-size: 110%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { h2 { font-size: 130%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { h2 { font-size: 160%; } } @media only screen and (min-width: 1200px) { h2 { font-size: 180%; } } h3 { } @media only screen and (max-width: 399px) { h3 { font-size: 100%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { h3 { font-size: 120%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { h3 { font-size: 150%; } } @media only screen and (min-width: 1200px) { h3 { font-size: 170%; } } h4 { } @media only screen and (max-width: 399px) { h4 { font-size: 80%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { h4 { font-size: 100%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { h4 { font-size: 130%; } } @media only screen and (min-width: 1200px) { h4 { font-size: 150%; } } #content_text p { text-align: justify; } #content_text p sup { } #content_text a { text-align: center; } #content_text #bild_rahmen { padding: 0; text-align: center; margin-left: auto; margin-right: auto; height: auto; max-height: 350px; width: auto; max-width: 80%; overflow: hidden; } #content_text_100 img, #content_text img, #content_text_100 p img, #content_text p img { height: auto; max-height: 100%; width: auto; max-width: 100%; } #content_text_100 img:hover, #content_text img:hover { } /* #content_text_100 a img, #content_text a img { height: auto; max-height: 100%; width: auto; max-width: 100%; -webkit-transition: transform 1.5s ease-in-out; -moz-transition: transform 1.5s ease-in-out; transition: transform 1.5s ease-in-out; } #content_text_100 a img:hover, #content_text a img:hover { -moz-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); -webkit-transition: transform 1.5s ease-in-out; -moz-transition: transform 1.5s ease-in-out; transition: transform 1.5s ease-in-out; } */ #content_special { 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%; min-height: 50%; background-position: center; background-repeat: no-repeat; background-attachment: fixed; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; } #content_special_text { 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%; height: 100%; background-color: rgba(255,255,255,0.5); } #content_special_text p {padding: 2%; text-align: center; font-size: 150%; font-weight: bold; color: rgb(255,255,255); text-shadow: -2px -2px 2px rgb(0,0,0), -2px 2px 2px rgb(0,0,0), 2px -2px 2px rgb(0,0,0), 2px 2px 2px rgb(0,0,0); } #content_special_text p sup { font-style: italic; font-size: 60%; font-weight: normal; text-shadow: -1px -1px 1px rgb(255,255,255), -1px 1px 1px rgb(255,255,255), 1px -1px 1px rgb(255,255,255), 1px 1px 1px rgb(255,255,255); } #content_special_text img { height: auto; max-height: 350px; width: auto; max-width: 80%; } #rahmen_viergeteilt { 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: space-around; justify-content: space-around; position: relative; width: 100%; text-align: center; } #rahmen_viergeteilt p { font-weight: normal; font-size: 90%; } #inhalt_viergeteilt { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; align-content: center; -webkit-justify-content: flex-start; justify-content: flex-start; position: relative; overflow-x: hidden; } @media only screen and (max-width: 599px) { #inhalt_viergeteilt { width: 95%; padding: 5px; } } @media only screen and (min-width: 600px) and (max-width: 1199px) { #inhalt_viergeteilt { width: 48%; padding: 5px; } } @media only screen and (min-width: 1200px) { #inhalt_viergeteilt { width: 22%; padding: 5px; } } #inhalt_viergeteilt_ueberschrift { text-align: center; font-weight: bold; font-size: 110%; } #inhalt_viergeteilt p { text-align: center; font-weight: normal; font-size: 80%; } #farbe_gelb { color: rgba(255,255,0,1); } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* +++++++++++++++++++++++++++ Modulinhalte +++++++++++++++++++++++++++ */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ #container_text_block { width: 100%; text-align: justify; } #container_text_block h2 { text-align: left; margin-bottom: 0px; } #container_text_block_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: space-around; justify-content: space-around; box-sizing: border-box; width: 100%; text-align: justify; margin-bottom: 30px; } @keyframes bilddrehen { 0% {transform:perspective(300px) rotateY(0deg)} 25% {transform:perspective(300px) rotateY(90deg)} 50% {transform:perspective(300px) rotateY(180deg)} 75% {transform:perspective(300px) rotateY(270deg)} 100% {transform:perspective(300px) rotateY(360deg)} } #produkt_preis { 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: center; justify-content: center; box-sizing: border-box; width: auto; margin: 0px auto 20px auto; font-weight: bold; font-size: 120%; } #produkt_preis small { width: auto; margin-top: 15px; font-weight: normal; font-size: 75%; } #container_row { 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; align-content: center; -webkit-justify-content: space-around; justify-content: space-around; box-sizing: border-box; width: 100%; height: auto; border-radius: 10px; margin-bottom: 20px; } #container_row_center { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; flex-wrap: wrap; -webkit-align-items: center; align-items: center; align-content: center; -webkit-justify-content: space-around; justify-content: space-around; box-sizing: border-box; width: 100%; height: auto; margin-bottom: 20px; } #container_row_stretch { 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; box-sizing: border-box; width: 100%; height: auto; margin-bottom: 20px; } #bildergalerie { 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; width: 100%; height: auto; } #bildergalerie #bild_rahmen { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; flex-wrap: wrap; -webkit-align-items: center; align-items: center; align-content: center; -webkit-justify-content: center; justify-content: center; box-sizing: border-box; height: auto; margin-top: 15px; margin-bottom: 15px; text-align: center; } @media only screen and (max-width: 399px) { #bildergalerie #bild_rahmen {width: 95%; margin-left: 2%; margin-right: 2%;} } @media only screen and (min-width: 400px) and (max-width: 769px) { #bildergalerie #bild_rahmen {width: 90%; margin-left: 5%; margin-right: 5%;} } @media only screen and (min-width: 770px) and (max-width: 1199px) { #bildergalerie #bild_rahmen {width: 45%; margin-left: 2%; margin-right: 2%;} } @media only screen and (min-width: 1200px) { #bildergalerie #bild_rahmen {width: 31%; margin-left: 1%; margin-right: 1%;} } #container_row #bildergalerie #bild_rahmen a img { width: auto; height: auto; max-width: 100%; } @media only screen and (max-width: 399px) { #container_row #bildergalerie #bild_rahmen a img {max-height: 200px;} } @media only screen and (min-width: 400px) and (max-width: 769px) { #container_row #bildergalerie #bild_rahmen a img {max-height: 200px;} } @media only screen and (min-width: 770px) and (max-width: 1199px) { #container_row #bildergalerie #bild_rahmen a img {max-height: 250px;} } @media only screen and (min-width: 1200px) { #container_row #bildergalerie #bild_rahmen a img {max-height: 300px;} } #container_text_block_row a { position: relative; 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: flex-start; justify-content: flex-start; box-sizing: border-box; min-height: 150px; margin-top: 30px; margin-bottom: 30px; border-radius: 10px; } @media only screen and (max-width: 399px) { #container_text_block_row a {width: 90%;} } @media only screen and (min-width: 400px) and (max-width: 769px) { #container_text_block_row a {width: 90%;} } @media only screen and (min-width: 770px) and (max-width: 1199px) { #container_text_block_row a {width: 90%;} } @media only screen and (min-width: 1200px) { #container_text_block_row a {width: 40%;} } #container_text_block_row a:hover { color: rgb(255,204,41); } button { position: relative; display: inline-block; margin: 0px; padding: 10px 30px; color: rgba(0,0,255,1); background: rgba(255,255,0,1); border: solid 3px rgba(0,0,255,1); text-align: center; font-weight: bold; font-size: 110%; transition: all 0.3s ease-in-out; cursor: pointer; } button:hover { color: rgba(255,255,0,1); background-color: rgba(0,0,255,1); border: solid 3px rgba(255,255,0,1); transition: all 0.3s ease-in-out; } #videos { width: 100%; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px; text-align: center; } video { width: 100%; height: auto; max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; } #row { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; flex-wrap: wrap; box-sizing: border-box; width: 100%; } #row img { position: relative; width: auto; height: auto; max-width: 85%; max-height: 400px; } /* ################################################################### */ /* ############################## NEWS ##############################*/ /* ################################################################### */ #news_rahmen { 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: space-around; justify-content: space-around; box-sizing: border-box; width: 100%; } #news_rahmen_gross { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; align-content: stretch; -webkit-justify-content: flex-start; justify-content: flex-start; box-sizing: border-box; margin-top: 5px; margin-top: 35px; background-color: rgba(255,255,255,1); box-shadow: 0px 0px 15px rgba(0,0,255,0.5); border-radius: 10px; } @media only screen and (max-width: 499px) { #news_rahmen_gross {width: 95%; max-width: 350px; margin-left: 2%; margin-right: 2%;} } @media only screen and (min-width: 500px) and (max-width: 869px) { #news_rahmen_gross {width: 45%; max-width: 350px; margin-left: 5%; margin-right: 5%;} } @media only screen and (min-width: 870px) and (max-width: 1399px) { #news_rahmen_gross {width: 28%; max-width: 320px; margin-left: 2%; margin-right: 2%;} } @media only screen and (min-width: 1400px) { #news_rahmen_gross {width: 28%; max-width: 400px; margin-left: 1%; margin-right: 1%;} } a#news_gross_link_bild { width: 100%; aspect-ratio: 3/2; margin: 0; padding: 0; text-align: center; overflow: hidden; border-top-left-radius: 10px; border-top-right-radius: 10px; } #news_gross_bild { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; text-align: center; background-position: center; background-repeat: no-repeat; background-size: cover; transition: 1s ease; border-top-left-radius: 10px; border-top-right-radius: 10px; } #news_gross_bild:hover { transform: scale(1.1); transition: 1s ease; border-top-left-radius: 10px; border-top-right-radius: 10px; } #news_gross_bild img { width: auto; height: auto; margin: 0; padding: 0; text-align: center; border-top-left-radius: 10px; border-top-right-radius: 10px; } #news_ueberschrift { margin: 15px 10px 10px 10px; padding: 0; text-align: left; } #news_ueberschrift h3 { margin: 0; padding: 0; text-align: left; } @media only screen and (max-width: 399px) { #news_ueberschrift h3 { font-size: 90%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #news_ueberschrift h3 { font-size: 100%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #news_ueberschrift h3 { font-size: 110%; } } @media only screen and (min-width: 1200px) { #news_ueberschrift h3 { font-size: 120%; } } #news_rahmen_gross small, #news_rahmen_weitere small { width: 100%; margin-top: 5px; padding-right: 10px; text-align: right; } @media only screen and (max-width: 399px) { #news_rahmen_gross small, #news_rahmen_weitere small { font-size: 60%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #news_rahmen_gross small, #news_rahmen_weitere small { font-size: 60%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #news_rahmen_gross small, #news_rahmen_weitere small { font-size: 70%; } } @media only screen and (min-width: 1200px) { #news_rahmen_gross small, #news_rahmen_weitere small { font-size: 70%; } } #news_text { margin: 5px 10px 10px 10px; } @media only screen and (max-width: 399px) { #news_text { font-size: 70%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #news_text { font-size: 80%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #news_text { font-size: 90%; } } @media only screen and (min-width: 1200px) { #news_text { font-size: 100%; } } #news_rahmen_weitere { 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: stretch; -webkit-justify-content: flex-start; justify-content: flex-start; box-sizing: border-box; width: 100%; margin-top: 30px; } label#label_news_checkbox { padding: 5px 10px; font-weight: bold; border-style: solid; border-width: 3px; border-color: rgba(0,0,255,1); border-radius: 5px; color: rgba(0,0,255,1); background-color: rgba(255,255,0,1); transition: ease 0.3s; cursor: pointer; } label#label_news_checkbox:active, label#label_news_checkbox:focus, label#label_news_checkbox:hover { border-color: rgba(255,255,0,1); color: rgba(255,255,0,1); background-color: rgba(0,0,255,1); transition: ease 0.3s; } input#news_checkbox { display: none; } input#news_checkbox:checked ~ label::before { content: 'Weniger News anzeigen'; } input#news_checkbox:not(checked) ~ label::before { content: 'Weitere News anzeigen'; } #news_rahmen_weitere_innen { display: none; } input#news_checkbox:checked ~ #news_rahmen_weitere_innen { 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: flex-start; justify-content: flex-start; box-sizing: border-box; text-align: left; } #news_weitere { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; align-content: stretch; -webkit-justify-content: flex-start; justify-content: flex-start; box-sizing: border-box; width: 100%; margin-top: 15px; margin-bottom: 15px; background-color: rgba(255,255,255,1); box-shadow: 1px 1px 2px rgba(0,0,255,0.5); border-radius: 10px; } /* ---------- ANZEIGE EINZELNEWS ---------- */ #news_einzel_datum { width: 100%; text-align: center; } @media only screen and (max-width: 399px) { #news_einzel_datum { font-size: 60%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #news_einzel_datum { font-size: 60%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #news_einzel_datum { font-size: 70%; } } @media only screen and (min-width: 1200px) { #news_einzel_datum { font-size: 70%; } } #news_einzel_ueberschrift { margin: 10px 0px 10px 0px; padding: 0; text-align: center; } #news_einzel_ueberschrift h1 { margin: 0; padding: 0; text-align: center; } @media only screen and (max-width: 399px) { #news_einzel_ueberschrift h1 { font-size: 110%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #news_einzel_ueberschrift h1 { font-size: 130%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #news_einzel_ueberschrift h1 { font-size: 160%; } } @media only screen and (min-width: 1200px) { #news_einzel_ueberschrift h1 { font-size: 180%; } } /* ################################################################### */ /* ############################# TERMINE #############################*/ /* ################################################################### */ #terminliste { } #termine { } #termine_details { 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: flex-start; justify-content: flex-start; position: relative; width: 100%; margin-bottom: 25px; padding: 0px; text-align: justify; } a#infobox_termine_ort { z-index: 100; } a#infobox_termine_ort:hover, a#infobox_termine_ort:active, a#infobox_termine_ort:focus { } a#infobox_termine_ort + span { z-index: 99; position: absolute; bottom: 0; width: 100%; padding: 2px; cursor: text; color: rgba(0,0,0,1); background-color: rgba(214,234,248,0.9); box-shadow: 0px 0px 2px rgba(0,0,255,1); border-radius: 10px; text-align: left; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } @media only screen and (max-width: 499px) { a#infobox_termine_ort + span { margin-top: 18px; } } @media only screen and (min-width: 500px) and (max-width: 769px) { a#infobox_termine_ort + span { margin-top: 18px; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { a#infobox_termine_ort + span { margin-top: 20px; } } @media only screen and (min-width: 1200px) { a#infobox_termine_ort + span { margin-top: 20px; } } a#infobox_termine_ort:hover + span, a#infobox_termine_ort:active + span, a#infobox_termine_ort:focus + span { opacity: 1; transition: opacity 0.5s ease; } #termine_ueberschrift, #termine_link { z-index: 98; width: 100%; margin: 0; padding-top: 4px; font-weight: bold; text-align: left; background: rgba(220,220,220,0.7); } #termine_ueberschrift { border-radius: 10px; padding-left: 7px; padding-right: 7px; padding-bottom: 4px;} #termine_link { padding-left: 15px; padding-right: 15px; } #termine_link a::before { display: table-cell; text-align: center; vertical-align: middle; text-decoration: none; background-image: url('../images/global/message1.png'); background-position: center; background-repeat: no-repeat; background-size: contain; content: ''; } @media only screen and (max-width: 399px) { #termine_link a::before { width: 22px; height: 10px; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #termine_link a::before { width: 24px; height: 12px; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #termine_link a::before { width: 26px; height: 12px; } } @media only screen and (min-width: 1200px) { #termine_link a::before { width: 30px; height: 14px; } } a#infobox_termine_details { z-index: 10; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } a#infobox_termine_details:hover, a#infobox_termine_details:active, a#infobox_termine_details:focus { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } a#infobox_termine_details + span { z-index: 9; display: none; position: relative; width: 100%; padding: 0px 3px 0px 3px; cursor: text; color: rgba(0,0,0,1); font-weight: normal; text-align: justify; opacity: 0; transition: opacity 1s ease; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } a#infobox_termine_details:hover + span, a#infobox_termine_details:active + span, a#infobox_termine_details:focus + span { display: flex; opacity: 1; transition: opacity 1s ease; } /* ################################################################### */ /* ############################ VORSTAND ############################*/ /* ################################################################### */ #vorstand_rahmen { position: relative; 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: space-around; justify-content: space-around; box-sizing: border-box; margin: 35px 20px 35px 20px; padding: 15px; background-image: url('../images/global/bg_tennisplatz_blass.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; box-shadow: 0px 0px 15px black; border-radius: 15px; } @media only screen and (max-width: 399px) { #vorstand_rahmen { width: 85%; max-width: 325px; } } @media only screen and (min-width: 400px) and (max-width: 699px) { #vorstand_rahmen { width: 85%; max-width: 400px; } } @media only screen and (min-width: 700px) and (max-width: 999px) { #vorstand_rahmen { width: 85%; max-width: 500px; } } @media only screen and (min-width: 1000px) and (max-width: 1299px) { #vorstand_rahmen { width: 42%; max-width: 500px; } } @media only screen and (min-width: 1300px) and (max-width: 1699px) { #vorstand_rahmen { width: 45%; max-width: 500px; } } @media only screen and (min-width: 1700px) { #vorstand_rahmen { width: 28%; max-width: 500px; } } #vorstand_bild { position: absolute; float: right; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; flex-wrap: wrap; -webkit-align-items: center; align-items: center; align-content: center; -webkit-justify-content: center; justify-content: center; aspect-ratio: 1/1; text-align: center; overflow: hidden; background-image: url('../images/global/bg_tennisball.png'); background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 100%; box-shadow: 0px 0px 5px white; } @media only screen and (max-width: 399px) { #vorstand_bild { width: 50%; max-width: 90px; top: -20px; right: -15px; } } @media only screen and (min-width: 400px) and (max-width: 699px) { #vorstand_bild { width: 120px; top: -30px; right: -18px; } } @media only screen and (min-width: 700px) and (max-width: 899px) { #vorstand_bild { width: 130px; top: -35px; right: -22px; } } @media only screen and (min-width: 900px) and (max-width: 1299px) { #vorstand_bild { width: 135px; top: -40px; right: -25px; } } @media only screen and (min-width: 1300px) and (max-width: 1699px) { #vorstand_bild { width: 140px; top: -45px; right: -27px; } } @media only screen and (min-width: 1700px) { #vorstand_bild { width: 150px; top: -50px; right: -30px; } } #vorstand_bild img { position: relative; width: 85%; height: 85%; border-radius: 100%; box-shadow: 0px 0px 5px black; } /* @media only screen and (max-width: 499px) { #vorstand_bild img { width: 50%; max-width: 126px; } } @media only screen and (min-width: 500px) and (max-width: 869px) { #vorstand_bild img { width: 150px; } } @media only screen and (min-width: 870px) and (max-width: 1199px) { #vorstand_bild img { width: 175px; } } @media only screen and (min-width: 1200px) { #vorstand_bild img { width: 160px; } } */ #vorstand_details { position: relative; 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: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; text-align: left; } #vorstand_details p { position: relative; 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: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; text-align: left; } #vorstand_details p span { } @media only screen and (max-width: 499px) { #vorstand_details p span { margin-top: 5px; margin-bottom: 5px; } } @media only screen and (min-width: 500px) and (max-width: 869px) { #vorstand_details p span { margin-top: 5px; margin-bottom: 5px; } } @media only screen and (min-width: 870px) and (max-width: 1199px) { #vorstand_details p span { } } @media only screen and (min-width: 1200px) { #vorstand_details p span { } } #vorstand_details img { width: auto; height: auto; max-width: 80%; } @media only screen and (max-width: 399px) { #vorstand_details img { max-height: 75px; } } @media only screen and (min-width: 400px) and (max-width: 999px) { #vorstand_details img { max-height: 85px; } } @media only screen and (min-width: 1000px) and (max-width: 1699px) { #vorstand_details img { max-height: 100px; } } @media only screen and (min-width: 1700px) { #vorstand_details img { max-height: 85px; } } /* ################################################################### */ /* ############################## TEAMS ##############################*/ /* ################################################################### */ #teams_rahmen_aussen { position: relative; 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; box-sizing: border-box; width: 100%; } #teams_rahmen { position: relative; 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; box-sizing: border-box; width: 100%; } #teams_rahmen label { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; align-content: center; -webkit-justify-content: space-between; justify-content: space-between; box-sizing: border-box; width: 100%; max-width: 1600px; padding: 5px 10px; margin-left: auto; margin-right: auto; text-align: center; font-weight: bold; color: rgba(255,255,255,1); background-color: rgba(0,0,255,1); cursor: pointer; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } @media only screen and (max-width: 399px) { #teams_rahmen label { font-size: 90%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #teams_rahmen label { font-size: 110%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #teams_rahmen label { font-size: 135%; } } @media only screen and (min-width: 1200px) { #teams_rahmen label { font-size: 150%; } } #teams_rahmen label:hover { } #teams_rahmen label:not(:first-child) { margin-top: 25px; } #teams_rahmen label #klappzeichen_team_links::before { width: 20px; content: '+'; } #teams_rahmen input:checked + label #klappzeichen_team_links::before { content: '-'; } #teams_rahmen label #klappzeichen_team_rechts::after { width: 20px; content: '+'; } #teams_rahmen input:checked + label #klappzeichen_team_rechts::after { content: '-'; } #teams_rahmen input { display: none; } #teams_rahmen input:checked { display: none; } #teams_rahmen input:checked + label { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } #teams_rahmen input:checked ~ #teams_rahmen_innen { display: flex; } #teams_rahmen_innen { position: relative; display: none; flex-direction: row; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; align-content: flex-start; -webkit-justify-content: space-around; justify-content: space-around; box-sizing: border-box; width: 100%; max-width: 1600px; margin: 0px 10px 25px 10px; padding: 15px; background-size: cover; background-repeat: no-repeat; background-position: center; border-left: solid 2px rgba(0,0,255,1); border-right: solid 2px rgba(0,0,255,1); border-bottom: solid 2px rgba(0,0,255,1); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } #teams_details { position: relative; 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: flex-start; justify-content: flex-start; box-sizing: border-box; padding: 10px; } @media only screen and (max-width: 499px) { #teams_details { width: 100%; } } @media only screen and (min-width: 500px) and (max-width: 869px) { #teams_details { width: 100%; } } @media only screen and (min-width: 870px) and (max-width: 1199px) { #teams_details { width: 50%; } } @media only screen and (min-width: 1200px) { #teams_details { width: 48%; } } #teams_trainingszeiten { position: relative; 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; box-sizing: border-box; width: 100%; } #teams_trainingszeiten h4 { width: 100%; text-align: center; margin-bottom: 10px; } @media only screen and (max-width: 399px) { #teams_trainingszeiten h4 { font-size: 100%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #teams_trainingszeiten h4 { font-size: 100%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #teams_trainingszeiten h4 { font-size: 110%; } } @media only screen and (min-width: 1200px) { #teams_trainingszeiten h4 { font-size: 120%; } } span#trainingstag { width: 45%; margin: 5px 0px 5px 0px; padding-right: 5px; text-align: right; } span#trainingszeit { width: 55%; margin: 5px 0px 5px 0px; padding-left: 5px; text-align: left; } span.training_heute { font-weight: bold; } #teams_trainer { position: relative; 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: flex-start; justify-content: flex-start; box-sizing: border-box; padding: 10px; } @media only screen and (max-width: 499px) { #teams_trainer { width: 100%; } } @media only screen and (min-width: 500px) and (max-width: 869px) { #teams_trainer { width: 100%; } } @media only screen and (min-width: 870px) and (max-width: 1199px) { #teams_trainer { width: 50%; } } @media only screen and (min-width: 1200px) { #teams_trainer { width: 48%; } } #teams_trainer h4 { width: 100%; margin-bottom: 10px; text-align: center; } @media only screen and (max-width: 399px) { #teams_trainer h4 { font-size: 100%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #teams_trainer h4 { font-size: 100%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #teams_trainer h4 { font-size: 110%; } } @media only screen and (min-width: 1200px) { #teams_trainer h4 { font-size: 120%; } } #teams_trainer_bild { position: relative; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; flex-wrap: wrap; -webkit-align-items: center; align-items: center; align-content: center; -webkit-justify-content: center; justify-content: center; aspect-ratio: 1/1; text-align: center; overflow: hidden; background-image: url('../images/global/bg_tennisball.png'); background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 100%; box-shadow: 0px 0px 5px white; } @media only screen and (max-width: 399px) { #teams_trainer_bild { width: 50%; max-width: 90px; } } @media only screen and (min-width: 400px) and (max-width: 699px) { #teams_trainer_bild { width: 120px; } } @media only screen and (min-width: 700px) and (max-width: 899px) { #teams_trainer_bild { width: 130px; } } @media only screen and (min-width: 900px) and (max-width: 1299px) { #teams_trainer_bild { width: 135px; } } @media only screen and (min-width: 1300px) and (max-width: 1699px) { #teams_trainer_bild { width: 140px; } } @media only screen and (min-width: 1700px) { #teams_trainer_bild { width: 150px; } } #teams_trainer_bild img { position: relative; width: 85%; height: 85%; border-radius: 100%; box-shadow: 0px 0px 5px black; } #teams_trainer_details { position: relative; 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: flex-start; justify-content: flex-start; width: 100%; text-align: center; } #teams_trainer_details p { position: relative; 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: flex-start; justify-content: flex-start; width: 100%; } #teams_trainer_details p span { } @media only screen and (max-width: 499px) { #teams_trainer_details p span { margin-top: 5px; margin-bottom: 5px; } } @media only screen and (min-width: 500px) and (max-width: 869px) { #teams_trainer_details p span { margin-top: 5px; margin-bottom: 5px; } } @media only screen and (min-width: 870px) and (max-width: 1199px) { #teams_trainer_details p span { } } @media only screen and (min-width: 1200px) { #teams_trainer_details p span { } } #teams_ergebnisse { position: relative; 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; box-sizing: border-box; padding: 10px; } @media only screen and (max-width: 499px) { #teams_ergebnisse { width: 100%; } } @media only screen and (min-width: 500px) and (max-width: 869px) { #teams_ergebnisse { width: 100%; } } @media only screen and (min-width: 870px) and (max-width: 1199px) { #teams_ergebnisse { width: 85%; } } @media only screen and (min-width: 1200px) { #teams_ergebnisse { width: 75%; } } a#team_ergebnis_button { position: relative; width: auto; margin: 10px auto 0px auto; padding: 5px 20px; color: rgba(0,0,255,1); background-color: rgba(255,255,0,1); border-style: solid; border-width: 3px; border-color: rgba(0,0,255,1); transition: 1s ease; font-weight: bold; border-radius: 5px; } a#team_ergebnis_button:active, a#team_ergebnis_button:focus, a#team_ergebnis_button:hover { text-decoration: none; color: rgba(255,255,0,1); background-color: rgba(0,0,255,1); border-color: rgba(255,255,0,1); transition: 1s ease; } #teams_freitext { position: relative; 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: flex-start; justify-content: flex-start; box-sizing: border-box; padding: 10px; } @media only screen and (max-width: 499px) { #teams_freitext { width: 100%; } } @media only screen and (min-width: 500px) and (max-width: 869px) { #teams_freitext { width: 100%; } } @media only screen and (min-width: 870px) and (max-width: 1199px) { #teams_freitext { width: 85%; } } @media only screen and (min-width: 1200px) { #teams_freitext { width: 75%; } } /* ################################################################### */ /* ############################ DOWNLOADS ###########################*/ /* ################################################################### */ #download_rahmen { position: relative; 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: space-around; justify-content: space-around; box-sizing: border-box; margin: 20px 20px 20px 20px; padding: 15px; background-color: rgba(255,255,255,1); background-size: cover; background-repeat: no-repeat; background-position: center; border: solid 0px rgba(0,0,0,1); box-shadow: 0px 0px 10px rgba(0,0,0,1); border-radius: 10px; } @media only screen and (max-width: 399px) { #download_rahmen { width: 85%; max-width: 325px; } } @media only screen and (min-width: 400px) and (max-width: 699px) { #download_rahmen { width: 85%; max-width: 400px; } } @media only screen and (min-width: 700px) and (max-width: 999px) { #download_rahmen { width: 85%; max-width: 500px; } } @media only screen and (min-width: 1000px) and (max-width: 1299px) { #download_rahmen { width: 42%; max-width: 500px; } } @media only screen and (min-width: 1300px) and (max-width: 1699px) { #download_rahmen { width: 45%; max-width: 500px; } } @media only screen and (min-width: 1700px) { #download_rahmen { width: 28%; max-width: 500px; } } #download_ueberschrift { font-weight: bold; width: 100%; margin-bottom: 10px; } @media only screen and (max-width: 399px) { #download_ueberschrift { font-size: 90%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #download_ueberschrift { font-size: 100%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #download_ueberschrift { font-size: 110%; } } @media only screen and (min-width: 1200px) { #download_ueberschrift { font-size: 120%; } } #download_details { position: relative; 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; align-content: center; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; text-align: left; } #download_details a { margin-bottom: 7px; } @media only screen and (max-width: 499px) { #download_details a { padding-left: 19px; font-size: 12px; } } @media only screen and (min-width: 500px) and (max-width: 869px) { #download_details a { padding-left: 21px; font-size: 14px; } } @media only screen and (min-width: 870px) and (max-width: 1199px) { #download_details a { padding-left: 21px; font-size: 14px; } } @media only screen and (min-width: 1200px) { #download_details a { padding-left: 22px; font-size: 16px; } } #download_details a::before { position: absolute; left: 0; top: 2px; display: table-cell; text-align: center; vertical-align: middle; text-decoration: none; background-size: contain; background-repeat: no-repeat; background-position: center; content: ''; } @media only screen and (max-width: 499px) { #download_details a::before { width: 12px; height: 11px; } } @media only screen and (min-width: 500px) and (max-width: 869px) { #download_details a::before { width: 14px; height: 12px; } } @media only screen and (min-width: 870px) and (max-width: 1199px) { #download_details a::before { width: 14px; height: 12px; } } @media only screen and (min-width: 1200px) { #download_details a::before { width: 15px; height: 14px; } } #download_details a#download_pdf::before { background-image: url('../images/global/datei_icon.png'); } #download_details a#download_bild::before { background-image: url('../images/global/bild_icon.png'); } /* ################################################################### */ /* ############################ SPONSOREN ############################*/ /* ################################################################### */ #sponsor { position: relative; 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; box-sizing: border-box; width: 100%; margin-bottom: 20px; } #sponsor_einzel1 { position: relative; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; aspect-ratio: 4/3; margin: 18px 8px 18px 7px; text-align: center; } @media only screen and (max-width: 499px) { #sponsor_einzel1 { width: 80%; max-width: 300px; } } @media only screen and (min-width: 500px) and (max-width: 869px) { #sponsor_einzel1 { width: 350px; } } @media only screen and (min-width: 870px) and (max-width: 1199px) { #sponsor_einzel1 { width: 400px; } } @media only screen and (min-width: 1200px) { #sponsor_einzel1 { width: 450px; } } #sponsor_einzel1 a { border-radius: 10px; box-shadow: 0px 0px 3px rgba(0,0,255,1); background-color: rgba(255,255,255,1); width: 100%; height: 100%; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; transition: ease 1s; overflow: hidden; } #sponsor_einzel1 a:hover { box-shadow: 0px 0px 8px rgba(0,0,255,1); transition: ease 1s; } #sponsor_einzel1 strong { border-style: solid; border-width: 2px; border-color: ; // box-shadow: 3px 3px 10px rgba(0,0,255,1); background-color: rgba(255,255,255,1); width: 100%; height: 100%; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; } #sponsor_einzel1 a img { max-width: 95%; max-height: 95%; transition: ease 1s; } #sponsor_einzel1 a:hover img { transform: scale(1.1); transition: ease 1s; } #sponsor_einzel1 img { max-width: 95%; max-height: 95%; text-align: center; vertical-align: middle; } #sponsor_einzel2 { position: relative; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; aspect-ratio: 3/2; margin: 15px 8px 15px 7px; text-align: center; border-radius: 10px; } @media only screen and (max-width: 499px) { #sponsor_einzel2 { width: 200px; } } @media only screen and (min-width: 500px) and (max-width: 869px) { #sponsor_einzel2 { width: 225px; } } @media only screen and (min-width: 870px) and (max-width: 1199px) { #sponsor_einzel2 { width: 250px; } } @media only screen and (min-width: 1200px) { #sponsor_einzel2 { width: 300px; } } #sponsor_einzel2 a { border-radius: 10px; box-shadow: 0px 0px 3px rgba(0,0,255,1); background-color: rgba(255,255,255,1); width: 100%; height: 100%; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; transition: ease 1s; overflow: hidden; } #sponsor_einzel2 a:hover { box-shadow: 0px 0px 8px rgba(0,0,255,1); transition: ease 1s; } #sponsor_einzel2 strong { border-style: solid; border-width: 2px; border-color: ; // box-shadow: 3px 3px 10px rgba(0,0,255,1); background-color: rgba(255,255,255,1); width: 100%; height: 100%; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; } #sponsor_einzel2 a img { max-width: 95%; max-height: 95%; transition: ease 1s; } #sponsor_einzel2 a:hover img { transform: scale(1.1); transition: ease 1s; } #sponsor_einzel2 img { max-width: 95%; max-height: 95%; text-align: center; vertical-align: middle; } #sponsor_einzel3 { position: relative; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; aspect-ratio: 2/1; margin: 10px 8px 10px 7px; text-align: center; } @media only screen and (max-width: 499px) { #sponsor_einzel3 { width: 120px; } } @media only screen and (min-width: 500px) and (max-width: 869px) { #sponsor_einzel3 { width: 150px; } } @media only screen and (min-width: 870px) and (max-width: 1199px) { #sponsor_einzel3 { width: 160px; } } @media only screen and (min-width: 1200px) { #sponsor_einzel3 { width: 180px; } } #sponsor_einzel3 a { box-shadow: 0px 0px 3px rgba(0,0,255,1); border-radius: 10px; background-color: rgba(255,255,255,1); width: 100%; height: 100%; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; transition: ease 1s; overflow: hidden; } #sponsor_einzel3 a:hover { box-shadow: 0px 0px 8px rgba(0,0,255,1); transition: ease 1s; } #sponsor_einzel3 strong { border-style: solid; border-width: 2px; border-color: ; // box-shadow: 3px 3px 10px rgba(0,0,255,1); background-color: rgba(255,255,255,1); width: 100%; height: 100%; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; } #sponsor_einzel3 a img { max-width: 90%; max-height: 90%; transition: ease 1s; } #sponsor_einzel3 a:hover img { transform: scale(1.1); transition: ease 1s; } #sponsor_einzel3 img { max-width: 90%; max-height: 90%; text-align: center; vertical-align: middle; } #sponsor_ohne_logo { width: 100%; height: 100%; } #sponsorenpakete_rahmen { 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: space-around; justify-content: space-around; box-sizing: border-box; width: 100%; } #sponsorenpaket { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; align-content: stretch; -webkit-justify-content: flex-start; justify-content: flex-start; box-sizing: border-box; margin-top: 5px; margin-top: 35px; background-color: rgba(255,255,255,1); box-shadow: 0px 0px 15px rgba(0,0,255,0.5); } @media only screen and (max-width: 499px) { #sponsorenpaket {width: 95%; max-width: 350px; margin-left: 2%; margin-right: 2%;} } @media only screen and (min-width: 500px) and (max-width: 869px) { #sponsorenpaket {width: 45%; max-width: 350px; margin-left: 5%; margin-right: 5%;} } @media only screen and (min-width: 870px) and (max-width: 1399px) { #sponsorenpaket {width: 28%; max-width: 320px; margin-left: 2%; margin-right: 2%;} } @media only screen and (min-width: 1400px) { #sponsorenpaket {width: 28%; max-width: 400px; margin-left: 1%; margin-right: 1%;} } #sponsorenpaket_bild_rahmen { width: 100%; aspect-ratio: 3/2; margin: 0; padding: 0; text-align: center; overflow: hidden; } #sponsorenpaket_bild { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; text-align: center; background-position: center; background-repeat: no-repeat; background-size: cover; } #sponsorenpaket_ueberschrift { margin: 15px 10px 10px 10px; padding: 0; text-align: left; } #sponsorenpaket_ueberschrift h3 { margin: 0; padding: 0; text-align: center; } @media only screen and (max-width: 399px) { #sponsorenpaket_ueberschrift h3 { font-size: 90%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #sponsorenpaket_ueberschrift h3 { font-size: 100%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #sponsorenpaket_ueberschrift h3 { font-size: 110%; } } @media only screen and (min-width: 1200px) { #sponsorenpaket_ueberschrift h3 { font-size: 120%; } } #sponsorenpaket_preis { margin: 5px 0px 0px 0px; padding: 5px; text-align: center; font-weight: bold; background-color: rgba(255,255,0,1); } @media only screen and (max-width: 399px) { #sponsorenpaket_preis { font-size: 120%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #sponsorenpaket_preis { font-size: 130%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #sponsorenpaket_preis { font-size: 140%; } } @media only screen and (min-width: 1200px) { #sponsorenpaket_preis { font-size: 150%; } } #sponsorenpaket_text { margin: 5px 10px 10px 10px; } @media only screen and (max-width: 399px) { #sponsorenpaket_text { font-size: 70%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #sponsorenpaket_text { font-size: 80%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #sponsorenpaket_text { font-size: 90%; } } @media only screen and (min-width: 1200px) { #sponsorenpaket_text { font-size: 100%; } } #sponsorenpaket_mail { margin: 5px 10px 20px 10px; text-align: center; font-weight: bold; } @media only screen and (max-width: 399px) { #sponsorenpaket_mail { font-size: 70%; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #sponsorenpaket_mail { font-size: 80%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #sponsorenpaket_mail { font-size: 90%; } } @media only screen and (min-width: 1200px) { #sponsorenpaket_mail { font-size: 100%; } } #sponsorenpaket_mail a::before { display: table-cell; text-align: center; vertical-align: middle; text-decoration: none; background-image: url('../images/global/message1.png'); background-position: center; background-repeat: no-repeat; background-size: contain; content: ''; } @media only screen and (max-width: 399px) { #sponsorenpaket_mail a::before { width: 22px; height: 10px; } } @media only screen and (min-width: 400px) and (max-width: 769px) { #sponsorenpaket_mail a::before { width: 24px; height: 12px; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #sponsorenpaket_mail a::before { width: 26px; height: 12px; } } @media only screen and (min-width: 1200px) { #sponsorenpaket_mail a::before { width: 30px; height: 14px; } } /* ################################################################### */ /* ######################## KONTAKTFORUMLUAR ########################*/ /* ################################################################### */ #kontakt { 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: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; } #kontakt a#anker { width: 100%; margin-bottom: 20px; text-align: justify; color: rgba(0,0,0,1); } #kontakt a#anker:hover, #kontakt a#anker:focus, #kontakt a#anker:active { color: rgba(0,0,0,1); text-decoration: none; } #kontakt form { 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: space-between; justify-content: space-between; width: 100%; margin-top: 20px; } .eingabefeld { position: relative; padding: 0px 10px 30px 10px; } #eingabefeld_100 { width: 100%; } @media only screen and (max-width: 769px) { #eingabefeld_50 { width: 100%; } } @media only screen and (min-width: 770px) { #eingabefeld_50 { width: 50%; } } @media only screen and (max-width: 499px) { #eingabefeld_30 { width: 100%; } } @media only screen and (min-width: 500px) and (max-width: 769px) { #eingabefeld_30 { width: 30%; } } @media only screen and (min-width: 770px) and (max-width: 1199px) { #eingabefeld_30 { width: 50%; } } @media only screen and (min-width: 1200px) { #eingabefeld_30 { width: 30%; } } .eingabefeld input { position: relative; width: 100%; height: 25px; padding: 2px 5px; background-color: rgba(255,255,255,0); border-style: solid; border-width: 2px; border-top-color: rgba(100,100,100,0); border-left-color: rgba(100,100,100,0); border-bottom-color: rgba(0,0,255,1); border-right-color: rgba(175,175,175,0); outline: 0; font-size: 16px; font-weight: bold; transition: all 0.3s; } .eingabefeld input:focus { width: 100%; transition: all 0.3s; } .eingabefeld input:required:invalid { outline: none; box-shadow: 0px 0px 0px rgba(0,0,0,0); } .eingabefeld label { position: absolute; top: 0px; left: 15px; font-size: 12px; pointer-events: none; transform: translateY(-15px); transition: all 0.3s; cursor: text; white-space: nowrap; } .eingabefeld label#pflicht { color: rgba(0,0,0,1); } .eingabefeld label#optional { color: rgba(0,0,0,0.5); } .eingabefeld input:placeholder-shown + label { font-size: 16px; transform: translateY(-2px); } .eingabefeld input.pflicht:placeholder-shown + label#pflicht { color: rgba(0,0,0,1); } .eingabefeld input.optional:placeholder-shown + label#optional { color: rgba(0,0,0,0.5); } .eingabefeld input:focus +label { font-size: 12px; transform: translateY(-15px); } .eingabefeld textarea { position: relative; width: 100%; height: 150px; padding: 5px 5px; background-color: rgba(255,255,255,0); border-style: solid; border-width: 2px; border-top-color: rgba(100,100,100,0); border-left-color: rgba(100,100,100,0); border-bottom-color: rgba(0,0,255,1); border-right-color: rgba(175,175,175,0); outline: 0; font-size: 16px; font-weight: bold; resize: none; transition: all 0.3s; } .eingabefeld textarea.pflicht:required:invalid { outline: none; box-shadow: 0px 0px 0px rgba(0,0,0,0); } .eingabefeld textarea:placeholder-shown + label { font-size: 16px; transform: translateY(-2px); } .eingabefeld textarea:focus +label { font-size: 12px; transform: translateY(-15px); } #fehlermeldung { padding: 5px 20px 20px 20px; border: solid 2px rgba(190,0,0,1); } #ansprechpartner_rahmen { 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: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; } #ansprechpartner { 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: space-between; justify-content: space-between; width: 100%; margin-bottom: 30px; } #ansprechpartner_name_funktion { } @media only screen and (max-width: 599px) { #ansprechpartner_name_funktion { width: 100%; padding: 5px; text-align: center; } } @media only screen and (min-width: 600px) { #ansprechpartner_name_funktion { width: 50%; padding: 2px 10px 2px 2px; text-align: right; } } #ansprechpartner_details { text-align: left; } @media only screen and (max-width: 599px) { #ansprechpartner_details { width: 100%; padding: 5px; } } @media only screen and (min-width: 600px) { #ansprechpartner_details { width: 50%; padding: 2px 2px 2px 10px; } } #ansprechpartner_details span { } @media only screen and (max-width: 599px) { #ansprechpartner_details span { margin-bottom: 10px; } } @media only screen and (min-width: 600px) { #ansprechpartner_details span { } } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* +++++++++++++++++++++++++ FOOTERINHALTE +++++++++++++++++++++++++ */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ #footer { position: relative; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: row; flex-wrap: wrap; -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%; color: rgba(200,200,200,1); background-color: rgba(0,0,255,1); background-repeat: no-repeat; background-position: top; box-shadow: 0px -2px 20px rgba(0,0,255,0.3); } #footer a { position: relative; color: rgba(255,255,0,1); } #footer a:hover, #footer a:focus, #footer a:active { color: rgba(255,255,0,1); } #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; flex-wrap: wrap; -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: 0px; 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 { position: relative; 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: 95px; max-height: 65px;}} @media only screen and (min-width: 400px) and (max-width: 769px) {#footer div#footer_box img {max-width: 115px; 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 div#footer_box #container_row_no_social { width: 100%; } @media only screen and (max-width: 399px) {#footer div#footer_box #container_row_no_social { display: none; }} @media only screen and (min-width: 400px) and (max-width: 769px) {#footer div#footer_box #container_row_no_social { display: none; }} @media only screen and (min-width: 770px) and (max-width: 1199px) {#footer div#footer_box #container_row_no_social { height: 35px; }} @media only screen and (min-width: 1200px) {#footer div#footer_box #container_row_no_social { height: 35px; }} #footer div#footer_box_100 { position: relative; box-sizing: border-box; margin: 10px 0px 0px 0px; padding: 5px 10px 5px 10px; width: 100%; color: rgba(200,200,200,1); background-color: rgba(0,0,255,1); border-top: solid 2px rgba(200,200,200,1); text-align: center; } #footer div#footer_box_100 a { font-weight: bold; color: rgba(255,255,0,1); } .footer_box_links { position: relative; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; box-sizing: border-box; } @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: left;}} @media only screen and (min-width: 1200px) {.footer_box_links {text-align: left;}} .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 { position: relative; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; box-sizing: border-box; } @media only screen and (max-width: 399px) {.footer_box_rechts { -webkit-align-items: center; align-items: center; align-content: center; text-align: center; margin-top: 10px; }} @media only screen and (min-width: 400px) and (max-width: 769px) {.footer_box_rechts { -webkit-align-items: center; align-items: center; align-content: center; text-align: center; margin-top: 10px; }} @media only screen and (min-width: 770px) and (max-width: 1199px) {.footer_box_rechts { -webkit-align-items: flex-end; align-items: flex-end; align-content: flex-end; text-align: right; }} @media only screen and (min-width: 1200px) {.footer_box_rechts { -webkit-align-items: flex-end; align-items: flex-end; align-content: flex-end; text-align: right; }} .footer_box_rechts #footer_link { position: relative; } @media only screen and (max-width: 399px) {.footer_box_rechts #footer_link { margin-top: 8px; margin-bottom: 8px; }} @media only screen and (min-width: 400px) and (max-width: 769px) {.footer_box_rechts #footer_link { margin-top: 8px; margin-bottom: 8px; }} @media only screen and (min-width: 770px) and (max-width: 1199px) {.footer_box_rechts #footer_link { }} @media only screen and (min-width: 1200px) {.footer_box_rechts #footer_link { }} #hymne { 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; } #hymne audio { margin-top: 5px; border-radius: 10px; } /* ------------------------------------------------------------------------- */ /* ------------------------------- 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 } /* ######################################### */ /* ######### Sonstige Bildereinstellungen ########## */ /* ######################################### */ img.drehung_15 { transform: rotate(15deg); } img.drehung_30 { transform: rotate(30deg); } img.drehung_45 { transform: rotate(45deg); } img.drehung_60 { transform: rotate(60deg); } img.drehung_75 { transform: rotate(75deg); } img.drehung_90 { transform: rotate(90deg); } img.drehung_105 { transform: rotate(105deg); } img.drehung_120 { transform: rotate(120deg); } img.drehung_135 { transform: rotate(135deg); } img.drehung_150 { transform: rotate(150deg); } img.drehung_165 { transform: rotate(165deg); } img.drehung_180 { transform: rotate(180deg); } img.drehung_195 { transform: rotate(195deg); } img.drehung_210 { transform: rotate(210deg); } img.drehung_225 { transform: rotate(225deg); } img.drehung_240 { transform: rotate(240deg); } img.drehung_255 { transform: rotate(255deg); } img.drehung_270 { transform: rotate(270deg); } img.drehung_285 { transform: rotate(285deg); } img.drehung_300 { transform: rotate(300deg); } img.drehung_315 { transform: rotate(315deg); } img.drehung_330 { transform: rotate(330deg); } img.drehung_345 { transform: rotate(145deg); }