/**
					 * Ribbon theme for Shower HTML presentation engine
					 * shower-ribbon v2.0.10, https://github.com/shower/ribbon
					 * @copyright 2010?2016 Vadim Makeev, http://pepelsbey.net/
					 * @license MIT
					 */
					@charset "UTF-8";
					@font-face {
						font-family: PT Sans;
						src: url(../fonts/pt-sans-regular.woff) format("woff")
					}
					@font-face {
						font-weight: 700;
						font-family: PT Sans;
						src: url(../fonts/pt-sans-bold.woff) format("woff")
					}
					@font-face {
						font-style: italic;
						font-family: PT Sans;
						src: url(../fonts/pt-sans-italic.woff) format("woff")
					}
					@font-face {
						font-style: italic;
						font-weight: 700;
						font-family: PT Sans;
						src: url(../fonts/pt-sans-bold-italic.woff) format("woff")
					}
					@font-face {
						font-family: PT Sans Narrow;
						font-weight: 700;
						src: url(../fonts/pt-sans-narrow-bold.woff) format("woff")
					}
					@font-face {
						font-family: PT Mono;
						src: url(../fonts/pt-mono-regular.woff) format("woff")
					}
					.resetcss {
						/* setzt alle CSS-Stile zurück */
						all: revert !important;
					}
					*,
					::after,
					::before {
						box-sizing: border-box
					}
					a,
					abbr,
					acronym,
					address,
					applet,
					article,
					aside,
					audio,
					b,
					big,
					blockquote,
					body,
					canvas,
					caption,
					center,
					cite,
					code,
					dd,
					del,
					details,
					dfn,
					div,
					dl,
					dt,
					em,
					embed,
					fieldset,
					figcaption,
					figure,
					footer,
					form,
					h1,
					h2,
					h3,
					h4,
					h5,
					h6,
					header,
					hgroup,
					html,
					i,
					iframe,
					img,
					ins,
					kbd,
					label,
					legend,
					li,
					mark,
					menu,
					nav,
					object,
					ol,
					output,
					p,
					pre,
					q,
					ruby,
					s,
					samp,
					section,
					small,
					span,
					strike,
					strong,
					sub,
					summary,
					sup,
					table,
					tbody,
					td,
					tfoot,
					th,
					thead,
					time,
					tr,
					tt,
					u,
					ul,
					var,
					video {
						margin: 0;
						padding: 0;
						border: 0;
						font: inherit;
						vertical-align: baseline
					}
					article,
					aside,
					details,
					figcaption,
					figure,
					footer,
					header,
					hgroup,
					main,
					menu,
					nav,
					section {
						display: block
					}
					.caption p,
					body {
						line-height: 1
					}
					ol,
					ul {
						list-style: none
					}
					blockquote,
					q {
						quotes: none
					}
					blockquote::after,
					blockquote::before,
					q::after,
					q::before {
						content: none
					}
					table {
						border-collapse: collapse;
						border-spacing: 0
					}
					a {
						text-decoration: none
					}
					@page {
						margin: 0;
						size: 1024px 640px
					}
					.shower {
						color: #000;
						counter-reset: slide;
						font: 25px/2 PT Sans, sans-serif;
						-webkit-print-color-adjust: exact;
						-webkit-text-size-adjust: none;
						-moz-text-size-adjust: none;
						-ms-text-size-adjust: none
					}
					@media print {
						.shower {
							text-rendering: geometricPrecision
						}
						.slide {
							display: none;
						}
						section {
							page-break-after: always;
							break-after: always;
						}
						.bootstrap, .fullscreenlink, .certificate {
							display: none !important;
						}
						.shower.list, body {
							margin: 0;
						}
					}
					.presentationsidinfo {
						/* die Präsentations-Id rechts über dem Foliensatz */
						font-size: 10pt;
						color: gray;
						/* position: fixed; */
						top: 130px;
						right: 0px;
						/* dreht den Text um 90 Grad gegen den Uhrzeigersinn */
						/* -webkit-transform: rotate(90deg); */
						/* -moz-transform: rotate(90deg); */
						/* -ms-transform: rotate(90deg); */
						/* -o-transform: rotate(90deg); */
						writing-mode: vertical-rl;
					}
					.caption {
						/* position: fixed; */
						/* die Überschrift über dem Foliensatz */
						font-size: 25px;
						display: none;
						/* margin-top: -.2em; */
						margin-top: -1.0em;
						margin-bottom: .7em;
						padding: .5em .6em .4em .6em;
						width: 100%;
						/* color: #76B900 */
						/* color: %baseColor%; */
						/* border-bottom: 1px solid %baseColor%; */
						/* background-color: %captionBackgroundColor%; */
						box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
					}
					@media (min-width: 1174px) {
						.caption {
							font-size: 50px
						}
					}
					@media (min-width: 2348px) {
						.caption {
							font-size: 100px
						}
					}
					.caption h1 {
						padding-bottom: .15em;
						font: 700 1em/1 PT Sans Narrow, sans-serif
					}
					.caption p {
						font-size: .5em;
					}
					.caption a {
						/* color: #4b86c2; */
						color: %baseColor%;
						text-shadow: 0 -1px 0 #1f3f60
					}
					.slide {
						position: relative;
						z-index: 1;
						overflow: hidden;
						/* padding: 106px 100px 0; */
						padding: 80px 70px 0;
						width: 1024px;
						height: 640px;
						/* background: #fff; */
						background: url(/images/base/showerpic.jpg) no-repeat;
						/* font-size: 25px; */
						font-size: 23px;
						cursor: pointer;

						/* automatische Silbentrennung */
						-moz-hyphens: auto;
						-o-hyphens: auto;
						-webkit-hyphens: auto;
						-ms-hyphens: auto;
						hyphens: auto;
						hyphenate-limit-chars: auto 5;
						hyphenate-limit-lines: 2;
					}
					.slide.no-after:after {
						content: none;
						display: none;
					}
					.slide::after {
						position: absolute;
						top: 0;
						right: 30px;
						padding-top: 15px;
						width: 50px;
						height: 100px;
						background: url(../images/ribbon_dyn.svg) no-repeat;
						color: #fff;
						counter-increment: slide;
						content: counter(slide);
						text-align: center
					}
					.slide h2 {
						/* margin-bottom: 34px; */
						margin-bottom: 20px;
						color: #585a5e;
						font: 700 50px/1 PT Sans Narrow, sans-serif
					}
					.slide p {
						margin-bottom: 1em
					}
					.slide p.note {
						color: #979a9e;
						font-size: 14px;
					}
					.slide img.left {
						float: left;
						margin-right: 20px;
					}
					.slide img.right {
						float: right;
						margin-left: 20px;
					}
					.slide a {
						/* wir wollen wirklich keine unterstrichenen Links */
						/* background: -webkit-linear-gradient(bottom, currentColor .09em, transparent .09em) repeat-x; */
						/* background: linear-gradient(to top, currentColor .09em, transparent .09em) repeat-x; */
						/* color: #4b86c2; */
						/* color: %baseColor%; */
					}
					.slide .keyboard_key {
						margin-right: 5px;
						padding: 4px 20px 16px 6px;
						border: 2px solid black;
						box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
						border-radius: .2em;
						font-family: monospace;
						font-size: smaller;
						font-weight: 800;
						color: black;
						background-color: #F0F0F0;
					}
					.slide .keyboard_key.more_height {
						line-height: 3;
					}
					.slide b,
					.slide strong {
						font-weight: 700
					}
					.slide blockquote,
					.slide dfn,
					.slide em,
					.slide i {
						font-style: italic
					}
					.slide code,
					.slide kbd,
					.slide mark,
					.slide samp {
						/* sonst kommt es evtl. zu einem vertikalen Scrollbar */
						/* padding: .1em .3em; */
						padding: .1em .3em 0 .3em;
						border-radius: .2em
					}
					.slide code,
					.slide kbd,
					.slide samp {
						background: rgba(88, 90, 94, .1);
						line-height: 1;
						font-family: PT Mono, monospace, monospace
					}
					.slide mark {
						background: #fafaa2
					}
					.slide sub,
					.slide sup {
						position: relative;
						line-height: 0;
						font-size: 75%
					}
					.slide sub {
						bottom: -.25em
					}
					.slide sup {
						top: -.5em
					}
					.slide blockquote::before {
						position: absolute;
						margin: -.15em 0 0 -.43em;
						color: #ccc;
						line-height: 1;
						font-size: 8em;
						content: '\201C'
					}
					.slide blockquote+figcaption {
						margin: -1em 0 1em;
						font-style: italic;
						font-weight: 700
					}
					.slide ol,
					.slide ul {
						margin-bottom: 1em;
						counter-reset: list
					}
					.slide ol li,
					.slide ul li {
						page-break-inside: avoid;
						/* text-indent: -2em */
						text-indent: -2.0em;
					}
					.slide ol li::before,
					.slide ul li::before {
						display: inline-block;
						width: 2em;
						color: #979a9e;
						text-align: right
					}
					.slide ol ol,
					.slide ol ul,
					.slide ul ol,
					.slide ul ul {
						margin-bottom: 0;
						margin-left: 2em
					}
					.slide ul>li::before {
						padding-right: .5em;
						content: '\0025CF';
					}
					.slide ul>li:lang(ru)::before {
						content: '?'
					}
					.slide ol>li::before {
						padding-right: .4em;
						counter-increment: list;
						content: counter(list) "."
					}
					.slide ol>li[value]::before {
						content: attr(value) "."
					}
					.slide ul>li[value]::before {
						content: attr(value)
					}
					.slide li.next, .slide tr.next {
						position: relative;
					}
					@media screen {
						.slide li.next:last-of-type::after, .slide tr.next:last-of-type::after {
							content: ""; 
							position: absolute; 
							bottom: -5px; 
							right: 0;
							height: 1px; 
							width: 20%;
							background-color: #999;
							background-image: -webkit-gradient(linear, right top, left top, from(#999), to(rgba(0, 0, 0, 0)));
							background-image: -webkit-linear-gradient(right, #999, rgba(0, 0, 0, 0));
							background-image: -moz-linear-gradient(right, #999, rgba(0, 0, 0, 0));
							background-image: -ms-linear-gradient(right, #999, rgba(0, 0, 0, 0));
							background-image: -o-linear-gradient(right, #999, rgba(0, 0, 0, 0));
							background-color: transparent; /* add this line after the mixin call */
						}
					}
					.slide table {
						/* margin-left: -100px; */
						margin-left: -95px;
						margin-bottom: 1em;
						width: calc(100% + 100px + 100px)
					}
					.slide table td:first-child,
					.slide table th:first-child {
						padding-left: 96px
					}
					.slide table td:last-child,
					.slide table th:last-child {
						padding-right: 96px
					}
					.slide table th {
						text-align: left;
						font-weight: 700
					}
					.slide table tr:not(:last-of-type)>* {
						background: -webkit-linear-gradient(bottom, rgba(88, 90, 94, .5) .055em, transparent .055em) repeat-x;
						background: linear-gradient(to top, rgba(88, 90, 94, .5) .055em, transparent .055em) repeat-x
					}
					.slide table.striped tr:nth-child(even) {
						background: rgba(88, 90, 94, .1)
					}
					.slide table.striped tr>* {
						background-image: none
					}
					.slide pre {
						margin-bottom: 1em;
						counter-reset: code;
						white-space: normal
					}
					.slide pre code {
						display: block;
						margin-left: -100px;
						padding: 0 0 0 100px;
						width: calc(100% + 100px + 100px);
						border-radius: 0;
						background: 0 0;
						/* line-height: 2; */
						line-height: 1.2em;
						white-space: pre;
						-moz-tab-size: 4;
						-o-tab-size: 4;
						tab-size: 4
					}
					.slide pre code:not(:only-child).mark {
						background: rgba(88, 90, 94, .1)
					}
					.slide pre code:not(:only-child)::before {
						position: absolute;
						margin-left: -2em;
						color: #979a9e;
						counter-increment: code;
						content: counter(code, decimal-leading-zero) "."
					}
					.slide pre mark {
						/* sonst verschwinden die Marks in pre.code-Bereichen */
						/* position: relative; */
						z-index: -1;
						margin: 0 -.3em
					}
					.slide pre mark.important {
						background: #c00;
						color: #fff
					}
					.slide pre .comment {
						color: #999
					}
					.slide footer {
						position: absolute;
						right: 0;
						bottom: -640px;
						left: 0;
						display: none;
						padding: 41px 100px 8px;
						background: #fbfbba;
						box-shadow: 0 1px 0 #fafaa2 inset;
						-webkit-transition: bottom .3s;
						transition: bottom .3s
					}
					.slide footer mark {
						background: rgba(255, 255, 255, .8)
					}
					.slide:hover>footer {
						bottom: 0
					}
					.slide.grid {
						background-image: url(../images/grid.png);
						-ms-interpolation-mode: nearest-neighbor;
						image-rendering: -webkit-optimize-contrast;
						image-rendering: -moz-crisp-edges;
						image-rendering: pixelated
					}
					.fronteditable {
						/* fuer die Frontend-Bearbeitbarkeit von Nanome-Bestandteilen, nicht entfernen! */
						float: right;
						height: 0;
					}
					.fronteditable a {
						max-height: 12px;
					}
					@media (-webkit-min-device-pixel-ratio: 2),
					(min-resolution: 2dppx) {
						.slide.grid {
							background-image: url(../images/grid@2x.png);
							background-size: 1024px auto
						}
					}
					.slide.black {
						background-color: #000
					}
					.slide.black::after,
					.slide.white::after {
						visibility: hidden
					}
					.slide.white {
						background-color: #fff
					}
					.slide .double,
					.slide .triple {
						-webkit-column-gap: 75px;
						-moz-column-gap: 75px;
						column-gap: 75px;
						-webkit-hyphens: auto;
						-ms-hyphens: auto;
						hyphens: auto
					}
					.slide .double {
						-webkit-column-count: 2;
						-moz-column-count: 2;
						column-count: 2
					}
					.slide .triple {
						-webkit-column-count: 3;
						-moz-column-count: 3;
						column-count: 3
					}
					.slide .shout {
						position: absolute;
						top: 50%;
						/* left: 0; */
						left: 3%;
						/* width: 100%; */
						width: 94%;
						text-align: center;
						line-height: 1;
						/* font-size: 150px; */
						font-size: 80px;
						-webkit-transform: translateY(-50%);
						transform: translateY(-50%)
					}
					.slide .shout a {
						background: -webkit-linear-gradient(bottom, currentColor .11em, transparent .11em) repeat-x;
						background: linear-gradient(to top, currentColor .11em, transparent .11em) repeat-x
					}
					.slide .cover {
						z-index: -1;
						max-width: 100%;
						max-height: 100%
					}
					.slide .cover.w,
					.slide .cover.width {
						width: 100%;
						max-height: none
					}
					.slide .cover.h,
					.slide .cover.height {
						height: 100%;
						max-width: none
					}
					.slide .cover+figcaption {
						position: absolute;
						bottom: 20px;
						right: 10px;
						font-size: 12px;
						opacity: .7;
						-webkit-transform-origin: 0 100%;
						transform-origin: 0 100%;
						-webkit-transform: translateX(100%) rotate(-90deg);
						transform: translateX(100%) rotate(-90deg)
					}
					.slide .cover+figcaption.white {
						color: #fff
					}
					.slide .cover+figcaption a {
						color: currentcolor
					}
					.slide .cover,
					.slide .place {
						position: absolute;
						top: 50%;
						left: 50%;
						-webkit-transform: translate(-50%, -50%);
						transform: translate(-50%, -50%)
					}
					.slide .place.b.l,
					.slide .place.b.r,
					.slide .place.bottom.left,
					.slide .place.bottom.right,
					.slide .place.t.l,
					.slide .place.t.r,
					.slide .place.top.left,
					.slide .place.top.right {
						-webkit-transform: none;
						transform: none
					}
					.slide .place.b,
					.slide .place.bottom,
					.slide .place.t,
					.slide .place.top {
						-webkit-transform: translate(-50%, 0);
						transform: translate(-50%, 0)
					}
					.slide .place.l,
					.slide .place.left,
					.slide .place.r,
					.slide .place.right {
						-webkit-transform: translate(0, -50%);
						transform: translate(0, -50%)
					}
					.slide .place.t,
					.slide .place.t.r,
					.slide .place.top,
					.slide .place.top.left,
					.slide .place.top.right {
						top: 0
					}
					.slide .place.r,
					.slide .place.right {
						right: 0;
						left: auto
					}
					.slide .place.b,
					.slide .place.b.l,
					.slide .place.b.r,
					.slide .place.bottom,
					.slide .place.bottom.left,
					.slide .place.bottom.right {
						top: auto;
						bottom: 0
					}
					.slide .place.l,
					.slide .place.left {
						left: 0
					}
					.slide .editorsinfo {
						font-size:10pt;
						float: right;
						color: gray;
						position: absolute;
						bottom: 125px;
						right: -50px;
						/* dreht den Text um 90 Grad gegen den Uhrzeigersinn */
						-webkit-transform: rotate(90deg);
						-moz-transform: rotate(90deg);
						-ms-transform: rotate(90deg);
						-o-transform: rotate(90deg);
					}
					.slide span.fullscreenlink a {
						/* float: right; */
						position: fixed;
						bottom: 50px;
						right: 50px;
					}
					.slide .area {
					  /* sonst wird der Bereich größer als die Folie */
					  max-height: 433px;
					}
					.slide .area .block {
					  /* sonst wird der Bereich größer als die Folie */
					  /* max-height: 100%; */
					}
					.progress {
						left: -20px;
						bottom: 0;
						z-index: 1;
						display: none;
						width: 0;
						height: 0;
						box-sizing: content-box;
						/* border: 10px solid #4b86c2; */
						border: 10px solid %baseColor%;
						border-right-color: transparent;
						-webkit-transition: width .2s linear;
						transition: width .2s linear;
						clip: rect(10px, 1044px, 20px, 20px)
					}
					.progress[style*='100%'] {
						padding-left: 10px
					}
					.badge,
					.badge a,
					.progress {
						position: absolute
					}
					.badge {
						/* position: fixed; */
						font-size: 10px;
						top: 0;
						z-index: 1;
						overflow: hidden;
						display: none;
						width: 9em;
						height: 9em;
						right: 0;
						visibility: hidden
					}
					@media (min-width: 1174px) {
						.badge {
							font-size: 20px
						}
					}
					@media (min-width: 2348px) {
						.badge {
							font-size: 40px
						}
					}
					.badge a {
						right: -50%;
						bottom: 50%;
						left: -50%;
						visibility: visible;
						/* background: #4b86c2; */
						/* background: %baseColor%; */
						color: #fff;
						text-align: center;
						line-height: 2;
						-webkit-transform-origin: 50% 100%;
						transform-origin: 50% 100%;
						-webkit-transform: rotate(45deg);
						transform: rotate(45deg)
					}
					.region {
						display: none
					}
					@media screen {
						.shower.list {
							padding-top: 25px;
							width: 100%;
							display: -webkit-box;
							display: -webkit-flex;
							display: -ms-flexbox;
							display: flex;
							-webkit-flex-wrap: wrap;
							-ms-flex-wrap: wrap;
							flex-wrap: wrap;
							/* background: #F0F0F0; */
							/* background: %backgroundColor%; */
							/* position: absolute; */
							/* clip: rect(0, auto, auto, 0) */
						}
						.shower.list .caption {
							display: block
						}
						.shower.list .slide {
							border-radius: 2px;
							box-shadow: 0 20px 50px rgba(0, 0, 0, .3)
						}
					}
					@media screen and (min-width: 1174px) {
						.shower.list {
							padding-top: 30px
						}
					}
					@media screen and (min-width: 2348px) {
						.shower.list {
							padding-top: 80px
						}
					}
					@media screen {
						.shower.list .slide {
							/* Smartphone hoch (375x667) - z.B. "iPhone SE" */

							/* Abstand zwischen den einzelnen Folien in der Übersicht */
							/* margin: 0 -768px -455px 25px; */
							margin: 0 -708px -415px 25px;

							/* Größe der einzelnen Folien in der Übersicht */
							/* -webkit-transform: scale(.25); */
							-webkit-transform: scale(.317);
							transform: scale(.317);
						}
					}
					@media screen and (min-width: 660px) {
						.shower.list .slide {
							/* Smartphone quer (667x375) */

							margin: 0 -730px -435px 25px;
							-webkit-transform: scale(.29);
							transform: scale(.29);
						}
					}
					@media screen and (min-width: 814px) {
						.shower.list .slide {
							/* Tablet hoch (820x1180) - z.B. "iPad Air" */

							margin: 0 -472px -145px 35px;
							-webkit-transform: scale(.72);
							transform: scale(.72)
						}
					}
					@media screen and (min-width: 1174px) {
						.shower.list .slide {
							/* Tablet quer (1180x820) */

							/* margin: 0 -512px -285px 35px; */
							margin: 0 -492px -275px 35px;

							/* -webkit-transform: scale(.5); */
							-webkit-transform: scale(.52);
							transform: scale(.52)
						}
					}
					@media screen and (min-width: 2348px) {
						.shower.list .slide {
							/* enorm großer Bildschirm */

							margin: 0 0 100px 100px;
							-webkit-transform: scale(1);
							transform: scale(1)
						}
					}
					@media screen {
						.shower.list .slide {
							-webkit-transform-origin: 0 0;
							transform-origin: 0 0;
						}
						.shower.list .slide:hover {
							box-shadow: 0 0 0 20px rgba(0, 0, 0, .1), 0 20px 50px rgba(0, 0, 0, .3)
						}
						.shower.list .slide.active {
							/* box-shadow: 0 0 0 1px #376da3, 0 0 0 20px #4b86c2, 0 20px 50px rgba(0, 0, 0, .3); */
							/* box-shadow: 0 0 0 1px #376da3, 0 0 0 20px %baseColor%, 0 20px 50px rgba(0, 0, 0, .3); */
						}
						.shower.list .slide * {
							pointer-events: none
						}
						.shower.list .badge,
						.shower.list .slide footer {
							display: block
						}
						.shower.full {
							position: absolute;
							top: 50%;
							left: 50%;
							overflow: hidden;
							margin: -320px 0 0 -512px;
							width: 1024px;
							height: 640px;
							background: #000
						}
						.shower.full .slide {
							position: absolute;
							top: 0;
							left: 0;
							background: url(/images/base/showerpic.jpg) no-repeat;
							margin-left: -150%;
							visibility: hidden
						}
						.shower.full .slide.active {
							margin: 0;
							visibility: visible
						}
						.shower.full .slide pre code:not(:only-child).mark.next {
							visibility: visible;
							background: 0 0
						}
						.shower.full .slide pre code:not(:only-child).mark.next.active {
							background: rgba(88, 90, 94, .1)
						}
						.shower.full .slide .next {
							visibility: hidden
						}
						.shower.full .slide .next.active {
							visibility: visible
						}
						.shower.full .slide .shout.grow,
						.shower.full .slide .shout.shrink {
							opacity: 0;
							-webkit-transition: .4s ease-out;
							transition: .4s ease-out;
							-webkit-transition-property: opacity, -webkit-transform;
							transition-property: opacity, transform;
							transition-property: opacity, transform, -webkit-transform
						}
						.shower.full .slide .shout.grow {
							-webkit-transform: scale(.1) translateY(-50%);
							transform: scale(.1) translateY(-50%)
						}
						.shower.full .slide .shout.shrink {
							-webkit-transform: scale(10) translateY(-50%);
							transform: scale(10) translateY(-50%)
						}
						.shower.full .slide.active .shout.grow,
						.shower.full .slide.active .shout.shrink {
							opacity: 1;
							-webkit-transform: scale(1) translateY(-50%);
							transform: scale(1) translateY(-50%)
						}
						.shower.full .progress {
							display: block;
							-webkit-transform: translateZ(0);
							transform: translateZ(0)
						}
						.shower.full .region {
							position: absolute;
							clip: rect(0 0 0 0);
							overflow: hidden;
							margin: -1px;
							padding: 0;
							width: 1px;
							height: 1px;
							border: none;
							display: block
						}
					}
					.area {
					  display: -webkit-flex;
					  -webkit-flex-wrap: wrap;
					  -webkit-align-items: stretch;
					  display: flex;
					  flex-wrap: wrap;
					  align-items: stretch;
					  max-height: 27rem;
					  overflow: auto;
					  margin-bottom: 1rem;
					  border: 1px solid #ccc;
					}
					.area .block {
					  -webkit-flex: 1;
					  flex: 1;
					  overflow: auto;
					  /* min-width: 15rem; */
					  min-width: 20rem;
					  margin: 0;
					  padding: .5rem;
					  border: 1px solid #ccc;
					}
					.area.auto .block {
					  -webkit-flex: 1 auto;
					  flex: 1 auto;
					}
					.area .code, .area .result {
					  position: relative;
					  overflow-x: hidden;
					  outline: none;
					  border-radius: 0;
					}
					.area .code:after, .area .result:after {
					  content: attr(title);
					  z-index: 10;
					  position: absolute;
					  top: -2px;
					  right: -2px;
					  padding: 3px 4px 2px;
					  color: white;
					  background: #ccc;
					  font: 75%/1 "Open Sans", sans-serif;
					  text-transform: uppercase;
					}
					.area .result:after {
					  font-size: 12px;
					}
					.area .code pre,
					.area .code code {
					  margin: 0;
					  padding: 0;
					  background-color: white;
					  /* line-height: 1.5; */
					  white-space: pre-wrap;
					  width: auto;
					}
					.area .result {
					  /* führt sonst (unten) zu einem übergroßen IFrame */
					  font-size: 0px;
					  /* sonst wird der Bereich größer als die Area drumherum */
					  max-height: 431px;
					}
					.area .result iframe {
					  width: 100%;
					}
					.area .hidden {
					  display: none !important;
					}