<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

   <!-- MOA-ID 2.x BKUSelection Layout CSS -->               
    <style type="text/css">
			@media screen and (min-width: 650px) {
			
				body {
					margin:0;
					padding:0;
					color : #000;
					background-color : #fff;
			  	text-align: center;
			  	background-color: #6B7B8B;
				}
				
        #localBKU p {
          font-size: 0.7em;
        } 
        
        #localBKU input{
          font-size: 0.7em;
          /*border-radius: 5px;*/
        }
        
         #bkuselectionarea input[type=button] {
          font-size: 0.85em;
          /*border-radius: 7px;*/
          margin-bottom: 25px;
          min-width: 80px;
         }
        
        #mandateLogin {
          font-size: 0.85em;
        }
        
        #bku_header h2 {
          font-size: 0.8em;
        } 
        
        
			  #page {
			    display: block;
			    border: 2px solid rgb(0,0,0);
			    width: 650px;
			    height: 460px;
			    margin: 0 auto;
			    margin-top: 5%;
			    position: relative;
			    border-radius: 25px;
			    background: rgb(255,255,255);
			  }
			  
			  #page1 {
			    text-align: center;
			  }
			  
			  #main {
			    /*	clear:both; */
				  position:relative;
			    margin: 0 auto;
			    width: 250px;
			    text-align: center;
			  }
			  
			  .OA_header {
			/*	  background-color: white;*/
			    font-size: 20pt;
			    margin-bottom: 25px;
			    margin-top: 25px;
			  }
			
			  #leftcontent {
			    /*float:left; */
				  width:250px;
				  margin-bottom: 25px;
			    text-align: left;
			    border: 1px solid rgb(0,0,0);
			  }
			  			  
			  #selectArea {
				 font-size: 15px;
				 padding-bottom: 65px;
			  }
			
			  #leftcontent {
				 width: 300px;
				 margin-top: 30px;
			  }
			
        #bku_header {
          height: 5%;
          padding-bottom: 3px;
          padding-top: 3px;
        }
      
        #bkulogin {
				  overflow:hidden;	
          min-width: 190px;
          min-height: 180px;
          /*height: 260px;*/	
			  }
      
        h2#tabheader{
				  font-size: 1.1em; 
          padding-left: 2%;
          padding-right: 2%;
          position: relative;
			  }
      	
        #stork h2 {
          font-size: 1.0em;
          margin-bottom: 2%;
        }
        		  
			  .setAssertionButton_full {
			  	background: #efefef;
				  cursor: pointer;
				  margin-top: 15px;
			    width: 100px;
			    height: 30px
			  }
			
			  #leftbutton  {
				 width: 30%; 
				 float:left; 
				 margin-left: 40px;
			  }
			
			  #rightbutton {
				 width: 30%; 
				 float:right; 
				 margin-right: 45px; 
				 text-align: right;
			  }
        
        button {
          height: 25px;
          width: 75px;
          margin-bottom: 10px;
        }
        
       #validation {
        position: absolute;
        bottom: 0px;
        margin-left: 270px;
        padding-bottom: 10px;
      }
			
			}

      @media screen and (max-width: 205px) {
        #localBKU p {
          font-size: 0.6em;
        } 
        
        #localBKU input {
          font-size: 0.6em;
          min-width: 60px;
         /* max-width: 65px; */
          min-height: 1.0em;
         /* border-radius: 5px; */
        }
        
        #bkuselectionarea input[type=button] {
          font-size: 0.7em;
          min-width: 55px;
          /*min-height: 1.1em;
          border-radius: 5px;*/
          margin-bottom: 2%
        }
        
        #mandateLogin {
          font-size: 0.65em;
        }
        
        #bku_header h2 {
          font-size: 0.8em;
          margin-top: -0.4em;
          padding-top: 0.4em;
        }
        
        #bkulogin {
        min-height: 150px;
        } 
      }

      @media screen and (max-width: 249px) and (min-width: 206px) {
        #localBKU p {
          font-size: 0.7em;
        } 
        
        #localBKU input {
          font-size: 0.7em;
          min-width: 70px;
       /*    max-width: 75px;    */
          min-height: 0.95em;
        /*  border-radius: 6px;    */
        }
        
        #bkuselectionarea input[type=button] {
          font-size: 0.75em;
          min-width: 60px;
      /*    min-height: 0.95em;
          border-radius: 6px;    */
          margin-bottom: 5%
        }
        
        #mandateLogin {
          font-size: 0.75em;
        }
        
        #bku_header h2 {
          font-size: 0.9em;
          margin-top: -0.45em;
          padding-top: 0.45em;
        }
        
        #bkulogin {
          min-height: 180px;
        }  
      }

      @media screen and (max-width: 299px) and (min-width: 250px) {
        #localBKU p {
          font-size: 0.9em;
        } 
        
        #localBKU input {
          font-size: 0.8em;
          min-width: 70px;
       /*    max-width: 75px;      */
      /*    border-radius: 6px;  */
        }
        
        #bkuselectionarea input[type=button] {
          font-size: 0.85em;
     /*     min-height: 1.05em;
          border-radius: 7px;        */
          margin-bottom: 10%;
        }
        
        #mandateLogin {
          font-size: 1em;
        }
        
        #bku_header h2 {
          font-size: 1.0em;
          margin-top: -0.50em;
          padding-top: 0.50em;
        } 
      }

      @media screen and (max-width: 399px) and (min-width: 300px) {
        #localBKU p {
          font-size: 0.9em;
        } 
        
        #localBKU input {
          font-size: 0.8em;
          min-width: 70px;
      /*     max-width: 75px;     */
      /*    border-radius: 6px;       */
        }
        
        #bkuselectionarea input[type=button] {
          font-size: 0.9em;
   /*       min-height: 1.2em;
          border-radius: 8px;          */
          margin-bottom: 10%;
          max-width: 80px;
        }
        
        #mandateLogin {
          font-size: 1em;
        }
        
        #bku_header h2 {
          font-size: 1.1em;
          margin-top: -0.55em;
          padding-top: 0.55em;
        } 
      }
      
      @media screen and (max-width: 649px) and (min-width: 400px) {
        #localBKU p {
          font-size: 0.9em;
        } 
        
        #localBKU input {
          font-size: 0.8em;
          min-width: 70px;
      /*     max-width: 80px;       */
     /*     border-radius: 6px;          */
        }
        
        #bkuselectionarea input[type=button] {
          font-size: 1.0em;
     /*      min-height: 1.3em;
         border-radius: 10px;         */
          margin-bottom: 10%;
          max-width: 85px;
        }
        
        #mandateLogin {
          font-size: 1.2em;
        }
        
        #bku_header h2 {
          font-size: 1.3em;
          margin-top: -0.65em;
          padding-top: 0.65em;
        } 
      }


			
			@media screen and (max-width: 649px) {
				
        body {
					margin:0;
					padding:0;
					color : #000;
			  	text-align: center;
          font-size: 100%;
			  	background-color: #MAIN_BACKGOUNDCOLOR#;
				}
        				
			  #page {
			     visibility: hidden;
			     margin-top: 0%;
			  }
			  
			  #page1 {
			    visibility: hidden;
			  }
			  
			  #main {
			    visibility: hidden;
			  }
        
        #validation {
          visibility: hidden;
          display: none;
        }
			  
			  .OA_header {
			    margin-bottom: 0px;
			    margin-top: 0px;
			    font-size: 0pt;
			    visibility: hidden;
			  }
			
			  #leftcontent {
			    visibility: visible;
			    margin-bottom: 0px;
			    text-align: left;
			    border:none;
          vertical-align: middle;
          min-height: 173px;
          min-width: 204px;
          
			  }
			  
        #bku_header {
          height: 10%;
          min-height: 1.2em;
          margin-top: 1%;
        }
        
        h2#tabheader{
          padding-left: 2%;
          padding-right: 2%;
          position: relative;
          top: 50%;
			  }
        
        #stork h2 {
          font-size: 0.9em;
          margin-bottom: 2%;
        }
        
       	#bkulogin {	
          min-width: 190px;
          min-height: 155px;	
			 }
        
			 .setAssertionButton_full {
			     	background: #efefef;
				    cursor: pointer;
				    margin-top: 15px;
			      width: 70px;
			      height: 25px;
			 }
       
        input[type=button] {
/*          height: 11%;  */
          width: 70%;
        }
			}
			      
			* {
				margin: 0;
				padding: 0;
        font-family: #FONTTYPE#;
			}
							      			
			#selectArea {
				padding-top: 10px;
				padding-bottom: 55px;
				padding-left: 10px;
			}
			
			.setAssertionButton {
				background: #efefef;
				cursor: pointer;
				margin-top: 15px;
			  width: 70px;
			  height: 25px;
			}
			
			#leftbutton  {
				width: 35%; 
				float:left; 
				margin-left: 15px;
			}
			
			#rightbutton {
				width: 35%; 
				float:right; 
				margin-right: 25px; 
				text-align: right;
			}
			
			#stork {
			    /*margin-bottom: 10px;*/
			   /* margin-top: 5px; */
			}
      			
      #mandateLogin {
        padding-bottom: 4%;
        padding-top: 4%;
        height: 10%;
        position: relative;
        text-align: center;
			}
      
      .verticalcenter {
        vertical-align: middle;
      }
      
      #mandateLogin div {
        clear: both;
        margin-top: -1%;
        position: relative;
        top: 50%;
      }
      
      #bkuselectionarea {
          position: relative;
          display: block;
      }
      
      #localBKU {
        padding-left: 5%;
        padding-right: 2%;
        padding-bottom: 4%;
        /*padding-top: 4%;*/
        position: relative;
        clear: both;        
			}
          			
			#bkukarte {
				float:left;
				text-align:center;
				width:40%;
        min-height: 70px;
        padding-left: 5%;
        padding-top: 2%;
			}
			
			#bkuhandy {
				float:right;
				text-align:center;
				width:40%;
        min-height: 90px;
        padding-right: 5%;
        padding-top: 2%;
			}
			
      .bkuimage {
        width: 90%;
        height: auto;
      }
      
			#mandate{
				text-align:center;
				padding : 5px 5px 5px 5px;
			}
      
/*		input[type=button], .sendButton {
				background: #BUTTON_BACKGROUNDCOLOR#;
        color: #BUTTON_COLOR#;
/*				border:1px solid #000;  */
/*				cursor: pointer;
/*        box-shadow: 3px 3px 3px #222222;  */
/*			}
			
/*      button:hover, button:focus, button:active, 
      .sendButton:hover , .sendButton:focus, .sendButton:active,
      #mandateCheckBox:hover, #mandateCheckBox:focus, #mandateCheckBox:active {
				background: #BUTTON_BACKGROUNDCOLOR_FOCUS#;
        color: #BUTTON_COLOR#;
/*				border:1px solid #000;                */
/*				cursor: pointer;
/*        box-shadow: -1px -1px 3px #222222;  */
/*			}
      
*/      
			input {
				/*border:1px solid #000;*/
				cursor: pointer;
			}
      
      #localBKU input {
/*        color: #BUTTON_COLOR#;  */
        border: 0px;
        display: inline-block;
        
      }
			
      #localBKU input:hover, #localBKU input:focus, #localBKU input:active {
        text-decoration: underline;
      }
      
			#installJava, #BrowserNOK {
				clear:both;
				font-size:0.8em;
				padding:4px;
			}
						
			.selectText{
			
			}
			
			.selectTextHeader{
			
			}
			
			.sendButton {
        width: 30%;
        margin-bottom: 1%;	
			}
			
			#leftcontent a {
				text-decoration:none; 
				color: #000;
			/*	display:block;*/
				padding:4px;	
			}
			
			#leftcontent a:hover, #leftcontent a:focus, #leftcontent a:active {
				text-decoration:underline;
				color: #000;	
			}
						
			.infobutton {
				background-color: #005a00;
				color: white;
				font-family: serif;
				text-decoration: none;
				padding-top: 2px;
				padding-right: 4px;
				padding-bottom: 2px;
				padding-left: 4px;
				font-weight: bold;
			}
			
			.hell {
				background-color : #MAIN_BACKGOUNDCOLOR#;
        color: #MAIN_COLOR#;	
			}
			
			.dunkel {
				background-color: #HEADER_BACKGROUNDCOLOR#;
        color: #HEADER_COLOR#;
			}
			      
			.main_header {
			   color: black;
			    font-size: 32pt;
			    position: absolute;
			    right: 10%;
			    top: 40px;
				
			}
      			                        
    </style>       
<!-- MOA-ID 2.x BKUSelection JavaScript fucnctions-->
<script type="text/javascript">
		function isIE() {
			return (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
		}
		function isFullscreen() {
			try {
				return ((top.innerWidth == screen.width) && (top.innerHeight == screen.height));
			} catch (e) {
				return false;
			}
		}
		function isActivexEnabled() {
			var supported = null;
			try {
				supported = !!new ActiveXObject("htmlfile");
			} catch (e) {
				supported = false;
			}
			return supported;
		}
		function isMetro() {
			if (!isIE())
				return false;
			return !isActivexEnabled() && isFullscreen();
		}
		window.onload=function() {
			document.getElementById("localBKU").style.display="block";
			return;
		}
    function bkuLocalClicked() {
       setMandateSelection();
    }
    
		function bkuOnlineClicked() {
			if (isMetro())
				document.getElementById("metroDetected").style.display="block";
			document.getElementById("localBKU").style.display="block";
/* 			if (checkMandateSSO())
				return; */
			
			setMandateSelection();
/* 			setSSOSelection(); */
						
			var iFrameURL = "#AUTH_URL#" + "?";
			iFrameURL += "bkuURI=" + "#ONLINE#";
			iFrameURL += "&useMandate=" + document.getElementById("useMandate").value;
/* 			iFrameURL += "&SSO=" + document.getElementById("useSSO").value; */
			iFrameURL += "&MODUL=" + "#MODUL#";
			iFrameURL += "&ACTION=" + "#ACTION#";
			iFrameURL += "&MOASessionID=" + "#SESSIONID#";
			generateIFrame(iFrameURL);
		}
		function bkuHandyClicked() {
			document.getElementById("localBKU").style.display="none";
/* 			if (checkMandateSSO())
				return; */
			
			setMandateSelection();
/* 			setSSOSelection(); */
			
			var iFrameURL = "#AUTH_URL#" + "?";
			iFrameURL += "bkuURI=" + "#HANDY#";
			iFrameURL += "&useMandate=" + document.getElementById("useMandate").value;
/* 			iFrameURL += "&SSO=" + document.getElementById("useSSO").value; */
			iFrameURL += "&MODUL=" + "#MODUL#";
			iFrameURL += "&ACTION=" + "#ACTION#";
			iFrameURL += "&MOASessionID=" + "#SESSIONID#";
			generateIFrame(iFrameURL);
		}
		function storkClicked() {
			document.getElementById("localBKU").style.display="none"; 
/* 			if (checkMandateSSO())
				return; */
			
			setMandateSelection();
/* 			setSSOSelection(); */
			
			var ccc = "AT";
			var countrySelection = document.getElementById("cccSelection");
			if (countrySelection !=  null) {
				ccc = document.getElementById("cccSelection").value;
			}
			var iFrameURL = "#AUTH_URL#" + "?";
			iFrameURL += "bkuURI=" + "#ONLINE#";
			iFrameURL += "&useMandate=" + document.getElementById("useMandate").value;
			iFrameURL += "&CCC=" + ccc;
/* 			iFrameURL += "&SSO=" + document.getElementById("useSSO").value; */
			iFrameURL += "&MODUL=" + "#MODUL#";
			iFrameURL += "&ACTION=" + "#ACTION#";
			iFrameURL += "&MOASessionID=" + "#SESSIONID#";
			generateIFrame(iFrameURL);
		}
		function generateIFrame(iFrameURL) {
			var el = document.getElementById("bkulogin");
      var width = el.clientWidth;
      var heigth = el.clientHeight - 20;
			var parent = el.parentNode;
            
      iFrameURL += "&heigth=" + heigth;
      iFrameURL += "&width=" + width;
      
			var iframe = document.createElement("iframe");
			iframe.setAttribute("src", iFrameURL);
			iframe.setAttribute("width", el.clientWidth - 1);
			iframe.setAttribute("height", el.clientHeight - 1);
			iframe.setAttribute("frameborder", "0");
			iframe.setAttribute("scrolling", "no");
			iframe.setAttribute("title", "Login");
			parent.replaceChild(iframe, el);
		}
		function setMandateSelection() {
			document.getElementById("moaidform").action = "#AUTH_URL#";
			document.getElementById("useMandate").value = "false";
			var checkbox = document.getElementById("mandateCheckBox");
			if (checkbox !=  null) {
				if (document.getElementById("mandateCheckBox").checked) {
					document.getElementById("useMandate").value = "true";
				}
			}
		}
		function onChangeChecks() {
      if (top.innerWidth < 650) {
         document.getElementById("moaidform").setAttribute("target","_parent");
      } else {
         document.getElementById("moaidform").removeAttribute("target");
      }
      
    }
/* 		function setSSOSelection() {
			document.getElementById("useSSO").value = "false";
			var checkbox = document.getElementById("SSOCheckBox");
			if (checkbox !=  null) {
				if (document.getElementById("SSOCheckBox").checked) {
					document.getElementById("useSSO").value = "true";
				}
			}
		} */
		
/* 		function checkMandateSSO() {
			var sso = document.getElementById("SSOCheckBox");
			var mandate = document.getElementById("mandateCheckBox");
			
			
			if (sso.checked && mandate.checked) {
				alert("Anmeldung in Vertretung in kombination mit Single Sign-On wird aktuell noch nicht unterstützt!")
				mandate.checked = false;
				sso.checked = false;
				return true;
			} else {
				return false;
			}
		} */
	</script>
<title>Anmeldung mittels Bürgerkarte oder Handy-Signatur</title>
</head>
<body onload="onChangeChecks();" onresize="onChangeChecks();">
	<div id="page">
		<div id="page1" class="case selected-case" role="main">
			<h2 class="OA_header" role="heading">Anmeldung an: #OAName#</h2>
			<div id="main">
				<div id="leftcontent" class="hell" role="application">
					<div id="bku_header" class="dunkel">
						<h2 id="tabheader" class="dunkel" role="heading">#HEADER_TEXT#</h2>
					</div>
					<div id="bkulogin" class="hell" role="form">
						<div id="mandateLogin" style="">
							<div>
								<input tabindex="1" type="checkbox" name="Mandate"
									id="mandateCheckBox" class="verticalcenter" role="checkbox"
									onClick='document.getElementById("mandateCheckBox").setAttribute("aria-checked", document.getElementById("mandateCheckBox").checked);'#MANDATECHECKED#>
								<label for="mandateCheckBox" class="verticalcenter">in
									Vertretung anmelden</label>
								<!--a      href="info_mandates.html" 
                        target="_blank"
                        class="infobutton verticalcenter" 
                        tabindex="5">i</a-->
							</div>
						</div>
						<div id="bkuselectionarea">
							<div id="bkukarte">
								<img class="bkuimage" src="#CONTEXTPATH#/img/online-bku.png"
									alt="OnlineBKU" /> <input name="bkuButtonOnline" type="button"
									onClick="bkuOnlineClicked();" tabindex="2" role="button"
									value="Karte" />
							</div>
							<div id="bkuhandy">
								<img class="bkuimage" src="#CONTEXTPATH#/img/mobile-bku.png"
									alt="HandyBKU" /> <input name="bkuButtonHandy" type="button"
									onClick="bkuHandyClicked();" tabindex="3" role="button"
									value="HANDY" />
							</div>
						</div>
						<div id="localBKU">
							<form method="get" id="moaidform" action="#AUTH_URL#"
								class="verticalcenter" target="_parent">
								<input type="hidden" name="bkuURI" value="#LOCAL#"> <input
									type="hidden" name="useMandate" id="useMandate"> <input
									type="hidden" name="SSO" id="useSSO"> <input
									type="hidden" name="CCC" id="ccc"> <input type="hidden"
									name="MODUL" value="#MODUL#"> <input type="hidden"
									name="ACTION" value="#ACTION#"> <input type="hidden"
									name="MOASessionID" value="#SESSIONID#"> 
                  <input type="submit" value=">lokale Bürgerkartenumgebung" tabindex="4"
									role="button" class="hell"
                  onclick="setMandateSelection();"
                  >
								<!--p>
                    <small>Alternativ können Sie eine lokal installierte BKU verwenden.</small>								                                  
                  </p-->								                                  
                </form>								                                                          
              </div>
              
              <div id="stork" align="center" style="#STORKVISIBLE#">
                <h2 id="tabheader" class="dunkel">Home Country Selection</h2>
                <p>
                  <select name="cccSelection" id="cccSelection" size="1" style="width: 120px; margin-right: 5px;" >
                    #PEPSLIST#
                  </select>
                  <button name="bkuButton" type="button" onClick="storkClicked();">Proceed</button>
                  <a href="info_stork.html" target="_blank" class="infobutton" style="color:#FFF">i</a>
                </p>
              </div>

						<div id="metroDetected" style="display: none">
							<p>Anscheinend verwenden Sie Internet Explorer im
								Metro-Modus. Wählen Sie bitte "Auf dem Desktop anzeigen" aus den
								Optionen um die Karten-Anmeldung starten zu können.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="validation">
			<a href="http://validator.w3.org/check?uri="> <img
				style="border: 0; width: 88px; height: 31px"
				src="#CONTEXTPATH#/img/valid-html5-blue.png" alt="HTML5 ist valide!" />
			</a> <a href="http://jigsaw.w3.org/css-validator/"> <img
				style="border: 0; width: 88px; height: 31px"
				src="https://jigsaw.w3.org/css-validator/images/vcss-blue"
				alt="CSS ist valide!" />
			</a>
		</div>
	</div>
</body>
</html>