<!DOCTYPE html>
<html lang="de"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Nordpfeil">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NORDPFEIL</title></head>

<body>

<style type="text/css">

	html,body{
		margin:0;
		padding:0;
		border:0;
		overflow:visible;
		background: black;
	}
        #canvas {
		z-index: 100;
		background-color: black;
        }
	#d3stop {
		position:absolute; 
		z-index: 251;
        }
        #d3stop:hover {
                  cursor: pointer;
        }
        #d3laden:hover {
                  cursor: pointer;
        }
        #canvas:hover {
                  cursor: pointer;
        }

        #d3b:hover {
                  cursor: pointer;
        }
/* Scrollbar*/
        body::-webkit-scrollbar {
                  width: 0.5em;
                  height: 0.5em;
        }

        body::-webkit-scrollbar-track {
                  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        }

        body::-webkit-scrollbar-thumb {
                  background-color: #ADD982;
                  outline: 1px solid darkgrey;
        }

        :root{
                scrollbar-color: #ADD982 transparent;
                scrollbar-width: thin;
        }

/* Textarten */

        a {
            color: #ADD982; /* Farbe des Links */
            text-decoration-color:#ADD982; /* Farbe des Unterstrichs */
        }

        /* Unterstrich-Farbe */
        a:hover {
            text-decoration: underline;
            text-decoration-color: white; /* Farbe des Unterstrichs */
        }

        .text{
                color: #ADD982;
                font-family:arial, "lucida console", sans-serif;
		-moz-hyphens: auto;
   		-o-hyphens: auto;
   		-webkit-hyphens: auto;
   		-ms-hyphens: auto;
   		hyphens: auto;
        }
        .text_fett{
                color: #ADD982;
                font-family:arial, "lucida console", sans-serif;
                font-weight: bold;
        }
        .text_gross{
                color: #ADD982;
                font-family:arial, "lucida console", sans-serif;
                font-size: 140%;
        }
        .text_gr_weiss{
                color: white;
                font-family:arial, "lucida console", sans-serif;
                font-size: 140%;
        }

        .ueberschrift{
                color: white;
                font-family:arial, "lucida console", sans-serif;
        }
	.textU{
                color: #ADD982;
                font-family:arial, "lucida console", sans-serif;
		-moz-hyphens: auto;
   		-o-hyphens: auto;
   		-webkit-hyphens: auto;
   		-ms-hyphens: auto;
   		hyphens: auto;
		text-decoration: underline;
        }
        .textU:hover{
                  cursor: pointer;
        }
	.textU1{
                color: #FFFFFF;
                font-family:arial, "lucida console", sans-serif;
		-moz-hyphens: auto;
   		-o-hyphens: auto;
   		-webkit-hyphens: auto;
   		-ms-hyphens: auto;
   		hyphens: auto;
		text-decoration: underline;
        }
        .textU1:hover{
                  cursor: pointer;
        }


/* Button */

        .button:hover{
                  cursor: pointer;
        }
        .button{
                  position: static;
        }

        #tabelle {

                  width: 100%;
                  margin: 20px;
		  margin-left:auto; margin-right:auto;
		  text-align: center;
		  z-index: 10;
		  table-layout: fixed;
        }

/* Laden */
        .laden{
		display: block; 
		margin: auto;
		text-align: center;
		vertical-align: middle;
	} 




</style>
<!-- Laden -->
<div id="laden_hintergrund" style=" background-color: #000000; position:absolute; display: block; z-index: 1000; width:2000px; height:2000px;">
	<img id="" style="position:absolute; display: block; z-index: 1000; width:2000px; height:2000px;" src="abb/symb/schwarz.jpg" >
</div>
<img id="laden_logo" style="position:absolute; display: none; z-index: 1001;" src="abb/symb/logo.png" width="100" height="100">
<img id="laden_balken" style="position:absolute; display: block; z-index: 1001;" src="abb/symb/laden.gif" width="100" height="20">

<!-- MENUE OBEN -->
         <table id="tabelle" border="0" cellpadding="0" cellspacing="0" >
         	<tr>
			<td id="men_ob_tabelle_s1" align="right"><img class="button" id="morb" border="0" src="abb/symb/bk_play_r.png" width="50" height="34"></td>
			<td width = "250" align="center" rowspan="2"><img class="button" id="logo" border="0" src="abb/symb/logo.png" width="100" height="100"></td>
			<td id="men_ob_tabelle_s2" align="left"><img class="button" id="movb" border="0" src="abb/symb/bk_play.png" width="50" height="34"></td>
        	 </tr>
		 <tr>
			<td align="right"><font id="mor" class="text">Rückwärts</font></td>		
			<td align="left"><font id="mov" class="text">Vorwärts</font></td>	
       		  </tr>
         		 <tr><td colspan="3">
<!-- STATIONSÜBERSCHRIFT -->
         <div valing="center" align="center">
                 <h1 id = "stationsueberschrift" class="ueberschrift"> Haupt&uuml;berschrift</h1>
<!-- STATIONSNUMMER -->
                 <h3 id = "stationsnummer" class="ueberschrift">Station</h3>
         </div>
		 </td></tr>         
 
         <tr><td colspan="3" align="left">
<!-- STARTTEXT -->
                <font id="st" class="text">Starttext</font>
         </td></tr>


        <tr><td valign="top"  colspan="3">
<!-- BILD 1 -->
                <br><img id="sb1" border="0" width="100" height="50">
                <div style="overflow:auto" id="pb1" class = "panorama"><img id="spb1" border="0" width="100" height="50"></div>
<!--NEU-->	<div id="video" style=" background-color:black; display: none;"><video type="video/mp4" id="videof" controls style=" width: 100%; height:100%;  "></video></div>
                <div id="laden1"><br><br><br><br><br><img class="laden" src="abb/symb/laden.gif" border="0" width="100" height="20">
		<br>
        </td></tr>

        <tr><td align="right" valign="top" width="100">
   <!-- BUTTON -->
                <img id="wisch1" border="0" src="abb/symb/bk_wisch.png" width="50" height="34">
                <img class="button" id="sb1Links" border="0" src="abb/symb/bk_play_r.png" width="50" height="34">
        </td>
	<td></td>
	<td align="left" valign="top"  width="70">
                 <img class="button" id="sb1Rechts" border="0" src="abb/symb/bk_play.png" width="50" height="34">
        </td></tr>
        <tr><td colspan="3" align="right">
   <!-- BILDUNTERSCHRIFT -->
                <font  id="sbt1" class="text">Bildunterschrift 1</font>
        </td></tr>


        <tr><td valign="top"  colspan="3">
<!-- BILD 2 -->
                <br><img id="sb2" border="0" width="100" height="50">
		<canvas id="canvas" style="top: 44px; left: 289.5px; display: block;" width="1010" height="752"></canvas>
		<img id="d3b" border="0" width="1000" height="80" src="../nextdim/3d/3d_an.png">
                <div style="overflow:auto" id="pb2" class = "panorama"><img id="spb2" border="0" width="100" height="50"></div>
                <div id="laden2"><br><br><br><br><br><img class="laden" src="abb/symb/laden.gif" border="0" width="100" height="20">
                <br>
        </td></tr>
        <tr><td align="right" valign="top" width="100">
   <!-- BUTTON -->
                <img id="wisch2" border="0" src="abb/symb/bk_wisch.png" width="50" height="34">
                <img class="button" id="sb2Links" border="0" src="abb/symb/bk_play_r.png" width="50" height="34">
        </td>
	<td></td>
	<td align="left" valign="top"  width="70">
                 <img class="button" id="sb2Rechts" border="0" src="abb/symb/bk_play.png" width="50" height="34">
        </td></tr>
	<tr><td colspan="3" align="right">
   <!-- BILDUNTERSCHRIFT -->
                <font id="sbt2" class="text">Bildunterschrift</font>
        </td></tr>

        <tr><td valign="top"  colspan="3">
<!-- BILD 3 -->
                <br><img id="sb3" border="0" width="100" height="50">
		<div id="laden3"><br><br><br><br><br><img class="laden" src="abb/symb/laden.gif" border="0" width="100" height="20">
		<br>
        </td></tr>
        <tr><td align="right" valign="top" width="100">
   <!-- BUTTON -->
                <img class="button" id="sb3Links" border="0" src="abb/symb/bk_play_r.png" width="50" height="34">
        </td>
	<td></td>
	<td align="left" valign="top"  width="70">
                 <img class="button" id="sb3Rechts" border="0" src="abb/symb/bk_play.png" width="50" height="34">
        </td></tr>
	<tr><td align="right" colspan="3">
   <!-- BILDUNTERSCHRIFT -->
                <font id="sbt3" class="text">Bildunterschrift</font>
        </td></tr>
        <tr><td valign="top"  colspan="3">
<!-- BILD 4 -->
                <br><img id="sb4" border="0" width="100" height="50">
                <div id="laden4"><br><br><br><br><br><img class="laden" src="abb/symb/laden.gif" border="0" width="100" height="20">
		<br>
        </td></tr>
        <tr><td align="right" valign="top" width="100">
   <!-- BUTTON -->
                <img class="button" id="sb4Links" border="0" src="abb/symb/bk_play_r.png" width="50" height="34">
        </td>
	<td></td>
	<td align="left" valign="top"  width="70">
                 <img class="button" id="sb4Rechts" border="0" src="abb/symb/bk_play.png" width="50" height="34">
        </td></tr>
	<tr><td colspan="3" align="right">
   <!-- BILDUNTERSCHRIFT -->
                <font id="sbt4" class="text">Bildunterschrift</font>
        </td></tr>
	<tr><td valign="top"  colspan="3">
<!-- BILD 5 -->
                <br><img id="sb5" border="0" width="100" height="50">
                <div id="laden5"><br><br><br><br><br><img class="laden" src="abb/symb/laden.gif" border="0" width="100" height="20">
		<br>
        </td></tr>
        <tr><td align="right" valign="top" width="100">
   <!-- BUTTON -->
                <img class="button" id="sb5Links" border="0" src="abb/symb/bk_play_r.png" width="50" height="34">
        </td>
	<td></td>
	<td align="left" valign="top"  width="70">
                 <img class="button" id="sb5Rechts" border="0" src="abb/symb/bk_play.png" width="50" height="34">
        </td></tr>
	<tr><td colspan="3" align="right">
   <!-- BILDUNTERSCHRIFT -->
                <font id="sbt5" class="text">Bildunterschrift</font>
        </td></tr>
	<tr><td valign="top"  colspan="3">
<!-- BILD 6 -->
                <br><img id="sb6" border="0" width="100" height="50">
                <div id="laden6"><br><br><br><br><br><img class="laden" src="abb/symb/laden.gif" border="0" width="100" height="20">
		<br>
        </td></tr>
        <tr><td align="right" valign="top" width="100">
   <!-- BUTTON -->
                <img class="button" id="sb6Links" border="0" src="abb/symb/bk_play_r.png" width="50" height="34">
        </td>
	<td></td>
	<td align="left" valign="top"  width="70">
                 <img class="button" id="sb6Rechts" border="0" src="abb/symb/bk_play.png" width="50" height="34">
        </td></tr>
	<tr><td colspan="3" align="right">
   <!-- BILDUNTERSCHRIFT -->
                <font id="sbt6" class="text">Bildunterschrift</font>
        </td></tr>


<tr><td  colspan="3" align="left">
<!-- ABSATZÜBERSCHRIFT 1 -->
                    <br><font id="atu1" class="text_fett">Absatz&uuml;berschrit 1</font>
        </td></tr>
        <tr><td  colspan="3" align="left">
<!-- ABSATZTEXT 1 -->
                <font id="at1" class="text">Absatz 1</font>
        </td></tr>
        <tr><td  colspan="3" align="left">
<!-- ABSATZÜBERSCHRIFT 2 -->
        <br><font id="atu2" class="text_fett">Absatz&uuml;berschrift 2</font>
        </td></tr>
        <tr><td  colspan="3" align="left">
<!-- ABSATZTEXT 2 -->
                <font id="at2" class="text">Absatz 2</font>
        </td></tr>
        <tr><td  colspan="3" align="left">
<!-- ABSATZÜBERSCHRIFT 3 -->
                    <br><font id="atu3" class="text_fett">Absatz&uuml;berschrift 3</font>
        </td></tr>
        <tr><td  colspan="3" align="left">
<!-- ABSATZTEXT 3 -->
                 <font id="at3" class="text">Absatz 3</font>
        </td></tr>
        <tr><td  colspan="3" align="left">
<!-- ABSATZÜBERSCHRIFT 4 -->
                    <br><font id="atu4" class="text_fett">Absatz&uuml;berschrift 4</font>
        </td></tr>
        <tr><td  colspan="3" align="left">
<!-- ABSATZTEXT 4 -->
                 <font id="at4" class="text">Absatz 4</font>
        </td></tr>
        <tr><td  colspan="3" align="left">
<!-- ABSATZÜBERSCHRIFT 5 -->
                <br><font id="atu5" class="text_fett">Absatz&uuml;berschrift 5</font>
        </td></tr>
<!-- ABSATZTEXT 5 -->
        <tr><td  colspan="3" align="left">
                 <font id="at5" class="text">Absatz 5</font>
        </td></tr>
<!-- Fuehrung --> 
	<tr><td align="left" colspan="3">

                 	<br><br><font class="text_gr_weiss">Du möchtest mehr über die Geschichte von Rügen erfahren? Dann komm doch zu unserer<br><a style="color: #ADD982" target="neu" href="https://www.nordpfeil-ruegen.de/fuehrung">FÜHRUNG Ralswiek im frühen Mittelalter</a></font><br><br>
                   
		 </td></tr>
<!-- Impressum --> 
	<tr><td align="left" colspan="3">

                 	<br><br><a style="color: #ADD982" target="neu" href="impressum1.html"><font class="text">Impressum</font></a><br><br>
          
		 </td></tr>
<!-- unteres Menue -->

         	<tr>
			<td id="men_un_tabelle_s1" align="right"><img class="button" id="murb" border="0" src="abb/symb/bk_play_r.png" width="50" height="34"></td>
			<td width = "250" align="center" rowspan="2"><img class="button" id="logo_un" border="0" src="abb/symb/logo.png" width="100" height="100"></td>
			<td id="men_un_tabelle_s2" align="left"><img class="button" id="muvb" border="0" src="abb/symb/bk_play.png" width="50" height="34"></td>
        	 </tr>
		 <tr>
			<td align="right"><font id="mur" class="text">Rückwärts</font></td>		
			<td align="left"><font id="muv" class="text">Vorwärts</font></td>	
       		  </tr>

        <tr><td  colspan="3" align="left">
<!-- Beiträge -->
        <br><br><br>
		<font id="b1" class="textU"></font>&nbsp;
		<font id="b2" class="textU1"></font>&nbsp;
		<font id="b3" class="textU"></font>&nbsp;
		<font id="b4" class="textU1"></font>&nbsp;
		<font id="b5" class="textU"></font>&nbsp;
		<font id="b6" class="textU1"></font>&nbsp;
		<font id="b7" class="textU"></font>&nbsp;
		<font id="b8" class="textU1"></font>&nbsp;
		<font id="b9" class="textU"></font>&nbsp;
		<font id="b10" class="textU1"></font>&nbsp;
		<font id="b11" class="textU"></font>&nbsp;
		<font id="b12" class="textU1"></font>&nbsp;
		<font id="b13" class="textU"></font>&nbsp;
		<font id="b14" class="textU1"></font>&nbsp;
		<font id="b15" class="textU"></font>&nbsp;
		<font id="b16" class="textU1"></font>&nbsp;
		<font id="b17" class="textU"></font>&nbsp;
		<font id="b18" class="textU1"></font>&nbsp;
		<font id="b19" class="textU"></font>&nbsp;
		<font id="b20" class="textU1"></font>&nbsp;
		<font id="b21" class="textU"></font>&nbsp;
		<font id="b22" class="textU1"></font>&nbsp;
		<font id="b23" class="textU"></font>&nbsp;
		<font id="b24" class="textU1"></font>&nbsp;
		<font id="b25" class="textU"></font>&nbsp;
		<font id="b26" class="textU1"></font>&nbsp;
		<font id="b27" class="textU"></font>&nbsp;
		<font id="b28" class="textU1"></font>&nbsp;
		<font id="b29" class="textU"></font>&nbsp;
		<font id="b30" class="textU1"></font>&nbsp;
		<font id="b31" class="textU"></font>&nbsp;
		<font id="b32" class="textU1"></font>&nbsp;
		<font id="b33" class="textU"></font>&nbsp;
		<font id="b34" class="textU1"></font>&nbsp;
		<font id="b35" class="textU"></font>&nbsp;
		<font id="b36" class="textU1"></font>&nbsp;

        </td></tr>
        <tr><td colspan="3" align="left">
        	<br><br><br><br><br><font class="text">Quellen:</font>
        </td></tr>
        <tr><td colspan="3" align="left" >
		<font id="q1" class="text"></font><br>
		<font id="q2" class="text"></font><br>
		<font id="q3" class="text"></font><br>
		<font id="q4" class="text"></font><br>
		<font id="q5" class="text"></font><br>
		<font id="q6" class="text"></font><br>
		<font id="q7" class="text"></font><br>
		<font id="q8" class="text"></font><br>
		<font id="q9" class="text"></font><br>
		<font id="q10" class="text"></font><br>
		<font id="q11" class="text"></font><br>
		<font id="q12" class="text"></font><br>
	</td></tr>          


        <tr><td align="right" valign="top" width="100"></td>
	<td align="center"><img class="button" id="hoch" border="0" src="abb/symb/bk_touch.png" width="75" height="51"></td>
	<td align="left" valign="top"  width="70"></td></tr>

</table><br>
<img id="d3stop">
<div id="d3laden" style="position:absolute; display:none; z-index:250" border="0" width="100" height="20"></div>

<script>

// Variablen Unterseiten
var sstation;


        var stationsueberschrift;
        var stationsnummer;
	var datum
        var starttext;

        var sbz1=[0,1]; // Anzahl der Stationen
        var sbz2=[0,1];
        var sbz3=[0,1];
        var sbz4=[0,1];
	var sbz5=[0,1];
        var sbz6=[0,1];

        var sb1=[];
        var sbt1=[];

        var sb2=[];
        var sbt2=[];

        var sb3=[];
        var sbt3=[];

        var sb4=[];
        var sbt4=[];

        var sb5=[];
        var sbt5=[];
        sb5[1]="";
        sbt5[1]="";

	var sb6=[];
        var sbt6=[];
        sb6[1]="";
        sbt6[1]="";


        var at1;
        var atu1;
        var at2;
        var atu2;
        var at3;
        var atu3;
        var at4;
        var atu4;
        var at5;
        var atu5;
	var seitenverhaeltnis;
	var seitenverhaeltnisAlt;
	var start=1;
        var panorama=[];  // p-Panorama, d-3d
	var seite = 0;
	var q=[];
	var funktion3d;
	var d3Stop=0;
	var d3ta;
	var d3res;
	var testvar;
	var ddLaden;
	var touch=0;
	var sv;
// Neu
	var vidGeladen=0; // Video geladen: Seitennummer; Video nicht geladen 0;
	var bildgeladen=[,0,0,0,0,0,0];




</script>
<script type="text/javascript" charset="UTF-8" src="bildformate.js"></script>

<script type="text/javascript" charset="UTF-8" src="s01.js"></script>
<script type="text/javascript" charset="UTF-8" src="s02.js"></script>
<script type="text/javascript" charset="UTF-8" src="s03.js"></script>
<script type="text/javascript" charset="UTF-8" src="s04.js"></script>
<script type="text/javascript" charset="UTF-8" src="s05.js"></script>
<script type="text/javascript" charset="UTF-8" src="s06.js"></script>
<script type="text/javascript" charset="UTF-8" src="s07.js"></script>
<script type="text/javascript" charset="UTF-8" src="s08.js"></script>
<script type="text/javascript" charset="UTF-8" src="s09.js"></script>
<script type="text/javascript" charset="UTF-8" src="s10.js"></script>
<script type="text/javascript" charset="UTF-8" src="s11.js"></script>
<script type="text/javascript" charset="UTF-8" src="s12.js"></script>
<script type="text/javascript" charset="UTF-8" src="s13.js"></script>
<script type="text/javascript" charset="UTF-8" src="s14.js"></script>
<script type="text/javascript" charset="UTF-8" src="s15.js"></script>
<script type="text/javascript" charset="UTF-8" src="s16.js"></script>
<script type="text/javascript" charset="UTF-8" src="s17.js"></script>
<script type="text/javascript" charset="UTF-8" src="s18.js"></script>
<script type="text/javascript" charset="UTF-8" src="s19.js"></script>
<script type="text/javascript" charset="UTF-8" src="s20.js"></script>
<script type="text/javascript" charset="UTF-8" src="s21.js"></script>
<script type="text/javascript" charset="UTF-8" src="s22.js"></script>
<script type="text/javascript" charset="UTF-8" src="s23.js"></script>
<script type="text/javascript" charset="UTF-8" src="s24.js"></script>
<script type="text/javascript" charset="UTF-8" src="s25.js"></script>
<script type="text/javascript" charset="UTF-8" src="s26.js"></script>
<script type="text/javascript" charset="UTF-8" src="s27.js"></script>
<script type="text/javascript" charset="UTF-8" src="s28.js"></script>
 <script type="text/javascript" charset="UTF-8" src="s29.js"></script> 
 <script type="text/javascript" charset="UTF-8" src="s30.js"></script> 
 <script type="text/javascript" charset="UTF-8" src="s31.js"></script>
<script type="text/javascript" charset="UTF-8" src="s32.js"></script>

 
<script type="text/javascript" charset="UTF-8" src="../nextdim/3d.js"></script>
<script type="text/javascript" charset="UTF-8" src="../nextdim/3d/s3_dreiD.js"></script>
<script type="text/javascript" charset="UTF-8" src="../nextdim/3d/sX5_dreiD.js"></script>



<script>
//================================ Events ============================================

document.getElementById("laden_logo").style.display="block"; 
window.scroll (0,0);
window.onload = function () {
	document.getElementById("laden_hintergrund").style.display="none";
	document.getElementById("laden_logo").style.display="none"; 
	document.getElementById("laden_balken").style.display="none";
// Neu
	document.getElementById("video").style.display="none"; 
  
}
document.getElementById("sb1").addEventListener("load", function(){
	if((sb1[1]!="")&&(sb1[1]!=" ")&&(panorama[1]!="p")){
		document.getElementById("sb1").style.display="block";
		document.getElementById("laden1").style.display="none";
	}
// Neu
	bildgeladen[1]=1;
	 bildformate1();

});
document.getElementById("sb2").addEventListener("load", function(){
	if((sb2[1]!="")&&(sb2[1]!=" ")&&(panorama[2]!="p")){
		document.getElementById("sb2").style.display="block";
		document.getElementById("laden2").style.display="none";
	}
// Neu
	bildgeladen[2]=1;
	 bildformate2();

});
document.getElementById("sb3").addEventListener("load", function(){
	if((sb3[1]!="")&&(sb3[1]!=" ")){
		document.getElementById("sb3").style.display="block";
		document.getElementById("laden3").style.display="none";
	}
// Neu
	bildgeladen[3]=1;
	 bildformate3();

});
document.getElementById("sb4").addEventListener("load", function(){
	if((sb4[1]!="")&&(sb4[1]!=" ")){
		document.getElementById("sb4").style.display="block";
		document.getElementById("laden4").style.display="none";
	}
// Neu
	bildgeladen[4]=1;
	 bildformate4();

});
document.getElementById("sb5").addEventListener("load", function(){
	if((sb5[1]!="")&&(sb5[1]!=" ")&&(sstation > 30)){
		document.getElementById("sb5").style.display="block";
		document.getElementById("laden5").style.display="none";
	}
	else{
		document.getElementById("sb5").style.display="none";
		document.getElementById("laden5").style.display="none";
	}
// Neu
	bildgeladen[5]=1;
	 bildformate5();

});
document.getElementById("sb6").addEventListener("load", function(){
	if((sb6[1]!="")&&(sb6[1]!=" ")&&(sstation > 30)){
		document.getElementById("sb6").style.display="block";
		document.getElementById("laden6").style.display="none";
	}
	else{
		document.getElementById("sb6").style.display="none";
		document.getElementById("laden6").style.display="none";
	}
// Neu
	bildgeladen[6]=1;
	 bildformate6();

});

document.getElementById("spb1").addEventListener("load", function(){
	if(panorama[1]=="p"){
		document.getElementById("pb1").style.display="block";
		document.getElementById("wisch1").style.display="block";
		document.getElementById("laden1").style.display="none";
	}
});
document.getElementById("spb2").addEventListener("load", function(){
	if(panorama[2]=="p"){
		document.getElementById("pb2").style.display="block";
		document.getElementById("wisch2").style.display="block";
		document.getElementById("laden2").style.display="none";
	}
});

// Neu
document.getElementById("videof").addEventListener("canplaythrough", function(){
		if(panorama[1]=="v"){
			vidGeladen=sstation; console.log(vidGeladen);
			if(vidGeladen !=0){
				document.getElementById("video").style.display="block";
				document.getElementById("laden1").style.display="none";
			}
		}
		else{vidGeladen=0;}
});

 
//================================ Stationen ============================================

// Variablen
        var bildBreite;
        var bildHoehe;
	var seitentitel=[];
	var nr;
	var nv;
	var menueunten=0;

	sstation = 1; seiten();

// Seiten
	function seiten(){
		for(var i = 1;i<=seite;i++){
			eval("s"+i+"();");
		}
 	}

//Seitentitel auslesen
	for(var i=1;i<=seite;i++){
		sstation = i;
		seiten();
		seitentitel[i]=stationsueberschrift;
	}
	
	sstation = seite;
	
	for(var i=1;i<=seite;i++){
		if(i == parseInt(window.location.hash.substring(1))){sstation=i;}
	}

// Bild- und Tabellengröße

//         stationsgroesse();
   function stationsgroesse(){
	seitenverhaeltnis = window.innerWidth/window.innerHeight;
   if(start==0){
		d3Stop=0;d3stop();
		if(seitenverhaeltnis >= 1 && seitenverhaeltnisAlt < 1){ sv=1};
		if(seitenverhaeltnis >= 1 && seitenverhaeltnisAlt >= 1){ sv=0};
		if(seitenverhaeltnis < 1 && seitenverhaeltnisAlt < 1){ sv=0};
		if(seitenverhaeltnis < 1 && seitenverhaeltnisAlt >= 1){ sv=1};
   }
   else{sv=1;}

   if(touch != 1 || sv==1){

	document.getElementById("laden_hintergrund").style.width=window.innerWidth+"px";
	document.getElementById("laden_hintergrund").style.height=window.innerHeight+"px";
	document.getElementById("laden_logo").style.top=window.innerHeight/2-60+"px";
	document.getElementById("laden_logo").style.left=window.innerWidth/2-50+"px";
	document.getElementById("laden_balken").style.top=window.innerHeight/2-60+100+"px";
	document.getElementById("laden_balken").style.left=window.innerWidth/2-50+"px";


        bildBreite=window.innerWidth-40;
        if(bildBreite > 1000){bildBreite = 1000;}

        bildHoehe=bildBreite/1.5;
       
        document.getElementById("tabelle").style.width=bildBreite+"px";
 	 
 	document.getElementById("men_ob_tabelle_s1").style.width=(bildBreite-250)/2+"px";
 	document.getElementById("men_ob_tabelle_s2").style.width=(bildBreite-250)/2+"px";
 	 
 	document.getElementById("men_un_tabelle_s1").style.width=(bildBreite-250)/2+"px";
 	document.getElementById("men_un_tabelle_s2").style.width=(bildBreite-250)/2+"px";
	
        if(panorama[1] == "p"){
                document.getElementById("pb1").style.height=bildHoehe+20+"px";
                document.getElementById("pb1").style.width=bildBreite+"px";
                document.getElementById("spb1").style.height=bildHoehe+"px";
                document.getElementById("spb1").style.width=bildHoehe*7.22+"px";
        }
// Neu
	else{
        	if(panorama[1] == "v"){
                	document.getElementById("video").style.height=bildHoehe+"px";
                	document.getElementById("video").style.width=bildBreite+"px";
                	document.getElementById("videof").style.height=bildHoehe+"px";
                	document.getElementById("videof").style.width=bildBreite+"px";
		}

        else{
                document.getElementById("sb1").style.height=bildHoehe+"px";
                document.getElementById("sb1").style.width=bildBreite+"px";
        }
// Neu
	}

        if(panorama[2] == "p"){
                 document.getElementById("pb2").style.height=bildHoehe+20+"px";
                document.getElementById("pb2").style.width=bildBreite+"px";
                document.getElementById("spb2").style.height=bildHoehe+"px";
                document.getElementById("spb2").style.width=bildHoehe*7.22+"px";
        }
        else{
		if(panorama[2] == "d"){
                	document.getElementById("canvas").style.height=bildHoehe+"px";
                	document.getElementById("canvas").style.width=bildBreite+"px";
			document.getElementById("d3b").style.height=bildBreite*0.08+"px";
                	document.getElementById("d3b").style.width=bildBreite+"px";
        	}
		else{
                	document.getElementById("sb2").style.height=bildHoehe+"px";
                	document.getElementById("sb2").style.width=bildBreite+"px";
		}
	}

        document.getElementById("sb3").style.height=bildHoehe+"px";
        document.getElementById("sb3").style.width=bildBreite+"px";
        document.getElementById("sb4").style.height=bildHoehe+"px";
        document.getElementById("sb4").style.width=bildBreite+"px";
	document.getElementById("sb5").style.height=bildHoehe+"px";
        document.getElementById("sb5").style.width=bildBreite+"px";
        document.getElementById("sb6").style.height=bildHoehe+"px";
        document.getElementById("sb6").style.width=bildBreite+"px";	

	document.getElementById("laden1").style.height=bildHoehe+"px";
	document.getElementById("laden1").style.width=bildBreite+"px";
	document.getElementById("laden2").style.height=bildHoehe+"px";
	document.getElementById("laden2").style.width=bildBreite+"px";
	document.getElementById("laden3").style.height=bildHoehe+"px";
	document.getElementById("laden3").style.width=bildBreite+"px";	
	document.getElementById("laden4").style.height=bildHoehe+"px";
	document.getElementById("laden4").style.width=bildBreite+"px";
	document.getElementById("laden5").style.height=bildHoehe+"px";
	document.getElementById("laden5").style.width=bildBreite+"px";
	document.getElementById("laden6").style.height=bildHoehe+"px";
	document.getElementById("laden6").style.width=bildBreite+"px";
// Neu
	if(bildgeladen[1]==1){bildformate1();}
	if(bildgeladen[2]==1){bildformate2();}
	if(bildgeladen[3]==1){bildformate3();}
	if(bildgeladen[4]==1){bildformate4();}
	if(bildgeladen[5]==1){bildformate5();}
	if(bildgeladen[6]==1){bildformate6();}

   }
   seitenverhaeltnisAlt = seitenverhaeltnis;
   }

// Seiteninhalt
	blaettern();
function blaettern(){
	
	seiten();
	nr=sstation-1;
	nv=sstation+1;
	if(nr<1){nr=seite;}
	if(nv>seite){nv=1;}

        sbz1=[0,1]; // Anzahl der Stationen
        sbz2=[0,1];
        sbz3=[0,1];
        sbz4=[0,1];
        sbz5=[0,1];
        sbz6=[0,1];
	 
	stationsgroesse();

	for(var i=1;i<=seite;i++){
	        document.getElementById("b"+i).innerHTML= seitentitel[i];
	}
	
	for(var i=1;i<=12;i++){
	        document.getElementById("q"+i).innerHTML= q[i];
	}


        document.getElementById("mor").innerHTML= seitentitel[nr];
        document.getElementById("mov").innerHTML= seitentitel[nv];
        document.getElementById("mur").innerHTML= seitentitel[nr];
        document.getElementById("muv").innerHTML= seitentitel[nv];

        document.getElementById("stationsueberschrift").innerHTML= stationsueberschrift;
        document.getElementById("stationsnummer").innerHTML=stationsnummer+" | "+datum;
        document.getElementById("st").innerHTML=starttext;

// Neu
	console.log(vidGeladen, seite, sstation);
	if(vidGeladen != sstation){document.getElementById("videof").pause();}
	document.getElementById("video").style.display="none"; 
	if(panorama[1] == "v"){
      	  document.getElementById("videof").src="abb/"+sb1[1];
	  vidGeladen=0;	
	}
	else{
	        document.getElementById("spb1").src="abb/"+sb1[1];

 // Neu
		bildgeladen[1]=0; 

	}


        document.getElementById("spb2").src="abb/"+sb2[1];

        document.getElementById("sb1").src="abb/"+sb1[1];
        document.getElementById("sb2").src="abb/"+sb2[1];
        document.getElementById("sb3").src="abb/"+sb3[1];
        document.getElementById("sb4").src="abb/"+sb4[1];
        document.getElementById("sb5").src="abb/"+sb5[1];
        document.getElementById("sb6").src="abb/"+sb6[1];

 // Neu
		bildgeladen[2]=0; 
		bildgeladen[3]=0; 
		bildgeladen[4]=0; 
		bildgeladen[5]=0; 
		bildgeladen[6]=0;

        document.getElementById("sbt1").innerHTML=sbt1[1];
        document.getElementById("sbt2").innerHTML=sbt2[1];
        document.getElementById("sbt3").innerHTML=sbt3[1];
        document.getElementById("sbt4").innerHTML=sbt4[1];
        document.getElementById("sbt5").innerHTML=sbt5[1];
        document.getElementById("sbt6").innerHTML=sbt6[1];

        document.getElementById("at1").innerHTML=at1;
        document.getElementById("at2").innerHTML=at2;
        document.getElementById("at3").innerHTML=at3;
        document.getElementById("at4").innerHTML=at4;
        document.getElementById("at5").innerHTML=at5;

        document.getElementById("atu1").innerHTML=atu1;
        document.getElementById("atu2").innerHTML=atu2;
        document.getElementById("atu3").innerHTML=atu3;
        document.getElementById("atu4").innerHTML=atu4;
        document.getElementById("atu5").innerHTML=atu5;

        if((starttext=="")||(starttext==" ")){document.getElementById("st").style.display="none";}
                else{document.getElementById("st").style.display="block";}

 	if((sbt1[1]=="")||(sbt1[1]==" ")){document.getElementById("sbt1").style.display="none";}
                else{document.getElementById("sbt1").style.display="block";}
        if((sbt2[1]=="")||(sbt2[1]==" ")){document.getElementById("sbt2").style.display="none";}
                else{document.getElementById("sbt2").style.display="block";}
        if((sbt3[1]=="")||(sbt3[1]==" ")){document.getElementById("sbt3").style.display="none";}
                else{document.getElementById("sbt3").style.display="block";}
        if((sbt4[1]=="")||(sbt4[1]==" ")){document.getElementById("sbt4").style.display="none";}
                else{document.getElementById("sbt4").style.display="block";}
        if((sbt5[1]=="")||(sbt5[1]==" ")||(sstation <= 30)){document.getElementById("sbt5").style.display="none";}
                else{document.getElementById("sbt5").style.display="block";}
        if((sbt6[1]=="")||(sbt6[1]==" ")||(sstation <= 30)){document.getElementById("sbt6").style.display="none";}
                else{document.getElementById("sbt6").style.display="block";}


        if((at1=="")||(at1==" ")){document.getElementById("at1").style.display="none";}
                else{document.getElementById("at1").style.display="block";}
        if((at2=="")||(at2==" ")){document.getElementById("at2").style.display="none";}
                else{document.getElementById("at2").style.display="block";}
        if((at3=="")||(at3==" ")){document.getElementById("at3").style.display="none";}
                else{document.getElementById("at3").style.display="block";}
        if((at4=="")||(at4==" ")){document.getElementById("at4").style.display="none";}
                else{document.getElementById("at4").style.display="block";}
        if((at5=="")||(at5==" ")){document.getElementById("at5").style.display="none";}
                else{document.getElementById("at5").style.display="block";}


        if((atu1=="")||(atu1==" ")){document.getElementById("atu1").style.display="none";}
                else{document.getElementById("atu1").style.display="block";}
        if((atu2=="")||(atu2==" ")){document.getElementById("atu2").style.display="none";}
                else{document.getElementById("atu2").style.display="block";}
        if((atu3=="")||(atu3==" ")){document.getElementById("atu3").style.display="none";}
                else{document.getElementById("atu3").style.display="block";}
        if((atu4=="")||(atu4==" ")){document.getElementById("atu4").style.display="none";}
                else{document.getElementById("atu4").style.display="block";}
        if((atu5=="")||(atu5==" ")){document.getElementById("atu5").style.display="none";}
                else{document.getElementById("atu5").style.display="block";}

        document.getElementById("sb1").style.display="none";
	document.getElementById("sb2").style.display="none";
        document.getElementById("sb3").style.display="none";
	document.getElementById("sb4").style.display="none";
        document.getElementById("sb5").style.display="none";
	document.getElementById("sb6").style.display="none";
        document.getElementById("pb1").style.display="none";
        document.getElementById("wisch1").style.display="none";
        document.getElementById("pb2").style.display="none";
        document.getElementById("wisch2").style.display="none";
        document.getElementById("canvas").style.display="none";
	document.getElementById("d3b").style.display="none";

	document.getElementById("laden1").style.display="block";
	document.getElementById("laden2").style.display="block";
	document.getElementById("laden3").style.display="block";
	document.getElementById("laden4").style.display="block";
	document.getElementById("laden5").style.display="block";
	document.getElementById("laden6").style.display="block";

//Neu
	document.getElementById("video").style.display="none";

	
	if((sb1[1]=="")||(sb1[1]==" ")){
		if(panorama[1]!="p"){document.getElementById("laden1").style.display="none";}
		else{document.getElementById("laden1").style.display="block";}
	}
	if((sb2[1]=="")||(sb2[1]==" ")){
		if((panorama[2]!="p")&&(panorama[2]!="d")){document.getElementById("laden2").style.display="none";}
		else{document.getElementById("laden2").style.display="block";}
	}
	if((sb3[1]=="")||(sb3[1]==" ")){document.getElementById("laden3").style.display="none";}
	if((sb4[1]=="")||(sb4[1]==" ")){document.getElementById("laden4").style.display="none";}
	if((sb5[1]=="")||(sb5[1]==" ")||(sstation <= 30)){document.getElementById("laden5").style.display="none";}
	if((sb6[1]=="")||(sb6[1]==" ")||(sstation <= 30)){document.getElementById("laden6").style.display="none";}

	if(panorama[2]=="d"){
		document.getElementById("canvas").style.display="block";
		document.getElementById("laden2").style.display="none";
		ddLaden=1;
		d3Stop=0;
		d3stop();
		dd3();
	}
	else{
		document.getElementById("canvas").style.display="none";
		document.getElementById("d3b").style.display="none";
		document.getElementById("d3laden").style.display="none";
		document.getElementById("d3stop").style.display="none";
		ddAnAus=0;
	}


        for(var i=1;i<7;i++){
                if((sb1[i]!="")&&(sb1[i]!=" ")){sbz1[0]=sbz1[0]+1;}
                if((sb2[i]!="")&&(sb2[i]!=" ")){sbz2[0]=sbz2[0]+1;}
                if((sb3[i]!="")&&(sb3[i]!=" ")){sbz3[0]=sbz3[0]+1;}
                if((sb4[i]!="")&&(sb4[i]!=" ")){sbz4[0]=sbz4[0]+1;}
                if((sb5[i]!="")&&(sb5[i]!=" ")){sbz5[0]=sbz5[0]+1;}
                if((sb6[i]!="")&&(sb6[i]!=" ")){sbz6[0]=sbz6[0]+1;}
		if(sstation <= 30){sbz5[0]=0;}
		if(sstation <= 30){sbz6[0]=0;}
        }
// Neu
	if(panorama[1]=="p" || panorama[1]=="v"){sbz1[0]=1;}
	if(panorama[2]=="p" || panorama[2]=="d"){sbz2[0]=1;}

        if(sbz1[0] < 2){document.getElementById("sb1Links").style.display="none";document.getElementById("sb1Rechts").style.display="none";}
                else{document.getElementById("sb1Links").style.display="block";document.getElementById("sb1Rechts").style.display="block";}
        if(sbz2[0] < 2){document.getElementById("sb2Links").style.display="none";document.getElementById("sb2Rechts").style.display="none";}
                else{document.getElementById("sb2Links").style.display="block";document.getElementById("sb2Rechts").style.display="block";}
        if(sbz3[0] < 2){document.getElementById("sb3Links").style.display="none";document.getElementById("sb3Rechts").style.display="none";}
                else{document.getElementById("sb3Links").style.display="block";document.getElementById("sb3Rechts").style.display="block";}
        if(sbz4[0] < 2){document.getElementById("sb4Links").style.display="none";document.getElementById("sb4Rechts").style.display="none";}
                else{document.getElementById("sb4Links").style.display="block";document.getElementById("sb4Rechts").style.display="block";}
        if(sbz5[0] < 2){document.getElementById("sb5Links").style.display="none";document.getElementById("sb5Rechts").style.display="none";}
                else{document.getElementById("sb5Links").style.display="block";document.getElementById("sb5Rechts").style.display="block";}
        if(sbz6[0] < 2){document.getElementById("sb6Links").style.display="none";document.getElementById("sb6Rechts").style.display="none";}
                else{document.getElementById("sb6Links").style.display="block";document.getElementById("sb6Rechts").style.display="block";}


	if(menueunten==1){window.scroll(0,0); menueunten=0;}

}
        document.getElementById("sb1Links").addEventListener("click", function(){sbz1[1]=sbz1[1]-1; ksb1();});
        document.getElementById("sb1Rechts").addEventListener("click", function(){sbz1[1]=sbz1[1]+1; ksb1();});
        function ksb1(){
                if(sbz1[1] > sbz1[0]){sbz1[1]=1;}
                if(sbz1[1] < 1){sbz1[1]=sbz1[0]}
                for(var i=1;i < sbz1[0]+1;i++){
                        if(sbz1[1] == i){
                                 document.getElementById("sb1").src="abb/"+sb1[i];
                                 document.getElementById("sbt1").innerHTML=sbt1[i];
                        }
                }
        }

        document.getElementById("sb2Links").addEventListener("click", function(){sbz2[1]=sbz2[1]-1; ksb2();});
        document.getElementById("sb2Rechts").addEventListener("click", function(){sbz2[1]=sbz2[1]+1; ksb2();});
        function ksb2(){
                if(sbz2[1] > sbz2[0]){sbz2[1]=1;}
                if(sbz2[1] < 1){sbz2[1]=sbz2[0]}
                for(var i=1;i<sbz2[0]+1;i++){
                        if(sbz2[1] == i){
                                 document.getElementById("sb2").src="abb/"+sb2[i];
                                 document.getElementById("sbt2").innerHTML=sbt2[i];
                        }
                }
        }

        document.getElementById("sb3Links").addEventListener("click", function(){sbz3[1]=sbz3[1]-1; ksb3();});
        document.getElementById("sb3Rechts").addEventListener("click", function(){sbz3[1]=sbz3[1]+1; ksb3();});
        function ksb3(){
                if(sbz3[1] > sbz3[0]){sbz3[1]=1;}
                if(sbz3[1] < 1){sbz3[1]=sbz3[0]}
                for(var i=1;i<sbz3[0]+1;i++){
                        if(sbz3[1] == i){
                                 document.getElementById("sb3").src="abb/"+sb3[i];
                                 document.getElementById("sbt3").innerHTML=sbt3[i];
                        }
                }
        }

        document.getElementById("sb4Links").addEventListener("click", function(){sbz4[1]=sbz4[1]-1; ksb4();});
        document.getElementById("sb4Rechts").addEventListener("click", function(){sbz4[1]=sbz4[1]+1; ksb4();});
        function ksb4(){
                if(sbz4[1] > sbz4[0]){sbz4[1]=1;}
                if(sbz4[1] < 1){sbz4[1]=sbz4[0];}
                for(var i=1;i<sbz4[0]+1;i++){
                        if(sbz4[1] == i){
                                 document.getElementById("sb4").src="abb/"+sb4[i];
                                 document.getElementById("sbt4").innerHTML=sbt4[i];
                                 }
                }
        }

        document.getElementById("sb5Links").addEventListener("click", function(){sbz5[1]=sbz5[1]-1; ksb5();});
        document.getElementById("sb5Rechts").addEventListener("click", function(){sbz4[1]=sbz5[1]+1; ksb5();});
        function ksb5(){
                if(sbz5[1] > sbz5[0]){sbz5[1]=1;}
                if(sbz5[1] < 1){sbz5[1]=sbz5[0];}
                for(var i=1;i<sbz5[0]+1;i++){
                        if(sbz5[1] == i){
                                 document.getElementById("sb5").src="abb/"+sb4[i];
                                 document.getElementById("sbt5").innerHTML=sbt4[i];
                                 }
                }
        }
        document.getElementById("sb6Links").addEventListener("click", function(){sbz6[1]=sbz6[1]-1; ksb6();});
        document.getElementById("sb6Rechts").addEventListener("click", function(){sbz6[1]=sbz6[1]+1; ksb6();});
        function ksb6(){
                if(sbz6[1] > sbz6[0]){sbz6[1]=1;}
                if(sbz6[1] < 1){sbz6[1]=sbz6[0];}
                for(var i=1;i<sbz6[0]+1;i++){
                        if(sbz6[1] == i){
                                 document.getElementById("sb6").src="abb/"+sb6[i];
                                 document.getElementById("sbt6").innerHTML=sbt6[i];
                                 }
                }
        }

// Fenstergröße anpassen bei Größenänderungen
        window.addEventListener("resize", stationsgroesse,);
        window.addEventListener("touchstart", function(){touch=1;});
        window.addEventListener("touchmove", function(){touch=1;});
        window.addEventListener("touchend", function(){touch=1;});
        window.addEventListener("touchcancel", function(){touch=1;});

// Menübutton betätigen
	document.getElementById("morb").addEventListener("click", function(){sstation=nr; blaettern();});
	document.getElementById("movb").addEventListener("click", function(){sstation=nv; blaettern();});
	document.getElementById("logo").addEventListener("click", function(){window.open("https://nordpfeil-ruegen.de")});
 	document.getElementById("murb").addEventListener("click", function(){sstation=nr; menueunten=1; blaettern();});
 	document.getElementById("muvb").addEventListener("click", function(){sstation=nv; menueunten=1; blaettern();});
	document.getElementById("logo_un").addEventListener("click", function(){window.open("https://nordpfeil-ruegen.de")});

	document.getElementById("b1").addEventListener("click", function(){sstation=1; window.scroll(0,0);blaettern();});
	document.getElementById("b2").addEventListener("click", function(){sstation=2; window.scroll(0,0);blaettern();});
	document.getElementById("b3").addEventListener("click", function(){sstation=3; window.scroll(0,0);blaettern();});
	document.getElementById("b4").addEventListener("click", function(){sstation=4; window.scroll(0,0);blaettern();});
	document.getElementById("b5").addEventListener("click", function(){sstation=5; window.scroll(0,0);blaettern();});
	document.getElementById("b6").addEventListener("click", function(){sstation=6; window.scroll(0,0);blaettern();});
	document.getElementById("b7").addEventListener("click", function(){sstation=7; window.scroll(0,0);blaettern();});
	document.getElementById("b8").addEventListener("click", function(){sstation=8; window.scroll(0,0);blaettern();});
	document.getElementById("b9").addEventListener("click", function(){sstation=9; window.scroll(0,0);blaettern();});
	document.getElementById("b10").addEventListener("click", function(){sstation=10; window.scroll(0,0);blaettern();});
	document.getElementById("b11").addEventListener("click", function(){sstation=11; window.scroll(0,0);blaettern();});
	document.getElementById("b12").addEventListener("click", function(){sstation=12; window.scroll(0,0);blaettern();});
	document.getElementById("b13").addEventListener("click", function(){sstation=13; window.scroll(0,0);blaettern();});
	document.getElementById("b14").addEventListener("click", function(){sstation=14; window.scroll(0,0);blaettern();});
	document.getElementById("b15").addEventListener("click", function(){sstation=15; window.scroll(0,0);blaettern();});
	document.getElementById("b16").addEventListener("click", function(){sstation=16; window.scroll(0,0);blaettern();});
	document.getElementById("b17").addEventListener("click", function(){sstation=17; window.scroll(0,0);blaettern();});
	document.getElementById("b18").addEventListener("click", function(){sstation=18; window.scroll(0,0);blaettern();});
	document.getElementById("b19").addEventListener("click", function(){sstation=19; window.scroll(0,0);blaettern();});
	document.getElementById("b20").addEventListener("click", function(){sstation=20; window.scroll(0,0);blaettern();});
	document.getElementById("b21").addEventListener("click", function(){sstation=21; window.scroll(0,0);blaettern();});
	document.getElementById("b22").addEventListener("click", function(){sstation=22; window.scroll(0,0);blaettern();});
	document.getElementById("b23").addEventListener("click", function(){sstation=23; window.scroll(0,0);blaettern();});
	document.getElementById("b24").addEventListener("click", function(){sstation=24; window.scroll(0,0);blaettern();});
	document.getElementById("b25").addEventListener("click", function(){sstation=25; window.scroll(0,0); blaettern();});
	document.getElementById("b26").addEventListener("click", function(){sstation=26; window.scroll(0,0); blaettern();});
	document.getElementById("b27").addEventListener("click", function(){sstation=27; window.scroll(0,0); blaettern();});
	document.getElementById("b28").addEventListener("click", function(){sstation=28; window.scroll(0,0); blaettern();});
	document.getElementById("b29").addEventListener("click", function(){sstation=29; window.scroll(0,0); blaettern();});
	document.getElementById("b30").addEventListener("click", function(){sstation=30; window.scroll(0,0); blaettern();});
	document.getElementById("b31").addEventListener("click", function(){sstation=31; window.scroll(0,0); blaettern();});
	document.getElementById("b32").addEventListener("click", function(){sstation=32; window.scroll(0,0); blaettern();});
	document.getElementById("b33").addEventListener("click", function(){sstation=33; window.scroll(0,0); blaettern();});
	document.getElementById("b34").addEventListener("click", function(){sstation=34; window.scroll(0,0); blaettern();});
	document.getElementById("b35").addEventListener("click", function(){sstation=35; window.scroll(0,0); blaettern();});
	document.getElementById("b36").addEventListener("click", function(){sstation=36; window.scroll(0,0); blaettern();});

	document.getElementById("hoch").addEventListener("click", function(){window.scroll(0,0);});


// 3D aktivieren


	function dd3(){
		if(d3Stop==3){
			d3Stop=2;
			d3stop();
		}
		if(panorama[2] == "d"){window.setTimeout(function(){dd3();},1000);}
	}

	var d3_bew;
	document.getElementById("d3laden").addEventListener("click", function(){
		clearTimeout(d3_bew);
		if(d3Stop == 1){
			d3Stop = 2;
			d3stop();
		}
		else{
		if(d3Stop == 2){
			d3Stop = 1;
			d3stop();
		}
		}	
	});
	
	document.getElementById("d3b").addEventListener("click", function(){
		clearTimeout(d3_bew);
		if(d3Stop == 1){
			d3res=0;
			d3Stop = 2;
			d3stop();
		}
		else{
		if(d3Stop == 2){
			d3Stop = 1;
			d3stop();
		}
		}	
	});
	
	document.getElementById("d3stop").addEventListener("click", function(){
		clearTimeout(d3_bew);
		if(d3Stop == 1){
			d3Stop = 2;
			d3stop();
		}
		else{
		if(d3Stop == 2){
			d3Stop = 1;
			d3stop();
		}
		}	
	});

	function d3stop(){
		if(d3Stop == 0){ // Kein Canvasmodell
			document.getElementById("d3laden").style.display="none";
			document.getElementById("d3stop").style.display="none";
			document.getElementById("d3b").style.display="none";
			document.getElementById("d3stop").style.width=0+"px";
                	document.getElementById("d3stop").style.height=0+"px";
			if(panorama[2] == "d"){
				document.getElementById("canvas").style.height=bildHoehe+"px";
        			document.getElementById("canvas").style.width=bildBreite+"px";
				document.getElementById("canvas").style.display="block";
				setTimeout(function(){
					document.getElementById("d3b").style.display="block";

					document.getElementById("d3laden").style.backgroundColor = "black";
					document.getElementById("d3laden").style.display="block";
                			document.getElementById("d3laden").style.width=bildBreite+"px";
                			document.getElementById("d3laden").style.height=bildHoehe+bildBreite*0.08+"px";
					document.getElementById("d3laden").style.top=document.getElementById("canvas").getBoundingClientRect().top+pageYOffset+"px";
                			document.getElementById("d3laden").style.left=document.getElementById("canvas").getBoundingClientRect().left+pageXOffset+"px";

					document.getElementById("d3stop").src="../nextdim/3d/laden.gif";
					document.getElementById("d3stop").style.display="block";
					document.getElementById("d3stop").style.width=100+"px";
                			document.getElementById("d3stop").style.height=20+"px";
					document.getElementById("d3stop").style.top=document.getElementById("canvas").getBoundingClientRect().top+pageYOffset+bildHoehe/2+"px";
                			document.getElementById("d3stop").style.left=document.getElementById("canvas").getBoundingClientRect().left+pageXOffset+bildBreite/2-50+"px";
				},100);

			}
		}
		if(panorama[2] == "d"){
		if(d3Stop == 1){ // 3D an
			d3ta=1;
			document.getElementById("d3laden").style.display="none";
			document.getElementById("d3stop").style.display="none";
			document.getElementById("d3b").src="../nextdim/3d/3d_bewegen.gif";
			document.getElementById("d3b").style.display="block";
			d3_bew=setTimeout(function(){document.getElementById("d3b").src="../nextdim/3d/3d_aus.png";},4000); 
			if(bildHoehe > window.innerHeight*2/3){
				document.getElementById("d3stop").src="../nextdim/3d/kreuz.png";
                		document.getElementById("d3stop").style.width=30+"px";
                		document.getElementById("d3stop").style.height=30+"px";
				document.getElementById("d3stop").style.display="block";
				document.getElementById("d3stop").style.top=document.getElementById("canvas").getBoundingClientRect().top+pageYOffset+"px";
                		document.getElementById("d3stop").style.left=document.getElementById("canvas").getBoundingClientRect().left+pageXOffset+"px";
				document.getElementById("d3stop").style.display="block";
			}

		}

		if(d3Stop == 2){ // 3D aus
			document.getElementById("d3laden").style.backgroundColor = "transparent";
			document.getElementById("d3laden").style.display="block";
                	document.getElementById("d3laden").style.width=bildBreite+"px";
                	document.getElementById("d3laden").style.height=bildHoehe+"px";
			document.getElementById("d3laden").style.top=document.getElementById("canvas").getBoundingClientRect().top+pageYOffset+"px";
                	document.getElementById("d3laden").style.left=document.getElementById("canvas").getBoundingClientRect().left+pageXOffset+"px";

			document.getElementById("d3b").src="../nextdim/3d/3d_an.png";
			document.getElementById("d3b").style.display="block";

			document.getElementById("d3stop").style.display="none";
		}
		}
	}
	start=0;
</script>


<script type="module">
//=====================================================================
// SCRIPT FÜR DIE 3D_DARSTELLUNGEN
//=====================================================================

// import * as THREE from "/Documents/threejs/nextdim/3d/build/three.module.js";
// import {OrbitControls} from "/Documents/threejs/nextdim/3d/examples/jsm/controls/OrbitControls.js";
 
 import * as THREE from "/nextdim/3d/build/three.module.js";
 import {OrbitControls} from "/nextdim/3d/examples/jsm/controls/OrbitControls.js";
// import {Rhino3dmLoader} from "/nextdim/3d/examples/jsm/loaders/3DMLoader.js";

var camera;
 
	dds();
	function dds(){
		if(ddLaden==1){
			
			ddAnAus=1;
			ddLaden=0;
			ddSeite();
		}
		if(d3ta==1){d3ta=0;d3st();}

		window.setTimeout(function(){dds();},1000);
	}

function ddSeite(){
// STATIONSWERTE FESTLEGEN
 
	eval(funktion3d+"();");



// GRUNDEISTELLUNGEN
 	document.getElementById("canvas").style.height=bildHoehe+"px";
        document.getElementById("canvas").style.width=bildBreite+"px";
 	const canvas = document.getElementById("canvas");
  	const renderer = new THREE.WebGLRenderer({canvas});

   	const fov = 45;   //vertikales Sichtfeld der Camera
   	const aspect =1.5; //canvas.width/canvas.height; 
   	const near = 0.01;    // Ab wann es sichtbar sein soll vor der Camera
   	const far = 150;   // Sichtbarkeit Entfernung von der Camera
   	camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
   	camera.position.set(ddCamPx,ddCamPy,ddCamPz);   //x,z,y
   	camera.lookAt(ddCamZx,ddCamZy,ddCamZz);
//   	camera.rotation.z = Math.PI;


// STEUERUNG DER BEWEGUNGEN
  	const controls = new OrbitControls(camera, canvas);         // Funktion zum Zoomen und Scrollen
  	controls.target.set(ddCamZx,ddCamZy,ddCamZz);
// 	controls.target.set(0.5,0.5,0.5);
// 	controls.minPolarAngle = 0; // radians			// Bewegung der Kamera auf der z-Achse  max/min
//	controls.maxPolarAngle = Math.PI*2; // radians
  	controls.update();


// SCENE ERSTELLEN
   	const scene = new THREE.Scene();
   	scene.background = new THREE.Color(ddHintergrund);            // Anzeige der X/Y/Z Achsen


// ANZEIGEN DER ACHSEN (rot,grün,blau) von Vorn: rot=x; grün=y; blau=z
if(ddAchsen != false){
   	const axesHelper = new THREE.AxesHelper( ddAchsen );
   	scene.add( axesHelper );
}
  
// HEMISPHERENLICHT (UMGEBUNGSLICHT)
if(ddUmgeblStaerke != false){
	const skyColor = new THREE.Color(ddUmgeblfarbe);
      	const groundColor = new THREE.Color(ddUmgeblgrundfarbe);
      	const intensity = ddUmgeblStaerke;
      	const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);         // Umgebunslicht, immitiert die Sonne
      	light.position.set(ddUmgeblPx,ddUmgeblPy,ddUmgeblPz);
      	scene.add(light);
}

 
// PUNKTLICHT 1
if(ddPunktlAnzahl!=0){
	for(var i=1; i<ddPunktlAnzahl+1; i++){
		if(ddPunktlStaerke[i] != false){
			ddPunktl[i] = new THREE.PointLight( ddPunktlfarbe[i], ddPunktlStaerke[i], 0, 1);
			ddPunktl[i].position.set( ddPunktlPx[i], ddPunktlPy[i], ddPunktlPz[i]);
			scene.add(ddPunktl[i]);
		}
	}
}


// SPOTS FÜR PUNKTUELLE BELEUCHTUNG
if(ddSpotlAnzahl!=0){
	for(var i=1; i<ddSpotlAnzahl+1; i++){
		if(ddSpotlStaerke[i] != false){
	     		ddSpot[i] = new THREE.SpotLight(ddSpotlfarbe[i]);
	     		ddSpot[i].position.set (ddSpotlPx[i],ddSpotlPy[i],ddSpotlPz[i]);
	     		ddSpot[i].power = ddSpotlStaerke[i]; 
	     		scene.add(ddSpot[i]);
		}
	}
}


// TEXTUREN LADEN
         var ddTextureloader = new THREE.TextureLoader();
if(ddTexturAnzahl!=0){
	for(var i=1; i<ddTexturAnzahl+1; i++){
		ddTexturmap[i] = ddTextureloader.load("../nextdim/3d/texturen/"+ddTexturDatei[i]);
	}
}


// OBJEKTE LADEN
	var ddObjloader1; var ddObjloader2; var ddObjloader3; var ddObjloader4; var ddObjloader5;
	var ddObjloader6; var ddObjloader7; var ddObjloader8; var ddObjloader9; var ddObjloader10;

	if(ddObjAnzahl>0){
		ddObjloader1 = new THREE.ObjectLoader();
		ddObjloader1.load("../nextdim/3d/"+ddObjDatei[1],function(object1){object1.name= ddObjName[1]; scene.add(object1);});
	}
	if(ddObjAnzahl>1){
		ddObjloader2 = new THREE.ObjectLoader();
		ddObjloader2.load("../nextdim/3d/"+ddObjDatei[2],function(object2){object2.name= ddObjName[2]; scene.add(object2);});
	}
	if(ddObjAnzahl>2){
		ddObjloader3 = new THREE.ObjectLoader();
		ddObjloader3.load("../nextdim/3d/"+ddObjDatei[3],function(object3){object3.name= ddObjName[3]; scene.add(object3);});
	}
	if(ddObjAnzahl>3){
		ddObjloader4 = new THREE.ObjectLoader();
		ddObjloader4.load("../nextdim/3d/"+ddObjDatei[4],function(object4){object4.name= ddObjName[4]; scene.add(object4);});
	}
	if(ddObjAnzahl>4){
		ddObjloader5 = new THREE.ObjectLoader();
		ddObjloader5.load("../nextdim/3d/"+ddObjDatei[5],function(object5){object5.name= ddObjName[5]; scene.add(object5);});
	}
	if(ddObjAnzahl>5){
		ddObjloader6 = new THREE.ObjectLoader();
		ddObjloader6.load("../nextdim/3d/"+ddObjDatei[6],function(object6){object6.name= ddObjName[6]; scene.add(object6);});		
	}
	if(ddObjAnzahl>6){
		ddObjloader7 = new THREE.ObjectLoader();
		ddObjloader7.load("../nextdim/3d/"+ddObjDatei[7],function(object7){object7.name= ddObjName[7]; scene.add(object7);});
	}
 	if(ddObjAnzahl>7){
		ddObjloader8 = new THREE.ObjectLoader();
		ddObjloader8.load(ddObjDatei[8],function(object8){object8.name= ddObjName[8]; scene.add(object8);});
	}
	if(ddObjAnzahl>8){
		ddObjloader9 = new THREE.ObjectLoader();
		ddObjloader9.load(ddObjDatei[9],function(object9){object9.name= ddObjName[9]; scene.add(object9);});
	}
	if(ddObjAnzahl>9){
		ddObjloader10 = new THREE.ObjectLoader();
		ddObjloader10.load(ddObjDatei[10],function(object10){object10.name= ddObjName[10]; scene.add(object10);});
	}

// OBJEKTE ANSTEUERN
 	var scAnzObj;
	if(ddAchsen == false){
		scAnzObj=1+ddPunktlAnzahl+ddSpotlAnzahl+ddObjAnzahl;		// Zählen der Objekte in der Szene
	}
	else{
		scAnzObj=2+ddPunktlAnzahl+ddSpotlAnzahl+ddObjAnzahl;		// Zählen der Objekte in der Szene
	}

objAnst();
function objAnst(){							
if(scene.children[scAnzObj-1]){	
	for(var i=0;i<scAnzObj;i++){					// Prüfen ob das letzte Objekt geladen ist
		for(var j=1;j<ddObjAnzahl+1;j++){				
			if(scene.children[i].name == ddObjName[j]){	// Wenn der Objektname des Szeneobjekts gleich dem Objnamen der js-Datei	
				ddObjSzenennummer[j]=i;			//	wird in OSn Position i  die Nummer des Szeneobjekts abgespeichert.
									
			}	
		}
	}
	objEigenschaften();						// Weiter zum Eigenschaften anpassen

}
else{setTimeout(objAnst,1000);}						// Schleife, sollten die Objekte in Szene noch nicht geladen sein
}

var ddObjPfad;
function objEigenschaften(){


	for(var i=1;i<ddObjAnzahl+1;i++){
			// drehen des Objekts
		 
		scene.children[ddObjSzenennummer[i]].rotateX( ddObjRotatioNx[i]/360*2*Math.PI);
		scene.children[ddObjSzenennummer[i]].rotateY( ddObjRotatioNy[i]/360*2*Math.PI);
		scene.children[ddObjSzenennummer[i]].rotateZ( ddObjRotatioNz[i]/360*2*Math.PI);
		scene.children[ddObjSzenennummer[i]].visible = ddObjVisible[i]; 
		
		for(var j=0;j<ddObjAnzChildren[i];j++){
			ddObjPfad=scene.children[ddObjSzenennummer[i]].children[0].children[j].material;
			ddObjPfad.transparent= ddObjTransparenz[i];
                      	if(ddObjMetalness[i]!=false){ddObjPfad.metalness=ddObjMetalness[i];}
			if(ddObjEmessive[i]!=false){ddObjPfad.emissiveIntensity= ddObjEmessive[i];}
			if(ddObjOpacity[i]!=false){ddObjPfad.opacity=ddObjOpacity[i];}
			if(ddObjMap[i]!=false){ddObjPfad.map=ddObjMap[i];}
			if(ddObjBumpmap[i]!=""){ddObjPfad.bumpMap=new THREE.TextureLoader().load("../nextdim/3d/texturen/"+ddObjBumpmap[i]);}
			if(ddObjBump[i]!=false){ddObjPfad.bumpScale=ddObjBump[i];}
                        if(ddObjRough[i]!=false){ddObjPfad.roughness=ddObjRough[i];}
			if(ddObjRoughmap[i]!=false){ddObjPfad.roughnessMap=ddObjRoughmap[i];}
                      	if(ddObjNormalmap[i]!=false){ddObjPfad.normalMap=ddObjNormalmap[i];}
			if(ddObjDisplacemap[i]!=false){ddObjPfad.displacementMap=ddObjDisplacemap[i];}
			if(ddObjDisplace[i]!=false){ddObjPfad.displacementScale=ddObjDisplace[i];}
			if(ddObjMetalmap[i]!=false){ddObjPfad.metalnessMap=ddObjMetalmap[i];}
			if(ddObjAomap[i]!=false){ddObjPfad.aoMap=ddObjAomap[i];}
			if(ddObjAo[i]!=false){ddObjPfad.aoMapIntensity=ddObjAo[i];}
			if(ddObjColor[i]!=false){ddObjPfad.color=new THREE.Color(ddObjColor[i]);}
		}
		if(i==ddObjAnzahl){
			if(panorama[2] == "d"){d3Stop=3;}
		}
	}					

}


// RENDERN
	function render() {
      		renderer.render(scene, camera);
      		if(ddAnAus==1){requestAnimationFrame(render);}
   	}
   	requestAnimationFrame(render);
console.log(camera);
console.log(scene);
}


// SEITENGRÖSSENÄNDERUNGEN
	
	window.addEventListener("resize",
		function(){
			if(ddAnAus==1){
			 	ddAnAus=0;
				ddLaden=1;
				dds();
			}
		}
	);


		var ii=0;
		function d3st(){
			
			ii=ii+1;
			if(ii<20){camera.position.set(ddCamPx-ii*ddCamDreh,ddCamPy,ddCamPz);camera.lookAt(ddCamZx,ddCamZy,ddCamZz);}
			else{camera.position.set(ddCamPx-(40-ii)*ddCamDreh,ddCamPy,ddCamPz);camera.lookAt(ddCamZx,ddCamZy,ddCamZz);}
			if(ii<40){setTimeout(d3st,100);}
			else{ii=0;} 
		}

</script>
</body>
</html>