/* Stylesheet for GeheimRat.com (modified template Selfhtml.org Design 01, responsive Layout with Flexbox  */
/* ====================================================  GLOBAL DEFINITION  ==================================================== */

/* alternatives Boxmodell */
*, ::before, ::after { box-sizing: border-box; }

body { background-color: #ffffff; color: #181818; font: normal 1.4em; font-family: Helvetica, Arial, Geneva, sans-serif; line-height: 1.5em; margin: 0 auto; max-width: 63em; padding: 0 1em; }
p, ol, ul, dl { background-color: transparent; color: #323232; }

/* ====================================================  HEADER  ==================================================== */

header { background-color: #ffffff; color: #323232; margin: 0; padding: .2em; }
header h2 a { background: url('../img/logo.png') no-repeat; background-position: left; background-size: auto 84%; border: 1px solid transparent; height: 2em; padding: 0.25em 0.1em 0.6em 2.6em; text-decoration: none; }
header h2 { font-size: 1.8em; }
header p { display: flex; font-size: 1.3em; font-weight: bold; text-shadow: 1px 4px 4px Gray; }
header p a { flex: 1 0 auto; text-decoration: none; }
header a.search { background: url('../img/Icon_lupe.svg') calc(98% - .5em) center / auto 84% no-repeat; float: right; }
header a.search:hover, header a.search:focus { background-color: transparent; color: grey; }
header span { font-size: 0.9em; font-weight: 600; }
.akzentfarbe1 { background-color: transparent; color: MidnightBlue; }

/* ====================================================  NAV  ==================================================== */

nav ul { list-style: none; padding: 0; text-align: center; }
nav li { border: 1px solid gray; border-radius: 0.4em; flex: 0 0 3.6em; margin: 0 .1em; padding: 0; position:relative; }
nav li:first-of-type { flex: 0 0 5em; padding: 0; }
#home a { background: url('../img/Icon_home.svg') center/auto 70% no-repeat; }
#home a[aria-current=page] { background-image: url(../img/Icon_homeS.svg); }
#language { background: url('../img/Icon_globe.svg') calc(50% + 0.1em) 0.3em/auto 70% no-repeat; height: 100%; }
nav li:last-of-type { flex: 0 0 5em; padding: .1em; }
nav a { background-color: transparent; box-sizing:border-box; color: black; display: inline-block; height:100%; padding: .4em .4em; text-decoration: none; vertical-align:baseline; width:100%; }
nav a[aria-current="page"] { background-color: transparent; color: Gray; font-weight: bold; }
nav a:hover, nav a:focus { background-color: Silver; color: #181818; }
nav a:hover::after, nav a:focus::after { background-color: transparent; color: #181818; }
nav details { height: 100%; }
nav summary { line-height: 2em; outline: 2.8px solid transparent; padding: 0 0 0 0.5em; text-align: left; } 
nav div { background-color: #ffffff; color: #181818; outline:none; position:absolute; }
.visually-hidden { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

/* ====================================================  CONTENT  ==================================================== */

h1, h2, h3 { background-color: transparent; color: #323232; }
hr { width: 100%; height: 1px; margin-top: -1em; margin-bottom: 2em; }
a { background-color: transparent; color: currentColor; font-weight: 600; }
a:hover, a:focus { background-color:silver; color: #888; }
a.more { float: right; }
a.more::before { content: url('../img/Icon_plus.svg'); margin-right: .5em; }
a.more:hover, a.more:focus { background-color: transparent; color: black; }
a.more:hover::before, a.more:focus::before { background-color: transparent; color: white; }
h3.img { padding-left: 2.5em; }
.img.coffee { background: url('../img/Icon_coffee.svg') left no-repeat; background-size: 1.2em; }
.img.context { background: url('../img/Icon_context.svg') left no-repeat; background-size: 1.2em; }
.img.download { background: url('../img/Icon_download.svg') left no-repeat; background-size: 1.2em; }
.img.environment { background: url('../img/Icon_environment.svg') left no-repeat; background-size: 1.2em; }
.img.key { background: url('../img/Icon_key.svg') left no-repeat; background-size: 1.2em; }
.img.money { background: url('../img/Icon_money.svg') left no-repeat; background-size: 1.2em; } 
.img.people { background: url('../img/Icon_people.svg') left no-repeat; background-size: 1.2em; }
.img.puzzle { background: url('../img/Icon_puzzle.svg') left no-repeat; background-size: 1.2em; }
.img.quote { background: url('../img/Icon_quote.svg') left no-repeat; background-size: 1.2em; }
.img.redirection { background: url('../img/Icon_redirection.svg') left no-repeat; background-size: 1.2em; }  
.img.thumbUp { background: url('../img/Icon_thumbUp.svg') left no-repeat; background-size: 1.2em; }
.img.thumbDown { background: url('../img/Icon_thumbDown.svg') left no-repeat; background-size: 1.2em; }
.img.tools { background: url('../img/Icon_tools.svg') left no-repeat; background-size: 1.2em; }
.img.uptrend { background: url('../img/Icon_uptrend.svg') left no-repeat; background-size: 1.2em; }
.img.weather { background: url('../img/Icon_weather.svg') left no-repeat; background-size: 1.2em; }
img, a img { border: 0 none; }
article > h1 { font-size: 1.8em; font-weight: bold; line-height: 1.2em; }
article > h2 { background-color: transparent; color: #323232; clear: both; font-size: 1.65em; font-weight: 700; padding-top: 1.5em; }
article > h2 + p > img { float: left; margin: .15em 1.5em 1.5em 0; width: 33%; }
article > h2:nth-of-type(odd) + p > img { float: right; margin: .15em 0 1.5em 1.5em; }
article > h2 + p > video { float: left; margin: .15em 1.5em 1.5em 0; width: 33%; }
article > h2:nth-of-type(odd) + p > video { float: right; margin: .15em 0 1.5em 1.5em; }
article > p { font-size: 1.05em; letter-spacing: 0.03em; }
article > p > img { border-radius: 0.8em; float: left; margin: .15em 1.5em 1.5em 0; width: 66%; }
article > h3 { color: #323232; font-size: 1.6em; font-weight: 600; line-height: 1.2em; }
article > h3 + p > img { float: left; margin: .15em 1.5em 2.5em 0; width: 100%; }
article > h4 { background-color: transparent; color: #323232; font-size: 1.55em; font-weight: 700; line-height: 1.2em; }
article > h4 > img { float: left; margin: .15em 1.5em 1.5em 0; width: 60%; }
article > h5 { background-color: transparent; color: #323232; font-size: 1.5em; font-weight: 800; line-height: 1.2em; }
article > h6 { background-color: transparent; color: #323232; font-size: 1.45em; font-weight: 700; line-height: 1.2em; }
.one { text-shadow: 1px 1px 3px; }
.two { text-shadow: 1px 1px 3px #990033; }
.three { text-shadow: 5px 2px 24px; }
.four { text-shadow: 0 0 10px #ffffff, 0 0 20px #999999, 0 0 30px #CCCCCC, 0 0 40px #999999, 0 0 50px #CCCCCC, 0 0 60px #999999, 0 0 70px #CCCCCC, 0 0 80px #999999; }
.five { text-shadow: 0 0 6px #ffffff, 0 0 12px #336666, 0 0 18px #336666, 0 0 24px #336666, 0 0 36px #336666, 0 0 42px #336666, 0 0 48px #336666; }
.six { text-shadow: 0 0 6px #ffffff, 0 0 12px #336666, 0 0 18px #336666, 0 0 24px #336666, 0 0 36px #336666, 0 0 42px #336666, 0 0 48px #336666; }
dl { display: grid; grid-template-columns: 1fr 2fr; grid-gap: 1em 2em; margin-bottom: 3em; }
dl > * { margin: 0; padding: 0; }
dt { font-weight: bold; }
dt::after { content: ":"; }
.news { background: no-repeat top .5em right .5em #CCCCCC; border-radius: 0.8em; color: #323232; padding: 1em 1em 1em; }
.news h4 { background-color: transparent; color: #666; }
.news.A4 { padding: 0 .6em; }
.news.A4 > img { width: 100%; }
.news.B4 { padding: 0 .6em; }
.news.B4 > img { width: 100%; }
.news.C4 { padding: 0 .6em; }
.news.C4 > img { width: 100%; }
.news.archive { background-image: url('../img/Icon_archive.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.bug { background-image: url('../img/Icon_bug.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.cc { background-image: url('../img/Icon_cc.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.chart { background-image: url('../img/Icon_chart.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.distinction { background-image: url('../img/Icon_distinction.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.email { background-image: url('../img/Icon_email.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.index { background-image: url('../img/Icon_index.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.indexing { background-image: url('../img/Icon_indexing.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.link { background-image: url('../img/Icon_link.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.linking { background-image: url('../img/Icon_linking.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.lernen { background-image: url('../img/Icon_lernen.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.lesen { background-image: url('../img/Icon_lesen.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.measuring { background-image: url('../img/Icon_	measuring.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.ratio { background-image: url('../img/Icon_ratio.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.upload { background-image: url('../img/Icon_upload.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
.news.valuecycle { background-image: url('../img/Icon_valuecycle.svg'); background-size: 1.8em; margin-top: 1.2em; padding: .1em 0 .4em .8em; }
aside ul, .news ul { background-color: transparent; color: #FF3300; list-style-position: inside; margin: 2em 0; padding: 0; }
aside li, .news li { font-weight: 500; padding: .5em 0; }
.news li span { background-color: transparent; color: #474747; }
table { border-spacing:30px 40px; }
td { border-spacing:50px 10px; color: #990033; font-size: 2.0em; font-weight: 800; }
audio { display: flex; margin: 0 auto; width: 100%; }
video { display: flex; margin: 0 auto; width: 100%; }

/* ====================================================  FOOTER  ==================================================== */

footer { background-color: transparent; color: #989898; margin: 2em 0; }
footer ul { text-align: center;} 
footer p { margin-top: 1.2em; padding-top: 0; text-align: center; }
footer ul { font-size: 0.9em; margin-left: 0; padding-left: 0; }
footer li { border-left: .1em solid #989898; display: inline; list-style-type: none; }
footer li:last-child { border-right: .1em solid #989898; }
footer a { background-color: transparent; color: #999999; }
footer a:hover, footer a:focus { background-color: transparent; color: #333; }
footer li a { padding: 0 .7em 0 .8em; }

/* ====================================================  LAYOUT  ==================================================== */

/* Mobile first ! alle Blöcke haben 100%, Navigation untereinander*/
header { background: url('../img/headerS.png') no-repeat right bottom; background-size: 80% auto; }
main { margin: 2em 0; padding: 1em 0; }
nav li { margin: .3em 0; }
nav details { padding-left: 40% }
nav div { right: 50%; transform: translate(50%,0); }
.news h3 { padding-top: 1em; }
.news h4 { padding-top: 1.2em; }
section { clear: both; margin-top: 1em; }


/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 25em) { header { height: 10em; } }

/* 2-Spaltenlayout mit breiterem aside, Navigation horizontal */
@media screen and (min-width: 45em) { 
header { background: url('../img/header.svg') no-repeat right bottom; background-size: contain; }
article { flex: 0 0 98%; margin: 1%; }
nav ul { background-color: #ffffff; color: #181818; display: flex; flex-direction: row; }
nav li { flex: 1 1 2em; margin: 0 0.3em; }
nav details { padding-left: 1% }
nav div { right: 0; transform: none; width: 12em; }
.news h3 { padding-top: 0em; }
/* Main wird zum Flex-Container */
main { display: flex; flex-flow: row wrap; }
main > * { flex: 1 100%; /* Alle Kindelemente werden über die volle Breite dargestellt */ }
section { flex: 1 48%;  /* Diese Elemente erhalten eine halbe Breite */ margin: 1%; }}
video { width: 70%; }

/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 58em) {
section, aside { flex: 2 1 16%;  /* Diese Elemente erhalten eine Breite von 1/3.  */ margin: 1%; }
/*   article p, */
article li, article blockquote { max-width: 40em; }
#about, #coffee, #context, #puzzle { background-color: #ffffff; border: 1px solid darkred; color: #181818; flex: 1 30%; height: 22em; margin: 1%; padding: 1em; }
#exhibition { flex: 1 98%; margin: 1%; }
#impressum { flex: 1 60%; margin: 1%; }
aside p { margin-bottom: 3em; }
aside p:last-child { margin-bottom: 1.2em; }
div { width:12em; }
}