/**
 *
 * 1.2.0        2018-08-24  Christian Lang
 *              - Aufgrund von Textanpassung Start-Button weiter nach unten bewegt
 * 1.1.0        2018-08-09  Nils Heldt
 *              - Anpassen der Startseite, der Erklaerung und der Erfolgsmeldung nach der richtigen Beantwortung einer
 *                Frage
 *              - Hintergrund ist nun weiss (und ohne Streifen)
 * 1.0.0        2017-11-23  Nils Heldt
 *              - Google Fonts werden nun lokal eingebunden
 *
 */


@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/roboto-400.woff2) format('woff2'),
       url(fonts/roboto-400.woff) format('woff'),
       url(fonts/roboto-400.ttf) format('truetype'),
       url(fonts/roboto.eot) format('embedded-opentype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(fonts/roboto-700.woff2) format('woff2'),
       url(fonts/roboto-700.woff) format('woff'),
       url(fonts/roboto-700.ttf) format('truetype'),
       url(fonts/roboto.eot) format('embedded-opentype');
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/roboto-condensed-400.woff2) format('woff2'),
       url(fonts/roboto-condensed-400.woff) format('woff'),
       url(fonts/roboto-condensed-400.ttf) format('truetype'),
       url(fonts/roboto-condensed.eot) format('embedded-opentype');
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url(fonts/roboto-condensed-700.woff2) format('woff2'),
       url(fonts/roboto-condensed-700.woff) format('woff'),
       url(fonts/roboto-condensed-700.ttf) format('truetype'),
       url(fonts/roboto-condensed.eot) format('embedded-opentype');
}

body {
 margin: 0;
 padding: 0;
 font-family: "Roboto";
 font-weight: 400;
 hyphens: auto;
 background-color: #fefefe;
}

span.kt {
 white-space: nowrap;
}

#spieltableau {
 position: relative;
 margin: 0px auto;
 width: 930px;
 height: 730px;
 color: #12aab5;
 background-color: #d5f0f1;
 background-image: repeating-linear-gradient(155deg, transparent, transparent 6px, rgba(255,255,255,1) 6px, rgba(255,255,255,1) 12px);
 overflow: hidden;
}

#spieltableau {
    background-image: none;
    background-color: white;
}

#ebene_start { display: block; }
#rundenanzeige { display: none; }
#ebene_intro { display: none; }
#ebene_runde { display: none; }
#ebene_final { display: none; }

img.bpblogo {
 position: absolute;
 top: 44px;
 left: 44px;
 width: 256px;
 height: 107px;
}
h1.titel_start {
 position: absolute;
 top: 175px;
 left: 0px;
 width: 100%;
 height: auto;
 margin: 0;
 font-weight: 700;
 font-size: 98px;
 line-height: 120px;
 text-align: center;
}
h1.titel_start span.tspan,
h2.titel_intro span.tspan,
h2.h2finale span.tspan {
 color: #b5123e;
 text-decoration: none;
 border-bottom: 12px solid #b5123e;
}

h1.titel_start span.tspan {
    display: inline-block;
    line-height: 88px;
}

h2.titel_intro span.tspan {
    display: inline-block;
    line-height: 42px
}

#but_nxt_start,
#but_nxt_intro {
 position: absolute;
 /*top: 605px;*/
 top: 655px;
 left: 385px;
 width: 193px;
 height: 46px;
 cursor: pointer;
}
.but_nxt_def_text,
.but_final_text,
.but_fhome_text,
.but_fhome2_text {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 150px;
 height: 46px;
 font-family: 'Roboto Condensed';
 font-size: 24px;
 line-height: 46px;
 background-color: #b5123e;
 color: #fefefe;
 text-align: center;
}
.img_nxt_def_arrow {
 position: absolute;
 top: 0px;
 right: 0px;
 width: 43px;
 height: 46px;
}

h2.titel_intro {
 position: absolute;
 top: 44px;
 left: 74px;
 width: 250px;
 height: 120px;
 margin: 0;
 font-weight: 700;
 font-size: 45px;
 line-height: 60px;
}

h2.titel_intro {
    width: 470px;
}

h2.titel_intro span.tspan,
h2.h2finale span.tspan {
 border-bottom: 6px solid #b5123e;
}

#txt_intro {
 position: absolute;
 top: 220px;
 left: 75px;
 width: 734px;
 height: auto;
 padding: 20px;
 border: 3px dotted #12aab5;
 font-family: 'Roboto Condensed';
 font-size: 28px;
 line-height: 36px;
 background-color: #fefefe;
}

div#rundenanzeige {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 930px;
 height: 33px;
 border-bottom: 3px solid #ffd800;
 background-color: #12aab5;
}
div#rundenanzeige div {
 position: relative;
 float: left;
 width: 22px;
 height: 22px;
 margin: 6px 1px 0 64px;
 color: #b5123e;
 font-size: 11px;
 font-weight: 700;
 line-height: 23px;
 text-align: center;
 background-image: url("../img/rundenbuttons_22x22.png");
}
div#rundenanzeige div.frei {
 background-position: -44px 0px;
}
div#rundenanzeige div.aktiv {
 background-position: -22px 0px;
}
div#rundenanzeige div.abs {
 background-position: 0px 0px;
}

div#anz_runde1 {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
}
div.tipp_rd1 {
 position: absolute;
 top: 36px;
 left: 0px;
 padding: 30px;
 width: 864px;
 height: auto;
 border: 3px dotted #12aab5;
 color: #12aab5;
 background-color: #fefffc;
 font-weight: 700;
 font-size: 40px;
 line-height: 50px;
 text-align: center;
 cursor: pointer;
}
div.klosemsg {
 position: absolute;
 top: 55px;
 right: 20px;
 width: 50px;
 height: 32px;
 font-weight: 700;
 font-size: 32px;
 line-height: 32px;
 text-align: right;
}

h3.frage_def {
 position: absolute;
 top: 55px;
 left: 18px;
 width: 290px;
 height: 160px;
 margin: 0;
 font-weight: 700;
 font-size: 40px;
 line-height: 50px;
}

div.infoflaeche {
 position: absolute;
 top: 230px;
 left: 16px;
 width: 300px;
 height: auto;
}
div#txt_definition {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 260px;
 height: auto;
 border: 3px dotted #b5123e;
 padding: 20px 16px;
 font-size: 24px;
 line-height: 32px;
 font-weight: 700;
 color: #b5123e;
 background-color: #fefefe;
 cursor: move;
}
div#anz_richtig,
div#anz_falsch,
div#anz_rd-ende {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 292px;
 height: 188px;
 background-color: #fefefe;
}
div#anz_richtig {
 border: 3px dotted #12aab5;
}
div#anz_falsch {
 border: 3px dotted #b5123e;
}
img.haekchen,
img.kreuz,
img.kreis {
 position: absolute;
 top: 19px;
 left: 98px;
 width: 102px;
 height: 102px;
}

img.haekchen,
img.kreuz,
img.kreis {
    top: 34px;
}

div.richtig,
div.falsch,
div#rd-nr,
div#rd-geschafft {
 position: absolute;
 top: 140px;
 left: 0px;
 width: 292px;
 height: 48px;
 color: #fefefe;
 font-family: 'Roboto Condensed';
 font-weight: 700;
 font-size: 24px;
 line-height: 48px;
 text-align: center;
}
div.richtig {
 background-color: #12aab5;
}

div.richtig {
    display: none;
}

div.falsch {
 background-color: #b5123e;
}
div#anz_rd-ende {
 top: 88px;
 border: 3px dotted #ffd700;
}
img.kreis {
 top: 24px;
}
div#rd-nr {
 top: 24px;
 left: 98px;
 width: 102px;
 height: 102px;
 color: #b5123e;
 font-size: 48px;
 line-height: 103px;
}
div#rd-geschafft {
 top: 135px;
 color: #b5123e;
}
div#nachfrage {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 300px;
 height: auto;
}
div#frageframe {
 margin: 0;
 width: 292px;
 height: auto;
 border: 3px dotted #b5123e;
 font-family: 'Roboto Condensed';
 font-size: 22px;
 font-weight: 700;
 color: #b5123e;
 background-color: #fefefe;
}
img#verb_symb {
 margin: 8px 106px 0 106px;
 width: 80px;
 height: 80px;
}
div#verb_frage {
 margin: -13px 0 5px 0;
 width: 292px;
 height: 58px;
 line-height: 27px;
 text-align: center;
}
div#verb_ja,
div#verb_nein,
div#verb_jein {
 margin: 0 8px 6px 8px;
 border: 1px solid #b5123e;
 width: 274px;
 height: 41px;
 line-height: 41px;
 text-align: center;
 cursor: pointer;
}
.verb_def {
 color: #b5123e;
 background-color: #fefefe;
}
.verb_aktiv {
 color: #fefefe;
 background-color: #b5123e;
}
div#verb_feedback {
 position: relative;
 margin: 10px 3px 0 3px;
 padding: 8px 8px 6px 8px;
 width: 276px;
 height: auto;
 background-color: #fefefe;
 display: table;
}
img#verb_feed_icon {
 margin: 7px 0 0 9px;
 width: 50px;
 height: 50px;
}
div#verb_feed_txt {
 margin: 7px 0 0 5px;
 width: 206px;
 height: auto;
 font-family: 'Roboto Condensed';
 font-size: 19px;
 line-height: 22px;
 font-weight: 700;
 color: #12aab5;
 display: table-cell;
 vertical-align: middle;
}

div.elem_spalte {
 position: absolute;
 top: 46px;
 left: 328px;
 width: 586px;
 height: 680px;
}
div#z1_el,
div#z2_el,
div#z3_el,
div#z4_el,
div#z5_el {
 position: absolute;
 left: 0px;
 width: 586px;
 height: 130px;
}
div#z1_el {
 top: 0px;
}
div#z2_el {
 top: 136px;
}
div#z3_el {
 top: 272px;
}
div#z4_el {
 top: 408px;
}
div#z5_el {
 top: 544px;
}
.z_aktiv {
 margin-top: -3px;
 margin-left: -3px;
 border: 3px dotted #b5123e;*/
}
#icon_1_wrap,
#icon_2_wrap,
#icon_3_wrap,
#icon_4_wrap,
#icon_5_wrap {
 position: relative;
 float: left;
 margin: 0px 0 6px 0;
 width: 106px;
 height: 124px;
 background-color: #fefffc;
 cursor: pointer;
}
img.elicon {
 margin: 22px 13px;
 width: 80px;
 height: 80px;
}
.elem_def {
 border: 3px dotted #ffd800;
 cursor: pointer;
}
.elem_aktiv {
 border: 3px dotted #b5123e;
 cursor: default;
}
.elem_abs {
 border: 3px dotted #12aab5;
 cursor: default;
}
#el_1_name,
#el_2_name,
#el_3_name,
#el_4_name,
#el_5_name {
 position: absolute;
 bottom: 5px;
 left: 3px;
 width: 106px;
 height: 39px;
 font-size: 10px;
 line-height: 11px;
 font-weight: 700;
 color: #12aab5;
 text-align: center;
}
#el_1_cover,
#el_2_cover,
#el_3_cover,
#el_4_cover,
#el_5_cover {
 position: absolute;
 top: 3px;
 left: 3px;
 width: 106px;
 height: 124px;
 background-image: url("../img/verbotenCover_106x124.png");
}
.erlaubt {
 background-position: 0px 0px;
}
.verboten {
 background-position: -106px 0px;
}
.teilweise_verb {
 background-position: -212px 0px;
}
#definition_1,
#definition_2,
#definition_3,
#definition_4,
#definition_5 {
 position: relative;
 float: right;
 margin: 3px 0 9px 0;
 padding: 2px 3px 0 7px;
 width: 464px;
 height: 122px;
 background-color: #fefffc;
 display: table;
}
#def_1_cover,
#def_2_cover,
#def_3_cover,
#def_4_cover,
#def_5_cover {
 position: absolute;
 top: 3px;
 right: 0px;
 width: 474px;
 height: 124px;
 background-color: #12aab5;
}
div.erltxt {
 display: table-cell;
 vertical-align: middle;
}
span.erltxt_head {
 display: inline-block;
 font-size: 14px;
 line-height: 17px;
 font-weight: 700;
}
span.erltxt_txt {
 display: inline-block;
 font-size: 13px;
 line-height: 17px;
 color: #000000;
}

div#feedbackkasten {
 position: absolute;
 top: 70px;
 left: 195px;
 width: 534px;
 height: auto;
 border: 3px dotted #ffd800;
 padding: 22px 0;
 color: #b5123e;
 background-color: #fefefe;
}
div.feedbacktxt {
 font-size: 36px;
 line-height: 46px;
 text-align: center;
}
div.feedbacktxt div.feedbackkreis {
 position: relative;
 width: 100%;
 height: 170px;
 margin: 10px 0;
 text-align: center;
}
div.feedbacktxt div.feedbackkreis img {
 width: 170px;
 height: 170px;
}
div.feedbacktxt div.feedbackkreis span#pktanz {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 170px;
 font-size: 48px;
 line-height: 170px;
 font-weight: 700;
}

#but_nxt_rd {
 position: absolute;
 top: 672px;
 left: 16px;
 width: 300px;
 height: 46px;
 cursor: pointer;
}
#but_nxt_text {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 257px;
 height: 46px;
 font-family: 'Roboto Condensed';
 font-size: 18px;
 line-height: 46px;
 font-weight: 700;
 color: #fefefe;
 text-align: center;
}
.but_nxt_rd_text {
 background-color: #b5123e;
}
.but_nxt_runde_text {
 background-color: #12aab5;
}
#img_nxt_arrow {
 position: absolute;
 top: 0px;
 right: 0px;
 width: 43px;
 height: 46px;
}

h2.titel_final {
 position: absolute;
 top: 215px;
 left: 0px;
 width: 100%;
 height: auto;
 margin: 0;
 font-weight: 700;
 font-size: 52px;
 line-height: 62px;
 text-align: center;
}
span.fspan {
 color: #b5123e;
}
#but_final,
#but_weiter,
#but_fhome,
#but_fhome2 {
 position: absolute;
 width: 393px;
 height: 46px;
 cursor: pointer;
}
#but_final {
 top: 550px;
 left: 285px;
}
#but_weiter {
 top: 550px;
 left: 345px;
 width: 273px;
}
.but_final_text {
 width: 350px;
}
#but_fhome {
 top: 618px;
 left: 345px;
 width: 273px;
}
#but_fhome2 {
 left: 345px;
 bottom: 12px;
 width: 273px;
}
.but_fhome_text,
.but_fhome2_text {
 width: 230px;
}
h2.h2finale {
 position: absolute;
 top: 15px;
 left: 0px;
 width: 100%;
 height: auto;
 margin: 0;
 font-weight: 700;
 font-size: 45px;
 line-height: 60px;
 text-align: center;
}
div.final_spalte {
 position: absolute;
 top: 90px;
 left: 170px;
 width: 600px;
 height: 570px;
 overflow: auto;
}
div.final_runden {
 position: relative;
 width: 100%;
 height: 690px;
}