/* ====================================================
Basis-Stylesheet mit Reset und Restaurierung der Abstände
Datei: fundament.css
Datum: ...
Autor: ...
========================================================== */

@media all {

/* ==============================================
TEIL I – Reset
============================================== */
html { overflow-y: scroll; }

body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, code,
ul, ol, li, 
table, th, td,
form, fieldset, legend, input, textarea {
  padding: 0; margin: 0;
}


/* ==============================================
TEIL II – Abstände restaurieren
============================================== */
p, blockquote, pre, h1, h2, h3, h4, h5, h6, ul, ol  {
  margin-bottom: 6px;
  margin-bottom: 0.375rem;
}

ul, ol { margin-left: 2em; }
ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; }
blockquote { margin: 1em 2em; } 


/* ==============================================
TEIL III – Allgemeine Klassen 
============================================== */

.clearing { clear: both; }

/* Der Kern von Clearfix */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
  height: 0;
  visibility: hidden;
}
/* Patch für IE7 */  
*:first-child+html .clearfix { min-height: 0; }

.versteckmich { 
  position: absolute; 
  left: -32768px; 
  top: -32768px; 
  width: 0; 
  height: 0; 
}



} /* Ende @media - nicht löschen! */


/* ======================================
   E N D E fundament.css
====================================== */

/* =========================================================
Stylesheet für die Beispielsite aus "Einstieg in CSS"
Datei: bildschirm.css
Datum: ...
Autor: ...
Aufbau: 1. Allgemeine Styles
        2. Styles für Layoutbereiche
        3. Sonstige Styles
========================================================== */

@media screen {

/* =======================================
1. Allgemeine Styles
======================================= */

html {
  font-size: 100%; /* Browserdefault, 16px */
}

body {
  background: #8c8c8c url(/images/bayernfahne.gif) repeat left top; /* fixed waere schoen, bewirkt aber schwarze youtube-videos */
  color: white; /* Schriftfarbe */
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

p, ul  { font-size: 14px; font-size: 0.875rem; }
h1 { font-size: 22px; font-size: 1.375rem; }
h2 { font-size: 18px; font-size: 1.125rem; }
h3 { font-size: 16px; font-size: 1.000rem; }

a { text-decoration: none;
    border-bottom: 1px solid #fff;
}
a:link { color: #ffffff; }
a:visited { color: #cc6666; }
a:hover,
a:focus {
  border-bottom: 1px solid #d90000;
}
a:active {
  color: white;
  background-color: #d90000;
}

span {
  color: #aaa;
  font-style: italic;
}

fieldset {
  border: 0;
}
fieldset input {
  margin-bottom: 20px;
}

/* Allgemeine Klassen und IDs */

.artikelrahmen {
  padding: 15px;
  border: 1px solid #888;
  background: rgba(0,0,255,0.3);
}

.floatlinks {
  float:left;
  margin-right: 10px;
  margin-bottom: 10px;
}
.floatrechts {
  float:right;
  margin-left: 10px;
  margin-bottom: 10px;
}

/* =======================================
2. Styles für die Layoutbereiche
======================================= */
#wrapper {
  max-width: 70em;
  margin: 10px auto;    /* Wrapper zentriert */
}

article {
  background-color: rgba(0,0,255,0.4);
  margin-bottom: 40px;
  padding: 10px;
  -moz-box-shadow: 0px 0px 4px white;
  box-shadow: 0px 0px 4px white;
  border-radius: 10px 10px 0 0;
}

header {
  position: relative;
  background-color: rgba(0,0,0,0.3);
  padding: 10px;
  -moz-box-shadow: 0px 0px 4px white;
  box-shadow: 0px 0px 4px white;
  border-radius: 10px 10px 0 0;
}
header a,
header a:hover,
header a:focus,
header a:active {

  border-bottom: none;
}

header p {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 200;
}
header p img {
   opacity: 0.6;      /* Logotransparenz */
}

main {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 30px;
  line-height: 1.5;
}

.volle_breite {
  position: relative;
  text-align: center;
  width: 100%;
  padding: 0;
}

aside {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 30px;
  line-height: 1.5;
}
aside ul {
  margin-left: 0;
}

aside ul li {
  list-style-type: none;
}
aside ul li a {
	font-style: italic;
}
aside ul li.aktiv a { color: #FEFF1F; }

footer {
  margin-top: 0;
}

footer ul {
  margin-left: 0;
  height: 20px;
  height: 1.25rem;
}

footer ul li {
	float: left;
	list-style-type: none;
    padding-right: 24px;
    padding-bottom: 24px;
 }

footer ul li a {
	font-style: italic;
	float: left;
}

footer ul li.aktiv a { color: #FEFF1F; }


/* =======================================
3. Sonstige Styles
======================================= */

.ohne_border a {
  border: none;
}

} /* Ende @media - fuer alle Bildschirme*/

@media screen and (min-width: 768px) {
main {
    float:left;
    width: 63%;
    padding-right: 30px;
}
aside {
    float: right;
    width: 37%;
}

} /* Ende @media fuer Bildschirme über 768px*/

/* ======================================
   E N D E bildschirm.css
====================================== */

/* Header Slider */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  height: 100%;
  border: 0;
  }
nav {
  background-color: rgba(50,50,50,0.5);
  padding-left: 10px;
  -moz-box-shadow: 0px 0px 4px white;
  box-shadow: 0px 0px 4px white;

}
nav a {
  border-bottom: none;
}

ul.sdt_menu{
	margin:0;
    padding: 0;
	list-style: none;
	font-size:14px;

}
ul.sdt_menu a{
	text-decoration:none;
	outline:none;
}
ul.sdt_menu a:active {
	background-color: transparent;
}
ul.sdt_menu li{
	float:left;
	width:123px;
	height:85px;
	position:relative;
	cursor:pointer;
	border-right: 1px solid rgba(100,100,100,0.5);
}
ul.sdt_menu li:first-child {
	border-left: 1px solid rgba(100,100,100,0.5);
}

ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:123px;
	height:85px;
	z-index:12;
}
ul.sdt_menu li a img{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	-moz-box-shadow:0px 0px 4px #fff;
	-webkit-box-shadow:0px 0px 4px #fff;
	box-shadow:0px 0px 4px #fff;
}
ul.sdt_menu li span.sdt_wrap{
	position:absolute;
	top:25px;
	left:0px;
	width:123px;
	height:60px;
	z-index:15;
}
ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:rgba(50,50,50,0.8);
	top:85px;
	width:123px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:15px;
	text-shadow:1px 1px 1px #000;
}

ul.sdt_menu li div.sdt_box a {
    border-bottom: 1px solid #fff;
}
ul.sdt_menu li div.sdt_box a:hover {
    border-bottom: 1px solid #d90000;
}



ul.sdt_menu li span span.sdt_link{
	color:#fff;
	font-size:20px;
	float:left;
	clear:both;
}
ul.sdt_menu li span span.sdt_descr{
	color:#ffffff;
	float:left;
	clear:both;
	width:123px; /*For dumbass IE7*/
	font-size:12px;
	letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
	display:block;
	position:absolute;
	width:123px;
	overflow:hidden;
	height:123px;
	top:85px;
	left:0px;
	display:none;
	background:rgba(50,50,50,0.80);
}

ul.sdt_menu li div.sdt_box#untermenue {
	height:265px;           /*Masze Untermenue */
    width: 280px;
	top:85px;
	left:0px;
	display:none;
    z-index: 100;       /* damit das untermenu ueber dem main bereich steht */

}

ul.sdt_menu li div.sdt_box a{
	float:left;
	clear:both;
	line-height:30px;
	color:#fff;
}
ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
	color:#fff;
}
/* Styles für Bilder und Videos */
@media screen {

.bilderrahmen_5px_mit_padding {
  padding: 3px;
  border: 5px solid #888;
  border-radius: 5px;
}
.bilderrahmen_3px_ohne_padding {
  border: 3px solid #888;
  border-radius: 5px;
}

img.transrechts:hover {
  transform: scale(1.5) rotate(5deg);
  transition: all 1s ease;
}
img.translinks:hover {
  transform: scale(1.5) rotate(-5deg);
  transition: all 1s ease;
}
img.transrechts, img.translinks {
  transform: scale(1.0) rotate(0deg);
  transition: all 1s ease;
}

/* Responsive Videos mit Vorladen (lazy Load) aber auch im noscript Bereich (frueher hiess die Klasse .responsive-video */
.youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 75%; /* 75% entspricht 4:3 ----     56.25% enspricht 16:9 ratio*/
    overflow: hidden;
    cursor: pointer;
}
.youtube img {
    width: 100%;
    top: 0%; /*original top: -16.84%; */ 
    left: 0;
    opacity: 0.7;
}
.youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}
.youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
    cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
    position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border: 0; /* erspart frameborder */
    /* position: absolute; */    /* Diese Anweisung war in der alten Klasse "responsive-video" mit enthalten */
}



} /* Ende @media fuer alle Bildschirme*/

@media screen and (min-width: 1200px) {
#audio article {
  width: 43%;
  height: auto;
  float: right;
  margin: 0 0 4% 4%;
}

} /* Ende @media fuer Bildschirme ueber 1200px*/



/* ======================================
   E N D E bildschirm.css
====================================== */