body,html{margin:0; padding:0;height:100%;}
body { background-color:#f8f8f8 }
body,td { font-family:arial; font-size:16px; color:#444; line-height:1.26 }

body { overscroll-behavior-y: none; }

a img { border:0 }
#seite { width:1263px; margin-left:auto; margin-right:auto;background-color:white;height:100%;}
nav { float:left;width:239px;background-color:#fff;font-size:14px;z-index:19}
#main { float:left;width:1024px;background-color:white; }

#pfad { margin-left:23px; padding-top:13px; padding-bottom:13px; font-size:14px }
#kapitel { display:none;position:absolute;left:50%;margin-left:300px;font-size:12px;top:2px;;}
#seite_nr { float:right;margin-top:-51px;margin-right:25px; }
#content {margin-left:23px; margin-right:20px; }
#icons { padding-left:5px; padding-right:7px;  text-align:right; background-color:#E9E9E9; padding-top:10px;padding-bottom:0px; height:68px}
#icons img { margin-right:3px }
#version { height:90%; color:#454545 } 

nav ul { margin:0; padding:0; list-style-type:none; margin-top:0px }
nav li { margin:0; padding:0; display:block; padding:11px;padding-left:12px;padding-bottom:12px;
	  padding-right:2px;border-bottom:1px solid #B5B5B5 }
nav li.active { background-color:#E9E9E9 }
nav a:link, nav a:visited { color:#000; text-decoration:none }
/*nav li.active a:link, nav li.active a:visited { color:#fff }*/

#nav1 ul { margin:0; padding:0; list-style-type:none; margin-top:0px }
#content #nav1 b { color:#000 }
#content #nav1 ul { padding-left:0 !important; padding-bottom:10px }
#nav1 li { margin:0; padding:0; display:block; padding:11px;padding-left:0px;padding-bottom:12px;
	  padding-right:2px;border-top:1px solid #B5B5B5; }
#nav1 a:link, #nav1 a:visited { color:#000; text-decoration:none }

#header { background:#E9E9E9 url(img/header_bg.gif) no-repeat right top; font-size:36px; color:#444444; height:76px; position:relative }
#header b { color:#004797; }
#content b { color:#004797; }
#header_menu { display:none }
#header_schrift { margin-left:23px }
#header_schrift span { position:relative;top:18px;display:block}
#header_logo { float:right; height:76px;}

#top_links {     font-size: 14px;    position: absolute;    right: 290px;    top: 13px;    width: 255px;    z-index: 10;    text-align: right;  }
#top_links a:link, #top_links a:visited { text-decoration:none; color:#444; }


#pfad a:link, #pfad a:visited { color:#464646; text-decoration:none }

#kapitel {}
#seite_nr {}
#kap_bild { position:relative; top:15px; margin-left:11px }
       
.content_foto_breit { max-width:100%;height:auto;display:block }
.content_video_breit { max-width:100%; height:auto; }

.hg_absolute {position:absolute;}
#content .hg_absolute h1 {margin-top:0.5em;margin-bottom:0.5em; font-size:24px }
#content .hg_absolute h3 {margin-top:0.5em;margin-bottom:0.5em; font-size:18px }
#content .hg_absolute .size_h1, .size_h1 { font-size:24px }
.text_grau, #content b.text_grau { color:#53585F }
.text_rot { color:#ff0000 }
.text_weiss, #content b.text_weiss { color:#fff }
.text_schwarz { color:#000 !important }
.text_gross, #content .hg_absolute h1.text_gross { font-size:44px }
.text_mittelgross, #content .hg_absolute h1.text_mittelgross { font-size:32px }
.text_mittel, #content .hg_absolute h1.text_mittel { font-size:28px }
.text_klein, #content h1.text_klein, #content .hg_absolute h1.text_klein { font-size:22px }
.text_kleiner, #content h1.text_kleiner, #content .hg_absolute h1.text_kleiner { font-size:18px }
#content .h1_margin { margin-bottom: 6px; }

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0px;
  height: 1px;
}

.rahmen_quiz { position:absolute;top:30px;z-index:10;max-width:500px;width:100% }
#untertitel  { position:absolute; top:620px; }
#untertitel span { z-index:999;  position:absolute; bottom:0px; left:100px; width:781px; background:rgba(0,0,0,0.5); padding:5px; height:auto; text-align:center; 
	z-index:99; color:white; border-radius:10px; display:block }
#video_sanduhr { position:absolute; z-index:9; top:600px;width:981px;text-align:center;color:#888; }

#rm_gefahr1 {z-index:1000;position:absolute;left:0px;top:20px;width:981px;max-width:100%}
#rm_gefahr2 {z-index:1000;position:absolute;left:0px;top:20px;width:981px;max-width:100%}


.nur_mobil { display:none }
@media all and (min-width: 0px) and (max-width: 1262px) { 
	.nicht_mobil { display:none } 
	.nur_mobil { display:block }  
	#kapitel { display:none }
    nav { width:auto; border:1px solid #ccc; box-shadow: 5px 5px 5px 0px rgba(32,32,32,0.3);}
}

/* bei Höhe kleiner 850px: Menü kleiner */
@media all and (min-height: 0px) and (max-height: 851px)  {
nav li { padding-top:6px;padding-bottom:6px; }
}

@media all and (min-width: 1024px) and (max-width: 1262px)  {
#seite { width:1024px; display:block }
nav { display:none; position:absolute; }
#main { float:none;width:100%; }
#header_menu { margin-left:0px;float:left;display:block }
#header_schrift { margin-left:83px }
.progressbar { width: 400px }
.progressbar_bar { zoom:0.8;white-space:nowrap}
@-moz-document url-prefix() { .progressbar_1 {  display:none !important  }  }
}

@media all and (min-width: 1024px) {
/*.txt_white {color:white;}
.txt_bw {color:white; font-weight:bold;}*/
.bild_dsk {display:block;}
.quiz_mult {padding-top:48px;}
.quiz_mult_txt {padding-top:68px;}
}

.min_1024 { display:none; }
@media all and (min-width: 1024px) {
   .bild_rechts { margin-top:280px; }
   .min_1024 { display:block; }
   .max_1023 { display:none; }
   .ipad_extratext { display:none }
}

@media all and (min-width: 0px) and (max-width: 1023px)  {
#seite { width:100%; display:block }
nav { display:none; position:absolute; }
#main { float:none;width:100%; }
#header_menu { margin-left:0px;float:left;display:block }
#header_schrift { margin-left:83px }
.progressbar_1 { display:none!important }
.hg_absolute {position:static !important;margin:0!important}
#content .hg_absolute h1.text_gross { font-size:20px }
#content .hg_absolute { max-width:100% !important }
.text_mittelgross, #content .hg_absolute h1.text_mittelgross { font-size:24px }
/*.text_klein, #content .hg_absolute h1.text_klein { font-size:50px } */
#content .hg_absolute .size_h1 { font-size:inherit }
.text_weiss, #content b.text_weiss { color:#000 }
.bild_dsk {display:none;}
.nicht_unter_1024 {display:none;}
.rahmen_quiz { position:static; }

.min_1024 { display:none; }
.max_1023 { display:block; }

#untertitel  { position:static; margin-top:5px;margin-bottom:5px }
#untertitel span { position:static; width:auto; }
#liste_container { min-height:300px} 
#lager { max-height:200px } 
#video_sanduhr { top:100px;width:100%; }
}

@media all and (min-width: 541px) and (max-width: 963px)  {
#header { font-size:24px; }
}
@media all and (min-width: 541px) and (max-width: 800px)  {
.progressbar { display:none }
}

@media all and (min-height: 480px) and (max-height: 841px)  {
.ipad_txt { font-size:90%;margin-top:-18px;margin-left:12px; }
.ipad_txt_srs35 { font-size:90%;margin-top:-12px;margin-left:0px; }
}

@media all and (min-width: 0px) and (max-width: 604px)  {
.progressbar { display:none }
#header { font-size:16px;background-image:none }
#header { font-size:16px; color:#444444;	height:53px; }
#header_schrift { margin-left:48px;overflow:hidden;height:53px }
#header_schrift span { top:9px;}
#header_logo { float:right; width:127px;height:53px;overflow:hidden }
#header_menu img { height:53px; width:auto !important }
#header_logo img { height:53px; width:auto !important }
#kap_bild { display:none }
#icons img { width:42px; height:auto }
#icons { padding-left:0; padding-right:0 }
#pfad { margin-left:10px; margin-right:10px;height:17px; }
#content {margin-left:10px;}
#icons { margin-left:0px;margin-right:0px; height:40px }
#seite_nr { margin-right:5px; }
#seite_nr img { width:35px;height:35px }
#icons img { margin-right:1px }
#kapitel { display:none}
.zertifikat_links { width:auto !important}
.zertifikat_rechts { width:auto !important }

}

@media all and (min-width: 0px) and (max-width: 409px)  {
#header { font-size:14px; color:#444444;	height:53px; }
}

@media all and (min-width: 410px) and (max-width: 604px)  {
#icons img { width:55px; }
#icons { padding-left:0px; padding-right:0px; height:53px }
}

#content1 { padding-top:20px; position:relative }

/* === Content === */

#content p { margin:0px; margin-top:0.5em;margin-bottom:0.5em }
#content p { text-align:left }
#content h1 {margin:0; font-size:29px }
#content h2 {margin-top:0.5em;margin-bottom:0.5em; font-size:19px; color:#014993 }
#content1 h2 { margin-top:0 }
#content h4 {margin: 0; font-size:19px; font-weight:normal}
#content h5 {margin: 0; margin-bottom:15px; font-size:16px; }
#content img { border:0 }
#content ul { margin-left:0; padding-left:18px }
.blau { color:#014993 }
.dunkelblau { color:#212A4D }
.gruen { color:#009f00 }
.rot { color:#ff0000 }
.font_comic { font-family:"comic sans ms"; font-style:italic; color:#004797; font-size:20px }
#content .auswertung b { color:inherit }
/* Radio- und Checkboxen */
.radio, .checkbox {
display:inline-block;
}
.kasten_lt24 {max-width:482px;padding-left:20px;border-radius:4px;box-shadow:0px 2px 4px #888;min-height:280px;background-image:url('kap-lt/bilder/s_26-hg.jpg');}

input[type="checkbox"].gross,
input[type="radio"].gross {
    position:absolute;
    /* Match the image dimensions */
    width:63px;
    height:63px;
    /* Reset anything that could peek out or interfere with dimensions */
    overflow:hidden;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    opacity:0;
}
/*
Insert a pseudo element inside each label and give it a background
image that will become the custom checkbox or radio button.
Using inline-block lets you use vertical-align to adjust it vertically
as needed.
*/
input[type="checkbox"].gross + label:before,
input[type="radio"].gross + label:before {
    display:inline-block;
    width:63px;
    height:63px;
    margin-right:10px;
    background:url(img/checkbox1.png) no-repeat;
    content:" ";
    vertical-align:top;
}
/*
Position the background image differently depending on the state of each
checkbox and radio button.
*/
input[type="radio"].gross:focus + label:before {
    background-position:-64px 0;
}
input[type="radio"].gross:checked + label:before {
    background-position:-128px 0;
}
input[type="radio"].gross:checked:focus + label:before {
    background-position:-192px 0;
}
input[type="checkbox"].gross + label:before {
    background-position:-0px 0;
}
input[type="checkbox"].gross:focus + label:before {
    background-position:-64px 0;
}
input[type="checkbox"].gross:checked + label:before {
    background-position:-128px 0;
}
input[type="checkbox"].gross:checked:focus + label:before {
    background-position:-192px 0;
}/* -- */
input[type="checkbox"].gross_gn, input[type="radio"].gross_gn { display:none }
input[type="checkbox"].gross_gn + label:before,
input[type="radio"].gross_gn + label:before {
    display:inline-block;
    width:63px;
    height:63px;
    margin-right:10px;
    background:url(img/cb_gruen.png) no-repeat;
    content:" ";
    vertical-align:top;
}
input[type="checkbox"].gross_rt, input[type="radio"].gross_rt { display:none }
input[type="checkbox"].gross_rt + label:before,
input[type="radio"].gross_rt + label:before {
    display:inline-block;
    width:63px;
    height:63px;
    margin-right:10px;
    background:url(img/cb_rot.png) no-repeat;
    content:" ";
    vertical-align:top;
}

/* button_test */
.rahmen_button_test { padding:10px }
.rahmen_button_test table { width:50%; margin-top:10%; vertical-align:middle; text-align:left; } //float:right; 
.rahmen_button_test .frage { padding-bottom:20px; font-size:18px; }

@media all and (min-width: 0px) and (max-width: 750px)  {
.rahmen_button_test table { width:auto }
}

.rahmen_button_test3 { border:1px solid #B4B4B4; padding:20px; margin-top:20px }
.rahmen_button_test3 table { width:100%; vertical-align:middle }
@media all and (min-width: 0px) and (max-width: 500px)  {
.rahmen_button_test3 table { display:block }
.rahmen_button_test3 tr { display:block }
.rahmen_button_test3 td { display:inline }
.rahmen_button_test3 .frage { display:block; margin-top:10px;margin-bottom:5px; }
.rahmen_button_test3 .kaestchen { line-height:56px; margin-right:10px; margin-left:-5px }
}

textarea { font-family:arial; font-size:16px; padding:5px }

table.mytab {border-collapse:collapse; border:1px solid #eee }
table.mytab caption { display:none }
.mytab td { padding:6px; border:0px; border-right:0px; border-left:1px solid black; }
.mytab td:first-child { border-left:0px; }
.mytab td.not_first_child { border-left:1px solid black; }
.mytab td.strich_unten  { border-bottom:1px solid black; }
.mytab th { color:white; background-color:#004994; padding:6px; font-weight:bold; text-align:left; border:1px solid white }

.mytab td ul { margin-top:5px; margin-bottom:5px }
table.mytab tr:nth-child(odd) { background-color:#EDEDED }
table.mytab tr.grau { background-color:#EDEDED }
table.mytab td.grau { background-color:#EDEDED }
table.mytab tr.weiss { background-color:white }
table.mytab td.weiss { background-color:white }
table.mytab tr.blau { background-color:#E3EBF3}
table.mytab td.blau { background-color:#E3EBF3 }

.karte_table { display:table; }
.karte_td { display:table-cell;vertical-align:middle }
.karte_tr { display:table-row }

@media print  {
body,html{height:auto }
body { background-color:white }
#seite { width:auto;margin:0;height:auto }
nav { display:none }
#main { float:normal; width:auto }
#pfad,
#kapitel,
#header,
#header_schrift,
#header_logo,
#header_menu,
.vd,
#seite_nr  { display:none }
#content {margin-left:0 }
#icons { display:none }
}

@media screen {
.zertifikat_links { width:500px;float:left }
.zertifikat_rechts { float:left;width:400px }
}

/* ipad */
@media all and (min-width: 1024px) and (max-height: 875px)  {
#content1 { zoom:0.76; padding-top:8px; -moz-transform: scale(0.76); }
#content1 { font-size:18px }
#kap_bild { display:none }
#pfad { position:absolute; top:58px; margin:0;padding:0;margin-left:84px }
#header_schrift span {top:10px;}
@media all and (min-width: 1263px) { #pfad {margin-left:22px } }
.content_video_breit {  max-height:552px; }


/*
  
*/
}


#meldung { z-index:2000;position:absolute; top:500px;width:100%;text-align:center;display:none }
#meldung_box { text-align:center;font-size:18px;color:#545454;display:inline-block;
           padding:12px;border:1px solid #000; box-shadow: 3px 3px 10px 5px rgba(0,0,0,0.2); 
           background-color:#fff; border-radius:2px;font-weight:bold
         }
#meldung input { font-size:20px;padding:5px }
#meldung_box span { max-width:70%;display:inline-block}

#anleitung { z-index:999; text-align:left;font-size:16px;color:#545454;position:absolute;
           left:50px;top:100px;;padding:12px;border:1px solid #000; box-shadow: 3px 3px 10px 5px rgba(0,0,0,0.2); 
           background-color:#fff; border-radius:2px; 
         }
#anleitung input { font-size:20px;padding:5px }

#meldung1 { z-index:999; text-align:left;font-size:16px;color:#545454;position:absolute;
           left:350px;top:250px;;padding:12px;border:1px solid #000; box-shadow: 3px 3px 10px 5px rgba(0,0,0,0.2); 
           background-color:#fff; border-radius:2px; 
         }

.no-select {
 -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}

.loginbox { margin-top:20px }
.loginbox label { float:left;width:130px;margin-top:4px }
.loginbox input[type="text"], .loginbox input[type="password"] { padding:5px; border:1px solid #888; border-radius:4px; width:170px }
.loginbox input[type="submit"], .loginbox input[type="button"] { padding:5px;min-width:180px;margin-left:130px }

@media all and (max-width: 700px) { .min700 { display:none } .max700 { display:block }}
@media all and (min-width: 700px) { .max700 { display:none } .min700 { display:block }}

.kap_haut_ul { margin-top:40px;font-weight:bold;font-size:16px }
.kap_haut_ul li { margin-bottom:1em }
@media all and (max-width: 1023px) { .kap_haut_ul { margin-top:1em; } }   

#id_video_starten { display:none }
#id_video_starten a { text-decoration:none; color:#444; display:inline-block; font-size:105%; padding:5px; margin-top:5px }