/* normalize */
html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio,canvas,iframe,img,svg,video {vertical-align: middle;}
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
a { background-color: transparent; }
a:active, a:hover { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
dfn { font-style: italic; }
mark { background: #F7DD45; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { overflow: auto; font-family: monospace, monospace; font-size: 1em; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; border-radius: 0;}
select { border-radius: 0;}
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; border-radius: 0; -webkit-appearance: none !important; cursor:pointer;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type="submit"]{-webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s;}
legend { border: 0;  padding: 0; }
textarea { overflow: auto; resize: vertical;}
optgroup { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0;}
td, th { padding: 0; }
details { display: block; }
summary { display: list-item; }
::-moz-selection {background: #b7e6f8; text-shadow: none; }
img { vertical-align: top; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
.hidden, .invisible { display: none !important; }
.clearfix:before, .clearfix:after { content: " ";  display: table; }
.clearfix:after, .clear { clear: both; }
/* nur safari */
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}
svg:not(:root) { overflow: hidden; }
.sr-only { border: 0;clip: rect(0, 0, 0, 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;  width: 1px;}
.sr-only.focusable:active,.sr-only.focusable:focus {clip: auto;height: auto;margin: 0;overflow: visible;position: static; white-space: inherit;width: auto;}

/* FONTS */
/* poppins */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: local(''), url('fonts/poppins-v20-latin-500.woff2') format('woff2'), url('fonts/poppins-v20-latin-500.woff') format('woff'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: local(''), url('fonts/poppins-v20-latin-600.woff2') format('woff2'), url('fonts/poppins-v20-latin-600.woff') format('woff'); }
@font-face { font-family: 'Poppins';  font-style: italic; font-weight: 600; src: local(''), url('fonts/poppins-v20-latin-600italic.woff2') format('woff2'), url('fonts/poppins-v20-latin-600italic.woff') format('woff'); }
/* source-sans-pro */
@font-face { font-family: 'SourceSansPro';font-style: normal; font-weight: 400; src: local(''),  url('fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'), url('fonts/source-sans-pro-v21-latin-regular.woff') format('woff'); }
@font-face { font-family: 'SourceSansPro'; font-style: normal; font-weight: 600; src: local(''), url('fonts/source-sans-pro-v21-latin-600.woff2') format('woff2'), url('fonts/source-sans-pro-v21-latin-600.woff') format('woff'); }
@font-face { font-family: 'SourceSansPro'; font-style: normal; font-weight: 700; src: local(''), url('fonts/source-sans-pro-v21-latin-700.woff2') format('woff2'), url('fonts/source-sans-pro-v21-latin-700.woff') format('woff'); }
@font-face { font-family: 'SourceSansPro'; font-style: italic; font-weight: 400; src: local(''), url('fonts/source-sans-pro-v21-latin-italic.woff2') format('woff2'), url('fonts/source-sans-pro-v21-latin-italic.woff') format('woff'); }

/* allgemein */
* { margin:0; padding:0; border:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html,body { height:100%; width:100%; }
html { font-size:100%;  }
body { font-family: 'SourceSansPro', Arial, Helvetica, sans-serif; font-size: 1.25rem; line-height: 1.5; font-weight: 400; color:#111; background:#fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; }
.wrap { min-height:100%;}
.fade_in { opacity: 0; -moz-transition:all 1s ease-out; -o-transition:all 1s ease-out; transition:all 1s ease-out;}
.show { transform: translate(0px,0px) scale(1.0) rotate(0deg)!important; -o-transform: translate(0px,0px) scale(1.0) rotate(0deg)!important;   -ms-transform: translate(0px,0px) scale(1.0) rotate(0deg)!important; -moz-transform: translate(0px,0px) scale(1.0) rotate(0deg)!important;  -webkit-transform: translate(0px,0px) scale(1.0) rotate(0deg)!important;  opacity: 1!important; }
a {text-decoration:none; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; color:#cc0000;}
a:hover {color:#21b5d6;}
*:focus  { outline: 0; }
ul, ol { margin-left: 20px; padding: 0 ; }
ul {list-style: disc; }
ol {list-style: decimal;}
nav ul, div.collapse ul, div.footnote ul, div.liste ul { list-style: none; list-style-image: none; margin: 0; } 
.transit, input.submit, a img, a h2 {-webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out;}
b, strong, .bold { font-weight: 700; }
.hidden { display: none; }
.center {max-width:100%; margin:0 auto; position:relative; padding:0 40px;}
.blue {color:#21b5d6;}
.red {color:#cc0000;}
.italic {font-style:italic;}

/* header mit animation */
header.header {position:fixed;z-index:100; top:0; width:100%; height:80px; background:transparent; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out;}
.down header.header { margin-top:-80px;  }
.up header.header {margin-top:0px; box-shadow: 0px 0px 8px 2px rgba(0,0,0,.1); background:#fff;}
.nav_active header.header, .up.nav_active header.header, .down.nav_active header.header { margin-top:0px; }
.logo {position:relative; z-index:100; font-family: 'Poppins'; font-weight:500; line-height:80px; color:#fff; font-size: 2.25rem;}
.logo:hover {color:#cc0000;}
.up .logo {color:#000;}

/* hamburger */
.hamburger { position:absolute;  z-index:100; right:40px; top:20px; cursor: pointer; transition-property: opacity, filter;  transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; overflow: visible; }
.hamburger.is-active {}
.hamburger-box { width: 40px; height: 30px; display: inline-block; position: relative; }
.hamburger-inner { display: block; top: 20px;  margin-top: 0px; }
.hamburger-inner, .hamburger-inner::before { width: 40px; height: 4px; background-color: #fff; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; }
.up .hamburger-inner, .up .hamburger-inner::before, .nav_active .hamburger-inner, .nav_active .hamburger-inner::before {background-color: #000;}
.hamburger-inner::before { content: "";  display: block; top: -15px; }	
.hamburger--collapse .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse .hamburger-inner::before {transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse.is-active .hamburger-inner { transform: translate3d(0, -10px, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--collapse.is-active .hamburger-inner::before { top: 0; transform: rotate(-90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }

/* navigation */
.navigation { position:fixed; float:none; z-index:90; top:0; padding-top:80px; left:100%; width:50%; height:100vh; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out; background:#fff; color:#111; font-weight: 600; line-height:1.2; }
.navigation.active { left:50%;}
.menu {padding:10px 0 30px;}
.menu li {margin:20px 0;}
.menu li:first-child {margin:0 0 20px;}
.menu a {position:relative; color:#111; display: inline-block; padding:0 40px;}
.menu a:hover, .menu li.active a {color:#21b5d6;}
.overflowbox {position: relative; height: 100%;max-height: 100%; overflow: auto;}
.nav_trans {position:fixed; z-index:80; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); display:none;}
.nav_active .nav_trans {display:block;}

/* main */
h1, h2, h3, h4, .headline2 { font-family: "Poppins", sans-serif; font-weight: 600; font-style:normal; }
h1 { font-size: 5rem; line-height: 1.2; width:80%; }
h2 { font-size: 3rem; line-height: 1.2; margin:40px 0 40px -90px;}
h3 { font-size: 2rem; line-height: 1.2;margin:40px 0 40px -50px; }
h4 { font-size: 1.75rem; }
h5 { font-size: 1.5rem; line-height: 1.2; }

main {position:relative; z-index:2;  }
section {position:relative; }
img {max-width:100%; height:auto;}
p { text-indent: 3em; margin: 25px 0; text-align: justify; }
p.no_style { text-indent:0; margin:0; text-align: left; }
.no_style p { text-indent:0; text-align: left; }

.top_image {position:relative; opacity:1; height:auto; transition: all .5s ease, opacity 1s ease;}
.top_image.hide {height:120px; opacity:0;}
.top_image img {width:100%; height:auto;}

/* footer */
.scroll_top {position:fixed; z-index:90; bottom:50px; right:30px; padding-top:10px; opacity:0; }
.scroll_top:hover {bottom:60px; padding-top:0;}
.scroll_top.active {opacity:1; }
footer { background:#faf6f2; font-size: 1rem; line-height: 1.5;  }
footer .verbund {background:#faf6f2; padding:20px 0 60px; text-align:center;}
footer .verbund p {display:inline-block; margin-bottom:30px; text-indent:0;}
footer .verbund img {width:auto; height:90px; margin:0 50px;}
footer .legal {background:#000; padding:20px 0;}
footer .legal nav {float:left;}
footer .legal nav li {display:inline; margin-right:20px;}
footer .legal nav li a {color:#fff; text-transform:uppercase;}
footer .legal nav li a:hover, footer .legal nav li.active a {color:#21b5d6; }
footer .legal .copy {float:right; color:#fff; }

/* responsive */
@media (max-width: 1400px) { 
	h1 { font-size: 4.5rem; width:85%; }
	footer .verbund img {width:auto; height:80px; margin:0 40px;}
}
@media (max-width: 1200px) { 
	h1 { width:90%; }
	h2 { margin:18px 0 40px -60px; }
	h3 { margin:40px 0 40px -30px; }
	footer .verbund img {width:auto; height:60px; margin:0 30px;}
}
@media (max-width: 1100px) { 
	h2 { margin:18px 0 40px -30px;  }
	h3 { margin:40px 0 40px -20px; }
}
@media (max-width: 1024px) { 
	.nav_active .logo {color:#000;}
	.navigation { width:100%; }
	.navigation.active { left:0%;}
	h1 { font-size: 4rem; width:100%; }
	h2 { font-size: 2.5rem; margin:18px 0 40px -20px;}
	h3 { margin:40px 0 40px 0; }
}
@media (max-width: 960px) { 
	h1 { font-size: 3.5rem; }
	footer .verbund img {width:auto; height:50px; margin:0 25px;}
	footer .legal nav {float:none; margin-bottom:10px;}
	footer .legal .copy {float:none; color:#fff; }
}
@media (max-width: 800px) { 
	h1 { font-size: 3rem; }
	h2 { font-size: 2rem; }
	h4 { font-size: 1.5rem; }
	footer .verbund img {width:auto; height:40px; margin:0 20px;}
}
@media (max-width: 600px) {	
	header.header { height:60px; }
	.center {padding:0 20px;}
	.logo {line-height:80px; color:#fff; font-size: 1.3rem; font-weight:600; line-height:60px;}
	.navigation {padding-top:60px;}
	.menu {padding:10px 0 80px;}
	.hamburger { right:20px; top:8px;}
	.hamburger-box { width: 30px; }
	.hamburger-inner, .hamburger-inner::before { width: 30px; height: 3px;  }
	.menu a {padding:0 20px;}
	h1 { font-size: 2.5rem; }
	h2 { margin:18px 0 40px 0;}
	footer .verbund img {margin:20px;}
	.scroll_top {position:fixed; z-index:90; bottom:20px; right:10px; padding-top:10px; opacity:0;}
	.scroll_top:hover {bottom:30px; padding-top:0;}
}
@media (max-width: 400px) {	
	h1 { font-size: 2rem; }
}

/* print */
@media print {
	body {font-size:0.9em;}
	header, footer {display:none;}
	.print_button {display:none !important;}
	.print {visibility:visible;}
    *, *:before, *:after, *:first-letter, *:first-line { background: #fff !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
    a,a:visited { text-decoration: underline;}
    a[href]:after {content: " (" attr(href) ")"; }
    abbr[title]:after {content: " (" attr(title) ")";}
	a[href^="#"]:after, a[href^="javascript:"]:after {  content: ""; }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group;}
    tr,img {page-break-inside: avoid;}
    img {max-width: 100% !important; }
    p,h2,h3 {orphans: 3;widows: 3;}
    h2, h3 {page-break-after: avoid;}
}

/* AB HIER PAGE CSS */
/* home */
.headline {position:absolute; top:300px; color:#fff; width:100%; }
.viel_text {top:200px;}
.center_index {max-width:980px; margin:0 auto; position:relative; padding:0 40px;}
.intro {background:#faf6f2; padding:80px 0 50px;}
.scroll_next {position:absolute; bottom:40px; left:40px; padding-top:0; }
.scroll_next:hover {position:absolute; bottom:30px; padding-top:10px;}
#alle_texte {padding:80px 0 120px;}
.liste {position:relative; padding-top:20px;}
.index h3 {position:absolute; top:0; left:-250px; font-size:1.25rem; text-transform:uppercase; letter-spacing:5px; margin:28px 0 0 0;}
.liste ul li {margin-bottom:15px;}
.liste a {font-size:1.5rem; font-weight:600; color:#111; text-decoration:underline;}
.liste a:hover {color:#21b5d6;}
.liste a .author {font-size:1.25rem; font-weight:400;}

/* essay */
.headline2 { font-size: 5rem; line-height: 1.2; width:90%; }
.viel_text .headline2 {width:100%;}
.headline2 .maintitle {display:block;}
.headline2 .subtitle {font-size:75%;}
article {padding:80px 0 120px;}
.article_headline {margin-bottom:60px; display:none;}
.article_headline h2 {margin:18px 0 40px 0px; }
.author_content {float:left; width:350px; margin-top:25px; position: sticky; z-index:10; top: 25px;}
p.date {margin-top:10px;}
.content {position:relative; margin-left:450px; max-width:850px;}
.text p {counter-increment: absatz_nr; position:relative;}
.text p:before {content: counter(absatz_nr); color: #fff; background:#e5e4e4; position:relative; top:0; left:100%;  margin-left:-40px; text-align:left; padding:0px 8px 2px; display: inline;}
.inhalt, .abstract {  float:left; width:330px; margin-top:25px;}
.author_content button {background:#21b5d6; color:#fff; padding:5px 80px 5px 10px; position:relative; font-weight:600; border-radius:3px;}
.author_content button:hover {background:#cc0000;}
.author_content button:after {content:'+'; position:absolute; right:10px; font-weight:700;}
.author_content button.active:after {content:'–'; }
#clipliste, #abstract {background:#faf6f2; border-radius:3px; padding:10px; border:1px solid #eee; display:none; font-size:1.125rem;}
#clipliste ul li a {color:#111; text-decoration:underline; line-height: 1.4; margin:8px 0 6px; display: inline-block;}
#clipliste ul li a:hover {color:#21b5d6;}
#clipliste ul li a.inhalt-level2 {font-style:italic; font-size:1.125rem; margin:2px 0 4px;}
.content figure {position:relative; left:-100px; margin:50px 0; max-width:640px;}
.content figure video {width:100%; height:auto;}
.content figure figcaption {font-size:1.15rem; padding:5px 0 0 50px;}
aside {margin-top:100px;}
aside h4 {position:relative; font-style: italic; margin:0 0 50px -50px; line-height:1.2;}
aside h4:before {content:''; position:absolute; bottom:-20px; left:-50px; width:100px; height:2px; background:#000;}
aside .footnote3 p { text-indent:0; margin:0; text-align: left; }
aside .footnote {position:relative;}
aside .footnote2 {position:absolute; top:0; left:-50px;}
aside .footnote2 a {position:absolute; border:1px solid #cc0000; border-radius:50%; width:30px; height:30px; text-align:center; line-height:25px;}
aside .footnote2 a:hover {border:1px solid #21b5d6;}
.bibliography li {margin-bottom:10px;}
#autor_in {margin-top:100px;}
#zitation {margin-top:100px;}
a.home_link {background:#21b5d6; color:#fff; padding:5px 20px; position:relative; font-weight:600; border-radius:3px; margin-top:40px; display:inline-block;}
a.home_link:hover {background:#cc0000;}
.epigraph {font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; padding-left:150px; text-indent:0;}
.text .epigraph:before { position:absolute; margin-left:16px; font-family: 'SourceSansPro', Arial, Helvetica, sans-serif; font-size: 1.25rem; line-height: 1.5;}
.text picture { position:relative; left:-100px; margin:20px 0; display:inline-block;}

/* responsive */
@media (max-width: 1500px) { 
	.headline {top:230px;}
	.viel_text {top:150px;}
}
@media (max-width: 1450px) {
	.headline2 { font-size: 4.5rem;  }
	.index h3 {left:-220px; }
}
@media (max-width: 1400px) {		
	.index h3 {position:relative; top:0; left:0; margin-bottom:20px;}
	.text p:before {margin-left:-50px;padding:0px 5px 2px; }
	.text .epigraph:before {  margin-left:5px; }
}
@media (max-width: 1350px) {
	.headline {top:220px;}
	.viel_text {top:100px;}
	.headline2 { width:100%; }
	.text p:before {margin-left:-55px;}
	.author_content, .inhalt {width:300px; }
	.content {margin-left:400px; }
}
@media (max-width: 1300px) { 
	.responsive-video {width:640px; max-width:640px; height:480px; padding-bottom:0;}
}
@media (max-width: 1200px) {
	.headline {top:200px;}
	.viel_text {top:80px;}
	.headline2 { font-size: 4rem; width:100%; }
	.author_content {float:none; width:auto; position:relative; top:0; margin-top:0;}	
	.inhalt, .abstract {margin:30px 0; float:none; width:auto; position:relative;}
	.content {position:relative; margin:0 auto; max-width:850px; padding-top:30px;}
	.content figure {left:-50px; }
	.text picture {left:-50px; }
	aside h4 {margin:0 0 50px 0; }
}
@media (max-width: 1100px) { 
	.headline2 { font-size: 3.5rem; }
}
@media (max-width: 1024px) { 
	.headline {top:150px;}
	.content figure {left:0; }
	.text picture {left:0; }
	.article_headline {display:block;}
	.essay .top_image .headline {display:none;}
	aside h4:before {left:-20px; }
}
@media (max-width: 960px) {
	aside h3:before {left:0;}
	aside .footnote2 {left:0;}
	aside .footnote3 {padding-left:50px;}
	.text p:before {padding:0px 0px 2px;}
}
@media (max-width: 800px) { 
	.headline {top:100px;}
	.responsive-video {width:100%; max-width:100%; padding-bottom: 75%;}
}
@media (max-width: 720px) { 
	aside p { overflow: hidden; text-overflow: ellipsis; }	
}
@media (max-width: 600px) { 
	.center_index {padding:0 20px;}
	.headline {top:70px;}
	.headline h1 {font-size: 1.75rem; }
	article {padding:40px 0 120px;}
	.intro {padding:40px 0 50px;}
	.scroll_next {display:none; }
	.text p:before { margin-left:-60px;}
	.content figure figcaption {font-size:1rem; padding:5px 0 0 25px;}
	aside h4:before {left:0; }
	.epigraph { padding-left:80px; }
}
@media (max-width: 400px) { 
	.headline2 { font-size: 2rem; }
	.epigraph { padding-left:20px; }
}