/* ====================================================
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: 8px;
  margin-bottom: 0.5rem;
}

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/hintergrund-min-30.jpg) repeat center 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: #ccaaaa; }
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;
}

.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 {
  /*  width: 80%;  ist Mist, da es dem kleinen Touchscreen Pixel nimmt */
  max-width: 70em;
  margin: 10px auto;    /* Wrapper zentriert */
}

article {
  background-color: rgba(100,0,0,0.5);
  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: 1;      /* 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;
}

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;
 }

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

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


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

.ohne_border a {
  border: none;
}

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

@media screen and (min-width: 768px) {
main {
  float:right;
  width: 63%;
  padding-left: 30px;
}
aside {
  float: left;
  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:		black url(colorfadingmenu_images/navBG.png) repeat-x 0 0 scroll;
  height: 50px;
  padding-left: 10px;
  -moz-box-shadow: 0px 0px 4px white;
  box-shadow: 0px 0px 4px white;
}
nav a {
  border-bottom: none;
}

div.hoverBtn {
	position: 		relative;
    top:            3px;
	float:			left;
    /* background-color: rgba(100,50,50,0.5); . Buttons werden nicht gesondert hervorgehoben */
    padding:        0 10px 0 10px;
    border-left:    1px solid #faa;
}
div.hoverBtn:last-child {
	border-right: 1px solid #faa;
}

div.hoverBtn a {
	color:			#fff;
	/* background:		transparent none repeat-x 0 0 scroll; */
	position: 		relative;
	z-index: 		2;
	display: 		block;
	height: 		44px;
	line-height: 		44px;
	text-align: 		center;
	font-size:		1.1em;
	text-decoration:	none;
}
div.hoverBtn a:hover {
    color:          #fff;
    }
div.hoverBtn div {
	display:		none;
    padding:        0 10px 0 10px;
	position: 		absolute;
	z-index: 		1;
	top: 			0px;
    background-color: rgba(200,25,25,0.5);
	background:		red url(colorfadingmenu_images/navHover.png) repeat-x 0 0 scroll;
    right: 0px;           /* ist wichtig, damit das padding an der richtigen Stelle erscheint */
}
/* 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
====================================== */