/* Dieses Layout beinhaltet Ideen der Wordpress-Themes Fluida und Liquido, die für diesen Blog verwendet wurden, als er noch unter WP lief. */
/* Meine Umsetzung ist sehr viel weniger ausgefeilt, but: works for me */
/* Du bist eingeladen zu verwenden was dir gefällt - License: none (public domain) */

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font: inherit;
}

*, *::before, *::after { box-sizing: inherit; }

@font-face {
  font-family: 'Oswald-Light';
  src: local('Oswald-Light'),
       url('div/Oswald-Light.ttf') format('truetype');
}

html { line-height: 1.8; box-sizing: border-box; color: #0f0f0f; }

body { font-family: Oswald, Verdana, 'Sans Serif'; font-size: 1em; color: #666666; background-color: #F3F3F3; }

img { height: auto;  max-width: 100%; border: 0; }

hr { height: 1px; border: 0; clear: both; }

i { font-style: italic; }

a { color: #bc926b; }
a:hover, a:hover #dingsd { color: #0f0f0f; }
a:link, a:visited { text-decoration: none; }

main { width: calc( 98% - 320px ); float: left; border-bottom-color: #eaeaea; background-color: #f1f1f1; padding-left: 0px; padding-right: 0px; margin: 20px auto; max-width: 1920px; }

/* Hintergrund leichtestes Grau */
.abstract-area, .fulltext-area, .result-page-nrs span, .result-page-nrs a { background-color: #fbfbfb; }


h1 { font-size: 2.3em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.4em; color: #bc926b; }
h1, h2, h3, h4 { font-weight: 700; }

audio { float: right; margin-bottom: -4em; margin-right: 3em; }

#footer {
	display: grid;
	grid-template-columns: auto auto auto;
	align-content: center;
  	justify-content: space-between;
	margin: 0 auto; max-width: 1920px;
	background-color: #fbfbfb; height:50px;
	position: relative;
	padding-left: .9em;
	padding-right: .9em;
	bottom: .2em;
	left: 0;
  	right: 0;
}

#footer a { color: #bc926b; text-decoration: none; transition: all .3s ease-in-out; }
#footer a:hover { color: #0f0f0f; font-size: 110%; font-weight: 300; }


#kopf {
	left: -.9em; right: 0; margin: 0 auto; max-width: 1920px; background-color: #FFFFFF; height:80px;
	position: fixed; top: -.3em; box-shadow: 0 0 3px rgba(0,0,0,0.2); z-index: 999; opacity: 0.95;
}

#site-name {  font-family: Oswald-Light, Verdana, sans-serif; font-size: 140%; font-weight: 300; float: left; line-height: 1.3;	}
#site-name a { font-size: 120%; display: block; text-decoration: none; }
#site-name a:hover { color: #0f0f0f; }

#dingsd { background-color: #bc926b; color: white; padding-left: .4em; padding-right: .4em; margin-right: 2px; }
#firstletter { color: #bc926b; font-size: 210%; }

#site-desc { display: block; clear: left; float: left; font-size: 1em; line-height: 1.3; opacity: .75; }

.header-image { display: block; width: inherit; max-width: 100%; margin: 0 auto; margin-top: 76px; margin-bottom: 15px; background-size: cover; background-position: 50% 50%; }

#kopf-nav { display: inline; float: right;  font-family: Oswald-Light, Verdana, sans-serif; font-size: 105%; font-weight: 300; }

#kopf-nav ul {}

#kopf-nav a { display: block; padding: 0 1.6em; text-decoration: none; line-height: 78px;  box-shadow: inset 0 0 #0F0F0F; transition: color, box-shadow 1s; }

#kopf-nav ul li { display: block; float: left; position: relative; white-space: nowrap; letter-spacing: 1px; border-top: 6px solid #0f0f0f; }

#kopf-nav > ul > li:hover > a { color: #FFFFFF; box-shadow: inset 0 80px #0F0F0F; }
#kopf-nav, #kopf-title { height:80px; }

#kopf-title { float: left; display: inline-block; padding-top: .9em; padding-left: 3em; }

p.list { margin-left: 3em; margin-bottom: -0.5em; }

.abstract-area, .fulltext-area { display: block; overflow: hidden; float: left; margin: 0; margin-top: -15px; margin-right: 1%; margin-bottom: 1.5em; margin-left: 1%; padding: 2.5em 2em; }

.abstract-area { width: 48%; }
.fulltext-area { width: 96%; }
.fulltext-area_ob { width: 96%; margin-top: 4em; margin-left: 2em; }

.fulltext-text > p { padding-bottom: .8em; }
.fulltext-text > p::selection { color: black; background-color: #bc926b; }

.zitat { text-align: center; font-style: oblique; }

.brief { text-align: left; font-style: oblique; }
.brief > p { padding: 0 3em .8em 3em; }

figure { margin: 0; padding: .5em; border: thin solid gainsboro; background: white; }
figure.right_30 { float: right; margin-left: 1em; width: 30%; }
figure.right_40 { float: right; margin-left: 1em; width: 40%; }
figure.right_50 { float: right; margin-left: 1em; width: 50%; }
figure.right_60 { float: right; margin-left: 1em; width: 60%; }
figure.right_70 { float: right; margin-left: 1em; width: 70%; }
figure.right_80 { float: right; margin-left: 1em; width: 80%; }
figure.right_100 { float: right; margin-left: 1em; width: 100%; }
figcaption { padding: .3em; text-align: center; font-style: oblique; font-size: 0.8em; }
.img_source { font-size: 85%; }


.fulltext-text { display: block; float: left; padding-top: 0em; margin-bottom: 1em; }

.fulltext-title { margin: 0; padding: .1em 0; font-size: 200%; font-weight: 100; line-height: 1.4; word-wrap: break-word; text-transform: uppercase; font-family: Oswald-Light, Verdana, sans-serif; }

.abstract-title { margin: 0; padding: .1em 0; font-size: 175%; font-weight: 100; line-height: 1.4; word-wrap: break-word; text-transform: uppercase; font-family: Oswald-Light, Verdana, sans-serif; }

.abstract-title a:link, .abstract-title a:visited { color: inherit; text-decoration: none; }
.abstract-title a:active, .abstract-title a:hover { background-color: #BC926B; transition: all .5s ease-in; }

.abstract-date { display: block; float: right; margin: 0; margin-right: 1em; margin-bottom: -1em; clear: both; font-size: 1em; }

.abstract-text { display: block; float: left; padding-top: 1.3em; margin-bottom: 1em; }
.abstract-text > p::selection { color: black; background-color: #bc926b; }

.abstract-area:nth-child(2n+1) { clear: both; }

.subtitle_date { margin: 0; padding: .1em 0 0 .5em; font-size: 120%; font-weight: 90; opacity: .75; line-height: 1.2; word-wrap: break-word; text-transform: none; font-family: Oswald-Light, Verdana, sans-serif; }

.abstract-subtitle { margin: 0; padding: .1em 0; font-size: 110%; font-weight: 120; line-height: 1.4; word-wrap: break-word; text-transform: uppercase; font-family: Oswald-Light, Verdana, sans-serif; }


#nav-area { float: right; display: block; border: 0; box-shadow: none; padding: 3em; padding-top: 1em; padding-bottom: .5em; background-color: #eaeaea; margin-right: .8em; margin-top: .3em; }

#nav-area_ob { float: right; display: block; border: 0; box-shadow: none; padding: 3em; padding-top: 5em; padding-bottom: .5em; background-color: #eaeaea; margin-right: .8em; margin-top: .3em; }

#nav-area a:link, #nav-area a:visited { text-decoration: none; word-wrap: break-word; }
#nav-area a:active, #nav-area a:hover {}

.nav-kat-box { margin: 0; overflow: hidden; display: block; float: none; word-wrap: break-word; font-weight: 400; font-size: 100%; }

.nav-box { margin: 0 0 1.5em 0; overflow: hidden; font-weight: 300; }

.nav-box ul li { display: block; float: none; margin-bottom: 0.3em; word-wrap: break-word; padding-left: .5em;  }

.nav-title { font-size: 1em; font-size: 130%; font-weight: 500; margin-bottom: -0.4em; margin-top: 0.3em; margin-left: 0em; text-align: left; line-height: 2.2; font-family: Oswald-Light, arial, sans-serif; }

.nav-date { font-size: 75%; color: #969696; margin-top: -1em; padding-left: 2em; }

.nav_current_title { font-size: 110%; color: #969696; font-weight: 150; }

.inact_switch { color: #969696; }

.weiterlesen { color: #FBFBFB; background-color: #0f0f0f; }
.weiterlesen:before { background-color: #BC926B}
.weiterlesen:hover { color: #FBFBFB; }

a.weiterlesen { display: block; width: 6em; float: left; position: relative; overflow: hidden; padding: 0 1em; font-size: 1em; line-height: 3; border-radius: 0; transition: .3s all ease-in-out; }

a.weiterlesen:before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; transition: .5s all ease-in-out; }

a.weiterlesen:hover:before { left: 100%; }

.weiterlesen span { position: relative; display: inline-block; }

.weiterlesen span:after { content: "..."; position: absolute; right: -1.5em; opacity: 0; transition: all .3s ease-in; }

a.weiterlesen:hover span:after { opacity: 1; }


.result-page-nrs { display: table; float: none; clear: both; margin: 1.5em auto; border: 1px solid transparent; text-align: center; }

.result-page-nrs span, .result-page-nrs a {
	display: block; position: relative; float: left; height: 2.2em; width: 2.2em; margin-right: 1px; text-align: center; font-size: 1.4em; line-height: 2.2; text-decoration: none; transition: all .3s ease-in-out;
}
.result-page-nrs a:hover, .result-page-nrs span:hover { width: 3em; }


.prev_next_area {
	display: grid;
	grid-template-columns: 3fr 2fr 3fr;
  	justify-content: space-between;
	margin: 0 auto;
	width: 100%;
	position: relative;
	padding: 3em 0 0 0;
	bottom: 0;
	left: 0;
  	right: 0;
}
.left_field {
  text-align: right;
  grid-column-start: 1;
  grid-column-end: 2;
  padding-bottom: 2em;
}
.right_field {
  text-align: left;
  grid-column-start: 3;
  grid-column-end: 4;
  padding-bottom: 2em;
}

.prev { border-top: medium solid #e3e1e1; }
.next { border-bottom: medium solid #e3e1e1; }

a.prev, a.next {
  color: #BC926B;
  text-decoration: none;
  transition: all .9s;
}

a.next:hover,
a.next:focus {
   padding-right: 6em; color: black;
}

a.prev:hover,
a.prev:focus {
  padding-left: 6em; color: black;
}


@media (max-width: 1024px) {
	main { width: 100%; margin: 0 0 1.5em; }
	main #nav-area { width: 100%; 	margin: 0 0 1.5em; 	float: none; clear: both; }
	main #nav-area::after { clear: both; content: ""; display: block; }
}

@media (max-width: 800px) {
	body { font-size: .90em; }
	.abstract-area { width: 98%; }
	#site-name a span { padding-right: 0; }
	#kopf-nav { display: none; }
	#kopf-title { margin-right: 3em; }
}