/* darf nicht SCSS sein, weil sonst die Aspect-Ratios umgerechnet werden (4/5 = 0.8) - funktioniert im Browser und nach Standard aber nur als Bruch :) */

/* Banner-Test Biberach */
.mod_newsreader .banner,
#kopfbild .mod_article {
	position: relative;
}
/* Abstände in News-Detailseite müssen umgebogen werden, damit das Overlay passt */
.mod_newsreader .banner {
	margin: 2em;
}
#container .layout_full .banner .ce_image .image_container {
  padding: 0;
}
.banner-overlay {
	position: absolute; width: 100%; height: 100%;
	top: 0; left: 0;
}
/* Schrift generell bei den News kleiner (Bilder sind im Verhältnis zu Seite auch kleiner) */
.mod_newsreader .banner-overlay {
	font-size: .8em;
}
/* Sonderregel News: ab 880px abwärts Vollbild */
@media screen and (min-width:500px) and (max-width: 720px) {
	.mod_newsreader .banner-overlay {
		font-size: 1em;
	}
}
@media screen and (min-width:720px) and (max-width: 770px) {
	.mod_newsreader .banner-overlay {
		font-size: 1.1em;
	}
}
@media screen and (min-width:770px) and (max-width: 880px) {
	.mod_newsreader .banner-overlay {
		font-size: 1.2em;
	}
}


.banner-overlay div {
	position: absolute;
	font-size: 1.1em;
	line-height: 1.2;
}
.banner-kaetchengas div.background_white {
	left:0;
}
.banner-overlay a.superlink {
	display: block;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}

.banner-overlay div,
.banner-overlay div span,
.banner-overlay div sup,
.banner-overlay div sub,
.banner-overlay div a {
	font-family: "museo-sans", Arial, Helvetica, sans-serif;
	font-weight: 900;
	color: #4a8329;
}

.banner-overlay .big {
  font-size: 2.75em;
  letter-spacing: -.05em;
  line-height: 1;
}
.banner-overlay sub {
	font-size: 1em;
	position: relative;
	top: -.5em;
}
.banner-overlay sup {
	vertical-align: top;
  font-size: 1.2em;
  letter-spacing: -.05em;
	position: relative;
	left: -.3em;
	top: .2em
}
.banner-overlay div a {
	color: #444;
	text-decoration: underline;
	display: inline-block;
}

@media screen and (max-width: 900px) and (orientation: landscape),
	screen and (min-width: 765px) and (max-width: 900px)
{
	.banner-overlay div {
		font-size: 1em;
	}
	.banner-overlay .big {
		font-size: 2.3em;
	}
	.banner-overlay sup {
		top: 0;
	}
	.banner-overlay .telefonie {
		font-size: .9em;
	}
}
@media screen and (max-width: 765px)
{
	.banner-overlay div {
		font-size: .85em;		
	}
}
@media screen and (max-width: 700px)
{
	.banner-biberach div,
	.banner-biberach div span,
	.banner-biberach div sup,
	.banner-biberach div sub,
	.banner-biberach div a {
		font-weight: 500;
	}
	.banner-biberach .big {
		font-size: 2.5em;
	}
	.banner-biberach sup {
		top: 0;
	}
}
@media screen and (max-width: 525px)
{
	.banner-biberach .big {
		font-size: 2em;
	}
	.banner-biberach sup {
		top: 0;
	}
}
@media screen and (min-width: 1200px)
{
	.banner-biberach div {
		font-size: 1.2em;
	}
}

@media 
	screen and (min-width: 400px) and (max-width: 480px) and (max-aspect-ratio: 4/5),
	screen and (min-width: 481px) and (max-width: 765px) and (max-aspect-ratio: 8/9) 
{
	.banner-biberach div {
		font-size: 1em;		
	}
	.banner-biberach div,
	.banner-biberach div span,
	.banner-biberach div sup,
	.banner-biberach div sub,
	.banner-biberach div a {
		font-weight: 900;
		color: #4a8329;
	}
	.banner-biberach sup {
		top: 0;
	}
}	
@media 
	screen and (min-width: 470px) and (max-width: 480px) and (max-aspect-ratio: 4/5),
	screen and (min-width: 481px) and (max-width: 765px) and (max-aspect-ratio: 8/9) 
{
	#kopfbild .banner-biberach div {
		font-size: 1.2em;		
	}
	.mod_newsreader .banner-biberach div {
		font-size: 1.1em;		
	}
}
@media screen and (min-width: 550px) and (max-width: 765px) and (max-aspect-ratio: 8/9) 
{
	#kopfbild .banner-biberach div {
		font-size: 1.4em;		
	}
	.mod_newsreader .banner-biberach div {
		font-size: 1.2em;		
	}
}







/* ab hier Biberach */

.banner-overlay.banner-biberach {
	/* background-size: contain; */
	background-size: 100% 100%;
	background-position: left bottom;
	background-image: url(../../files/bilder/kopfbilder/banner-biberach/Weissebene_Highspeed_Internet_1400x504px_kopf.png);
}
.mod_newsreader .banner-overlay.banner-biberach {
	background-image: url(../../files/bilder/kopfbilder/banner-biberach/Weissebene_Highspeed_Internet_960x540px_news.png);
}

.banner-biberach .text-100mbit {
	left: 1.5%; top: 52%; width: 18%;
}
.banner-biberach .angebot {
	left: 1.5%; top: 85%; width: 13%;
	white-space: nowrap;
}
.banner-biberach .telefonie {
	left: 15.5%; top: 86%; width: 25%;
}
.banner-biberach .echt-highspeed {
	left: 52%; top: 70%; width: 45%;
}
.mod_newsreader .banner-biberach .text-100mbit {
	top: 62%;
}
.mod_newsreader .banner-biberach .angebot {
	top: 84%;
}
.mod_newsreader .banner-biberach .telefonie {
	left: 21%; top: 84.5%; width: 30%;
}
.mod_newsreader .banner-biberach .echt-highspeed {
	left: 62%; top: 62%; width: 35%;
}

/* jede 4/3-Variante braucht das folgende Hintergrundbild + Textausrichtung */
@media 
	screen and (max-width: 320px) and (max-aspect-ratio: 1/1),
	screen and (min-width: 321px) and (max-width: 480px) and (max-aspect-ratio: 4/5),
	screen and (min-width: 481px) and (max-width: 765px) and (max-aspect-ratio: 8/9) 
{
	.mod_newsreader .banner-overlay.banner-biberach,
	.banner-overlay.banner-biberach {
		background-image: url(../../files/bilder/kopfbilder/banner-biberach/Weissebene_Highspeed_Internet_640x480px_mobil.png);
	}
	
	.banner-biberach .text-100mbit {
		left: 67%; top: 58%; width: 28%;
	}
	.banner-biberach .angebot {
		left: 2%; top: 81%; width: 16%;
	}
	.banner-biberach .telefonie {
		left: 28%; top: 81.5%; width: 49%;
	}
	
	.mod_newsreader .banner-biberach .text-100mbit {
		top: 58%;
	}
	.mod_newsreader .banner-biberach .angebot {
		top: 81%;
	}
	.mod_newsreader .banner-biberach .telefonie {
		left: 29; top: 81.5%; width: 49%;
	}
	
	.banner-biberach .echt-highspeed {
		display: none;
	}	
}
@media 
	screen and (min-width: 400px) and (max-width: 480px) and (max-aspect-ratio: 4/5),
	screen and (min-width: 481px) and (max-width: 765px) and (max-aspect-ratio: 8/9) 
{
	.mod_newsreader .banner-biberach .text-100mbit {
		top: 60%;
	}	
}	

/* Banner zu klein: Text ausblenden */
@media screen and (max-width: 460px) and (orientation: landscape) 
{
	.banner-biberach .text-100mbit,
	.banner-biberach .telefonie,
	.banner-biberach .echt-highspeed {
		display: none;
	}	
}


/* ab hier der Banner: Strompreise stabil 2017 */
.banner-strompreis2017 .text {
  padding: 2em 1em;
  width: 43%;
  font-size: 2.7em;
  font-weight: 300;
  font-family: "adelle", "Times New Roman", Times, serif;
  color: #4d4d4d;
  text-transform: uppercase;
  font-style: italic;
  line-height: 1.22;
}
.banner-strompreis2017 .text strong {
	font-family: "museo-sans", Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-style: normal;
  color: #4a8329;
}

/* Banner: DaheimStrom Natur */
.banner-daheimstrom_natur .text {
  padding: 2em 1em;
  width: 26%;
  font-size: 2.7em;
  font-weight: 300;
  font-family: "adelle", "Times New Roman", Times, serif;
  color: #4d4d4d;
  text-transform: uppercase;
  font-style: italic;
  line-height: 1.22;
}
.banner-daheimstrom_natur .text strong {
  font-family: "museo-sans", Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-style: normal;
  color: #4a8329;
}

/* Banner: H2orizon */
.banner-h2orizon .text {
  padding: 2em 1em;
  width: 75%;
  font-size: 2.7em;
  font-weight: 300;
  font-family: "adelle", "Times New Roman", Times, serif;
  color: #fff;
  text-transform: uppercase;
  font-style: italic;
  line-height: 1.22;
  text-shadow: 0 0 5px #4d4d4d,
				0 0 10px #4d4d4d,
				0 0 20px #4d4d4d,
				0 0 40px #4d4d4d,
				0 0 60px #4d4d4d,
				0 0 90px #4d4d4d,
				0 0 120px #4d4d4d,
				0 0 160px #4d4d4d;
}
.banner-h2orizon .text strong {
  font-family: "museo-sans", Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-style: normal;
  color: #4a8329;
}

.banner-h2orizon sub {
	top: 0;
	font-size: 0.5em;
}

/* Banner: Harthäuser Wald */
.banner-harthaeuserwald .text {
  padding: 2em 1em;
  width: 49%;
  font-size: 2.7em;
  font-weight: 300;
  font-family: "adelle", "Times New Roman", Times, serif;
  color: #4d4d4d;
  text-transform: uppercase;
  font-style: italic;
  line-height: 1.22;
}
.banner-harthaeuserwald .text strong {
  font-family: "museo-sans", Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-style: normal;
  color: #4a8329;
}

/* Banner: Energieshop*/
.banner-energieshop .text {
  padding: 2em 1em;
  width: 50%;
  font-size: 2.7em;
  font-weight: 300;
  font-family: "museo-sans", Arial, Helvetica, sans-serif;
  color: #333;
  text-transform: uppercase;
  font-style: normal;
  line-height: 1.22;
}
.banner-energieshop .text strong {
  font-family: "museo-sans", Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-style: normal;
  color: #002f87;
}

/* Banner: Kätchengas*/
.banner-kaetchengas .text {
  padding: 2em 1em;
  width: 15em;
  padding-left:0;
}

.banner-kaetchengas .text a{	
  width:67%;	
  font-size: 0.7em;
  font-weight: 300;
  font-family: "museo-sans", Arial, Helvetica, sans-serif;
  color: #333;
  text-transform: none;
  font-style: italic;
  line-height: 1.22;
  text-decoration: none;
  padding:1em;
  /* background: rgba(255, 255, 255, 0.9); */
  
}

.banner-kaetchengas .text strong {
  font-family: "museo-sans", Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-style: normal;
  color: #002f87;
}

.banner-kaetchengas .text .background_white a{
	background-size: cover;
    background-position: 100% 0%;
}

.banner-kaetchengas .teaser_bestellsystem_rechts{
    width: 22em;
    height: 4em;
	float: left;
	position: absolute;
	right: 0;
	z-index: 10;
	bottom: 0em;
}
		
.banner-kaetchengas .teaser_bestellsystem_rechts p{
	color: #333;
	text-align:right;
}

.banner-kaetchengas .teaser_bestellsystem_rechts p a{
	text-transform: uppercase;
	font-weight: normal;
	color: #fff;
}

.banner-kaetchengas .teaser_bestellsystem_rechts p a:after{
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 1;
	background-size:cover;
}	

.banner-kaetchengas .teaser_bestellsystem_rechts p a .text_link{
	color: #fff;
	bottom: 1.2em;
	right: 1em;
	position: absolute;
	font-weight: normal;
	z-index:2;
	
}

.banner-kaetchengas .teaser_bestellsystem_rechts p a:hover{
	opacity:1;
}

.banner-kaetchengas .teaser_bestellsystem_rechts p a:hover:after{
	opacity: 0.8;
}

.banner-kaetchengas .teaser_bestellsystem_rechts p a strong{
	color: #fff;
	font-weight:900;
}

.banner-kaetchengas .teaser_bestellsystem_rechts p a .text_link:after{
	background-position: 50% 45%;
	background-size: contain;
	content: "";
	padding: 1em 1.6125em;
	vertical-align: middle;
	margin-left: 1em;
}





@media screen and (max-width: 1179px)
{
	.banner-overlay .text {
		font-size: 2.5em;
	}
}
@media screen and (max-width: 1080px)
{
	.banner-overlay .text {
		font-size: 2.3em;
	}
	
}

@media screen and (max-width: 940px)
{
	.banner-overlay .text {
		font-size: 2.2em;
	}
}
@media screen and (max-width: 835px)
{
	.banner-overlay .text {
		font-size: 2em;
	}
	
	.banner-kaetchengas .text {
		font-size: 2.2em;
		width:13em;
	}
	
	.banner-kaetchengas .teaser_bestellsystem_rechts {
		font-size: 0.8em;
	}
}
@media screen and (max-width: 700px)
{
	.banner-overlay .text {
		padding-left: .5em;
		padding-right: .5em;
	}
}
@media screen and (max-width: 580px)
{
	.banner-overlay .text {
		font-size: 1.6em;
		width: 45%;
	}
	
	.banner-kaetchengas .text{
		width:38em;
	}
}
@media screen and (max-width: 650px)
{
	.banner-overlay .text {
		font-size: 1.8em;
	}
	
	.banner-kaetchengas .text {
		font-size: 2.2em;
		padding-top: 1em;
	}
	
	.banner-kaetchengas .teaser_bestellsystem_rechts {
		font-size: 0.8em;
	}
}
}
@media screen and (max-width: 535px)
{
	.banner-overlay .text {
		font-size: 1.4em;
	}
}
@media screen and (max-width: 460px)
{
	.banner-overlay .text {
		font-size: 1.2em;
		width: 47%;
	}
	
	.banner-kaetchengas .text {
		font-size: 1.3em;
		width: 12em;
		padding-top: 1em;
	}
	
	    
	
	
}
@media screen and (min-width: 1180px)
{
	.banner-overlay .text {
		font-size: 2.7em;
	}
	
}

@media screen and (max-width: 900px) and (orientation: landscape), screen and (max-width: 900px) and (min-width: 765px){
	.banner-kaetchengas .teaser_bestellsystem_rechts {
		font-size: 1em;
	}
}


/* jede 4/3-Variante mit breiterem Text, großer */
@media 
	screen and (max-width: 320px) and (max-aspect-ratio: 1/1),
	screen and (min-width: 321px) and (max-width: 480px) and (max-aspect-ratio: 4/5),
	screen and (min-width: 481px) and (max-width: 765px) and (max-aspect-ratio: 8/9) 
{
	.banner-strompreis2017 .text {
		width: 55%;
		padding-left: 1em;
		padding-right: 1em;
	}
	
	.banner-daheimstrom_natur .text {
		width: 40%;
		padding-left: 1em;
		padding-right: 1em;
	}
	
	.banner-harthaeuserwald .text {
		width: 64%;
		padding-left: 1em;
		padding-right: 1em;
	}
	
	.banner-energieshop .text {
		width: 65%;
		padding-left: 1em;
		padding-right: 1em;
	}
	
	.banner-kaetchengas .teaser_bestellsystem_rechts{
		height: 8em;
		width: 40em;
	}
	
	
	
	.banner-kaetchengas .teaser_bestellsystem_rechts p{
		font-size:2em;
	}
	
	.banner-kaetchengas .text {
		width: 100%;
		padding-top:5em;
		padding-left: 0;
	}
	
	.banner-kaetchengas .text a {
		font-size:1.2em;
		width: 70%;
	}	
	
	/* .banner-kaetchengas .text .background_white{ */
	/* background-size: cover; */
    /* background-position: 150% 0%; */
    /* width: 13.5em; */
	/* } */
	
	@media screen and (max-width: 32.5em){
		.banner-kaetchengas .teaser_bestellsystem_rechts p {
			font-size:1.5em;
		}
		
		.banner-kaetchengas .teaser_bestellsystem_rechts{
			height: 6em;
			width: 32em;
		}

	}	
	
	
	@media screen and (max-width: 28.125em){
		.banner-kaetchengas .teaser_bestellsystem_rechts{
			height:5em;
			width:26em;
		}
		.banner-kaetchengas .teaser_bestellsystem_rechts p {
			font-size:1.25em;
		}
		
		.banner-kaetchengas .teaser_bestellsystem_rechts p a .text_link{
			bottom:1em;
		}
	}
}
@media screen and (min-width: 731px) and (max-width: 765px) and (max-aspect-ratio: 8/9)
{
	.banner-overlay .text {
		font-size: 2.8em;
	}
}
@media screen and (min-width: 621px) and (max-width: 730px) and (max-aspect-ratio: 8/9)
{
	.banner-overlay .text {
		font-size: 2.6em;
	}
}
@media screen and (min-width: 571px) and (max-width: 620px) and (max-aspect-ratio: 8/9)
{
	.banner-overlay .text {
		font-size: 2.4em;
	}
}
@media screen and (min-width: 531px) and (max-width: 570px) and (max-aspect-ratio: 8/9)
{
	.banner-overlay .text {
		font-size: 2.2em;
	}
}
@media screen and (min-width: 481px) and (max-width: 530px) and (max-aspect-ratio: 8/9)
{
	.banner-overlay .text {
		font-size: 2em;
	}
}
@media screen and (min-width: 456px) and (max-width: 480px) and (max-aspect-ratio: 4/5)
{
	.banner-overlay .text {
		font-size: 1.9em;
	}
}
@media screen and (min-width: 421px) and (max-width: 455px) and (max-aspect-ratio: 4/5)
{
	.banner-overlay .text {
		font-size: 1.8em;
	}
}
@media screen and (min-width: 381px) and (max-width: 420px) and (max-aspect-ratio: 4/5)
{
	.banner-overlay .text {
		font-size: 1.6em;
	}
}
@media screen and (min-width: 351px) and (max-width: 380px) and (max-aspect-ratio: 4/5)
{
	.banner-overlay .text {
		font-size: 1.5em;
	}
}
@media 
	screen and (max-width: 320px) and (max-aspect-ratio: 1/1),
	screen and (min-width: 321px) and (max-width: 350px) and (max-aspect-ratio: 4/5) 
{
	.banner-strompreis2017 .text {
		padding: 2em .5em;
		font-size: 1.3em;
	}
}



/* Banner im Slider auf der Startseite - auch hier Logikanpassung */
@media 
	screen and (max-width: 320px) and (max-aspect-ratio: 1/1),
	screen and (min-width: 321px) and (max-width: 480px) and (max-aspect-ratio: 4/5),
	screen and (min-width: 481px) and (max-width: 765px) and (max-aspect-ratio: 8/9) 
{
	.iosSlider_home,
	.iosSlider {
		height: 75%;
	}
	.iosSlider_home .slider_home,
	.iosSlider .slider,
	.iosSlider_home .slider_home .mod_article .inner,
	.iosSlider .slider .item .inner {
		padding-bottom: 75%;
	}
}