iframe
{
border: none;
width: 100%;
height: 160rem;
}
@media (max-width: 700px) {iframe {height: 180rem;}}
@media (max-width: 550px) {iframe {height: 200rem;}}
@media (max-width: 450px) {iframe {height: 230rem;}}
@media (max-width: 350px) {iframe {height: 250rem;}}

.appframe
{
border: none;
width: 100%;
height: 70rem;
}
@media (max-width: 550px) {.appframe {height: 100rem;}}
@media (max-width: 450px) {.appframe {height: 120rem;}}
@media (max-width: 350px) {.appframe {height: 135rem;}}



/* Einzellinks im Content */
.themenlink
{
font-weight: bold;
border-style: solid;
border-color: #bbb;
border-width: 1px;
border-radius: 5px;
display: inline-block;
padding: 3px 12px 2px 8px;
margin-left: 6px;
background: -webkit-linear-gradient(#fff, #ccc);
background: -moz-linear-gradient(#fff, #ccc);
background: linear-gradient(#fff, #ccc);
}

.themenlink:hover
{
text-decoration: none;
background: -webkit-linear-gradient(#eee, #bbb);
background: -moz-linear-gradient(#eee, #bbb);
background: linear-gradient(#eee, #bbb);
}

.themenlink:before
{
content: "\25BA";
padding-right: 5px;
}

/*iframe-Thumbnails*/
/* Container drum rum - Flex-Box */
.thumbnail-container {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:flex-start;
	flex-wrap:wrap;
	align-content:flex-start;
	width:calc(1440px * 0.25 * 2.025); /* Falls LESS hier Variable einfügen statt 1440px */
	max-width:100%;
	overflow:hidden;
	/*margin:auto;*/
}

/* Der einzelne Thumbnail */
.thumbnail-container > div.thumbnail {
	width: calc(1440px * 0.25); /* Falls LESS hier Variable einfügen statt 1440px */
	height: calc(900px * 0.25); /* Falls LESS hier Variable einfügen statt 900px */
	position: relative;
	margin-bottom:0.5rem;
	background-color:white;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
	background: rgb(242,245,246); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */
}

/* Spinner 
.thumbnail-container > div.thumbnail::before {
	content:"\263C";
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	text-align:center;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:3rem;
	-webkit-animation: loading 2s linear infinite;
	-moz-animation: loading 2s linear infinite;
	-o-animation: loading 2s linear infinite;
}*/

/* Layer drüber, damit Links nicht anklickbar sind */
.thumbnail-container > div.thumbnail:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* Falls ein Link gewünscht ist, Cursor setzen */
.thumbnail-container > div.thumbnail[data-href] {
	cursor:pointer;
}

/* Skalierung des iFrames */
.thumbnail-container > .thumbnail iframe{
	width: 1440px!important; /* Falls LESS hier Variable einfügen statt 1440px */
	height: 900px!important; /* Falls LESS hier Variable einfügen statt 900px */
	max-width:unset;
	-ms-zoom: 0.25;
	-moz-transform: scale(0.25);
	-moz-transform-origin: 0 0;
	-o-transform: scale(0.25);
	-o-transform-origin: 0 0;
	-webkit-transform: scale(0.25);
	-webkit-transform-origin: 0 0;
	overflow:hidden;
	/*opacity:0; NUR FALLS SPINNER GEWÜNSCHT IST, DANN JS UNTEN(!) ERFORDERLICH*/
}

@media (max-width: 800px) {
	.thumbnail-container {
		width:calc(1440px * 0.25);
	}
	.thumbnail-container > div.thumbnail {
		width: calc(1440px * 0.25); /* Falls LESS hier Variable einfügen statt 1440px */
		height: calc(900px * 0.25); /* Falls LESS hier Variable einfügen statt 900px */
	}
}