/* === menu ===*/ header.fixed, header { background: rgb(00,00,00,0.9)!important; padding-top: 20px!important; padding-bottom: 10px!important; } header.fixed #menu img, #menu img { width: auto!important; height: 65px!important; margin-top: -100px!important; top: 70px!important; } .merklisteheader h1{ font-family: Raleway, Arial, Helvetica; font-size: 60px; margin-bottom: 20px; width: 100%; padding: 100px 0px 40px 0px; } /* ---------- MEDIA QUERIES ---------- */ @media screen and (max-width: 1500px) {} @media screen and (max-width: 1024px) {} @media screen and (max-width: 988px) {} @media screen and (max-width: 910px) { #ergebnislisteheader #c1suche{display: none;} #menu img{margin-left:10px!important;} #menuright{ width: 100%; float: none; text-align: center; padding-top: 0px!important; } .poweredby{ text-align: center; font-size: 15px; display: block; padding-bottom: 10px!important; padding-right: 0px!important; } #menu img, header.fixed #menu img{ width: auto!important; height: 50px!important; margin-top: -55px!important; top: 50px!important; } #menu dt{margin: 0px!important;} #menu{padding: 30px 0px 15px 0px!important;} header.fixed, header { padding-bottom: 0px!important; } header.fixed #menu img, #menu img { margin-top: -50px!important; top: 25px!important; } } /* -------- MEDIA QUERIES ENDE -------- */ /* === menu ===*/ /* =============================== ergebnislisteheader ============================== */ #c1suche{ max-width: 100%; position: relative; top:115px!important; z-index: 99999; } #c1inhalt{ width: 70%; min-height: 100%; height:auto!important; height:100%; position: relative; padding-bottom: 30px; } input{ padding: 10px 20px; background: #FFF; } select{ padding: 10px 20px; background: #FFF; border-top-right-radius: 10px; -moz-border-top-right-radius: 10px; -o-border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; border-bottom-right-radius: 10px; -moz-border-bottom-right-radius: 10px; -o-border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-top-left-radius: 0px; -moz-border-top-left-radius: 0px; -o-border-top-left-radius: 0px; -webkit-border-top-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-bottom-left-radius: 0px; -o-border-bottom-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; height: 35px; } .input_plz{ border-top-right-radius: 0px; -moz-border-top-right-radius: 0px; -o-border-top-right-radius: 0px; -webkit-border-top-right-radius: 0px; border-bottom-right-radius: 0px; -moz-border-bottom-right-radius: 0px; -o-border-bottom-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; border-top-left-radius: 0px; -moz-border-top-left-radius: 0px; -o-border-top-left-radius: 0px; -webkit-border-top-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-bottom-left-radius: 0px; -o-border-bottom-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; height: 35px; } .beruf{ height: 35px; border-top-right-radius: 10px!important; -moz-border-top-right-radius: 10px!important; -o-border-top-right-radius: 10px!important; -webkit-border-top-right-radius: 10px!important; border-bottom-right-radius: 10px!important; -moz-border-bottom-right-radius: 10px!important; -o-border-bottom-right-radius: 10px!important; -webkit-border-bottom-right-radius: 10px!important; border-top-left-radius: 0px; -moz-border-top-left-radius: 0px; -o-border-top-left-radius: 0px; -webkit-border-top-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-bottom-left-radius: 0px; -o-border-bottom-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; } .input-container i{ border-top-left-radius: 10px; -moz-border-top-left-radius: 10px; -o-border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px; border-bottom-left-radius: 10px; -moz-border-bottom-left-radius: 10px; -o-border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; height: 35px; } .umkreis{height: 35px;} /* Style the input container */ .input-container { display: flex; width: 40%; float: left; } select { display: flex; width: 10%; float: left; } .input-container i { font-size: 22px; } /* Style the form icons */ .sucheicon { padding: 5px 0px; min-width: 50px; text-align: center; background: #FFF; } /* Style the input fields */ .input-field { width: 100%; padding: 5px; outline: none; border: 0.5px solid #FFF; } select { width: 70px; padding: 5px; outline: none; border: 0.5px solid #FFF; } .input-field:focus {border: 0.5px solid black;} /* Set a style for the submit button */ .btn { color: white; padding: 5px 10px; border: none; cursor: pointer; opacity: 0.9; width: 20%; border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -webkit-border-radius: 10px; } .btn:hover { opacity: 1; } /* ---------- MEDIA QUERIES ---------- */ @media screen and (max-width: 1300px) { #ergebnislisteheader #c1suche{ max-width: 80%!important; margin-left: 40px!important; } } @media screen and (max-width: 910px) { .input-container { width: 100%; float: none; padding-right: 0px!important; margin-top: 10px; } .btn { width: 80%; margin-left: 10%; margin-top: 20px; } /* Padding Eingabefelder */ .input-field {padding: 5px;} /* padding: 10px; */ .sucheicon {padding: 5px;}/* padding: 10px; */ .btn {padding: 10px 20px;}/* padding: 15px 20px; */ input{padding: 5px 10px;}/* padding: 10px 20px; */ #c1suche{ top:210px!important; margin-top: 500px; } #ergebnislisteheader{display: none;} #ergebnisliste{margin-top: 190px;} } @media screen and (max-width: 550px) { .btn {margin-top: 10px;} } /* -------- MEDIA QUERIES ENDE -------- */ /* ============================ ergebnislisteheader ENDE ========================== */ /* === footer ===*/ #footer{display: none;} /* === footer ===*/ #ergebnisliste{ width: 100%; height: calc(100% - 213px); } #ergebnislisteheader{ background: -webkit-linear-gradient(rgba(00, 00, 00, 0.1), rgba(00, 00, 00, 0.1)), url("../../images/start-ball-spieler.jpg") center; background-size: cover; width: 100%; height: 180px; position: relative; } #ergebnislisteheadermobil{padding-top: 100px;} #right #kennziffer{ font-size: 11px; text-align: center; position: relative; z-index: 99; } #mobilright #kennziffer{ font-size: 11px; text-align: left; position: relative; z-index: 99; } #kennziffer p{ display: inline-block; padding: 5px 15px; } #kennzifferinhalt{ width: 100%; -webkit-box-shadow: 0px 10px 17px -8px rgba(0,0,0,0.41); -moz-box-shadow: 0px 10px 17px -8px rgba(0,0,0,0.41); box-shadow: 0px 10px 17px -8px rgba(0,0,0,0.41); height: 30px; } .kennzifferleft, .kennziffercenter{border-right: 1px solid #666666;} #anzeigenicons, #kennziffer button{ float: right; font-size: 15px; line-height: 0px; margin-top:0px; height: 100%; right: 20px; } .anzeigenicon a i{ height:100%; line-height: 30px; } .anzeigenicon, .anzeigenicon button{ margin-left:7px; cursor: pointer; } .anzeigenicon{ height: 30px!important; display: inline-block!important; vertical-align: middle; } #kennziffer button{ border: none; background: none; font-size: 16px; } /* drucken button */ @media print { html, body { height: 99%;} .noprint, #header {display:none;} #ergebnisliste #right, #ergebnisliste #mobilright{ width: 100%!important; float: none; } } /* drucken button ENDE */ .ergebnis i{ font-size: 15px; line-height: 18px; } .ort i{font-size: 20px;} #ergebnisliste #left{ width: 400px; height: calc(100% + 33px); background: #FFF; overflow-y: scroll; float: left; position: relative; } #ergebnisliste #right{ width: calc(100% - 400px); height: 100%; background: #FFFFFF; float: left; } #ergebnisliste #mobilright{ width: 100%; height: auto; background: #FFFFFF; float: none; } #ergebnisliste #right iFrame{ height: 100%!important; width: 100%!important; } #left a{opacity: 1;} #left a:hover .ergebnis{background: #F4F4F4;} .ergebnis{ height: auto; width: 100%; padding: 20px 25px; border-bottom: 0.5px solid #EFEFEF; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.05); -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.05); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.05); } #ergebnisliste svg{fill:rgb(0,160,153,1);} #ergebnisliste .icon{ width: 25px; float: left; } #ergebnisliste .datum p, #ergebnisliste .ort p{ width: calc(100% - 25px); float: left; } .ergebnislogo{ width: 100px; height: 100%; float: left; margin-right: 10px; padding-left: 0px; } .ergebnislogo img{ max-width: 100%; max-height: 100%; } .ergebnisleft, .ergebnisright{ position: relative; float: left; } .ergebnisright{width: calc(100% - 110px);} .ergebnisleft{width: 110px;} .ergebnis.active{ border-left:10px solid rgb(0,160,153,1); padding: 20px 25px 20px 15px; background: #F4F4F4; } .ergebnis{ height: auto; width: 100%; padding: 20px 25px 20px 25px; border-bottom: 0.5px solid #EFEFEF; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.05); -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.05); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.05); } .ergebnisbottom{position: relative;} .datum, .ort{ font-size: 10px; bottom: 0px; position: relative; float: left; } .datum{ left: 0px; width: 110px; } .ort{ right: 0px; width: calc(100% - 110px); } .stellentitel{ font-weight: 600; font-size: 15px; -moz-hyphens: auto!important; -o-hyphens: auto!important; -webkit-hyphens: auto!important; -ms-hyphens: auto!important; hyphens: auto!important; } .firma{ font-weight: 400; font-size: 13px; margin-bottom: 30px; margin-top:5px; } #seitenzahl{ text-align: center; position: relative; width: 100%; font-weight: 600; font-size: 13px; margin: 15px 0px 25px 0px; } #seitenzahl p{ display: inline-block; } #seitenzahl a{ text-align: center; line-height: normal; } .seitenzahl{ text-align: center; background: #333; line-height: normal; padding: 5px 13px; margin: 1px; border-radius: 5px; border: 1px solid #FFF; } .seitenzahlaktuell{ background: #FFF!important; color: #333!important; border: 1px solid #333!important; } .mobillink_an{display: none;} /* ---------- MEDIA QUERIES ---------- */ @media screen and (max-width: 1300px) { #ergebnisliste #left{ width: 350px; } #ergebnisliste #right{ width: calc(100% - 350px); } .ergebnislogo{ width: 70px; height: 70%; } .ergebnisright{width: calc(100% - 80px);} .ergebnisleft{width: 80px;} } @media screen and (max-width: 910px) { #ergebnisliste{margin-top: 220px;} #ergebnisliste #right{display: none;} #ergebnisliste #left{ width: 100%; height: auto; overflow-y: visible; float: none; padding-bottom: 20px; } #seitenzahl{width: 100%;} .kennzifferleft{border: 0px;} .ergebnis.active { padding: 20px 25px 20px 25px; border-left:none; } .nolink{ display: none; } .mobillink_an{display: block;} } @media screen and (max-width: 768px) {} @media screen and (max-width: 850px) {} @media screen and (max-width: 550px) { #ergebnisliste{ height: auto; } .ergebnis{ border-bottom: 0.5px solid #CCC; max-height: 230px; } #seitenzahl{ height: 10px!important; } } @media screen and (max-width: 480px) {} /* -------- MEDIA QUERIES ENDE -------- */ .ergebnislistepfeil{ position: absolute; margin-top: -23px; cursor: pointer; margin-left: 0px; width: 100%; text-align: center; display: none; background: #333; font-size: 13px; } .ergebnislistepfeil:after { display: inline-block; font-size: 30px; font-weight: 800; right: 0px; top: 0px; font-family: FontAwesome; } .ergebnislistepfeil .selected:after { font-family: FontAwesome; content: "\f35d"; font-size: 30px; font-weight: 800; text-align: center; } .ergebnistop input[type="button"]{ border: none; background: none; outline: none; font-weight: 600; font-family: Raleway, Arial, Helvetica; font-size: 15px!important; -moz-hyphens: auto!important; -o-hyphens: auto!important; -webkit-hyphens: auto!important; -ms-hyphens: auto!important; hyphens: auto!important; color: #333; padding: 0px 0px 8px 0px; cursor: pointer; } .keine_treffer h2{ text-align: center; line-height: normal; font-size: 20px; padding-top: 110px; } .keine_treffer h3{ text-align: center; line-height: normal; font-size: 16px; padding-top: 20px; } .keine_treffer{ position: relative; z-index: 5; padding: 0px 30px; } .keine_treffer_img img{ position: relative; z-index: 10; width: 400px; max-width: 60%; height: auto; top: 40px; } .keine_treffer_img{ text-align: center; border-bottom: 80px solid rgb(0,160,153,1); } /* ---------- MEDIA QUERIES ---------- */ @media screen and (max-width: 910px) { .ergebnislistepfeil{display: block;} .ort{padding-bottom: 20px;} .keine_treffer h2{ padding-top: 260px; } .keine_treffer{ height: auto; } .keine_treffer_img img{ width: 300px; max-width: 60%; height: auto; } .keine_treffer_img{ text-align: center; border-bottom: 80px solid rgb(0,160,153,1); } } @media screen and (max-width: 768px) { .keine_treffer_img img{ z-index: 10; width: 60%; max-width: 200px; height: auto; } .keine_treffer_img{ text-align: center; border-bottom: 80px solid rgb(0,160,153,1); } } @media screen and (max-width: 850px) {} @media screen and (max-width: 550px) {} @media screen and (max-width: 480px) {} /* -------- MEDIA QUERIES ENDE -------- */ /* === Share Buttons ===*/ .demo__buttons{ position: relative; margin-left: 0px; left: -50px; } .demo__buttons.step-0 .demo__social-btn-1 {transform: translate3d(0px, 0px, 0);} .demo__buttons.step-1 .demo__social-btn-1 {transform: translate3d(-25px, 0px, 0);} .demo__buttons.step-2 .demo__social-btn-1 {transform: translate3d(-25px, 0px, 0);} .demo__buttons.step-3 .demo__social-btn-1 {transform: translate3d(-25px, 0px, 0);} .demo__buttons.step-4 .demo__social-btn-1 {transform: translate3d(-25px, 0px, 0);} .demo__buttons.step-0 .demo__social-btn-2 {transform: translate3d(0px, 0px, 0);} .demo__buttons.step-1 .demo__social-btn-2 {transform: translate3d(-25px, 0px, 0);} .demo__buttons.step-2 .demo__social-btn-2 {transform: translate3d(-50px, 0px, 0);} .demo__buttons.step-3 .demo__social-btn-2 {transform: translate3d(-50px, 0px, 0);} .demo__buttons.step-4 .demo__social-btn-2 {transform: translate3d(-50px, 0px, 0);} .demo__buttons.step-0 .demo__social-btn-3 {transform: translate3d(0px, 0px, 0);} .demo__buttons.step-1 .demo__social-btn-3 {transform: translate3d(-25px, 0px, 0);} .demo__buttons.step-2 .demo__social-btn-3 {transform: translate3d(-50px, 0px, 0);} .demo__buttons.step-3 .demo__social-btn-3 {transform: translate3d(-75px, 0px, 0);} .demo__buttons.step-4 .demo__social-btn-3 {transform: translate3d(-75px, 0px, 0);} .demo__buttons.step-0 .demo__social-btn-4 {transform: translate3d(0px, 0px, 0);} .demo__buttons.step-1 .demo__social-btn-4 {transform: translate3d(-25px, 0px, 0);} .demo__buttons.step-2 .demo__social-btn-4 {transform: translate3d(-50px, 0px, 0);} .demo__buttons.step-3 .demo__social-btn-4 {transform: translate3d(-75px, 0px, 0);} .demo__buttons.step-4 .demo__social-btn-4 {transform: translate3d(-100px, 0px, 0);} .demo__buttons.step-4 .demo__social-btn-1 {transform: translate3d(-25px, 0px, 0);} .demo__buttons.step-4 .demo__social-btn-2 {transform: translate3d(-50px, 0px, 0);} .demo__buttons.step-4 .demo__social-btn-3 {transform: translate3d(-75px, 0px, 0);} .demo__buttons.step-4 .demo__social-btn-4 {transform: translate3d(-100px, 0px, 0);} .demo__social-btn { position: absolute; left: 25px; top: 0px; width: 25px; height: 30px; text-align: center; line-height: 30px; font-size: 16px; background: #FFF; color: rgb(0,160,153,1); cursor: pointer; transition: all 0.2s ease; } .demo__social-btn:hover { color: #333; box-shadow: 0 0 15px white; } .demo__open-btn { position: absolute; left: 25px; top: 0px; width: 25px; height: 30px; text-align: center; line-height: 30px; font-weight: 300; font-size: 17px; font-family: sans-serif; background: #FFF; color: rgb(0,160,153,1); cursor: pointer; transition: all 0.2s ease; } .demo__open-btn:hover { color: rgb(0,160,153,1); } .about-me { position: absolute; bottom: 10px; width: 100%; text-align: center; font-size: 16px; color: #FFF; font-family: Raleway, Arial, Helvetica; } .fb-share-button{ width: 25px!important; height: 25px!important; background: rgb(0,160,153,1)!important; overflow: hidden; position: absolute; top: 0px; opacity: 0; } /* === Share Buttons ENDE ===*/