/* ===================================================================== */
/* Hintergrundfarbe                                                      */
/* ===================================================================== */

body{
   background-color: #860000;
}

/* ===================================================================== */
/* Haupthintergrundgrafik (breiter Viewport)                             */
/* ===================================================================== */

div#RedSun{
  position: relative;
  /*width: 100%;*/
  height: 57vw;
  background: url("../grafiken/home/speichenrad/RedSun.svg");
  background-repeat: no-repeat;
  background-size: 106%;
  background-position: -40px -25px;
  z-index: 1000;
}

/* ===================================================================== */
/* Grafiken der einzelnen Speichen (breiter Viewport)                    */
/* ===================================================================== */

/* ======================================================= Allgemeine Speicheneigenschaften */

div.Speiche{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 57vw;
  z-index: 0;
  transition: 0.2s;
}

/* ======================================================= Speichengrafiken */

div#SpeicheRadreisen{
  background: url("../grafiken/home/speichenrad/SpeicheRadreisen.svg");
  background-repeat: no-repeat;
  background-size: 106%;
  background-position: -40px -25px;
}

div#SpeicheZentralasien{
  background: url("../grafiken/home/speichenrad/SpeicheZentralasien.svg");
  background-repeat: no-repeat;
  background-size: 106%;
  background-position: -40px -25px;
}

div#SpeicheNepal{
  background: url("../grafiken/home/speichenrad/SpeicheNepal.svg");
  background-repeat: no-repeat;
  background-size: 106%;
  background-position: -40px -25px;
}

div#SpeichePhysik{
  background: url("../grafiken/home/speichenrad/SpeichePhysik.svg");
  background-repeat: no-repeat;
  background-size: 106%;
  background-position: -40px -25px;
}

/* ======================================================= Verschiebung der Speichen bei Hover */

div.transButtonRad:hover ~ div#SpeicheRadreisen    {top: -5px; left: -40px;}
div.transButtonZen:hover ~ div#SpeicheZentralasien {top: 10px; left: -35px;}
div.transButtonNep:hover ~ div#SpeicheNepal        {top: 15px; left: -30px;}
div.transButtonPhy:hover ~ div#SpeichePhysik       {top: 30px; left: -15px;}

/* ===================================================================== */
/* Beleuchtung der Sonnenstrahlen bei Hover (breiter Viewport)           */
/* ===================================================================== */

/* ======================================================= Allgemeine Eigenschaften beleuchteter Strahlen */

div.RedSunHover{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 57vw;
  z-index: 1500;
  opacity: 0;
  background-repeat: no-repeat;
  background-size: 106%;
  background-position: -40px -25px;
}

/* ======================================================= Individuelle Hintergrundbilder beleuchteter Strahlen */

div#RedSunHoverRadreisen   {background-image: url("../grafiken/home/speichenrad/RedSunHoverRadreisen.svg");}
div#RedSunHoverZentralasien{background-image: url("../grafiken/home/speichenrad/RedSunHoverZentralasien.svg");}
div#RedSunHoverNepal       {background-image: url("../grafiken/home/speichenrad/RedSunHoverNepal.svg");}
div#RedSunHoverPhysik      {background-image: url("../grafiken/home/speichenrad/RedSunHoverPhysik.svg");}

/* ======================================================= Beleuchtung der Sonnenstrahlen bei Hover */

div.transButtonRad:hover ~ div#RedSunHoverRadreisen   {opacity: 1;}
div.transButtonZen:hover ~ div#RedSunHoverZentralasien{opacity: 1;}
div.transButtonNep:hover ~ div#RedSunHoverNepal       {opacity: 1;}
div.transButtonPhy:hover ~ div#RedSunHoverPhysik      {opacity: 1;}

/* ===================================================================== */
/* Transparente Buttons (breiter Viewport)                               */
/* ===================================================================== */

/* ======================================================= Allgemeine Eigenschaften der transparenten Buttons */

/* Eigenschaften des Button-Divs */
div.transButton{
  position: absolute;
  z-index: 2000;
  /*border: 1px solid black;*/
}

/* Link als Block-Element */
div.transButton a {
  display: block;
  height: 100%;
}

/* ======================================================= Positionierung der transparenten Buttons */

div#transButtonRad1{height: 19.2vw;  width: 15.0vw;  left:  0.00vw;  top:  0.00vw;}     /* Radreisen */
div#transButtonRad2{height: 18.0vw;  width: 10.0vw;  left: 15.00vw;  top:  0.00vw;}
div#transButtonRad3{height: 17.3vw;  width: 10.0vw;  left: 25.00vw;  top:  0.00vw;}
div#transButtonRad4{height: 16.5vw;  width: 10.0vw;  left: 35.00vw;  top:  0.00vw;}
div#transButtonRad5{height: 13.7vw;  width: 10.0vw;  left: 45.00vw;  top:  2.00vw;}
div#transButtonRad6{height:  9.9vw;  width: 10.0vw;  left: 55.00vw;  top:  5.00vw;}
div#transButtonRad7{height:  6.9vw;  width:  7.2vw;  left: 65.00vw;  top:  8.00vw;}
div#transButtonZen1{height: 20.5vw;  width: 10.0vw;  left:  0.00vw;  top: 19.50vw;}     /* Zentralasien */
div#transButtonZen2{height: 17.0vw;  width: 10.0vw;  left: 10.00vw;  top: 19.50vw;}
div#transButtonZen3{height: 14.5vw;  width: 10.0vw;  left: 20.00vw;  top: 18.50vw;}
div#transButtonZen4{height: 12.5vw;  width: 10.0vw;  left: 30.00vw;  top: 17.50vw;}
div#transButtonZen5{height:  9.5vw;  width: 10.0vw;  left: 40.00vw;  top: 17.00vw;}
div#transButtonZen6{height:  7.5vw;  width: 10.0vw;  left: 50.00vw;  top: 16.00vw;}
div#transButtonZen7{height:  4.5vw;  width:  8.0vw;  left: 60.00vw;  top: 15.50vw;}
div#transButtonZen8{height:  2.5vw;  width:  5.0vw;  left: 68.00vw;  top: 15.00vw;}
div#transButtonNep1{height:  3.8vw;  width:  4.0vw;  left:  0.00vw;  top: 51.50vw;}     /* Nepal */
div#transButtonNep2{height:  5.0vw;  width: 50.0vw;  left:  0.00vw;  top: 46.50vw;}     
div#transButtonNep3{height:  5.0vw;  width: 56.0vw;  left:  0.00vw;  top: 41.50vw;}
div#transButtonNep4{height:  5.0vw;  width: 48.0vw;  left: 12.00vw;  top: 36.50vw;}
div#transButtonNep5{height:  3.0vw;  width: 42.5vw;  left: 22.00vw;  top: 33.50vw;}
div#transButtonNep6{height:  3.0vw;  width: 35.0vw;  left: 32.00vw;  top: 30.50vw;}
div#transButtonNep7{height:  4.0vw;  width: 29.0vw;  left: 41.00vw;  top: 26.50vw;}
div#transButtonNep8{height:  3.0vw;  width: 22.0vw;  left: 51.00vw;  top: 23.50vw;}
div#transButtonNep9{height:  3.0vw;  width: 14.5vw;  left: 61.00vw;  top: 20.50vw;}
div#transButtonPhy1{height:  4.0vw;  width: 13.0vw;  left: 46.00vw;  top: 51.50vw;}     /* Physik */
div#transButtonPhy2{height:  5.0vw;  width: 25.0vw;  left: 52.00vw;  top: 46.50vw;}
div#transButtonPhy3{height:  5.0vw;  width: 23.0vw;  left: 55.00vw;  top: 41.50vw;}
div#transButtonPhy4{height:  5.0vw;  width: 21.0vw;  left: 58.50vw;  top: 36.50vw;}
div#transButtonPhy5{height:  3.0vw;  width: 16.0vw;  left: 64.50vw;  top: 33.50vw;}
div#transButtonPhy6{height:  3.0vw;  width: 16.0vw;  left: 65.00vw;  top: 30.50vw;}
div#transButtonPhy7{height:  4.0vw;  width: 11.0vw;  left: 71.00vw;  top: 26.50vw;}
div#transButtonPhy8{height:  3.0vw;  width:  6.0vw;  left: 74.50vw;  top: 23.50vw;}

/* ===================================================================== */
/* Rote Sonne und Buttons (schmaler Viewport)                            */
/* ===================================================================== */

/* ======================================================= Rote Sonne (Willkommen) */

div#RedSunkl{
  position: relative;
  margin-bottom: 20vw;
  width: 100%;
  height: 35vw;
  background-image: url("../grafiken/home/speichenrad/klRedSun.svg");
  background-repeat: no-repeat;
  background-size: 150%;
  background-position: center bottom;
  z-index: 1000;
  /*border: 1px solid red;*/
}

/* ======================================================= Allgemeine Eigenschaften der Buttons */

a.Buttonkl{
  position: relative;
  display: block;
  height: 20vw;
  margin-top: 2vw;
  margin-bottom: 2vw;
  margin-left: 1%;
  margin-right: 1%;
  padding-left: 3%;
  /* Transition from Outset to Inset shadow does not work; but if one sets two shadows, it does */
  -webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0.0), 1px 1px 8px 2px rgba(0,0,0,0.7);
  -moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0.0), 2px 2px 8px 2px rgba(0,0,0,0.7);
  box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0.0), 0px 0px 8px 2px rgba(0,0,0,0.7);
  -webkit-transition: box-shadow 0.2s;
  -moz-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s; 
  color: white;
  background-repeat: no-repeat;
  background-position: right;
  background-size: auto 20vw;
}

/* ======================================================= Hover der Buttons */

a.Buttonkl:hover{
  /* Transition from Outset to Inset shadow does not work; but if one sets two shadows, it does */
  -webkit-box-shadow: inset 1px 1px 8px 2px rgba(0,0,0,0.7), 0px 0px 0px 0px rgba(0,0,0,0.0);
  -moz-box-shadow: inset 2px 2px 8px 2px rgba(0,0,0,0.7), 0px 0px 0px 0px rgba(0,0,0,0.0);
  box-shadow: inset 0px 0px 8px 2px rgba(0,0,0,0.7), 0px 0px 0px 0px rgba(0,0,0,0.0);
}

/* ======================================================= Spezielle Eigenschaften der roten Buttons */

a.redButton{
  font-size: 10vw;
  line-height: 20vw; /* Text vertikal zentrieren */
}

a#ButtonRadreisenkl{background-image: linear-gradient(to right, rgba(134,0,0,1) 45%, rgba(134,0,0,0) 90%), url("../grafiken/home/speichenrad/klButtonRadreisen.jpg");}
a#ButtonNepalkl    {background-image: linear-gradient(to right, rgba(134,0,0,1) 45%, rgba(134,0,0,0) 90%), url("../grafiken/home/speichenrad/klButtonNepal.jpg");}
a#ButtonPhysikkl   {background-image: linear-gradient(to right, rgba(134,0,0,1) 45%, rgba(134,0,0,0) 90%), url("../grafiken/home/speichenrad/klButtonPhysik.svg");}

/* ======================================================= Eigenschaften des Aktuell-Buttons */

a#ButtonZenkl{
  background-color: var(--ZenAsienHaupt);
  font-size: 0.8vw;
  color: black;
}

div#aktuellTitelkl{
  float: left;
  height: 20vw;
  font-size: 4vw;
  font-style: italic;
  font-weight: bold;
  text-align: center;
  color: white;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform:rotate(180deg);
  /*border: 1px solid black;*/
}

img#logoAktuellkl{
  display: inline-block;
  float: left;
  height: 20vw;
  margin-left: 20px;
  margin-right: 20px;
  /*border: 1px solid black;*/
}

span#StartZielkl{font-size: 3vw;}
span#WebsiteLinkTextkl{
  font-size: 3vw;
  color: white;
}
/* Nötig für richtiges Float-Verhalten (Stichwort: Containing Floats) */
div#clearer{/*border: 1px solid black;*/ clear: both;}

a.Buttonkl img.ExtLink{
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 24px;
}

/* ===================================================================== */
/* Seiteninhalt                                                          */
/* ===================================================================== */

/* ======================================================= Wrapper des Titels und der Buttons */

div#Seiteninhalt{
  width: 80%;
  max-width: 800px;
  margin-top: 20vw;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12pt;
}

/* ======================================================= Absatz- und Listeneigenschaften */

div#Seiteninhalt p {
  color: #AAAAAA;
}

p#Untertitel{
  text-align: center;
  margin-bottom: 30px;
}
p.Text{}

ul{
  text-align: left;
  margin-left: 30px;
  color: #AAAAAA;
}

/* ======================================================= Linkeigenschaften */

div#Seiteninhalt a {
  color: #FFFFFF;
}

div#Seiteninhalt a:hover {
  text-decoration: underline;
}

/* ===================================================================== */
/* Bildergalerie                                                         */
/* ===================================================================== */

div#GalleryWrapper{
  padding: 5px;
  margin-bottom: 50px;
  text-align: center;
  font-size: 0pt; /* Ansonsten werden automatisch Leerzeichen zwischen den Bildern gesetzt */
}

img.thumbnail{
  height: 50px;
  margin: 5px;

  /* Transition from Outset to Inset shadow does not work; but if one sets two shadows, it does */
  -webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0.0), 1px 1px 8px 2px rgba(0,0,0,0.7);
  -moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0.0), 2px 2px 8px 2px rgba(0,0,0,0.7);
  box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0.0), 0px 0px 8px 2px rgba(0,0,0,0.7);
  -webkit-transition: box-shadow 0.2s;
  -moz-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s; 
}

img.thumbnail:hover{
  /* Transition from Outset to Inset shadow does not work; but if one sets two shadows, it does */
  -webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0.0), 0px 0px 0px 0px rgba(0,0,0,0.0);
  -moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0.0), 0px 0px 0px 0px rgba(0,0,0,0.0);
  box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,0.0), 0px 0px 0px 0px rgba(0,0,0,0.0);
}

/* ===================================================================== */
/* Anzeige von Objekten je nach Viewpoint-Breite aktivieren              */
/* ===================================================================== */

/* ======================================================= Anordnung der Buttons bei Landscape-IPad */

@media only screen and (min-width: 650px) {
    /* Rote Sonne */
    div#RedSunkl{
	margin-bottom: 2vw;
	height: 28vw;
	background-size: 120%;
    }
    /* Alle Buttons */
    a.Buttonkl{
	float: left;
	margin-bottom: 0vw;
	width: 44vw;
	height: 10vw;
	background-size: auto 10vw;
    }
    /* Rote Buttons */
    a.redButton{
	font-size: 5vw;
	line-height: 10vw; /* Text vertikal zentrieren */
    }
    /* Aktuell-Button */
    a#ButtonZenkl{font-size: 0.4vw;}
    span#StartZielkl{font-size: 1.5vw;}
    span#WebsiteLinkTextkl{font-size: 1.5vw;}
    img#logoAktuellkl{height: 10vw;}
    div#aktuellTitelkl{height: 10vw; font-size: 2vw;}
    div#Seiteninhalt{margin-top: 10vw;}
}

/* ======================================================= deaktivieren bei schmalem Vierport */

@media only screen and (max-width: 1051px) {
    div#RedSun{display: none;}
    div.Speiche{display: none;}
    div.transButton{display: none;}
    div.RedSunHover{display: none;}
}

/* ======================================================= deaktivieren bei breitem Viewport */

@media only screen and (min-width: 1050px) {
    div#RedSunkl{display: none;}
    a.Buttonkl{display: none;}
}

/* ===================================================================== */
/* Fußzeile                                                              */
/* ===================================================================== */

div#footbox{
  position: relative;
  bottom: 0px;
  width: 100%;
  text-align: center;
  padding-bottom: 5px;
  text-align: center;
  color: #AAAAAA;
}

div#footbox a {
  color: #FFFFFF;
}

div#footbox a:hover {
  text-decoration: underline;
}