/* 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-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 der Banner: angrillen stabil 2017 */
.banner-angrillen2017 .text {
	padding: 1em;
	width: 60%;
	font-family: "adelle", "Times New Roman", Times, serif;
	color: #4d4d4d;
	text-transform: uppercase;
	font-style: italic;
	line-height: 1.22;
	font-weight:900;
}

.banner-angrillen2017 .text .list_vorteile{
	position: relative;
}	

.banner-angrillen2017 .text .list_vorteile ul{
	list-style: none;
	margin-left: 0;
	overflow: hidden;
	padding-left: 1.4625em;
	font-size: 0.4em;
	margin-top:1em;
}	

.banner-angrillen2017 .text .list_vorteile ul li{
	text-indent: -1em;
	line-height: 1.4em;
	color: #4a8329;
	list-style-position: outside;
	font-style: normal;
	margin-left: 1em;
	margin-bottom: 0.6em;
	padding-right: 2em;
	box-sizing: border-box;
	font-weight: 900;
	text-transform:none;
}	
.banner-angrillen2017 .text .list_vorteile ul li:before{
	content: "+";
	display: inline-block;
	margin-right: 0.75em;
	font-size: 1.25em;
}
.banner-angrillen2017 .text .button{
	font-family: "museo-sans", Arial, Helvetica, sans-serif;
	color: #fff;
	padding: 0.625em 2em;
	margin-left:1em;
	font-size: 0.35em;
    font-weight: 900;
    display: block;
    vertical-align: bottom;
	font-style: normal;
	background-color: red;
	background-color: #508322;
	background-image: -moz-linear-gradient(90deg, rgb(80,131,34), rgb(43,72,19));
	background-image: -ms-linear-gradient(90deg, rgb(80,131,34), rgb(43,72,19));
	background-image: -o-linear-gradient(90deg, rgb(80,131,34), rgb(43,72,19));
	background-image: -webkit-linear-gradient(90deg, rgb(80,131,34), rgb(43,72,19));
	background-image: linear-gradient(90deg, rgb(80,131,34), rgb(43,72,19));
	text-transform: uppercase; 
}	

.banner-angrillen2017 .button-hier-klicken{
	position: absolute;
    right: 3em;
    width: 10em;
    top: 10em;
    height: 10em;
    background-size: contain;
}	





/* 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;
}
@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;
	}
	
	.banner-angrillen2017 .text .list_vorteile{
		font-size: 1.25em;
	}
}
@media screen and (max-width: 835px)
{
	.banner-overlay .text {
		font-size: 2em;
	}
}
@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-angrillen2017 .text {
		width: 60%;
	}
}
@media screen and (max-width: 650px)
{
	.banner-overlay .text {
		font-size: 1.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%;
	}
}
@media screen and (min-width: 1180px)
{
	.banner-overlay .text {
		font-size: 2.7em;
	}
}

/* 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-angrillen2017 .text {
		width: 75%;
	}
	.banner-angrillen2017 .button-hier-klicken {
		display:none;
	}
}
@media screen and (min-width: 731px) and (max-width: 765px) and (max-aspect-ratio: 8/9)
{
	.banner-overlay .text {
		font-size: 2.8em;
	}
	
	.banner-angrillen2017 .text .button {
		font-size: 0.3em;
	}
}
@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;
	}
	
	.banner-angrillen2017 .text .button {
		font-size: 0.5em;
	}
}
@media screen and (min-width: 481px) and (max-width: 530px) and (max-aspect-ratio: 8/9)
{
	.banner-overlay .text {
		font-size: 2em;
	}
	
	.banner-angrillen2017 .text .list_vorteile {
		font-size: 1.5em;
	}
	.banner-angrillen2017 .text .button {
		font-size: 0.5em;
	}
}
@media screen and (min-width: 456px) and (max-width: 480px) and (max-aspect-ratio: 4/5)
{
	.banner-overlay .text {
		font-size: 1.9em;
	}
	
	.banner-angrillen2017 .text .list_vorteile {
		font-size: 1.5em;
	}
	.banner-angrillen2017 .text .button {
		font-size: 0.5em;
	}
}
@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;
	}
	
	.banner-angrillen2017 .text .list_vorteile {
		font-size: 1.5em;
	}
	.banner-angrillen2017 .text .button {
		font-size: 0.5em;
	}
}
@media screen and (min-width: 351px) and (max-width: 380px) and (max-aspect-ratio: 4/5)
{
	.banner-overlay .text {
		font-size: 1.5em;
	}
	
	.banner-angrillen2017 .text .list_vorteile {
		font-size: 1.5em;
	}
	.banner-angrillen2017 .text .button {
		font-size: 0.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-angrillen2017 .text .list_vorteile {
		font-size: 1.75em;
	}
	.banner-angrillen2017 .text .button {
		font-size: 0.5em;
	}
}



/* 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%;
	}
}