@charset "UTF-8";

/* 
ds	denksport			af50e6	175,80,230		lila
dk	deklination			cc0000	204,0,0			dunkelrot
gn	genitiv				e68080	230,128,128		hellrot
vb	verb				76a319	118,163,25		dunkelgrün.source

vb	verb				76a319	118,163,25		dunkelgrün
kj	konjunktiv			aae813	170,232,19		hellgrün
sf	schrift				ff7400	255,116,0		orange
rs	rechtschreibung		ffcc00	255,204,0		gelb
zs	zeichensetzung		b78d49	183,141,73		braun
sy	syntax				123859	18,56,89		dunkelblau
st	stilistik			7a9fbf	122,159,191		mittelblau
ss	schriftstellerei	bdcfdf	189,207,223		hellblau
wk	wortkunde			e52466	229,36,102		pink
sp	sprache				7a5ae8	122,90,232		violett
dv	divers				cac9c8	202,201,200		grau
*/

html, body, div, span, h1,  h2, h3, h4, h5, h6, h7, p, a, q, font, img, em, strong, dfn, blockquote, cite, code, abbr, acronym, strong, address, s, ul, ol, li, dl, dd, dt, table, th, tr, td, caption, pre, hr, nav, header, footer, main, section, article, aside, figure, figcaption, video, audio, form, input, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; font-weight: inherit; font-family: inherit; font-style: inherit; } 
nav, header, footer, main, section, article, aside, figure, figcaption, video, audio, svg, form, input, label, blockquote { display: block; }
mark { background: transparent; display: inline; height: auto; width: auto; margin: 0; padding: 0; outline: 0; }
html[lang="de"] q { quotes: "" "" } q { quotes: "" "" }
a { outline: 0; text-decoration: none; font-style: normal; color: inherit; }
dl, dd, dt, ul, li { font-style: normal; }
ul, ol { list-style: none; padding: 0; margin: 0; }

::selection { background: #d7a7f2; color: #fff; /* Safari */ } ::-moz-selection { background:#d7a7f2; color: #fff; /* Firefox */ }


/* FONTS */

/* Headlineschrift */
@font-face { font-family: FiraSansRegular; src: url(font/fsreg.otf); }
@font-face { font-family: FiraSansLight; src: url(font/fslight.otf); }
@font-face { font-family: FiraSansMedium; src: url(font/fsmed.otf); }
@font-face { font-family: FiraSansBold; src: url(font/fsbold.otf); }
@font-face { font-family: Neo; src: url(font/neo.otf); }


/* Masterfontset */
.condensed { font-family: "Myriad Pro Cond", "Helvetica Neue Condensed", "Arial Narrow", "Ubuntu Condensed", sans-serif; }
.serif { font-family: Georgia, "Baskerville", "Cambria", serif; }
.sans1 { font-family: "Myriad Pro", "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; }
.sans2 { font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; }
.mono { font-family: Consolas, "San Francisco Mono", Courier, "Courier New", monospace; }
.greek { font-family: Neo, Georgia, serif; font-size: 1.25rem; }
	q.greek, q span.greek { font-style: normal; }


/* HEADLINE GLOBAL */
h1, h2, h3, h4, h5, h6, h7, p#bl-name { 
	font-family: "Myriad Pro Cond", "Fira Sans", "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; /* Fira von Google */
	font-weight: bold;
	font-weight: 500;
	}

h2 { 
	font-size: 2rem;
	font-style: normal;
	line-height: 1.125;
	color: #af50e6;
	margin: 0 0 1.625rem 0;
	}
	
	h2.imageheadline { margin: 0; }
	
code {
	font-family: Consolas, "San Francisco Mono", Courier, "Courier New", monospace;
	font-size: inherit;
	white-space: pre-wrap;
	}
	
	
/* Targetbeleuchtung */	
	
	/* Kategorien auf der Startseite */
	body#index section#deklination:target h2, body#index section#genitiv:target h2, body#index section#verb:target h2, body#index section#konjuntiv:target h2, body#index section#schrift:target h2, body#index section#rechtschreibung:target h2, body#index section#zeichensetzung:target h2, body#index section#syntax:target h2, body#index section#stilistik:target h2, body#index section#wortkunde:target h2, body#index section#sprache:target { color: #af50e6; animation-name: target-cat; animation-duration: 3s; animation-timing-function: linear; animation-delay: 1s; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: forwards; animation-play-state: running; } 
	@keyframes target-cat {  0% { color: #af50e6; } 25% { color: #ebd3f9; } 50% { color: #c37cec; } 75% { color: #7c0bbd; } 100% { color: #af50e6; } }
	
	/* Überschriften */
	h2:target, h3:target, h4:target, body#page section#text section:target h2, body#page section#text section:target h3, body#page section#text section:target h4, body#page section#text section:target header h2, body#page section#text section:target header h3, body#page section#text section:target header h4 { color: #af50e6; animation-name: target-hl; animation-duration: 3s; animation-timing-function: linear; animation-delay: 1s; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: forwards; animation-play-state: running; }
	@keyframes target-hl {  0% { color: #af50e6; } 25% { color: #ebd3f9; } 50% { color: #c37cec; } 75% { color: #7c0bbd; } 100% { color: #af50e6; } }	

	/* Textelemente */
	p:target, ul:target, figure:target, blockquote:target { background: #af50e6; animation-name: target-p; animation-duration: 3s; animation-timing-function: linear; animation-delay: 1s; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: forwards; animation-play-state: running; }
	@keyframes target-p {  0% { color: #af50e6; } 25% { color: #ebd3f9; } 50% { color: #c37cec; } 75% { color: #7c0bbd; } 100% { color: transparent; } }
	
	
	
/* jQuery */
.remove { display: none; }
.block { display: block; }
.inblock { display: inline-block; }
.inline { display: inline; }







/* ARCHITEKTUR ============================================================== */

html {
	width: 100%;
	background: #181615;
	border-top: 0.5rem solid #af50e6;
	border-bottom: 0.5rem solid #af50e6;
	position: relative;
	}

body {
	-x-system-font: none;
	width: 62.5rem; /*1000px*/
	font-family: Georgia, "Baskerville", "Cambria", serif;
	-webkit-font-smoothing: antialiased;
	font-size: 1rem;
	line-height: 1.625;
	font-weight: normal;
	font-variant: normal;
	font-style: normal;
	margin: 0 auto;
	padding: 1rem 0;
	position: relative;
	background: #181615;
	color: #fff;
	min-height: 62.5rem;
	}
	
	
	/* SUPERHEADER mit Logo */
	header#super { display: block; width: 100%; }
	
		/* Auf PAGE schafft die Überschrift den Abstand, auf INDEX Margin */
		body#index header#super { margin-bottom: 5rem; }
	
		a#logo {  
		display: block;
		position: static;
		width: 18rem;
		height: 4rem;
		margin: 1rem 0 1rem 42rem;
		}

		a#logo svg { }
		a#logo svg g#bl-logo { } /* Logo total */
			a#logo svg g#bl-logo rect#bl-quadrat-print { display: none; } 
			a#logo svg g#bl-logo rect#bl-quadrat-screen { fill: #af50e6; } /* bl-Quadrat */
				
			a#logo svg g#bl-logo path#bl-logo-b { fill: #fff; } /* b */
			a#logo svg g#bl-logo path#bl-logo-l { fill: #fff; } /* l */
			
			a#logo svg g#bl-logo .bl-white { fill: #edecec; } /* Buchstaben */
				

		/* Hover */
		a#logo:hover svg g#bl-logo rect#bl-quadrat-screen { fill: #7c0bbd; animation-name: logox; animation-duration: 0.25s; animation-timing-function: linear; animation-delay: 0; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: forwards; animation-play-state: running; }
		
		@keyframes logox {  0% { background-color: transparent; } 100% { background-color: #7c0bbd; } }

		body.lganim { background-image: url(img/logo/logoanimation.svgz); background-position: 0 0; background-repeat: no-repeat; }
	
	
	
	/* FOOTER */		
	footer {
		display: block;
		position: static;
		background: url(img/corner/corner-lila-top-left.svgz) left top, url(img/corner/corner-lila-top-right.svgz) right top, url(img/corner/corner-lila-bottom-left.svgz) left bottom, url(img/corner/corner-lila-bottom-right.svgz) right bottom;
		background-repeat: no-repeat;
		background-color: #ebd3f9;
		color: #2a2625;
		padding: 2.5rem; /* 2.5rem = 40px = Videoraster */
		margin: 8rem 0 5rem 0;
		height: auto;
		width: auto;
		}
		
		footer figure { 
			display: inline-block;
			vertical-align: top;
			position: static;
			margin: 0;
			width: 16.25rem /*260px*/;
			}
			
			footer figure + figure { margin-left: 1rem; padding-left: 1.625rem; }
			footer figure#footer-nav { border-left: 1px dotted #af50e6; }
			
			footer figure p + p { margin-top: 1.625rem; } /* Alle Zeilen alignieren */
			
			footer figure#footer-bl { }
				footer figure#footer-bl svg#footer-logo { display: block; margin: 0 0 2.5rem 0; }
				
				footer figure#footer-bl svg#footer-logo rect#footer-logo-hintergrund { fill: #af50e6; }
				footer figure#footer-bl svg#footer-logo:hover rect#footer-logo-hintergrund { fill: #7c0bbd; }
				footer figure#footer-bl svg#footer-logo path.footer-logo-letters { fill: #fff; }
						
				footer figure#footer-bl  ul#footer-themen { margin: 1.625rem 0 0 0; padding: 0m; }
				footer figure#footer-bl  ul#footer-themen li { height: 1.625rem; background-image: url(img/elements/themenfarben.svgz); background-repeat: no-repeat; padding: 0 0 0 1.625rem; }
			
				footer figure#footer-bl  ul#footer-themen li#footer-themen-denksport		{ background-position: 0px   5px; }
				footer figure#footer-bl  ul#footer-themen li#footer-themen-deklination		{ background-position: 0px -25px; }
				footer figure#footer-bl  ul#footer-themen li#footer-themen-genitiv			{ background-position: 0px -55px; }
				footer figure#footer-bl  ul#footer-themen li#footer-themen-verb				{ background-position: 0px -85px; }
				footer figure#footer-bl  ul#footer-themen li#footer-themen-konjunktiv		{ background-position: 0px -115px; }
				footer figure#footer-bl  ul#footer-themen li#footer-themen-schrift			{ background-position: 0px -145px; }
				footer figure#footer-bl  ul#footer-themen li#footer-themen-rechtschreibung	{ background-position: 0px -175px; }
				footer figure#footer-bl  ul#footer-themen li#footer-themen-zeichensetzung	{ background-position: 0px -205px; }
				footer figure#footer-bl  ul#footer-themen li#footer-themen-syntax			{ background-position: 0px -235px; }
				footer figure#footer-bl  ul#footer-themen li#footer-themen-stilistik		{ background-position: 0px -265px; }
				footer figure#footer-bl  ul#footer-themen li#footer-themen-schriftstellerei	{ background-position: 0px -295px; }
				footer figure#footer-bl  ul#footer-themen li#footer-themen-wortkunde		{ background-position: 0px -325px; }
				footer figure#footer-bl  ul#footer-themen li#footer-themen-sprache			{ background-position: 0px -355px; }
				footer figure#footer-bl  ul#footer-themen li#footer-themen-divers			{ background-position: 0px -385px; }
				
			footer figure h3 { font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; font-weight: bold; font-size: 1rem; }
				footer figure h3 { margin-top: 1.625rem; }
				footer figure h3:first-child { margin-top: 0rem; }
			
			footer figure ul { display: inline-block; }
				footer figure ul li { display: block; padding-left: 1rem; background: url(img/elements/hoverarrow.svg); background-repeat: no-repeat; background-position: 0 -20px; }
				footer figure ul li:hover { color: #af50e6; }
					
					/* Nur die Mittelspalte wird animiert */
					footer figure#footer-nav ul li:hover { background-position: 0 5px; animation-name: hoverarrow; animation-duration: 0.15s; animation-timing-function: ease-in; animation-delay: 0; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: forwards; animation-play-state: running; } 

						@keyframes hoverarrow {  0% { background-position: 0 -5px; } 100% { background-position: 0 5px; } }
				
			footer figure#footer-buch { 
				margin-left: 2rem; 
				font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; 
				font-size: 1rem;
				line-height: 1.25; }
			
				img#footer-buch-cover { display: block; width: 16rem; height: auto; margin: 1rem 0; } 
					
					footer figure#footer-buch p { padding: 0; margin: 0; }
					footer figure#footer-buch h3, footer figure#footer-buch p {  }
					
					footer figure#footer-buch p a { color: #af50e6; }
					footer figure#footer-buch p a:hover { border-bottom: 1px dotted #af50e6; }		
					
					footer figure#footer-buch ul.shops { display: block; width: auto; margin-top: 1rem; }
					footer figure#footer-buch ul.shops li { margin-top: 0.5rem; padding-left: 0; }
					footer figure#footer-buch ul.shops li + li { margin-top: 0.5rem; }
					
					footer figure#footer-buch a.button { color: #fff; }
					
		
		/* Top */
		nav#nav-bottom {  display: block; clear: left; float: none; margin: 1.625rem 0 5rem 2.5rem; }
	

	
	
	/* MAIN */

	main {
		background: transparent;
		width: 62.5rem; /* 1000 px */
		margin: 0;
		position: relative;
		}

		
		/* PAGE-BLÖCKE */
		
		/* Artikelüberschrift */
		body#page main header#page-title { 
			display: block; 
			}
		
			body#page h1 { 
				display: block;
				width: 38rem;
				font-size: 2rem;
				font-style: normal;
				line-height: 1.125;
				color: #af50e6;
				margin-top: 0; 
				margin-right: 0; 
				margin-bottom: 2rem; 
				}
				
				body#page h1.video { margin-left: 2.5rem; } /* 2.5rem = 40px = Videoraster */
				body#page h1.no-video { margin-left: 6rem; max-width: 32rem; } /* Gleicher Einzug wie der Text */
				body#page h1#headline-buch { margin-left: 2.5rem; } /* Auf der buch-Seite */
				
		/* Videosection */
		section#video { 
		display: block;
		position: relative;
		width: auto;
		float: none;
		color: #fff;
		font-weight: normal;
		}
		
		/* Das Video selbst */
		section#video video {
			position: static;
			margin: 0 0 0 0;
			width: 640px; /* = 40rem */
			height: 480px; /* =30rem */
			z-index: 9;
			outline: 1px solid #7e7571;
			}
			section#video a.mobile { display: none; }
			
		/* Watch-Einblendung */
		aside#watch { position: absolute; top: 0; left: 0; width: 40rem; height: 26.5rem; padding-top: 1rem; background: rgba(42,38,37,0.95); z-index: 999; }
		aside#watch ul li { display: inline-block; padding: 1rem 0 0 2rem; }
		aside#watch ul li img { display: block; width: 15rem; height: 11.25rem; }	
		aside#watch ul li a img { display: block; border: 1px solid #a9a3a0; }
		aside#watch ul li a:hover img  { border: 1px solid #af50e6; }
	
		.hidewatch { display: none; }
		.showwatch { display: block; }
		
		/* Videobeschreibung mit Themenlabel */
		section#video header#videoheader { 
			display: block; 
			position: absolute; 
			left: 42rem;
			width: 20rem; 
			}
			
			/* Jede Kategorie hat eine andere Farbe */	
			section#video header#videoheader p span.label { color: #2a2625; margin-right: 0.25rem; text-transform: capitalize; }
				section#video header#videoheader p span.label.buch { background: #af50e6; }
				section#video header#videoheader p span.label.deklination { background: #cc0000; color: #fff; }
				section#video header#videoheader p span.label.genitiv { background: #e68080; }
				section#video header#videoheader p span.label.verb { background: #76a319; }
				section#video header#videoheader p span.label.konjunktiv { background: #aae813; }
				section#video header#videoheader p span.label.schrift { background: #ff7400; }
				section#video header#videoheader p span.label.rechtschreibung { background: #ffcc00; }
				section#video header#videoheader p span.label.zeichensetzung { background: #b78d49; }
				section#video header#videoheader p span.label.syntax { background: #123859; color: #fff; }
				section#video header#videoheader p span.label.stilistik { background: #7a9fbf; }
				section#video header#videoheader p span.label.schriftstellerei { background: #bdcfdf; }
				section#video header#videoheader p span.label.wortkunde { background: #e52466; color: #fff; }
				section#video header#videoheader p span.label.sprache { background: #7a5ae8; color: #fff; }
				section#video header#videoheader p span.label.divers { background: #cac9c8; }
			
			.dim { opacity: 0.05; }
			.dim:hover { opacity: 1; }

			/* Falls unter dem Video-Download-Button der ODF-Button angezeigt wird */
			section#video header#videoheader a.button + a.button { margin-top: 0.5rem; }
			
		/* Block für das Inhaltsverzeichnis und Anmerkungen zu Video */	
		section#videodata  {
			margin: 2.5rem 0 0 0;
			height: auto;
			min-height: 6rem;
			background: #2a2625;
			border-left: 1rem solid #949292;
			}
		
			/* Video hat ein Inhaltsverzeichnis */
			body#page main section#video section.hasToc { display: flex; flex-direction: column; flex-flow: row wrap; justify-content: flex-start; align-items: stretch; } 
				body#page main section#video section.hasToc figure { flex: 1 auto;  }
				body#page main section#video section.hasToc ol#chapters { flex: 1 auto; width: 24rem; padding: 2.5rem 1rem 2.5rem 1.5rem; font-family: FiraSansLight, "Myriad Pro Cond", "Helvetica Neue Condensed", "Open Sans Condensed", "bloscondbold", "Ubuntu Condensed", sans-serif;  }
					body#page main section#video section.hasToc ol#chapters li + li { margin-top: 0.5rem; }
					body#page main section#video section.hasToc ol#chapters li span.chapter-time { padding: 0.1rem 0.25rem; background: #af50e6; color: #fff; font-family: Consolas, "San Francisco Mono", Courier, "Courier New", monospace;  }
				body#page main section#video section.hasToc figure#remarks { width: 29rem; border-left: 1px solid #949292; padding: 2.5rem 2.5rem 2.5rem 2.5rem; }
			
			/* Video hat kein Inhaltsverzeichnis */
			section#videodata.noToc { display: block; } 
				section#videodata.noToc figure#remarks { width: auto; columns: auto 2; column-gap: 2.5rem; padding: 2.5rem 2.5rem 2.5rem 1.5rem;  }
				
				p#playlist a { border-bottom: 1px solid #af50e6; }
				p#playlist a:hover { color: #af50e6; }
				p#playlist a:visited { border-bottom: 1px dotted #949292; }
				
				section#videodata figure#remarks p { display: block; }
				section#videodata figure#remarks p + p { margin-top: 1rem; }
				
				section#videodata figure#remarks a#dsd-hinweis { display: block; position: relative; margin: 0 0 1rem 0; min-height: 5rem; text-decoration: none; }
					section#videodata figure#remarks a#dsd-hinweis img#dsd-hinweis-cover { display: block; float: left; margin-right: 1rem; border: 1px solid #534741; }
					section#videodata figure#remarks a#dsd-hinweis:hover img#dsd-hinweis-cover { border: 1px solid #af50e6; }
					section#videodata figure#remarks a#dsd-hinweis span#dsd-hinweis-text { display: block; }
					section#videodata figure#remarks a#dsd-hinweis:hover span#dsd-hinweis-text { color: #af50e6; }
					
				section#videodata figure#remarks a#dsd-hinweis + p { clear: left; float: none; }
				
				section#videodata figure#remarks ul { margin: 1rem 0 1rem 2rem; }
				section#videodata figure#remarks ul li { list-style-image: url(img/elements/bullet-10.svgz); padding-left: 0.25rem; }
				section#videodata figure#remarks ul li a { color: #af50e6; border-bottom: 1px solid #af50e6; }
				section#videodata figure#remarks ul li a:hover { color: #7c0bbd; border-bottom: 1px solid #7c0bbd; }
				section#videodata figure#remarks ul li a:visited { color: #949292; border-bottom: 1px solid #949292; }
		
		
		/* Screenshotsection */
		section#video-screenshots { 
			margin: 3.25rem 0;
			border-left: 1rem solid #949292;
			background: #2a2625;
			padding: 2.5rem 2.5rem 2.5rem 1.5rem;
			}
			section#video-screenshots h3 { font-size: 2rem; font-style: normal; line-height: 1.125; color: #949292; margin: 0 0 1.625rem 0; }
			section#video-screenshots ul { }
				section#video-screenshots ul li { display: inline-block; width: 160px; height: 120px; margin: 0 1rem 0.5rem 0; border: 1px solid #949292;  }
						section#video-screenshots ul li img { display: block; width: 160px; height: 120px; }		
		
		
		/* Cardsection */
		section#card { 
			display: flex;
			flex-direction: column;
			flex-flow: row wrap;
			justify-content: flex-start;
			margin: 3.25rem 0;
			min-height: 24rem;
			border-left: 1rem solid #af50e6;
			background: #d7a7f2;
			padding: 2.5rem 2.5rem 2.5rem 1.5rem;
			}
			
			section#card header#card-header { flex: 1 auto; width: 24rem; height: auto; padding: 0 2.5rem 0 0;   }
				section#card h3 { font-size: 2rem; font-style: normal; line-height: 1.125; color: #7c0bbd; margin: 0 0 1.625rem 0; }
				section#card p  { width: 19rem; color: #2a2625; }
				section#card ul  { display: block; margin-top: 1rem; }
				section#card ul li  { display: block; margin-bottom: 0.25rem; }
				section#card a.button  { display: inline-block; }
			
			section#card div#card-preview { flex: 1 auto; }
			
			section#card img { display: block; width: 29rem; height: 21.75rem; border: 1px solid #af50e6; }
			
			
		/* Buch */	
		#aside-buch  {
			height: auto;
			display: grid;
			grid-template-columns: 188px 1fr;
			grid-column-gap: 1rem;
			grid-template-rows: 4rem 300px 1fr 1fr;
			margin: 3rem 0 1rem 0;
			border-left: 1rem solid #7c0bbd;
			background: #2a2625;
			padding: 2.5rem 2.5rem 2.5rem 1.5rem;
			grid-column-gap: 2em;
			grid-row-gap: 1em;
			}
			
			section#aside-buch { margin-bottom: 3rem; }
			
			#aside-buch h2, section#aside-buch h1 { 
				grid-column-start: 1;
				grid-column-end: span 2;
				grid-row-start: 1;
				grid-row-end: span 1; 
				justify-self: start;
				width: auto;
				}
			#aside-buch figure { flex: 1 auto; width: auto; height: auto; }
			#aside-buch figure.aside-buch-cover { 
				grid-column-start: 1;
				grid-column-end: 2;
				grid-row-start: 2;
				}
				#aside-buch figure.aside-buch-cover img { width: 188px; height: 300px; margin: 0 1rem 0 0; border: 1px solid #5f5c5c; }
				
			#aside-buch figure.aside-buch-show { 
				grid-column-start: 2;
				grid-column-end: span 1;
				grid-row-start: 2;
				grid-row-end: span 2; 				
				}
				#aside-buch figure.aside-buch-show h3 { font-size: 1.25rem; font-style: bold; color: #edecec; margin: 0 0 0 0;  }
				#aside-buch figure.aside-buch-show h3 span { display: block; }
				#aside-buch figure.aside-buch-show p + p { margin-top: 1rem; }
				#aside-buch figure.aside-buch-show p.summary { font-weight: bold; }
			
			/**
			#aside-buch figure.aside-buch-data { 
				margin-top: 6rem;
				grid-column-start: 2;
				grid-column-end: span 1;
				grid-row-start: 3;
				grid-row-end: span 1; 				
				font-family: FiraSansLight, "Myriad Pro Cond", "Helvetica Neue Condensed", "Open Sans Condensed", "bloscondbold", "Ubuntu Condensed", sans-serif; 
				} **/
				
			#aside-buch figure.aside-buch-data { 
			margin-top: 3.25rem;
				font-family: FiraSansLight, "Myriad Pro Cond", "Helvetica Neue Condensed", "Open Sans Condensed", "bloscondbold", "Ubuntu Condensed", sans-serif; 
			}
			
			#aside-buch figure.aside-buch-data ul#editions {
				margin-top: 1.625rem;
			}
			
			#aside-buch figure.aside-buch-data ul#editions li + li {
				border-top: 1px solid white;
				margin-top: 1rem;
				padding-top: 1rem;
			}
				
			#aside-buch figure.aside-buch-shops { 
				grid-column-start: 1;
				grid-column-end: span 2;
				grid-row-start: 3;
				grid-row-end: span 2; 				
				font-family: FiraSansLight, "Myriad Pro Cond", "Helvetica Neue Condensed", "Open Sans Condensed", "bloscondbold", "Ubuntu Condensed", sans-serif; 
				}
				#aside-buch figure.aside-buch-shops ul li { display: block; margin-top: 1rem; }
				#aside-buch figure.aside-buch-shops ul li a { background-color: #5f5c5c; }
				
				
		/* Buch2 */
		#aside-book  {
			height: auto;
			display: grid;
			grid-template-columns: 14rem auto auto auto;
			grid-column-gap: 1rem;
			grid-template-rows: 4rem auto auto auto auto;
			grid-row-gap: 1em;
			margin: 1rem 0 1rem 0;
			border-left: 1rem solid #7c0bbd;
			background: #2a2625;
			padding: 2.5rem 2.5rem 2.5rem 1.5rem;
			}
			
			#aside-book h2, section#aside-book h1 { 
				grid-column-start: 1;
				grid-column-end: span 4;
				grid-row-start: 1;
				grid-row-end: span 1; 
				justify-self: start;
				width: auto;
				}
				
			#aside-book figure.aside-book-cover { 
				grid-column-start: 1;
				grid-column-end: 2;
				grid-row-start: 2;
				grid-row-end: span 4;
				}
				
				#aside-book figure.aside-book-cover img { width: 188px; height: 300px; margin: 0 1rem 0 0; border: 1px solid #5f5c5c; }
				
				#aside-book figure.aside-book-cover ul.aside-leseproben {  
					margin-top: 1.65rem;
					padding-right: 2rem;
					height: auto;
					font-family: FiraSansLight, "Myriad Pro Cond", "Helvetica Neue Condensed", "Open Sans Condensed", "bloscondbold", "Ubuntu Condensed", sans-serif; 
					}
					#aside-book figure.aside-book-cover ul.aside-leseproben li { display: block; margin-top: 1rem; }
					#aside-book figure.aside-book-cover ul.aside-leseproben li a { background-color: #5f5c5c; }
					
			#aside-book figure.klappentext { 
				grid-column-start: 2;
				grid-column-end: span 3;
				grid-row-start: 2;
				grid-row-end: span 1;
				max-width: 58ch;
				}
				
				#aside-book figure.klappentext p + p { margin-top: 1rem; }
				
			#aside-book figure.aside-book-data { 
				grid-column-start: 2;
				grid-column-end: span 3;
				grid-row-start: 3;
				grid-row-end: span 1;
				margin-top: 1rem;
				padding-top: 1.625rem;
				border-top: 1px dotted white;
				}
				
			#aside-book figure.aside-book-editionen { 
				grid-column-end: span 1;
				grid-row-start: 4;
				grid-row-end: span 1;
				}	
				
				#aside-book figure#edition-ebook { grid-column-start: 2; border-right: 1px dotted white; padding-right: 0.5rem; }
				#aside-book figure#edition-amazon { grid-column-start: 3; border-right: 1px dotted white; padding-left: 0.5rem; padding-right:0.5rem; }
				#aside-book figure#edition-bod { grid-column-start: 4; padding-left: 0.5rem; }
				
				
			#aside-book ul.aside-mobile-leseproben { display: none; }

			#aside-book ul.shops { 
				grid-column-start: 2;
				grid-column-end: span 3;
				grid-row-start: 5;
				grid-row-end: span 1;
				margin-left: -0.5rem;
				}
				
				#aside-book ul.shops li { display: inline-block; margin-top: 1rem; }
				#aside-book ul.shops li#buch_link_info { display: none; }
				#aside-book ul.shops li + li { margin-left: 0.5rem; }
				#aside-book ul.shops li a { background: #d7a7f2; color: #181615; }
				#aside-book ul.shops li a:hover { background: #af50e6; }
				#aside-book ul.shops li a:visited { background: #4b2263; color: #949292; }
	
	
		/* Textsection */
		section#text { 
			display: block;
			position: relative;
			width: auto;
			float: none;
			color: #2a2625;
			border-left: 1rem solid #7c0bbd;
			background-color: #fff;
			padding: 5rem 0;
			}
			
			section#video + section#text { margin-top: 5rem; }
			
			/* Textteaser, wenn es kein Video gibt */
				section#text header#textteaser { 
					font-family: FiraSansLight, "Myriad Pro Cond", "Helvetica Neue Condensed", "Open Sans Condensed", "bloscondbold", "Ubuntu Condensed", sans-serif;
					font-size: 1.625rem;
					line-height: 1.25;
					margin-bottom: 5rem;
					width: 32rem;
					}
					
					section#text header#textteaser p { width: 32rem; font-family: inherit; font-size: inherit; line-height: inherit;  }
			
			/* Wenn es keinen Text gibt, wird die Textsection ausgeblendet */
			section#text.hasText { display: block; }
			section#text.noText { display: none; }
			
			
			/* Alle Formate sind grundsätzlich 35rem = 560px breit */
			section#text p, section#text ul, section#text ol, section#text h2, section#text h3, section#text h4 { width: 35rem; }
				
				section#text p, section#text ul, section#text ol {
					font-family: Georgia, "Baskerville", "Cambria", serif;
					font-size: 1rem;
					}
					
			section#text nav * { width: auto; }
			
			section#text .narrow { width: 33rem; }
			
			
			
			section#text code{
				display: block;
				margin: 1rem 0 1rem 0;
				padding: 1rem 1rem 1rem 5rem;
				background: #cac9c8;
				font-size: 1.25rem;
				}
				
			p span.code-frag { display: inline-block; width: 5rem; margin-right: 1rem; font-weight: bold; font-family: Consolas, "San Francisco Mono", Courier, "Courier New", monospace; vertical-align: top; }
			p span.code-decl { display: inline-block; width: 27rem; vertical-align: top; }
		
			
			/* Inhaltsverzeichnis Text */
			nav#table-of-contents {
				display: block;
				position: absolute;
				top: -1rem;
				left: 40rem; 
				width: 20.5rem; 
				margin: 0;
				padding: 1rem;
				background: 
				url(img/corner/corner-lila-top-left.svgz) left top no-repeat, 
				url(img/corner/corner-lila-top-right.svgz) right top no-repeat, 
				url(img/corner/corner-lila-bottom-left.svgz) left bottom no-repeat, 
				url(img/corner/corner-lila-bottom-right.svgz) right bottom no-repeat;
				}

				nav#table-of-contents dl {
					display: block;
					height: auto;
					background-color: #d7a7f2;
					background-color: rgba(175,80,230,0.2);
					border: 1px solid #af50e6;
					border: 1px solid rgba(175,80,230,0.3);
					border-right: 0;
					padding: 1rem 0;
					}
				
				/* Themenwiederholung im Inhaltsverzeichniskasten */
				nav#table-of-contents dl dt { margin-bottom: 1rem; padding: 0 1rem; font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; }
				nav#table-of-contents dl dd + dt { margin-top: 1.625rem; margin-bottom: 1.625rem; padding-top: 1rem; border-top: 1px solid #af50e6; border-top: 1px solid rgba(175,80,230,0.3); }
					
				nav#table-of-contents dl dd#toc-line { font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; font-weight: bold;	}
					
				nav#table-of-contents dl dd { display: block; padding: 0 1rem; font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; }
					
					nav#table-of-contents dl dd.second { margin-left: 1em; }
					nav#table-of-contents dl dd.third { margin-left: 2em; }
					nav#table-of-contents dl dd.album a { display: inline-block; padding-left: 1.625rem; position: relative; }
					nav#table-of-contents dl dd.album a:before { display: inline-block; position: absolute; left: 0; top: -0.01rem; content: url("img/elements/bullet-10.svgz"); padding-right: 0.25rem; }
					
					nav#table-of-contents dl dd a:hover { color: #af50e6; }
					

			
		/* More Artikelseite */
		body#page aside#more {
			display: flex;
			flex-direction: column;
			flex-flow: row wrap;
			justify-content: flex-start;
			position: static;
			height: auto;
			width: auto;
			background-color: #cac9c8;
			padding: 2.5rem; /* 2.5rem = 40px = Videoraster */
			margin: 6rem 0 1.625rem 0;
			border-left: 1rem solid #5f5c5c;
			}
			
			body#page aside#more ul.more {
				flex: 1;
				height: auto;
				}
				
				body#page aside#more ul.more + ul.more { margin-left: 1.625rem; }
				
				body#page aside#more ul.more h6 {
					font-family: "Myriad Pro", "Seravek", "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;
					font-weight: bold;
					font-weight: 700;
					font-size: 2rem;
					font-style: normal;
					line-height: 1.125;
					color: #2a2625;
					margin: 0 0 1rem 0;
					}
					
					body#page aside#more ul.more li + h6 { margin-top: 1rem; }
					
				body#page aside#more ul.more li { display: block; height: auto; min-height: 2rem; color: #2a2625; text-indent: 0; }
				body#page aside#more ul.more li a { padding: 0; margin: 0; }
				body#page aside#more ul.more li a:hover { color: #af50e6; }
				body#page aside#more ul.more li a:visited { color: #949292; }
				body#page aside#more ul.more li + li { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dotted #af50e6; }
			
			body#page aside#more hr { display: block; width: 100% }
			body#page aside#more a.button { display: inline-block; margin: 1.625rem 0 1rem 0; }
		
		
		
		
		/* INDEX-BLÖCKE */
		
		/* Header Claim oben rechts */
		body#index main header#bl { 
			display: block;
			position: absolute;
			top: -1rem;
			right: -1rem;
			z-index: 99999;
			width: 21.5rem;
			height: 16rem;
			color: #2a2625;
			background: url(img/corner/corner-lila-top-left.svgz) left top, url(img/corner/corner-lila-top-right.svgz) right top;
			background-repeat: no-repeat;
			background-color: transparent;
			padding: 1rem 1rem 0 1rem;
			font-family: "Myriad Pro", "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;
			font-size: 1.125rem;
			line-height: 1.25;
			}
			
			/* Die Elemente in header und nav erzeugen den lila Hintergrund*/
			body#index main header#bl h1, body#index main header#bl p#bl-name { padding: 1.625rem 1rem 0 1rem; margin: 0; background: #ebd3f9;  }
				body#index main header#bl h1 span, body#index main header#bl p#bl-name span { display: block; }
			header#bl p#bl-desc { padding: 0 1rem 1rem 1rem; margin: 0; background: #ebd3f9; line-height: 1.25; }
				header#bl p#bl-desc { height: 12rem;  }
		
		
		/* Header Top-Menü */	
		body#index main nav#header-nav {
			display: block;
			position: absolute;
			top: 8rem;
			right: -1rem;
			outline: 0px solid blue;
			z-index: 99999999; /* nav überlappt bl */
			width: 21.5rem;
			color: #2a2625;
			background: url(img/corner/corner-lila-bottom-left.svgz) left bottom, url(img/corner/corner-lila-bottom-right.svgz) right bottom;
			background-repeat: no-repeat;
			background-color: transparent; /* Die Elemente in header und nav erzeugen den lila Hintergrund*/
			padding: 0 1rem 1rem 1rem;
			}

			/* Header-Navigation */
			body#index main nav#header-nav {  }
			
				/* Bullets für beide ULs */
				body#index main nav#header-nav ul#basic li, body#index main nav#header-nav ul#areas li { height: 1.625rem; background-image: url(img/elements/themenfarben.svgz); background-repeat: no-repeat; padding: 0 0 0 1.625rem; }

				/* Basiclinks */
				body#index main nav#header-nav ul#basic { margin: 1.625rem 0 0 0; padding: 1rem; border-top: 1px solid #af50e6; background: #efdcfa; }
					body#index main nav#header-nav ul#basic li { background-position: 0px 4px; }

				
				/* Sachgebiete */
				body#index main nav#header-nav ul#areas { margin: 0; padding: 1rem; border-top: 1px solid #af50e6; background: #f3e5fb; }
				body#index main nav#header-nav ul#areas li#themen-deklination		{ background-position: 0px -25px; }
				body#index main nav#header-nav ul#areas li#themen-genitiv			{ background-position: 0px -55px; }
				body#index main nav#header-nav ul#areas li#themen-verb				{ background-position: 0px -85px; }
				body#index main nav#header-nav ul#areas li#themen-konjunktiv		{ background-position: 0px -115px; }
				body#index main nav#header-nav ul#areas li#themen-schrift			{ background-position: 0px -145px; }
				body#index main nav#header-nav ul#areas li#themen-rechtschreibung	{ background-position: 0px -175px; }
				body#index main nav#header-nav ul#areas li#themen-zeichensetzung	{ background-position: 0px -205px; }
				body#index main nav#header-nav ul#areas li#themen-syntax			{ background-position: 0px -235px; }
				body#index main nav#header-nav ul#areas li#themen-stilistik			{ background-position: 0px -265px; }
				body#index main nav#header-nav ul#areas li#themen-schriftstellerei 	{ background-position: 0px -295px; }
				body#index main nav#header-nav ul#areas li#themen-wortkunde			{ background-position: 0px -325px; }
				body#index main nav#header-nav ul#areas li#themen-sprache			{ background-position: 0px -355px; }
				body#index main nav#header-nav ul#areas li#themen-divers			{ background-position: 0px -385px; }
			
		
				/* Header-Links */
				body#index main nav#header-nav ul li a { color: inherit; }
				body#index main nav#header-nav ul li a:hover { color: #af50e6; }
		
				/* Feed-Icons unten bei Subscribe */
			
		
		/* PRIME */
		body#index main section#prime { 
			display: block;
			position: static;
			display: block;
			width: auto;
			height: auto;
			min-height: 54rem;
			float: none;
			color: #2a2625;
			background-color: #fff;
			margin: 0;
			padding: 0 0 2.5rem 0; /* Weißraum unten */
			border-left: 1rem solid #af50e6;
			}
				
			/* Die Kinder haben eine begrenzte Breite. H2 auf Index, H1 anderswo */
			body#index main section#prime h1, body#index main section#prime article h2 { padding: 5rem 0 1rem 2.5rem; width: 32rem; z-index: 999; font-size: 3rem; font-family: Georgia, serif; font-weight: 300; color: #2a2625; }
			main section#prime p { padding: 0 0 0 2.5rem; width: 32rem; z-index: 999;}
			main section#prime p + p { padding-top: 1rem;}
			main section#prime a.button { margin: 1.625rem 0 1rem 2.5rem; z-index: 999;}
			
			/* Buch Shops */
			main section#prime ul.shops { padding-left: 2.5rem; }
			main section#prime ul.shops li { display: inline-block; width: auto; min-width: 0; margin: 0 0.25rem 0.25rem 0; padding: 0; list-style: none; background: none; }
			main section#prime ul.shops li#buch_link_info { display: none; }
			main section#prime ul.shops li a.button { width: auto; min-width: 0; margin: 0; padding: 0.1rem 0.25rem; list-style: none; background: #181615; color: #fff; }
			main section#prime ul.shops li a.button:hover { background: #7c0bbd; }
			main section#prime ul.shops li a.button:visited { background: #5f5c5c; }
			
			/* Aufzählungen */
			main section#prime ul { 
				margin: 1.625rem 0;
				list-style: none;
				font-family: inherit;
				font-size: inherit;
				line-height: inherit;
				width: 32rem;
				}
				
				main section#prime article ul li { 
					display: block; 
					width: 30rem; 
					background-image: url(img/elements/bullet-16.svgz);
					background-position: 3rem 0.3rem; /* 3rem nach links, 0.5rem nach unten */
					background-repeat: no-repeat;
					background-size: 0.8125rem 0.8125rem;
					background-color: transparent;
					padding: 0 0 0 5rem;
					}

					main section#prime article ul li + li { margin-top: 1rem; }

					main section#prime article ul li a { color: #af50e6; border-bottom: 2px solid #af50e6; background: #fff; padding: 0.05rem 0.2rem; }
						main section#prime article ul li a:hover { color: #7c0bbd; border-bottom: 2px solid #7c0bbd; background: #ebd3f9; }
						main section#prime article ul li a:visited { color: #5f5c5c; border-bottom: 1px dotted #949292; background: #edecec; }
						
						
			/* Serien und Wochen mit mehreren Sendungen */
			main section#prime figure.woche {
				width: 30.5rem;
				margin: 1rem 0 0 2.5rem;
				padding: 1rem 0;
				border-top: 1px dotted #2a2625;
				}
				
				/* Überschrift der Einzelsendung */
				main section#prime figure.woche h3 {
					font-family: FiraSansMedium;
					font-size: 1.25rem;
					font-weight: bold;
					padding: 0 0 1rem 0;
					}
					
				main section#prime figure.woche p { padding-left: 0; }
				main section#prime figure.woche ol { padding-left: 1.625rem;  }
				main section#prime figure.woche ol li { padding-left: 0.5rem; list-style-type: decimal; }
				main section#prime figure.woche a.button { margin-left: 1rem; }
			
			
			
			/* Jump-Menü */
				/* index.php: Die fünf letzten Beiträge als Liste */
				/* bl.php: Abteilungen */
			body#index main section#prime ul#jump { 
				display: block;
				position: static;
				width: 32rem;
				height: auto;
				margin: 5rem 0 1rem 0;
				padding: 0 0 0 1.5rem;
				}
				
				body#index main section#prime ul#jump h3 { padding: 0 0 1rem 1rem; }
				body#index main section#prime ul#jump li { border-left: 0.5rem solid #fff; background: transparent; padding: 0 0 0 0.5rem;  }
					body#index main section#prime ul#jump li:hover { border-left: 0.5rem solid #af50e6; background: #2a2526; color: #fff; animation-name: jump; animation-duration: 0.25s; animation-timing-function: linear; animation-delay: 0; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: forwards; animation-play-state: running; }
					@keyframes jump {  0% { border-left: 0.5rem solid #fff; background: transparent; } 100% { border-left: 0.5rem solid #af50e6; background: #2a2526; } }
					body#index main section#prime ul#jump li + li { border-top: 1px dotted #2a2625; }		
					body#index main section#prime ul#jump li a { padding: 0; 	}		
		
		
		/* BLOCK ALLGEMEIN */
		section.block {
			color: #2a2625;
			padding: 0;
			margin-top: 5rem;
			}
			
			section.block header { flex: 1 100%; }
				section.block header h2 { padding-left: 3rem; }
			
			/* einspaltig */
			section.block.single { display: block; }
				section.block.single article { 
					background: #fff; 
					height: auto;
					min-height: 12rem; 
					border-left: 1rem solid #af50e6;
					padding: 2.5rem 2.5rem 2.5rem 2rem;
					}
			
			/* zweispaltig */
			section.block.double {
				display: flex;
				flex-direction: column;
				flex-flow: row wrap;
				justify-content: flex-start;
				align-items: stretch;
				}
				
				section.block.double div.column {
					flex: 2; 
					align-self: stretch; 
					background: #fff;
					}
					
					section.block.double div.column.left { padding: 2.5rem 2rem 2.5rem 2.5rem; border-left: 0.5rem solid #af50e6; } 
					section.block.double div.column.right { padding: 2.5rem 2.5rem 2.5rem 2.5rem; } 
						section.block.double div.column.right.lila { background: #efdcfa; border-left: 1px solid #af50e6; }
			

			
		/* EINZELFÄLLE */

		/* buch-Container */	
		section#buch  { 
			display: block;
			position: static;
			background: rgb(235,211,249);
			background: #ebd3f9;
			margin-top: 5rem;
			padding: 0 0 2.5em 2.5rem;
			background-image: url(img/elements/index-buch-nashorn.svgz);
			background-position: right 0;
			background-repeat: no-repeat;
			border-left: 1rem solid #af50e6;
			}
			
			section#buch h2 { margin: 0; padding: 2.5rem 0 1rem 0; width: 32rem; font-size: 3rem; font-family: Georgia, serif; font-weight: 300; color: #2a2625; }
			section#buch p { margin: 0; padding: 0; width: 38rem; font-size: 1rem; font-family: "Myriad Pro Cond", "Fira Sans", sans-serif; font-weight: normal; color: #2a2625; }
			section#buch a.button { margin-right: 1rem; margin-bottom: 0; }
			
		
		/* Cards-Container */
		section#indexcards { 
			display: block;
			width: auto;
			height: 38rem;
			color: #2a2625;
			padding: 0;
			margin-top: 5rem;
			position: relative;
			}
			
			section#indexcards header h2 { margin-left: 3rem; color: #949292; }
			
			section#indexcards figure#card-latest { 
				display: block;
				position: static;
				width: auto;
				height: auto;
				background: #2a2625;
				border-left: 1rem solid #949292;
				position: relative;
				}

				section#indexcards figure#card-latest a.imagelink { 
					display: block; 
					position: absolute; 
					width: 40rem; 
					height: 30rem; 
					background: #fff; 
					padding-left: 1rem; 
					z-index: 9999;
					}
					
					section#indexcards figure#card-latest a.imagelink:hover { outline: 3px solid #af50e6; }
					
				section#indexcards figure#card-latest a.imagelink img { 
					display: block;
					position: absolute;
					left: -1rem;
					clip: rect(0px,40rem,40rem,1rem);
					width: 40rem;
					height: 30rem;
					margin-left: 1rem;
					}
				
				section#indexcards figure#card-latest figcaption { 
					display: block;
					position: absolute;
					top: 0;
					left: 41rem;
					width: 19rem;
					height: 28rem;
					z-index: 9;
					padding: 1rem;
					color: #fff;
					background: #2a2625;
					font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;
					}
			
			section#indexcards a#more-cards {
				position: absolute;
				left: 43rem;
				top: 30.5rem;
				width: auto;
				height: auto;
				background: #534741;
				z-index: 999999999;
				}
			
			
		
		/* Journal-Container auf der Indexseite */	
		body#index main section#journal { 
			display: block;
			position: static;
			min-height: 12rem;
			color: #fff;
			border-left: 0;
			background: transparent;
			margin-top: 2.5rem;
			}
			
			body#index main section#journal header { 
				height: auto;
				padding: 0 3.25rem;
				margin: 0 0 1.625rem 0; 
				background: transparent; 
				}
			
			body#index main section#journal ul { 
				display: flex;
				flex-direction: column;
				flex-flow: row wrap;
				justify-content: flex-start;
				align-items: stretch;  
				background-color: rgb(42,38,37);
				background-color: #2a2625;
				background-position: 0 0;
				background-repeat: no-repeat;
				}
				
				body#index main section#journal ul li { 
					flex: 1 28%; 
					padding: 0 0.5rem 2.5rem 0; 
					border-left: 1rem solid #2a2625;
					background: transparent; 
					}
				
					body#index main section#journal ul li:hover { 
						border-left: 1rem solid #af50e6; 
						background: #11100F; animation-name: journalhover; animation-duration: 0.25s; animation-timing-function: linear; animation-delay: 0; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: forwards; animation-play-state: running;  
						}
						
				body#index main section#journal ul li:nth-child(1) { padding: 1rem 1rem 1rem 2rem; border-left: 1rem solid #949292; border-right: 1px solid #949292; border-bottom: 1px solid #949292; }
					body#index main section#journal ul li:nth-child(1):hover { border-left: 1rem solid #af50e6; }
				body#index main section#journal ul li:nth-child(2) { padding: 1rem 1rem 1rem 0.5rem; border-right: 1px solid #949292; border-bottom: 1px solid #949292; }
				body#index main section#journal ul li:nth-child(3) { padding: 1rem 1rem 1rem 0.5rem; border-bottom: 1px solid #949292;   }
				body#index main section#journal ul li:nth-child(4) { padding: 1rem 1rem 1rem 2rem; border-left: 1rem solid #949292; border-right: 1px solid #949292; }
					body#index main section#journal ul li:nth-child(4):hover { border-left: 1rem solid #af50e6; }
				body#index main section#journal ul li:nth-child(5) { padding: 1rem 1rem 1rem 0.5rem; border-right: 1px solid #949292; }
				body#index main section#journal ul li:nth-child(6) { padding: 1rem 1rem 1rem 0.5rem; }

					@keyframes journalhover {  0% { background-color: transparent; } 100% { background-color: #11100F; border-left: 1rem solid #af50e6; } }
				
				body#index main section#journal ul li span { display: block; padding-left: 0.5rem;  }
				body#index main section#journal ul li span.journal-title { display: block; font-family: "Myriad Pro Cond", "Fira Sans", sans-serif; /* Fira von Google */ font-weight: bold; font-weight: 500;  }
				body#index main section#journal ul li:hover span.journal-title { color: #af50e6;  }
			
		
		
		/* Kategorien auf der Indexseite */	
		body#index main section.category {
			display: flex;
			flex-direction: column;
			flex-flow: row wrap;
			justify-content: flex-start;
			align-items: stretch;
			padding: 0;
			}
			
			/* Kategorienheader */	
			body#index main section.category header {
				flex: 1 100%;
				padding: 0 3rem; /* 2.5 padding + 0.5 border */
				margin: 5rem 0 1.625rem 0;
				position: relative;
				}
				
				body#index main section.category header h2 { padding: 0 0 0 0; margin: 0; }
			
			/* Featured articles */	
			body#index main section.category div.featured {
				flex: 2 49%;
				align-self: stretch;
				background-color: #fff;
				border-left: 1rem solid #af50e6;
				color: #2a2625;
				}
				
				body#index main section.category div.featured article { padding: 7rem 0 0 0; }
				body#index main section.category div.featured article h3 { font-size: 3rem; font-family: Georgia, serif; font-weight: 300; line-height: 1.25; color: #2a2625; margin: 0 0 1.5rem 0; padding: 0 2.5rem; }
				body#index main section.category div.featured article p { padding: 0 2.5rem; }
				body#index main section.category div.featured article a.button { margin-left: 2.5rem; }

				
			/* Standard articles */	
			body#index main section.category div.rightcol {
				flex: 3 49%;
				align-self: stretch;
				border-left: 0px solid #af50e6;
				background-color: #fff;
				color: #2a2625;
				padding: 0;
				}
				
				body#index main section.category div.rightcol article { 
					padding: 2.5rem 2.5rem 2.5rem 2.5rem;
					border-top: 0;
					border-right: 0;
					border-bottom: 1px solid #2a2625;
					border-left: 1px solid #2a2625;
					}
					
					body#index main section.category div.rightcol article + article { margin-top: 0; border-top: 0; } 
					body#index main section.category div.rightcol article:last-child { border-bottom: 0; }
					body#index main section.category div.rightcol article h3 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 0.5rem; }
					body#index main section.category div.rightcol article a { margin: 1rem 0 0 0; }
					

			body#index main section.category a.playlist-button { 
				display: block;
				width: 3rem;
				height: 3rem;
				position: absolute;
				top: -0.75rem;
				right: 2.5rem;
				}

			svg.playlist-icon { }	
				
			svg.playlist-icon rect#playlist-icon-fenster-vorn { fill: rgba(42,38,37,1); stroke: rgba(175,80,230,1); stroke-width="2"; }
				svg.playlist-icon:hover rect#playlist-icon-fenster-vorn { fill: rgba(83,71,65,1); stroke: rgba(175,80,230,1); stroke-width: 4; animation-name: playlisticonfenstervorn; animation-duration: 0.25s; }
					@keyframes playlisticonfenstervorn {  0% { fill: rgba(83,71,65,0.6); stroke: rgba(175,80,230,1); } 100% { fill: rgba(83,71,65,1); stroke:rgba(175,80,230,1); } }				
			svg.playlist-icon rect#playlist-icon-fenster-mitte { fill: rgba(42,38,37,1); stroke: rgba(124,11,189,0.8); stroke-width: 2; }
				svg.playlist-icon:hover rect#playlist-icon-fenster-mitte { fill: rgba(83,71,65,0.8); stroke: rgba(175,80,230,0.8); stroke-width: 4; animation-name: playlisticonfenstermitte; animation-duration: 0.5s; }
					@keyframes playlisticonfenstermitte {  0% { fill: rgba(83,71,65,0.4); stroke: rgba(124,11,189,0.8); } 100% { fill: rgba(83,71,65,0.8); stroke: stroke:rgba(175,80,230,0.8); } }				
			svg.playlist-icon rect#playlist-icon-fenster-hinten { fill: rgba(42,38,37,1); stroke: rgba(124,11,189,0.6); stroke-width: 2 }
				svg.playlist-icon:hover rect#playlist-icon-fenster-hinten { fill: rgba(83,71,65,0.6); stroke: rgba(175,80,230,0.6); stroke-width: 4; stroke-width: 4; animation-name: playlisticonfensterhinten; animation-duration: 0.75s; }
					@keyframes playlisticonfensterhinten {  0% { fill: rgba(83,71,65,0.3); stroke: rgba(175,80,230,0.6); } 100% { fill: rgba(83,71,65,0.6); stroke: stroke:rgba(175,80,230,0.6);  ;} }




		/* Kontakt auf der Aboutseite */

		form#kontaktformular {
			flex: 2; 
			align-self: stretch; 
			padding: 2.5rem 1rem 2.5rem 1rem;
			margin: 0;
			background: #efdcfa;
			border-left: 1px solid #af50e6;
			}
			
			form#kontaktformular input.write, form#kontaktformular figure#figtext textarea {
				font-family: Consolas, monospace;
				font-size: 1rem;
				background: #fff;
				color: #2a2526;
				width: 90%;
				border: 1px solid #af50e6;
				padding: 0.5rem;
				}
				
				form#kontaktformular figure#figtext textarea { height: 5rem; margin-bottom: 0; }
				
				
			
			form#kontaktformular label { margin-left: 0.5rem; }
				
			form#kontaktformular figure { width: auto; }
			form#kontaktformular figure + figure { margin-top: 1rem; }
			
			form#kontaktformular figure#figname { }
			form#kontaktformular figure#figmail { }
			form#kontaktformular figure#figsubject { }
			form#kontaktformular figure#figtext { }
			
				form#kontaktformular figure#figtext div#charcounter { 
						display: inline-block;
						min-width: 2.5rem;
						color: #af50e6;
						text-align: center;
						}
				
			form#kontaktformular figure#figsubmit input#button { cursor: pointer; margin: 0 0 0 0.5rem; padding: 0.5rem; color: #fff; }


			body#index main section.category.monocolumn { display: block; }
			body#index main section.category.monocolumn article { 
				background: #fff;
				border-left: 0.5rem solid #af50e6;
				min-height: 12rem;
				color: #2a2625;
				}
		
		
		
		/* JOURNAL v2 */
		
		html#jnl body#index { }
			html#jnl body#index header#super { margin-bottom: 0; }
			html#jnl body#index main { position: relative; padding-top: 0; } 
				html#jnl body#index main nav#jnl-feed-icons { margin: 0; padding: 0;}
				html#jnl body#index main header { padding: 0; }
					/* html#jnl body#index main header h1 { font-size: 2rem; font-style: normal; line-height: 1.125; color: #af50e6; margin: 0 0 1.625rem 0; } */ 
					html#jnl body#index main header h1 { font-family: Georgia, "Baskerville", "Cambria", serif; font-size: 3rem; font-style: normal; line-height: 1.125; color: #fff; margin: 0 0 1rem 3rem; } 
					
			html#jnl body#index main header p#jnl-pubdate {
				display: inline-block;
				padding: 0.1rem 1rem 0.1rem 2rem;
				background: #5f5c5c;
				color: #fff;
				font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; 
				font-size: 0.875rem;
				border-left: 1rem solid #2a2625;
				}
		
			/* Icons auf JNL */
			html#jnl body#index main nav#jnl-feed-icons ul.feed-icons {
				position: absolute;
				top: 10rem;
				right: -3rem;
				background: transparent;
				}
			
			/* Kategorien auf der Indexseite: Flexcontainer */	
			html#jnl body#index main section#jnl-cnt {
				display: flex;
				flex-direction: column;
				flex-flow: row wrap;
				justify-content: flex-start;
				align-items: stretch;
				padding: 0;
				border-left: 1rem solid #af50e6; 
				color: #2a2625; 
				background: #fff;
				min-height: 30rem;
				}
			
				/* links */ 
				html#jnl body#index main section#jnl-cnt section#jnl-notes { flex: 2 60%; align-self: stretch; padding: 2rem 0 5rem 0; }
					html#jnl body#index main section#jnl-cnt section#jnl-notes article { margin: 2rem 3rem 0 2rem; }
					html#jnl body#index main section#jnl-cnt section#jnl-notes article h3 { font-size: 1.25rem; margin-bottom: 0.5rem; color: #2a2625; }
					html#jnl body#index main section#jnl-cnt section#jnl-notes article a.button { margin: 1rem 0 2rem 0; }
				
					/* Textabsatz */
					html#jnl body#index main section#jnl-cnt section#jnl-notes p { margin-bottom: 1rem; }
					
					/* Aufzählungen */
					html#jnl body#index main section#jnl-cnt section#jnl-notes ul { margin: 1rem 0; list-style: none; font-family: inherit; font-size: inherit; line-height: inherit; } 
	
						html#jnl body#index main section#jnl-cnt section#jnl-notes ul li { 
							display: block; 
							list-style: outside none none; 
							background-image: url(img/elements/bullet-16.svgz);
							background-position: 0 0.3rem; /* 3rem nach links, 0.5rem nach unten */
							background-repeat: no-repeat;
							background-size: 0.8125rem 0.8125rem;
							background-color: transparent;
							padding: 0 0 0 2rem;
							}

							section#text ul li + li { margin-top: 0; }

							section#text ul li a { color: #af50e6; border-bottom: 2px solid #af50e6; background: #fff; padding: 0.05rem 0.2rem; }
								section#text ul li a:hover { color: #7c0bbd; border-bottom: 2px solid #7c0bbd; background: #ebd3f9; }
								section#text ul li a:visited { color: #5f5c5c; border-bottom: 1px dotted #949292; background: #edecec; }
				
				
				
				/* rechts */ 
				html#jnl body#index main section#jnl-cnt section#jnl-col { flex: 2 30%; align-self: stretch; }
				
					/* rechts: FB */
					html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-fb { padding: 2rem 0 0 0; border-top: 1px solid rgba(189,207,223,1); border-bottom: 1px solid rgba(189,207,223,1); border-left: 1px solid rgba(189,207,223,1); background: rgba(189,207,223,0.4); }
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-fb h2.imageheadline {  padding: 0 0 0 1rem; margin: 0;}
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-fb ul li { border-top: 1px solid rgba(189,207,223,1); }
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-fb ul li a { display: block; width: auto; background: rgba(189,207,223,0.2); padding: 0.5rem 0.5rem 0.5rem 1rem; }
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-fb ul li a:hover { background: rgba(189,207,223,0.8); }

					/* rechts: Lernkarte */
					html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-card { padding: 2rem 0;}
					html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-card h2 { font-size: 1.25rem; line-height: 1.25; margin: 0 1rem 0 1rem; }
					html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-card h3 { font-size: 1.25rem; line-height: 1.25; margin: 0 1rem 0.5rem 1rem; }
					html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-card a.imagelink { display: block; width: auto; height: auto; font-size: inherit; } 
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-card a img { width: 95%; border-top: 1px solid #af50e6; border-right: 1px solid #af50e6; border-bottom: 1px solid #af50e6; }
					html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-card ul { }
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-card ul li { display: inline-block; margin-right: 0.5rem; padding-right: 0.25rem; }
							html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-card ul li a.button { font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; font-size: 0.875rem; line-height: 1.375; padding: 0.25rem 0.5rem 0.15rem 0.5rem; }
							
					/* rechts: Links zu Webseiten */
					html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-lnk { margin: 2rem 0; padding: 2rem 0; border-top: 1px solid rgba(83,71,65,1); border-bottom: 1px solid rgba(83,71,65,1); border-left: 1px solid rgba(83,71,65,1); background: rgba(83,71,65,0.4); }
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-lnk h2 { padding: 0 0 1rem 1rem; margin: 0;}
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-lnk ul li { border-top: 1px solid rgba(83,71,65,1); }
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-lnk ul li a { display: block; width: auto; background: rgba(83,71,65,0.2); padding: 0.5rem 0.5rem 0.5rem 1rem; }
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-lnk ul li a:hover { background: rgba(83,71,65,0.6); }
						
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-lnk ul li a span.linksource { display: inline-block; padding: 0.1rem 0.25rem; background: #534741; color: #fff; font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;  }
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-lnk ul li a:hover span.linksource { background: #7c0bbd; }
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-lnk ul li a span.linktitle { display: block; margin: 0.5rem 0; font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; font-weight: bold; }
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-lnk ul li a span.linkdesc { display: block; }
						
				
					/* rechts: Beiträge */
					html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-items { padding: 2rem 0 0 0; border-top: 1px solid rgba(175,80,230,1); border-bottom: 1px solid rgba(175,80,230,1); border-left: 1px solid rgba(175,80,230,1); background: rgba(175,80,230,0.2); }
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-item h2.imageheadline { padding: 0 0 0 1rem;  }
						html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-items article { margin: 0 0 1rem 0; padding: 0 1rem 1rem 1rem; border-bottom: 1px solid rgba(175,80,230,1); } 
							html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-items article:last-of-type { border-bottom: 0; } 
								html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-items article h3 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 0.5rem; color: #2a2625; } 
								html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-items article p { font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; font-size: 0.875rem; line-height: 1.375; } 
									html#jnl body#index main section#jnl-cnt section#jnl-col section#jnl-items article p + a.button { margin-top: 0.5rem; font-size: 0.875rem; } 


					/* rechts: FB-Icon */
					svg#fbgrouplogo rect#fb-logo-bg { fill: #00558E; }
					svg#fbgrouplogo path#fb-logo-letter { fill: #fff; }
					
					svg#fbgrouplogo path.arm { display: none; }
					svg#fbgrouplogo:hover path.arm { display: block; }
					svg#fbgrouplogo circle.auge { fill: #fff; }
					svg#fbgrouplogo circle.pupille { fill: #ccc; }
					svg#fbgrouplogo circle.reflektion { fill: #fff; }
					svg#fbgrouplogo ellipse.mund { fill: #fff; }
					svg#fbgrouplogo path.rumpf { fill: #ccc; }
					svg#fbgrouplogo path.arm { fill: #ccc; }
					svg#fbgrouplogo path.zahn { fill: #ccc; }
					svg#fbgrouplogo circle.bommel { fill: #ccc; }
					svg#fbgrouplogo path.fuhler { stroke-width: 1px; stroke: #ccc; fill: none; }
					
					svg g#wanolf-lila path.rumpf, svg g#wanolf-lila path.zahn, svg g#wanolf-lila circle.pupille, svg g#wanolf-lila path.arm, svg g#wanolf-lila circle.bommel { fill: #af50e6; }
						svg g#wanolf-lila path.fuhler { stroke: #af50e6; }
					
					svg g#wanolf-links path.rumpf, svg g#wanolf-links path.zahn, svg g#wanolf-links circle.pupille, svg g#wanolf-links path.arm, svg g#wanolf-links circle.bommel { fill: #5f5c5c; }
						svg g#wanolf-links path.fuhler { stroke: #5f5c5c; }
					
					svg g#wanolf-rechts path.rumpf, svg g#wanolf-rechts path.zahn, svg g#wanolf-rechts circle.pupille, svg g#wanolf-rechts path.arm, svg g#wanolf-rechts circle.bommel { fill: #2a2625; }
						svg g#wanolf-rechts path.fuhler { stroke: #2a2625; }
					
					svg g#wanolf-mitte path.rumpf, svg g#wanolf-mitte path.zahn, svg g#wanolf-mitte circle.pupille, svg g#wanolf-mitte path.arm, svg g#wanolf-mitte circle.bommel { fill: #949292; }
						svg g#wanolf-mitte path.fuhler { stroke: #949292; }
						
					svg#fbgrouplogo:hover circle.auge, svg#fbgrouplogo:hover circle.reflektion { fill: #CC0000; animation-name: wanolfhover; animation-duration: 2s; animation-timing-function: linear; animation-delay: 0; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: forwards; animation-play-state: running; } 
						@keyframes wanolfhover {  0% { fill: #fff; } 100% { fill: #CC0000; } }		

			
					/* rechts: Cinema-Icon für Beiträge */
					svg#cinema { margin: 0 0 0 1rem; }
					svg#cinema path.chair { fill: #949292; stroke: #fff; stroke-width: 1px; }
						 { fill: #7c0bbd; }
					svg#cinema path#sitz { fill: #949292; }
						svg#cinema:hover path.chair, svg#cinema:hover path#sitz { fill: #7c0bbd; animation-name: chair; animation-duration: 1s; animation-timing-function: linear; animation-delay: 0; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: forwards; animation-play-state: running; }
						@keyframes chair {  0% { fill: #949292; } 100% { fill: #7c0bbd; } }
					
					svg#cinema circle.popcorn-1 { fill: #ffda41; r: 1; }
					svg#cinema circle.popcorn-2 { fill: #ffe061; r: 1; }
					svg#cinema circle.popcorn-3 { fill: #fff2bf; r: 1; }
					
					svg#cinema path.rumpf, svg#cinema path.zahn, svg#cinema circle.pupille, svg#cinema path.arm, svg#cinema circle.bommel { fill: #c785ee; }
					svg#cinema:hover path.rumpf, svg#cinema:hover path.zahn, svg#cinema:hover circle.pupille, svg#cinema:hover path.arm, svg#cinema:hover circle.bommel { fill: #af50e6; animation-name: wanolfcinema; animation-duration: 1s; animation-timing-function: linear; animation-delay: 0; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: forwards; animation-play-state: running; }
						svg#cinema path.fuhler { stroke: #d7a7f2; stroke-width: 1px; fill: none; }
						svg#cinema circle.auge, svg#cinema circle.reflektion { fill: #fff; }
						svg#cinema ellipse.mund { fill: #2a2625; }
						@keyframes wanolfcinema {  0% { fill: #c785ee; } 100% { fill: #af50e6; } }

				
			/* Link zum Journalarchiv (und zurück) */
			a#journal_archiv { margin: 2.5rem; }
		
		

		/* Journal Archiv */

		/* Abteilungen */
		body#index main#journal section.journal_archiv_abteilungen { margin-top: 10rem; }
			body#index main#journal section.journal_archiv_abteilungen h2 { margin-left: 3.5rem; }
			
		/* Einträge */
		body#index main#journal section.journal_archiv_abteilungen article	{ 
			display: block;
			position: relative;
			color: #fff;
			border-left: 1rem solid #949292;
			background: #2a2625;
			margin-top: 2.5rem;
			padding: 1rem 2.5rem;
			}
			
			main#journal section.journal_archiv_abteilungen article figure.dateset { 
				position: absolute;
				top: 1.5rem;
				right: 2.5rem;
				height: 3rem;
				width: auto;
				text-align: right;
				font-family: Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;
				line-height: 1.5;
				}
			
			body#index main#journal section.journal_archiv_abteilungen article h3 {
				font-family: "Myriad Pro", "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;
				font-size: 1.625rem;
				line-height: 1.5;
				font-weight: normal;
				margin-bottom: 1rem;
				}
				
			body#index main#journal section.journal_archiv_abteilungen article p { margin: 0; }
			
			body#index main#journal section.journal_archiv_abteilungen article p.plus {
				margin: 1rem 0 0 0;
				font-family: Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;
				font-size: 0.75rem;
				color: #949292;
				}
			
			/* Bilder */
			body#index main#journal section.journal_archiv_abteilungen article img { display: block; margin: 1rem 0;  }
				body#index main#journal section.journal_archiv_abteilungen section#journal_archiv_content article img { width: 320px; height: 240px; border: 1px solid #fff; }
				body#index main#journal section.journal_archiv_abteilungen section#journal_archiv_cards article img { width: 640px; height: 480px; }
				body#index main#journal section.journal_archiv_abteilungen section#journal_archiv_maps article img { width: 640px; height: 480px; }
				body#index main#journal section.journal_archiv_abteilungen section#journal_archiv_scr article img { width: 640px; height: 480px; border: 1px solid #fff; }
				body#index main#journal section.journal_archiv_abteilungen section#journal_archiv_img article img { width: 640px; height: 480px; border: 1px solid #fff; }
				
			/*Zitate */
			body#index main#journal section.journal_archiv_abteilungen section#journal_archiv_quotations p.cite_quote { font-size: 3rem; margin-bottom: 2rem; width: 40rem; line-height: 1.25; }
			body#index main#journal section.journal_archiv_abteilungen section#journal_archiv_quotations p.cite_translation {  }
			body#index main#journal section.journal_archiv_abteilungen section#journal_archiv_quotations p.cite_source { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #949292; }
			
			body#index main#journal section.journal_archiv_abteilungen article a.button { margin-bottom: 0; }
			
			main#journal header#journal-headline { margin: 0 0 0 3.5rem; }
			main#journal header#journal-headline h2 { font-size: 3rem; color: #fff; width: 30rem; }
			main#journal header#journal-headline + article { min-height: 12.25rem; margin-bottom: 5rem; }
			main#journal header#journal-headline + article * { width: 32rem; }
				
			main#journal article p#journal-desc {
				font-family: "Myriad Pro", "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;
				font-size: 1.25rem;
				line-height: 1.5;
				width: 30rem;
					}
					
				main#journal article p + p { margin-top: 1.625rem; }
		
		
		
		
		
		/* PODCASTFEED */
		
		body#index main#podcast nav#header-nav ul.feed-icons { top: -4rem; }
		body#index main#podcast section#prime { min-height: 10rem; }
		
		/* Items */
		body#index main#podcast article.podcast-items { 
			display: block;
			position: relative;
			color: #fff;
			border-left: 1rem solid #949292;
			background: #2a2625;
			margin-top: 2.5rem;
			padding: 2rem 2.5rem;
			position: relative;
			font-family: "Myriad Pro", "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;
			}
			
			body#index main#podcast article.podcast-items h2, body#index main#podcast article.podcast-items h3 { line-height: 1.5; font-weight: normal; } 
			body#index main#podcast article.podcast-items h2 { color: #af50e6; font-weight: bold; margin-bottom: 0; font-size: 1.625rem; width: 34rem; }
			body#index main#podcast article.podcast-items h3 { color: #fff; margin-bottom: 1rem; font-size: 1.25rem; width: 34rem; }
			body#index main#podcast article.podcast-items p { color: #fff; font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; width: 34rem; }
			body#index main#podcast article.podcast-items p.tags { color: #949292; font-size: 0.875rem; margin: 1rem 0; }
			body#index main#podcast article.podcast-items dl.data { width: 34rem; margin-bottom: 0.25rem; }
			body#index main#podcast article.podcast-items dl.data dt { margin-right: 0.25rem; padding: 0.15rem 0.5rem; background: rgba(95,92,92,0.3); color: #fff; width: 6rem; display: inline-block; }
			body#index main#podcast article.podcast-items dl.data dd { display: inline-block; padding: 0.15rem 0.5rem;  background: rgba(95,92,92,0.2); }
			body#index main#podcast article.podcast-items img.poster { position: absolute; top: 2rem; right: 2rem; width: 20rem; height: 15rem; border: 1px solid #949292; }
			body#index main#podcast article.podcast-items a.button {  background-color: #5f5c5c; }
		
		
		
		/* buchseite */
		
		section#dsdpres {
			display: flex;
			flex-direction: column;
			flex-flow: row wrap;
			justify-content: flex-start;
			align-items: stretch;
			padding: 0;
			background: #2a2625;
			border-left: 1rem solid #949292;
			margin: 1rem 0 5rem 0;
			height: 470px;
			}
			
			section#dsdpres figure#dsd-cover { flex: 3 auto; max-width: 320px; }
			section#dsdpres figure#dsd-data { 
				flex: 3 auto; 
				width: auto;
				padding: 2rem 2rem 0 2rem;
				font-family: "FiraSansLight", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;
				font-size: 1.25rem;
				}
				
				section#dsdpres figure#dsd-data ul.edition { display: inline-block; width: 14rem; margin: 2rem 1rem 0 0;  }
				section#dsdpres figure#dsd-data ul.edition li { width: auto; padding: 0; margin: 0; }
				section#dsdpres figure#dsd-data ul.edition li.edition-type { color: #a550e6; }
				section#dsdpres ul.edition li a.button { background: #5f5c5c; }
		
			section#dsdpres ul#shops { padding: 3rem 2rem 0 0; }
				section#dsdpres ul#shops li { display: inline-block; }
					section#dsdpres ul#shops li a.button { background: #5f5c5c; }
					
			body#page section#text p#leseprobenhinweis { background: #d4d1cf; margin: 4rem 0 2rem 0; padding: 1rem 1rem 1rem 5rem; }
				
				
				
		/* Cards-Indexseite */
		
		main#cards ul#areas { display: none; }
		body#index main#cards section#prime { min-height: 25rem; }
		
		body#index main#cards section.cardslist { 
			display: block;
			height: 24rem;
			margin: 2rem 0;
			padding: 2rem 1rem 2rem 3rem;
			background: #2a2625;
			border-left: 1rem solid #5f5c5c;
			color: #fff;
			position: relative;
			}
			
			
			body#index main#cards section.cardslist h2 { width: 24rem; } 
			
			body#index main#cards section.cardslist p { display: block; width: 24rem; } 



				body#index main#cards section.cardslist p span.label { color: #2a2625; margin-right: 0.25rem; text-transform: capitalize; }
				body#index main#cards section.cardslist p span.label.buch { background: #af50e6; }
				body#index main#cards section.cardslist p span.label.deklination { background: #cc0000; color: #fff; }
				body#index main#cards section.cardslist p span.label.genitiv { background: #e68080; }
				body#index main#cards section.cardslist p span.label.verb { background: #76a319; }
				body#index main#cards section.cardslist p span.label.konjunktiv { background: #aae813; }
				body#index main#cards section.cardslist p span.label.schrift { background: #ff7400; }
				body#index main#cards section.cardslist p span.label.rechtschreibung { background: #ffcc00; }
				body#index main#cards section.cardslist p span.label.zeichensetzung { background: #b78d49; }
				body#index main#cards section.cardslist p span.label.syntax { background: #123859; color: #fff; }
				body#index main#cards section.cardslist p span.label.stilistik { background: #7a9fbf; }
				body#index main#cards section.cardslist p span.label.schriftstellerei { background: #bdcfdf; }
				body#index main#cards section.cardslist p span.label.wortkunde { background: #e52466; color: #fff; }
				body#index main#cards section.cardslist p span.label.sprache { background: #7a5ae8; color: #fff; }
				body#index main#cards section.cardslist p span.label.divers { background: #cac9c8; }
			
			
			body#index main#cards section.cardslist ul { 
				display: block;
				width: 20rem;
				margin-top: 2rem;
				}

				body#index main#cards section.cardslist ul li { display: block; margin-bottom: 1rem; }
				body#index main#cards section.cardslist ul li a { background: #5f5c5c; }
			
			body#index main#cards section.cardslist img { 
				display: block;
				width: 30rem;
				height: 22.5rem;
				position: absolute;
				top: 2rem;
				right: 2rem;
				}
		
		
		
/* SOCIAL ============================================================== */			


aside.social {
	display: block;
	width: auto;
	height: 2rem;
	margin: 1rem 0 0 2.5rem;
	}
	
	body#page aside#watch + aside.social { margin-left: 2.5rem; }
	body#page main + aside.social { margin-left: 6rem; }

	aside.social ul { display: block; height: 2rem; width: 25rem; }
	aside.social li { display: inline-block; height: 2rem; width: 2rem; }
	aside.social li a { display: block; height: 2rem; width: 2rem; color: transparent; overflow-x: hidden; background-color: transparent; background-image: url(img/elements/social-icons.svgz); background-repeat: no-repeat; opacity: 0.5; }
		section#video aside.social li a { opacity: 0.1; }
	aside.social li a:hover { opacity: 1; box-shadow: 0px 0px 1rem #af50e6; }
		section#video aside.social li a:hover { opacity: 1; box-shadow: 0px 0px 1rem #af50e6; }
	aside.social li.share-facebook a { background-position: -32px 0px; }
	aside.social li.share-twitter a { background-position: 0px 0px; }
	aside.social li.share-gplus a { background-position: -64px 0px; }
	aside.social li.share-pinterest a { background-position: -96px 0px; }
	aside.social li.share-reddit a { background-position: -128px 0px; }
	aside.social li.share-xing a { background-position: -160px 0px; }
	aside.social li.share-linkedin a { background-position: -192px 0px; }
	aside.social li.trash { background-position: -224px 0px; height: 2rem; width: 2rem; color: transparent; overflow-x: hidden; background-color: transparent; background-image: url(img/elements/social-icons.svgz); background-repeat: no-repeat;  opacity: 0.15; cursor: pointer; }
	aside.social li.trash:hover { opacity: 1; }
	
	li.social-button.darken { 
		opacity: 0.1; 
		animation-name: fadeout;
		animation-duration: 1s; 
		animation-timing-function: linear; 
		animation-delay: 0;
		animation-direction: normal;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-play-state: running; 
		}
		
		@keyframes fadeout {  0% { opacity: 0.2; } 100% { opacity: 0.1; } }			

		
/* PAGE */
section#video aside.social { margin: 1rem 0 0 2.5rem; }

		
/* INDEX Social-Buttons unter News */
body#index aside.social {
display: block;
width: auto;
height: 2rem;
margin: 1rem 0 0 42rem; 
background: #2a2625; 
width: 19rem; 
}
body#index aside.social ul { background: #181615; }

/* Linkbutton auf weißem Hintergrund */
body#index main a.button { color: #fff; }

	/* Einfügen des Pluszeichen vor Link mit mehreren Medienarten */
	span.dynlink + span.dynlink:before { content: "+"; padding: 0 0.25rem 0 0.1rem; }		
		





		
/* SUBSCRIBE	============================================================== */

nav#subscribe { display: block; padding: 0; margin: 0; position: absolute; top: 20px; left: -4rem; width: 4rem; height: 20rem; } 
	ul.feed-icons { padding: 0; margin: 0.5rem 0 0 1rem; background: 0; display: block; width: auto; height: auto; position: relative; overflow: hidden; }
	ul.feed-icons li { padding: 0; margin: 0; background: 0; display: block; width: auto; height: auto; }
	ul.feed-icons li a { padding: 0; margin: 0; background: 0; display: block; width: auto; height: auto; border-bottom: 0; }
	ul.feed-icons li a svg { 
		padding: 0; 
		margin: 0; 
		background: 0; 
		display: block; 
		width: auto; 
		height: auto; 
		animation-duration: 1s; 
		animation-timing-function: ease; 
		animation-delay: 0; 
		animation-direction: normal; 
		animation-iteration-count: 1; 
		animation-fill-mode: forwards; 
		animation-play-state: running;
		}
		
			/* Diese beiden Icons werden nur auf der Indexseite angezeigt.*/
			body#page ul.feed-icons li.index-twitter { display: none; }
			body#page ul.feed-icons li.index-facebook { display: none; }
	
	svg#rss-icon { margin: 0; }
	svg#rss-icon circle#rss-full-punkt { fill: #534741; opacity: 0.5; }
		svg#rss-icon:hover circle#rss-full-punkt { fill: #af50e6; opacity: 1; animation-name: rss; animation-duration: 0.25s; }
	svg#rss-icon path#rss-full-kreis-1 { fill: #534741; opacity: 0.5; }
		svg#rss-icon:hover path#rss-full-kreis-1 { fill: #7B3DA8; opacity: 1; animation-name: rss; animation-duration: 0.5s; }
	svg#rss-icon path#rss-full-kreis-2 { fill: #534741; opacity: 0.5; }
		svg#rss-icon:hover path#rss-full-kreis-2 { fill: #7c0bbd; opacity: 1; animation-name: rss; animation-duration: 0.75s; }
	svg#rss-icon path#rss-full-kreis-3 { fill: #534741; opacity: 0.25; }
		svg#rss-icon:hover path#rss-full-kreis-3 { fill: #43086D; opacity: 1; animation-name: rss; animation-duration: 1s; }
	@keyframes rss {  0% { opacity: 0; } 100% { opacity: 0.9; } }					
	
	svg#podcast-icon { margin: 0 0 0 0;  }
	svg#podcast-icon circle#podcast-kreis-5 { opacity: 0; fill: #d29df1; }
		svg#podcast-icon:hover circle#podcast-kreis-5 { opacity: 0.75; animation-name: podcast; animation-duration: 1s;  }
	svg#podcast-icon circle#podcast-kreis-4 { opacity: 0; fill: #7c0bbd; }
		svg#podcast-icon:hover circle#podcast-kreis-4 { opacity: 1; }
	svg#podcast-icon circle#podcast-kreis-3 { opacity: 0; fill: #d7a7f2;} 
		svg#podcast-icon:hover circle#podcast-kreis-3 { opacity: 0.75; animation-name: podcast; animation-duration: 0.5s; }
	svg#podcast-icon circle#podcast-kreis-2 { opacity: 0; fill: #af50e6; }
		svg#podcast-icon:hover circle#podcast-kreis-2 { opacity: 1; }
	svg#podcast-icon circle#podcast-kreis-1 { opacity: 0; fill: #d29df1; }
		svg#podcast-icon:hover circle#podcast-kreis-1 { opacity: 1; }
	svg#podcast-icon path#podcast-rumpf { opacity: 0.5; fill: #534741; }
		svg#podcast-icon:hover path#podcast-rumpf { opacity: 1; fill: #2a2625; }
	svg#podcast-icon circle#podcast-kopf { opacity: 0.5; fill: #534741; }
		svg#podcast-icon:hover circle#podcast-kopf { opacity: 1; fill: #2a2625; }
	@keyframes podcast {  0% { opacity: 0; } 100% { opacity: 0.8; } }
	
	svg#itunes-icon { margin: 0 0 0 0;  }
	svg#itunes-icon circle#itunes-kreis { fill: transparent; }
		svg#itunes-icon:hover circle#itunes-kreis { fill: #ebd3f9; stroke: #af50e6; stroke-width: 2; animation-name: itunes; animation-duration: 1s; }
	svg#itunes-icon path#itunes-note { opacity: 0.5; fill: #534741;}
		svg#itunes-icon:hover path#itunes-note { opacity: 1; fill: #af50e6; }
	@keyframes itunes {  0% { fill: transparent; } 100% { fill: #ebd3f9; } }

	svg#miro-icon { margin: 0 0 0 0; }
	svg#miro-icon path#miro-blatt { fill: transparent; }
		svg#miro-icon:hover path#miro-blatt { fill: #af50e6; animation-name: miro; animation-duration: 1s; }
		@keyframes miro {  0% { fill: transparent; } 100% { fill: #af50e6; } }
	svg#miro-icon path#miro-m { opacity: 0.5; fill: #534741; }
		svg#miro-icon:hover path#miro-m { opacity: 1; fill: #edecec; }

		
	/* Icons auf INDEX */
	body#index main nav#header-nav ul.feed-icons {
		position: absolute;
		top: 1rem;
		right: -3rem;
		background: transparent;
		}
	
		body#index svg#index-twitter-icon { margin: 0 0 0 0;  }
			body#index svg#index-twitter-icon path#index-twitter-icon-tweety { opacity: 0.1; fill: #1EA1F2; }
				body#index svg#index-twitter-icon:hover path#index-twitter-icon-tweety { opacity: 1; fill: #1EA1F2; animation-name: tweety; animation-duration: 1s;  }
			@keyframes tweety {  0% { opacity: 0.1; } 100% { opacity: 1; } }
		
		body#index svg#index-facebook-icon { margin: 0 0 0 0;  }
			body#index svg#index-facebook-icon rect#index-facebook-icon-bg { opacity: 0.15; fill: #00558E; }
				body#index svg#index-facebook-icon:hover rect#index-facebook-icon-bg { opacity: 0.75; animation-name: fbindexiconbg; animation-duration: 1s;  }
			@keyframes fbindexiconbg {  0% { opacity: 0; } 100% { opacity: 0.8; } }

		body#index svg#index-facebook-icon path#index-facebook-icon-letter { opacity: 1; fill: #181615; }
			body#index svg#index-facebook-icon:hover path#index-facebook-icon-letter { fill: #fff; animation-name: fbindexiconletter; animation-duration: 1s;  }
		@keyframes fbindexiconletter {  0% { fill: #181615; } 100% { fill: #fff; } }



		
/* GESTALTUNG	============================================================== */		
		
		
/* Links im Text */
p a, a.txtlnk { text-decoration: none; color: #a550e6; border-bottom: 1px solid #a550e6; }
p a:hover, a.txtlnk:hover { color: #7c0bbd; border-bottom: 2px solid #7c0bbd; }
p a:visited, a.txtlnk:visited { color: #949292; border-bottom: 1px dotted #949292; }


/* Imagelinks */
img.imagelink { border-bottom: 0; }

/* Download-Button */
a.button, input.formbutton {
	display: inline-block;
	font-size: 1rem;
	background-color: #2a2625;
	background-image: url(img/elements/button-link-ecke.svg);
	background-position: right bottom;
	background-repeat: no-repeat;
	padding: 0.25rem 1.625rem 0.15rem 0.6rem;
	border-left: 0.5rem solid #af50e6;
	border-bottom: 0;
	margin: 0;
	color: #fff;
	font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; 
	}
	
	a.button.parts { margin: 0; padding: 0 1.625rem 0 0; }
	a.button.parts span.button-part { display: inline-block; min-width: 1rem; height: auto; margin: 0 0.5rem 0 0; padding: 0.25rem 0.3rem 0.15rem 0.6rem; background-color: #7c0bbd; color: #f3e5fb; font-weight: bold; }
	

	
	p + a.button, ul + a.button { margin-top: 1.625rem; }
	a.button + a.button { margin-top: 0; }
	
	/* Mehrere Download-Buttons */
	ul.buttons { margin-top: 1.625rem; }
	ul.buttons li { display: block; height: auto; padding: 0; border-bottom: 0.5rem solid transparent;  } 
	
	a.button.acronym { text-transform: uppercase; letter-spacing: 0.05rem; }
	
	a.button:hover, input.formbutton:hover { background: #7c0bbd; animation-name: downlink; animation-duration: 0.5s; animation-timing-function: linear; animation-delay: 0; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: forwards; animation-play-state: running; } 
	@keyframes downlink {  0% { background-color: transparent; } 100% { background-color: #7c0bbd; } }	
		
		




/* Aufzählungen im Block */
section.block ul { 
	margin: 1rem 0 1rem -1.25rem;
	list-style: none;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	}
	
	section.block ul li { 
		display: block; 
		list-style: outside none none; 
		background-image: url(img/elements/bullet-10.svgz);
		background-position: 0rem 0.5rem; /* 3rem nach links, 0.5rem nach unten */
		background-repeat: no-repeat;
		background-color: transparent;
		padding: 0 0 0 1.625rem;
		}

		section.block ul li + li { margin-top: 1rem; }

		section.block ul li a { color: #af50e6; border-bottom: 2px solid #af50e6; background: #fff; padding: 0.05rem 0.2rem; }
			section.block ul li a:hover { color: #7c0bbd; border-bottom: 2px solid #7c0bbd; background: #ebd3f9; }
			section.block ul li a:visited { color: #5f5c5c; border-bottom: 1px dotted #949292; background: #edecec; }


	/* Details im Block */
	
section.block p + h3 { margin-top: 1rem; }
		
		
		

/* PAGE Textgestaltung der Textsection */

		
/* Textformat */
section#text p { margin-left: 5rem; } /* Linker Rand */
	
	/* Absatzabstände und Einrückung */
	section#text p + p { text-indent: 0; margin-top: 1rem; }
	section#text header + p { text-indent: 0; margin-top: 1rem; }
	
	/* Initial */
	section#text p.initial:first-letter { 
		font-family: "Myriad Pro Cond", "Helvetica Neue Condensed", "Arial Narrow", "Ubuntu Condensed", sans-serif;
		font-weight: bold;
		font-size: 3.25rem; 
		line-height: 1.625rem;
		margin-right: 0.25rem;
		vertical-align: baseline;
		color: #af50e6;
		}
	
	/* Letzter Absatz */
	section#text p.last:after { content: url(img/elements/ivyleaf.svgz); padding-left: 0.5rem; vertical-align: -0.1rem; }

/* Marginalie */
section#text p.mg, section#text ul.mg { position: relative; }
	span.rand { 
		display: block;
		position: absolute;
		top: 0.3125rem;
		left: 36.625rem;
		width: 18rem;
		height: auto;
		font-family: Consolas, "San Francisco Mono", Courier, "Courier New", monospace;
		font-size: 0.875rem;
		line-height: 1.3725;
		}

/* Überschriften */
section#text h2 { margin: 3.25rem 0 1.625rem 5rem; }
section#text h3, section#text h4, section#text h5 {
	font-weight: bold;
	font-weight: 700;
	font-size: 1.625rem;
	font-style: normal;
	line-height: 1.125;
	color: #2a2625;
	margin: 3.25rem 0 1.625rem 0;
	padding-left: 5rem; /* Linker Rand */ 
	}
	
	section#text h2 span.gliederung, section#text h3 span.gliederung, section#text h4 span.gliederung, section#text h5 span.gliederung { display: inline-block; margin: 0 0.5rem 0 -5rem; padding: 0.35rem 1rem 0.15rem 0.75rem; background: #949292; color: #fff; width: 3rem; text-align: right; font-family: Arial; font-weight: normal;  } 

/* Aufzählungen */
section#text ul, section#text ol { 
	margin: 1rem 0;
	list-style: none;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	}
	
	section#text ul li, section#text ol li { 
		display: block; 
		list-style: outside none none; 
		width: 33.375rem; 
		background-image: url(img/elements/bullet-16.svgz);
		background-position: 3rem 0.3rem; /* 3rem nach links, 0.5rem nach unten */
		background-repeat: no-repeat;
		background-size: 0.8125rem 0.8125rem;
		background-color: transparent;
		padding: 0 0 0 5rem;
		}
		
		

		section#text ul li + li { margin-top: 0; }

		section#text ul li a { color: #af50e6; border-bottom: 2px solid #af50e6; background: #fff; padding: 0.05rem 0.2rem; }
			section#text ul li a:hover { color: #7c0bbd; border-bottom: 2px solid #7c0bbd; background: #ebd3f9; }
			section#text ul li a:visited { color: #5f5c5c; border-bottom: 1px dotted #949292; background: #edecec; }
			
		/* Bei Satzgliedanalysen */
		section#text ul.wide { width: auto; }
		section#text ul.wide li {  }
		section#text ul.wide li + li { margin-top: 1rem; }
			
	
	section#text ul.multicolumn {  
		columns: auto 3;
		column-gap: 1rem;
		column-fill: auto;
		padding-right: 1rem;
		background: transparent;
		padding: 0;
		margin: 2rem 0 2rem 6.6125rem;
		}
		
		section#text ul.multicolumn li { 
			margin: 0; 
			padding: 0; 
			background-image: none; 
			background-color: transparent;
			}
			
			section#text ul.multicolumn li + li { margin-top: 0; }
			
			
			

/* Blockformate */
figure.regel, figure.beispiel, figure.dialog, section#text blockquote {
	display: block;
	height: auto;
	width: auto;
	margin: 2rem 0;
	position: relative;
	}
	
	section#text figure.beispiel.narrow, section#text figure.regel.narrow, section#text figure.dialog.narrow { width: 33rem; }

	/* Einrückung in den Blockelementen aufheben und Abstand reduzieren */
	section#text figure.regel p + p, section#text figure.beispiel p + p, section#text blockquote p + p { text-indent: 0; margin-top: 1rem; }
	
	/* Regel */
	section#text figure.regel {
		width: auto;
		padding: 1.625rem 20rem 1.625rem 0; /* -> 40+6.625+0=46.625rem ~ 746px */
		background: #ebd3f9;
		}
		section#text figure.regel a { background: transparent; }
	
	section#text figure.beispiel { 
		width: 34rem;
		padding: 1.625rem 6.625rem 1.625rem 0; /* -> 40+6.625+0=46.625rem ~ 746px */
		background-color: #d4d1cf; 
		background-color: rgba(83,71,65,0.2); 
		background-image: url(img/elements/icon-beispiel.svgz);
		background-position: 2rem 1.5rem;
		background-repeat: no-repeat;
		}	
		
	section#text figure.dialog { 
		padding: 1.625rem 6.625rem 1.625rem 0; /* -> 40+6.625+0=46.625rem ~ 746px */
		background-color: #4d4552; 
		background-color: rgba(77,69,82,0.3); 
		background-image: url(img/elements/icon-beispiel.svgz);
		background-position: 2rem 1.5rem;
		background-repeat: no-repeat;
		}
		
		section#text figure.dialog dl { margin: 0 0 0 6.615rem; }
		section#text figure.dialog dt { display: inline-block; width: 8rem; vertical-align: top; }
		section#text figure.dialog dd { display: inline-block; width: 20rem; vertical-align: top; }
		
	section#text blockquote { 
		width: 34rem;
		padding: 1.625rem 6.625rem 0 0; /* -> 40+6.625+0=46.625rem ~ 746px */
		background-color: #cac9c8; 
		background-color: rgba(202,201,200,1); 
		background-image: url(img/elements/icon-zitat.svgz);
		background-position: 0rem 1.625rem;
		background-repeat: no-repeat;
		}
		section#text blockquote .source { 
			width: 34rem;
			display: block; 
			margin: 2rem 0 0 0;
			padding: 1rem 1.625rem 1rem 5rem;
			background: #5f5c5c;
			color: #fff;
			}
			
			section#text blockquote .source.narrow { width: 33rem; }
		

	/* Überschriften in Blockformaten */
	section#text figure.beispiel h2, section#text figure.beispiel h3, section#text figure.beispiel h4, 
	section#text figure.regel h2, section#text figure.regel h3, section#text figure.regel h4, 
	section#text blockquote h2, section#text blockquote h3, section#text blockquote h4 {
		font-family: FiraSansRegular, "Reporter-Two", sans-serif; 
		font-size: 1.125rem;
		margin: 0;
		padding: 1.625rem 0 1rem 5rem;
		color: #2a2625;
		}
		
		/* Regel hat lila Überschriften */
		section#text figure.regel h2, section#text figure.regel h3, section#text figure.regel h4 { color: #af50e6; }
		
		/* Erste Überschrift im Block hat kein Abstand oben */
		section#text figure.beispiel h2:first-child, section#text figure.beispiel h3:first-child, section#text figure.beispiel h4:first-child, 
		section#text figure.regel h2:first-child, section#text figure.regel h3:first-child, section#text figure.regel h4:first-child, 
		section#text blockquote h2:first-child, section#text blockquote h3:first-child, section#text blockquote h4:first-child { padding-top: 0; }
	
/* Tabellen */
section#text table {
	display: block;
	margin: 1.625rem 0;
	border-collapse: collapse;
	caption-side: top;
	table-layout: fixed;
	width: 100%;
	margin: 2em 1em;
	}
	
	section#text table.eng { width: 34rem; margin-left: 5rem; } 
		section#text table.eng tr { width: 34rem; } 
		section#text table.eng thead { width: 34rem; } 
		section#text table.eng tbody { width: 34rem; } 
	section#text table.weit { width: auto; margin-left: 5rem; margin-right: 1.625rem; } 
		section#text table.weit tr { width: auto; } 

				
	/* Flexionstabellen */
	table.flexion { }
	
		table.flexion tr:hover td { background: #d7a7f2; }
		
		table.flexion th { 
			background: #2a2625;
			color: #fff;
			border-top: 3px solid #fff;
			border-right: 3px solid #fff;
			border-bottom: 3px solid #fff;
			padding: 0.5rem 0.5rem;
			font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; 
			text-align: left;
			vertical-align: top;
			line-height: 1;
			width: 35rem;
			}
	
		table.flexion td { 
			background: #cac9c8;
			border-top: 3px solid #fff;
			border-right: 3px solid #fff;
			border-bottom: 3px solid #fff;
			padding: 0.5rem 0.5rem;
			vertical-align: top;
			line-height: 1.25;
			}
		
	/* Spezialfälle */		
	table.flexion td.table-col-short { width: auto; background: #ebd3f9; }
		table.flexion th.table-col-short { width: auto; }
		
	table.flexion .dunkellila { background: #4b2263; color: #fff; }
	

	/* Bilinguen */
	table.bilingue { }
		
		/*Bilingue Überschrift: Quelle und Spaltenköpfe */
		table.bilingue th { 
			background: #2a2625;
			color: #fff;
			border-top: 3px solid #fff;
			border-right: 3px solid #fff;
			border-bottom: 3px solid #fff;
			padding: 0.5rem 0.5rem;
			font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;
			text-align: left;
			vertical-align: top;
			line-height: 1;
			}
		
		/*Bilingue Text */
		table.bilingue td { 
			background: #cac9c8;
			border-top: 3px solid #fff;
			border-right: 3px solid #fff;
			border-bottom: 3px solid #fff;
			padding: 0.5rem 0.5rem;
			vertical-align: top;
			line-height: 1.25;
			}
			
			table.bilingue td br { display: block; height: 0.5rem; background: yellow; }


/* Abbildung: Fotos, Maps und Grafiken */
section#text figure.abb { 
	display: block;
	height: auto;
	position: relative;
	}

	/* Bild */
	section#text figure.abb img, section#text figure.abb svg { 
		display: block;
		height: auto;
		overflow-x: hidden;
		}
		
		/* Breiten */
		section#text figure.abb.w560 img, section#text figure.abb.w560 svg { 
			width: 35rem; 
			margin: 3.25rem 0 3.25rem 5rem;
			}
			
		section#text figure.abb.w1000 img, section#text figure.abb.w1000 svg { 
			width: 61.5rem; 
			margin: 3.25rem 0 3.25rem 0;
			}
			
		/* Rahmen */
		/*rundherum*/ section#text figure.abb img.bordertype1, section#text figure.abb svg.bordertype1 { border: 1px solid #2a2625; }
		/*obenunten*/ section#text figure.abb img.bordertype2, section#text figure.abb svg.bordertype2 { border-top: 1px solid #2a2625; border-bottom: 1px solid #2a2625; }
	
	
	/*Legende */
	section#text figure.abb figcaption {
		display: block;
		font-family: Arial, sans-serif; 
		line-height: 1.375;
		}

		section#text figure.abb.w560 figcaption {
			position: absolute;
			top: 1.625rem;
			left: 42rem; /* Gemessen vom linken Pagerand */
			width: 18rem;
			}
			
		section#text figure.abb.w1000 figcaption {
			position: static;
			margin: 1rem 1.625rem 3.25rem 5rem;
			width: 52rem;
			}
			
		/* Typo in der Legende */
		section#text figure.abb figcaption p { 
			margin-left: 0; 
			width: auto;
			line-height: 1.375;
			font-family: Arial, sans-serif; 
			line-height: 1.375;
			}
			
			section#text figure.abb.w1000 figcaption p + p { text-indent: 1rem; margin-top: 0; }
	
		
		
		
		
		
	
		
/* DETAILSTYPOGRAFIE	====================================================== */

.inline-block { display: inline-block; }

/* Texttransformierung */

.capitalize { text-transform: capitalize; }
.lowercase { text-transform: lowercase; }
.lowercase { text-transform: uppercase; }

.bold { font-weight: bold; }
.kursiv { font-style: italic; }
.s { text-decoration: line-through; }

.lila { color: #af50e6; }
.dunkellila { color: #7c0bbd; }

/* Mono in eigener Zeile, als span oder a */
.code { display: block; margin: 1rem 0; font-family: Consolas, "San Francisco Mono", Courier, "Courier New", monospace; font-size: 1.125rem; }
	.code.small { font-size: 0.875rem; word-wrap: break-word; }
a.code { color: #7c0bbd; border-bottom: 0; }
a.code:hover { text-decoration: underline; border-bottom: 0; }
a.code:visited { color: #a550e6; }

.keystroke { display: inline-block; padding: 0.05rem 0.25rem; background: #5f5c5c; color: #fff; font-family: Consolas, "San Francisco Mono", Courier, "Courier New", monospace; }

mark, em, .label { display: inline; padding: 0.1rem 0.25rem; background: #cac9c8; }
	mark.lila, em.label.lila, .label.lila { background: #d7a7f2; color: #2a2926; }
	mark.dunkellila, em.label.dunkellila, .label.dunkellila { background: #7c0bbd; color: #fff; }
	mark.hellgrau, em.label.hellgrau, .label.hellgrau { background: #cac9c8; }
	mark.dunkelgrau, em.label.dunkelgrau, .label.dunkelgrau { background: #2a2625; color: #fff; }
	mark.hellgrun, em.label.hellgrun, .label.hellgrun { background: #d2fd7a; }
	mark.mittelgrun, em.label.mittelgrun, .label.mittelgrun { background: #9cbc5a; }
	mark.dunkelgrun, em.label.dunkelgrun, .label.dunkelgrun { background: #76a319; color: #fff; }
	mark.gelb, em.label.gelb, .label.gelb { background: #ffcc00; }
	mark.dunkelblau, em.label.dunkelblau, .label.dunkelblau { background: #006699; color: #fff; }
	mark.hellblau, em.label.hellblau, .label.hellblau { background: #b6dbf2; }
	mark.rot, em.label.rot, .label.rot { background: #cc0000;  color: #fff; }
	mark.orange, em.label.orange, .label.orange { background: #ff7400;  color: #fff; }

sub, sup { line-height: 0; }

span.qm { padding-left: 0.125rem; }
span.pgf, abbr.pgf { padding-right: 0.15rem; }
span.spat, abbr.pgf { padding-left: 0.15rem; padding-right: 0.15rem; }
span.wr { padding-right: 0.25rem; padding-left: 0.25rem; }


/* Satzglieder */

span.satzglied { display: inline-block; background: #2a2625; color: #fff; padding: 0.1rem 0.25rem; }
span.satzgliedlabel { display: inline-block; text-transform: uppercase; padding: 0.3rem 0.25rem 0.15rem 0.25rem; font-size: 0.75rem; font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; letter-spacing: 0.05rem; margin-right: 0.25rem; }

span.satzgliedlabel.any { background: #cac9c8; }
span.satzgliedlabel.subjekt { background: #aae813; }
span.satzgliedlabel.objekt { background: #bdcfdf; }
span.satzgliedlabel.pradikat { background: #ff7400; }
span.satzgliedlabel.verb { background: #ff7400; }
span.satzgliedlabel.attribut { background: #ffcc00; }
span.satzgliedlabel.genitivattribut { background: #ffcc00; }
span.satzgliedlabel.apposition { background: #ffcc00; }
span.satzgliedlabel.adverbiale { background: #e52466; color: #fff; }
span.satzgliedlabel.negation { background: #e68080; }

/* Kursives Auszeichnen ohne Anführungszeichen */
q { font-style: italic; font-size: inherit; }
	q:before { content: ""; }
	q:after { content: ""; padding-right: 0.05em; }
	q mark { font-style: normal; }
	q abbr { font-style: italic; }

/* Einfache Anführungszeichen */
q.sq { font-style: normal; font-size: inherit; }
	q.sq:before { content: "\203A"; padding-right: 0.05em; }
	q.sq:after { content: "\2039"; padding-left: 0.05em; }

/* Doppelte Anführungszeichen */
q.dq, cite { font-style: normal; font-size: inherit; }
	q.dq:before { content: "\00BB"; padding-left: 0.15em; padding-right: 0.1em; }
	q.dq:after { content: "\00AB"; padding-left: 0.1em; padding-right: 0.15em; }
				
/* Englische Anführungszeichen */
q.en { font-style: normal; font-size: inherit; }
	q.en:before { content: "\201C"; padding-left: 0.15em; padding-right: 0.1em; }
	q.en:after { content: "\201D"; padding-left: 0.1em; padding-right: 0.15em; }

/* In Klammern */
q.klammer { font-style: italic; font-size: inherit; }
	q.klammer:before { content: "\0028"; font-style: italic; }
	q.klammer:after { content: "\0029"; margin-right: 0.05em; font-style: italic; }

/* Vor Komma */
q.komma { font-style: italic; font-size: inherit; }
	q.komma:after { content: "\002C"; margin-right: 0.05em; font-style: italic; }
			
/* Vor Punkt */
q.punkt { font-style: italic; font-size: inherit; }
	q.punkt:after { content: "\002E"; margin-right: 0.05em; font-style: italic; }
		

/* Breaks */

br.tab1 { margin-left: 1rem; }
	
		
		
/* TOOLTIP	================================================================== */

a { position: relative;  }
	
	a span.tip {
		visibility: hidden;
		position: absolute;
		top: 2rem;
		left: 2rem;
		z-index: 999999999;
		width: 16rem;
		margin: 0;
		padding: 1rem;
		border-top: 0;
		border-right: 0;
		border-bottom: 0;
		border-left: 0.5rem solid #7c0bbd;
		background: #181615;
		color: #fff;
		font-size: 1rem;
		line-height: 1.5;
		font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;
		text-align: left;
		}
		
		a:hover span.tip { visibility: visible; }
		
	
	/* Spezialfälle */
	
	a.button span.tip { top: 2.5rem; left: -0.5rem; border-left: 0; }
	section#text a span.tip { box-shadow: 0 0 8rem #949292; }
	
	section#indexcards a#more-cards span.tip { background: #5f5c5c; border-left: 0.5rem solid #7c0bbd; }
		 
	/* Für alles im Header-Nav */
	body#index nav#header-nav ul li a span.tip { width: 13rem; background: #2a2625; color: #fff; }

		/* Headerblock */
		body#index nav#header-nav ul#areas li#themen-deklination a span.tip { border-left: 0.5rem solid #cc0000; }
		body#index nav#header-nav ul#areas li#themen-genitiv a span.tip { border-left: 0.5rem solid #e68080; }
		body#index nav#header-nav ul#areas li#themen-verb a span.tip { border-left: 0.5rem solid #76a319; }
		body#index nav#header-nav ul#areas li#themen-konjunktiv a span.tip { border-left: 0.5rem solid #aae813; }
		body#index nav#header-nav ul#areas li#themen-schrift a span.tip { border-left: 0.5rem solid #ff7400; }
		body#index nav#header-nav ul#areas li#themen-rechtschreibung a span.tip { border-left: 0.5rem solid #ffcc00; }
		body#index nav#header-nav ul#areas li#themen-zeichensetzung a span.tip { border-left: 0.5rem solid #b78d49; }
		body#index nav#header-nav ul#areas li#themen-syntax a span.tip { border-left: 0.5rem solid #123859; }
		body#index nav#header-nav ul#areas li#themen-stilistik a span.tip { border-left: 0.5rem solid #7a9fbf; }
		body#index nav#header-nav ul#areas li#themen-schriftstellerei a span.tip { border-left: 0.5rem solid #bdcfdf; }
		body#index nav#header-nav ul#areas li#themen-wortkunde a span.tip { border-left: 0.5rem solid #e52466; }
		body#index nav#header-nav ul#areas li#themen-sprache a span.tip { border-left: 0.5rem solid #7a5ae8; }
	

/* ABOUT.PHP	============================================================== */

main#about section p + p { margin-top: 1rem; }
section#impressum address span { display: inline; }

/* ERROR	============================================================== */

p.error-message { font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; font-size: 1.25rem; color: #af50e6; font-weight: bold; background: #e7caf7; padding: 0.25rem; }
	
	
/* ZORRO.PHP	============================================================== */
body#contactpage main { 
	background: transparent;
	width: 62.5rem; /* 1000 px */
	margin: 0 auto;
	display: block;
	}
	
	body#contactpage main h1 { 
	display: block;
	width: 30rem;
	font-size: 2rem;
	font-style: normal;
	line-height: 1.125;
	color: #af50e6;
	margin: 0 0 2rem 2.5rem;
	}
	
	body#contactpage div#confirmation {
	display: block;
	background: #fff;
	min-height: 20rem;
	color: #2a2625;
	padding: 2.5rem;
	width: 100%;
	border-left: 0.5rem solid #af50e6;
	}
	
	body#contactpage div#confirmation p, body#contactpage div#confirmation label { font-family: Georgia, "Baskerville", "Cambria", serif; font-size: 1rem; margin: 0 0 1rem 0; color: #2a2625; }
	div#confirmation label { margin-bottom: 1.625rem; }
	body#contactpage div#confirmation input { font-family: Consolas, monospace; font-size: 1.5rem; border: 0; background: #efdcfa; padding: 1rem; color: #af50e6; width: 100%; } 
	body#contactpage div#confirmation textarea { font-family: Consolas, monospace; font-size: 1.5rem; background: #fff; color: #2a2526; width: 80%; border: 1px solid #af50e6; padding: 0.5rem; min-height: 6rem; } 
	body#contactpage div#confirmation a.button, body#contactpage div#confirmation input.formbutton { font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif; font-size: 1rem; margin-bottom: 1rem; color: #fff; background: #2a2625; padding: 0.5rem; border-left: 0.5rem solid #af50e6; }		

	
/* BL.XML	============================================================== */	

html#blxml {}

html#blxml h1 { display: block; width: 62rem; font-family: FiraSansMedium, "Myriad Pro Cond", "Helvetica Neue Condensed", "Open Sans Condensed", "bloscondbold", "Ubuntu Condensed", sans-serif; font-size: 2rem; font-style: normal; line-height: 1.125; color: #af50e6; margin: 0 0 2rem 3.5rem; max-width: 40rem; }
	
html#blxml section#entries {
	display: block;
	background: #fff;
	border-left: 1rem solid #af50e6; 
	margin: 0 0 3rem 0;
	padding: 2.5rem;
	font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;
	font-size: 1rem;
	color: #2a2625;
	}
	
	html#blxml section#entries h2, html#blxml section#entries h3 { 
		margin: 0; 
		padding: 0; 
		text-transform: capitalize;
		font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;
		}
		
		html#blxml section#entries h2 { font-size: 1.5rem; color: #af50e6; }
		html#blxml section#entries h3 { font-size: 1rem; color: #2a2625; }
		
		html#blxml section#entries ul { margin: 0; padding: 0; list-style-type: none; } 
		html#blxml section#entries ul li { display: inline-block; }
		html#blxml section#entries ul li.division { margin-top: 0.5rem; text-transform: capitalize; font-weight: bold; color: #2a2625;}
		html#blxml section#entries ul li { color: #2a2625; text-decoration: none; }
		html#blxml section#entries ul li a:hover { color: #af50e6; border-bottom: 1px solid #4A0474; }
		html#blxml section#entries ul ul { margin: 0; padding: 0; list-style-type: square; }
		html#blxml section#entries ul ul li { margin-right: 0.25rem; padding-right: 0.5rem; border-right: 1px solid #7c0bbd; }
		html#blxml section#entries ul ul li:last-child { margin-right: 0; padding-right: 0; border-right: 0px; }
		
		html#blxml section.category { height: auto; vertical-align: top; }
		html#blxml section.category + section.category { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #af50e6; }
		
html#blxml section#items {
	display: block;
	background: transparent;
	margin: 0 0 2rem 0;
	padding: 0;
	font-family: "Helvetica Neue", Arial, "Calibri", "Ubuntu Medium", "Helvetica", Tahoma, sans-serif;
	font-size: 1rem;
	}
		
	html#blxml section#items h2 { 
		margin: 0 0 1rem 0; 
		padding: 0; 
		font-size: 1.5rem;
		}
		
		html#blxml section#items article { 
			display: block;
			margin: 0 0 2rem 0;
			padding: 2rem 2rem 2rem 2rem;
			background: #edecec;
			color: #2a2526;
			border-left: 1rem solid #af50e6;
			}
			
			html#blxml section#items article table td { color: #2a2625; background: #cac9c8; padding: 0.3rem; }
			html#blxml section#items article table.video tr td:first-child, html#blxml section#items article table.data tr td:first-child { background: #5f5c5c; color: #fff; font-weight: bold; width: 4rem; }
			html#blxml section#items article table.video tr td:last-child, html#blxml section#items article table.data tr td:last-child { width: 100%; }
			html#blxml section#items article table td a { color: #af50e6; text-decoration: none; }
				html#blxml section#items article table td a:hover { color: #7c0bbd; }
				html#blxml section#items article table td a:visited { color: #949292; }
			
			html#blxml section#items article table.data { width: 100%; }
				html#blxml section#items article table.data tr + tr { border-top: 1px solid #2a2625; } 	
			
			html#blxml section#items article div.videodata { 
				position: relative;
				margin: 1rem 0 0 0;
				min-height: 16rem;
				}
				
				html#blxml section#items article div.videodata img.poster { display: block; position: absolute; top: 0; right: 0; width: 20rem; height: 15rem; } 
			
				html#blxml section#items article table.video { width: 36rem; }
					html#blxml section#items article table.video.yes { display: block; }
					html#blxml section#items article table.video.no { display: none; }
					html#blxml section#items article table.video tr + tr { border-top: 1px solid #2a2625; }
					
				html#blxml section#items article ul.playlists { width: 32rem; list-style-type: none; margin: 1rem 0 1rem 0; padding-left: 0; }
				html#blxml section#items article ul.playlists.no { display: none; }
					html#blxml section#items article ul.playlists li { display: inline; margin-right: 1rem; text-transform: capitalize; }
					html#blxml section#items article ul.playlists li a { color: #af50e6; text-decoration: none; }
					html#blxml section#items article ul.playlists li a:hover { color: #7c0bbd; }
					html#blxml section#items article ul.playlists li a:visited { color: #949292; }
				
			html#blxml section#items article table.media { display: block; width: auto; margin: 0 0 1rem 0; }
				html#blxml section#items article table.media th { text-align: left; width: 4rem; font-weight: normal; background: #949292; padding: 0.3rem; }
				html#blxml section#items article table.media td { width: 4rem; font-weight: bold; padding: 0.3rem; }
				html#blxml section#items article table.media td.yes { background: #e7caf7; }
				html#blxml section#items article table.media td a.no { display: none; }

			html#blxml section#items article p.plus { }


/* SIMPLE	============================================================== */	
body#simple main {
	background: transparent;
	width: 62.5rem; /* 1000 px */
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: stretch;
	}

	body#simple h1 { 
		flex: 1 100%;
		display: block;
		width: 62rem;
		font-size: 2rem;
		font-style: normal;
		line-height: 1.125;
		color: #af50e6;
		margin: 0 0 2rem 2.5rem; /* 2.5rem = 40px = Videoraster */
		}
		
	body#simple main header {
		flex: 2 30%;
		background: #fff;
		min-height: 30rem;
		color: #2a2625;
		border-left: 1rem solid #af50e6;
		padding: 2.5rem 1rem 2.5rem 1.5rem;
		font-size: 1rem; 
		font-family: "FiraSansRegular", sans-serif; 
		font-weight: normal; 
		}
		
	body#simple article {
		flex: 2 58%;
		background: #fff;
		min-height: 30rem;
		color: #2a2625;
		padding: 2.5rem 2.5rem 2.5rem 1rem;
		}
		
	body#simple main p + p { margin-top: 1rem; }
	body#simple main article ul li a { margin: 0; }
	
	body#simple main article ul li { 
		display: block; 
		background-image: url(img/elements/bullet-16.svgz);
		background-position: 0.25rem 0.3rem; /* 3rem nach links, 0.5rem nach unten */
		background-repeat: no-repeat;
		background-size: 0.8125rem 0.8125rem;
		background-color: transparent;
		padding: 0 0 0 2rem;
		font-family: "FiraSansRegular", sans-serif; 
		}
		
	body#simple main article ul + h2 { margin: 2rem 0 1rem 0; }
	
	body#simple footer { margin-top: 5rem; }
	
	
	
/* WIDGET DEUTSCHES SPRACHGEBIET	============================================================== */	

body#page section#text figure#deutsches-sprachgebiet { background: #f3e5fb; padding: 1rem 0 0 0; margin: 2rem 0 0 0; }
body#page section#text figure#deutsches-sprachgebiet svg.map-deutsches-sprachgebiet { padding: 0; margin: 0; }
body#page main section#text h3#deutsches-sprachgebiet-headline { margin: 0; }

svg.map-deutsches-sprachgebiet path.ndt { fill: #bdcfdf; stroke-width: 2; stroke: #7a9fbf; }
svg.map-deutsches-sprachgebiet path.ni { fill: #bdcfdf; stroke-width: 1; stroke: #7a9fbf; }
svg.map-deutsches-sprachgebiet path.mdt { fill: #ebd3f9; stroke-width: 2; stroke: #af50e6; }
svg.map-deutsches-sprachgebiet path.odt { fill: #d7a7f2; stroke-width: 2; stroke: #af50e6; }
svg.map-deutsches-sprachgebiet path.rheinischer-facher-flache { fill:#ebd3f9; stroke-width: 0; }
svg.map-deutsches-sprachgebiet path.rheinischer-facher-streifen { fill: #bdcfdf; stroke-width: 0; }
svg.map-deutsches-sprachgebiet path.rheinischer-facher-rand { fill: none; stroke-width: 2; stroke: #af50e6; }
svg.map-deutsches-sprachgebiet polyline.iso-line { fill: none; stroke-width: 2; stroke: #2a2625; stroke-linecap: round; stroke-linejoin: round; }
svg.map-deutsches-sprachgebiet text.isoglossen { fill: #2a2625; font-family: Georgia, "Baskerville", "Cambria", serif; font-style: italic; font-size: 1.125rem; }
svg.map-deutsches-sprachgebiet text.sprachen { fill: #2a2625; font-family: Georgia, "Baskerville", "Cambria", serif; font-style: italic; font-size: 2.5rem; }
svg.map-deutsches-sprachgebiet circle.exoflache { fill: #76A319; stroke-width: 0; opacity: 0.5; }
svg.map-deutsches-sprachgebiet circle.exoring { fill: none; stroke-width: 1; stroke: #76A319; }
svg.map-deutsches-sprachgebiet text.exolabel { fill: #222F07; font-family: "FiraSansRegular", Arial, sans-serif; font-size: 1rem; }
svg.map-deutsches-sprachgebiet text.dialekt-small { fill: #2a2625; font-family: "FiraSansRegular", Arial, sans-serif; font-style: normal; font-size: 1rem; }
svg.map-deutsches-sprachgebiet text.dialekt-large { fill: #2a2625; font-family: "FiraSansRegular", Arial, sans-serif; font-style: normal; font-size: 1.5rem; }

figure#deutsches-sprachgebiet figcaption#deutsches-sprachgebiet-desc { display: flex; flex-direction: column; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start;  }
figure#deutsches-sprachgebiet figcaption#deutsches-sprachgebiet-desc p { flex: 1 12rem; text-indent: 0; font-size: 0.875rem; line-height: 1.25; padding: 0 2rem 2rem 0; }


svg.map-deutsches-sprachgebiet text.text-small { fill: #2a2625; font-family: "FiraSansRegular", Arial, sans-serif; font-style: normal; font-size: 1rem; }