/* rochester-regular - latin */
/* cinzel-regular - latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cinzel-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/cinzel-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cinzel-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cinzel-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cinzel-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cinzel-v10-latin-regular.svg#Cinzel') format('svg'); /* Legacy iOS */
}

/* cinzel-600 - latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/cinzel-v10-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/cinzel-v10-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cinzel-v10-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cinzel-v10-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cinzel-v10-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cinzel-v10-latin-600.svg#Cinzel') format('svg'); /* Legacy iOS */
}

/* cinzel-500 - latin */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/cinzel-v10-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/cinzel-v10-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/cinzel-v10-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/cinzel-v10-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/cinzel-v10-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/cinzel-v10-latin-500.svg#Cinzel') format('svg'); /* Legacy iOS */
}
.advBenutzerdatenStage {
    background-color: #F2F2F2;
    padding: 20px;
    margin-top: 15px;
}
.advFrageStage {
    font-size: 16px;
}
.klein {
    font-size: 0.8em;
}
.swal2-modal h2 {
    font-size: 1.2em !important;
    line-height: inherit;
}
.valTxt {
    color: red;
}
.advText ol {
    margin-left: 15px;
    }
.advText li {
    margin: 10px 0;
}
h2.FrageTxt {
    text-align: center;
}	
.advFrageBild img {    width: 100%;}
#teilnehmerform input[type="text"], #teilnehmerform  select,#teilnehmerform   textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
	margin-bottom: 20px;
}
#teilnehmerform  input[type="button"],#teilnehmerform  input[type="submit"],#teilnehmerform  input[type="reset"] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
	width:100%;
	margin-top:15px;
}
#teilnehmerform  input[type="button"]:hover {
    background-color: #0C3;

}
.advBenutzerdatenStage label {

    width: 100%;
    text-align: left;
    display: block;
    font-size: 0.8em;
}
.advHeader {
    font-family: 'Cinzel', serif;
font-size: 3em;
text-align: center;
margin-bottom: 20px;
font-weight: bold;
}
.advFrageTxt {
    margin-bottom: 10px;
    font-size: 1em;
}
.FrageTxt {
    font-size: 1.5em;
    font-weight: bold;
	 color:#000;
	  font-family: 'Cinzel', serif;
	  text-align: left;
}
 
#teilnehmerform h2 {
    font-size: 1.4em;
    line-height: normal;
    margin-bottom: 20px;
    color: #9E0056;
}
    /* ----- Basis-Layout / kleiner Bildschirm ----- */
#wrapper {
    width: 90%;
    padding: 5%;
    background: #000000;
}

#ak2014 .klein {
    font-size: 0.8em;;
}

.adventsKalStage li {
    padding: 0 0 20px 0;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 30px;
}

a {
    color: #CD0000;
    text-decoration: none;
}

#ak2014 a {
    padding: 10px;
    display: block;
}

#ak2014 a:hover, #ak2014 a:focus {
    background-color: #FAE8E8;
}

#ak2014 h5 {
    color: white;
    text-decoration: underline;
}

/* damit die Überschriften wie Links aussehen, auch wenn die ganze Fläche verlinkt ist */
#ak2014 a:hover h2, #ak2014 a:focus h2 {
    text-decoration: none;
}

.left, .right, .small-hide {
    display: none;
}
.handyHide{}
.handyShow{ display: none;}
.linkzuFr p {
    color: #000;
    font-size: 1.1em;
    margin: 10px;
}
.linkzuFr h5 {
    color: #fff !important;
    font-size: 1em;
    margin: 10px;
	
}
.advFrageTag {
    font-family: 'Cinzel', serif;
    font-size: 2.5em;
    margin-bottom: 0px;
    color: #000;
	text-align:center;
    font-weight: bold;
}
 .advFrageBild,.advFrageTag { display:none;}
.advFrageStage .advFrageBild { display:block;}
@media only screen and (max-width:794px){
.handyHide{ display: none;}
.handyShow{ display: block;}
li {    list-style-type: none;}
.advHeader {    font-size: 1.8em;}
 .advFrageBild,.advFrageTag { display:block;}
 .linkzuFr h5 {
    color: #000 !important;
}
}
/* ----- Layout, sobald das 3x8-Bild passt | Breite: 3x 250px + 4x 1px border + 2x 20px padding ----- */
@media only screen and (min-width: 794px) {

    #wrapper {
        width: 754px;
        padding: 20px;
        margin: 0 auto;
        background: #000;
    }

    p.small-hide {
        display: block;
    }

    span.small-hide {
        display: inline;
    }

    .teaser {
        text-indent: -9999px;
    }

    #ak2014 {
        position: relative;
        padding: 0;
        border-left: 1px solid #FFF;
        border-top: 1px solid #FFF;
        margin: 0 auto 24px auto;
        width: 753px;
        height: 1208px;
        box-shadow: 4px 4px 4px #CCC;
    }

    #ak2014 li {
        position: absolute;
        padding: 0;
        border-right: 1px solid #FFF;
        border-bottom: 1px solid #FFF;
        margin: 0;
        list-style: none;
        width: 250px;
        height: 150px;
        overflow: hidden;
    }

    #ak2014 li a {
        position: absolute;
        padding: 10px;
        width: 230px;
        height: 130px;
    }

    #ak2014 p, #ak2014 h2 {
        font-size: 20px;
        line-height: 24px;
        margin: 0 0 8px 0;
        color: #FFF;
    }

    #ak2014 p {
        font-size: 14px;
        line-height: 18px;
    }

    #ak2014 a:hover, #ak2014 a:focus {
        background-color: #9E0056;
		
    }

    #ak2014 span {
        position: absolute;
        top: 10px;
        left: 10px;
      
        width: 35px;
        height: 35px;
        text-align: center;
        color: #FFF;
       background: #9E0056;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
    }

    #ak2014 .left, #ak2014 .right {
        position: absolute;
        top: 0;
        width: 125px;
        height: 150px;
        background: #FFF url(../Adventsbilder/adventskalender-2014-3x8.jpg) 0 0 no-repeat;
        display: block;
    }

    #ak2014 .left {
        left: 0;
    }

    #ak2014 .right {
        left: 125px;
    }

    #ak2014 a:hover .left, #ak2014 a:focus .left {
        left: -125px;
    }

    #ak2014 a:hover .right, #ak2014 a:focus .right {
        left: 250px;
    }

    #ak2014 a .left, #ak2014 a .right {
        -ms-transition: left 0.5s;
        -o-transition: left 0.5s;
        -webkit-transition: left 0.5s;
        -moz-transition: left 0.5s;
        transition: left 0.5s;
    }

    #ak2014 a:hover .left, #ak2014 a:hover .right {
        -ms-transition: left 1s;
        -o-transition: left 1s;
        -webkit-transition: left 1s;
        -moz-transition: left 1s;
        transition: left 1s;
    }

    #ak23 {
        top: 0px;
        left: 0px;
    }

    #ak16 {
        top: 0px;
        left: 251px;
    }

    #ak10 {
        top: 0px;
        left: 502px;
    }

    #ak13 {
        top: 151px;
        left: 0px;
    }

    #ak3 {
        top: 151px;
        left: 251px;
    }

    #ak8 {
        top: 151px;
        left: 502px;
    }

    #ak20 {
        top: 302px;
        left: 0px;
    }

    #ak6 {
        top: 302px;
        left: 251px;
    }

    #ak12 {
        top: 302px;
        left: 502px;
    }

    #ak17 {
        top: 453px;
        left: 0px;
    }

    #ak24 {
        top: 453px;
        left: 251px;
    }

    #ak9 {
        top: 453px;
        left: 502px;
    }

    #ak21 {
        top: 604px;
        left: 0px;
    }

    #ak1 {
        top: 604px;
        left: 251px;
    }

    #ak5 {
        top: 604px;
        left: 502px;
    }

    #ak14 {
        top: 755px;
        left: 0px;
    }

    #ak7 {
        top: 755px;
        left: 251px;
    }

    #ak19 {
        top: 755px;
        left: 502px;
    }

    #ak22 {
        top: 906px;
        left: 0px;
    }

    #ak2 {
        top: 906px;
        left: 251px;
    }

    #ak15 {
        top: 906px;
        left: 502px;
    }

    #ak11 {
        top: 1057px;
        left: 0px;
    }

    #ak4 {
        top: 1057px;
        left: 251px;
    }

    #ak18 {
        top: 1057px;
        left: 502px;
    }

    #ak23 .left {
        background-position: 0px 0px;
    }

    #ak23 .right {
        background-position: -125px 0px;
    }

    #ak16 .left {
        background-position: -250px 0px;
    }

    #ak16 .right {
        background-position: -375px 0px;
    }

    #ak10 .left {
        background-position: -500px 0px;
    }

    #ak10 .right {
        background-position: -625px 0px;
    }

    #ak13 .left {
        background-position: 0px -150px;
    }

    #ak13 .right {
        background-position: -125px -150px;
    }

    #ak3 .left {
        background-position: -250px -150px;
    }

    #ak3 .right {
        background-position: -375px -150px;
    }

    #ak8 .left {
        background-position: -500px -150px;
    }

    #ak8 .right {
        background-position: -625px -150px;
    }

    #ak20 .left {
        background-position: 0px -300px;
    }

    #ak20 .right {
        background-position: -125px -300px;
    }

    #ak6 .left {
        background-position: -250px -300px;
    }

    #ak6 .right {
        background-position: -375px -300px;
    }

    #ak12 .left {
        background-position: -500px -300px;
    }

    #ak12 .right {
        background-position: -625px -300px;
    }

    #ak17 .left {
        background-position: 0px -450px;
    }

    #ak17 .right {
        background-position: -125px -450px;
    }

    #ak24 .left {
        background-position: -250px -450px;
    }

    #ak24 .right {
        background-position: -375px -450px;
    }

    #ak9 .left {
        background-position: -500px -450px;
    }

    #ak9 .right {
        background-position: -625px -450px;
    }

    #ak21 .left {
        background-position: 0px -600px;
    }

    #ak21 .right {
        background-position: -125px -600px;
    }

    #ak1 .left {
        background-position: -250px -600px;
    }

    #ak5 .left {
        background-position: -500px -600px;
    }

    #ak1 .right {
        background-position: -375px -600px;
    }

    #ak5 .right {
        background-position: -625px -600px;
    }

    #ak14 .left {
        background-position: 0px -750px;
    }

    #ak14 .right {
        background-position: -125px -750px;
    }

    #ak7 .left {
        background-position: -250px -750px;
    }

    #ak7 .right {
        background-position: -375px -750px;
    }

    #ak19 .left {
        background-position: -500px -750px;
    }

    #ak19 .right {
        background-position: -625px -750px;
    }

    #ak22 .left {
        background-position: 0px -900px;
    }

    #ak22 .right {
        background-position: -125px -900px;
    }

    #ak2 .left {
        background-position: -250px -900px;
    }

    #ak2 .right {
        background-position: -375px -900px;
    }

    #ak15 .left {
        background-position: -500px -900px;
    }

    #ak15 .right {
        background-position: -625px -900px;
    }

    #ak11 .left {
        background-position: 0px -1050px;
    }

    #ak11 .right {
        background-position: -125px -1050px;
    }

    #ak4 .left {
        background-position: -250px -1050px;
    }

    #ak4 .right {
        background-position: -375px -1050px;
    }

    #ak18 .left {
        background-position: -500px -1050px;
    }

    #ak18 .right {
        background-position: -625px -1050px;
    }
}

/* ----- Layout, sobald das 4x6-Bild passt | Breite: 4x 250px + 5x 1px border + 2x 20px padding ----- */
@media only screen and (min-width: 1045px) {
    #wrapper {
        width: 1005px;
    }

    #ak2014 {
        width: 1004px;
        height: 906px;
    }

    #ak2014 .left, #ak2014 .right {
        background: #FFF url(../Adventsbilder/adventskalender-2014-4x6.jpg) 0 0 no-repeat;
    }

    #ak23 {
        top: 0px;
        left: 0px;
    }

    #ak16 {
        top: 0px;
        left: 251px;
    }

    #ak10 {
        top: 0px;
        left: 502px;
    }

    #ak13 {
        top: 0px;
        left: 753px;
    }

    #ak3 {
        top: 151px;
        left: 0px;
    }

    #ak8 {
        top: 151px;
        left: 251px;
    }

    #ak20 {
        top: 151px;
        left: 502px;
    }

    #ak6 {
        top: 151px;
        left: 753px;
    }

    #ak12 {
        top: 302px;
        left: 0px;
    }

    #ak17 {
        top: 302px;
        left: 251px;
    }

    #ak24 {
        top: 302px;
        left: 502px;
    }

    #ak9 {
        top: 302px;
        left: 753px;
    }

    #ak21 {
        top: 453px;
        left: 0px;
    }

    #ak1 {
        top: 453px;
        left: 251px;
    }

    #ak5 {
        top: 453px;
        left: 502px;
    }

    #ak14 {
        top: 453px;
        left: 753px;
    }

    #ak7 {
        top: 604px;
        left: 0px;
    }

    #ak19 {
        top: 604px;
        left: 251px;
    }

    #ak22 {
        top: 604px;
        left: 502px;
    }

    #ak2 {
        top: 604px;
        left: 753px;
    }

    #ak15 {
        top: 755px;
        left: 0px;
    }

    #ak11 {
        top: 755px;
        left: 251px;
    }

    #ak4 {
        top: 755px;
        left: 502px;
    }

    #ak18 {
        top: 755px;
        left: 753px;
    }

    #ak23 .left {
        background-position: 0px 0px;
    }

    #ak23 .right {
        background-position: -125px 0px;
    }

    #ak16 .left {
        background-position: -250px 0px;
    }

    #ak16 .right {
        background-position: -375px 0px;
    }

    #ak10 .left {
        background-position: -500px 0px;
    }

    #ak10 .right {
        background-position: -625px 0px;
    }

    #ak13 .left {
        background-position: -750px 0px;
    }

    #ak13 .right {
        background-position: -875px 0px;
    }

    #ak3 .left {
        background-position: 0px -150px;
    }

    #ak3 .right {
        background-position: -125px -150px;
    }

    #ak8 .left {
        background-position: -250px -150px;
    }

    #ak8 .right {
        background-position: -375px -150px;
    }

    #ak20 .left {
        background-position: -500px -150px;
    }

    #ak20 .right {
        background-position: -625px -150px;
    }

    #ak6 .left {
        background-position: -750px -150px;
    }

    #ak6 .right {
        background-position: -875px -150px;
    }

    #ak12 .left {
        background-position: 0px -300px;
    }

    #ak12 .right {
        background-position: -125px -300px;
    }

    #ak17 .left {
        background-position: -250px -300px;
    }

    #ak17 .right {
        background-position: -375px -300px;
    }

    #ak24 .left {
        background-position: -500px -300px;
    }

    #ak24 .right {
        background-position: -625px -300px;
    }

    #ak9 .left {
        background-position: -750px -300px;
    }

    #ak9 .right {
        background-position: -875px -300px;
    }

    #ak21 .left {
        background-position: 0px -450px;
    }

    #ak21 .right {
        background-position: -125px -450px;
    }

    #ak1 .left {
        background-position: -250px -450px;
    }

    #ak1 .right {
        background-position: -375px -450px;
    }

    #ak5 .left {
        background-position: -500px -450px;
    }

    #ak5 .right {
        background-position: -625px -450px;
    }

    #ak14 .left {
        background-position: -750px -450px;
    }

    #ak14 .right {
        background-position: -875px -450px;
    }

    #ak7 .left {
        background-position: 0px -600px;
    }

    #ak7 .right {
        background-position: -125px -600px;
    }

    #ak19 .left {
        background-position: -250px -600px;
    }

    #ak19 .right {
        background-position: -375px -600px;
    }

    #ak22 .left {
        background-position: -500px -600px;
    }

    #ak22 .right {
        background-position: -625px -600px;
    }

    #ak2 .left {
        background-position: -750px -600px;
    }

    #ak2 .right {
        background-position: -875px -600px;
    }

    #ak15 .left {
        background-position: 0px -750px;
    }

    #ak15 .right {
        background-position: -125px -750px;
    }

    #ak11 .left {
        background-position: -250px -750px;
    }

    #ak11 .right {
        background-position: -375px -750px;
    }

    #ak4 .left {
        background-position: -500px -750px;
    }

    #ak4 .right {
        background-position: -625px -750px;
    }

    #ak18 .left {
        background-position: -750px -750px;
    }

    #ak18 .right {
        background-position: -875px -750px;
    }

}