/* IconScreen 8.2021; 4.2021; 3.2021; 5.2019; Matthias Ring */
/* COLORS */
/* white: #ffffff black: #000000 Persian Blue: #0033cc Fuchsia: #cc33cc */

/* CORE */
*, *::before, *::after, figure, video { margin: 0; padding: 0; border: 0; box-sizing: border-box; } article, aside, details, figure, video, footer, header, hgroup, main, nav, section, summary, subhead, div { display: block; margin: 0; padding: 0; } img { max-width: 100%; height: auto; display: block; }

@font-face { font-family: 'Inter'; src: url("/v5/assets/fonts/Inter-Light.woff2") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }

@font-face { font-family: 'Inter'; src: url("/v5/assets/fonts/Inter-SemiBold.woff2") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: 'Inter'; src: url("/v5/assets/fonts/Inter-ExtraBold.woff2") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }

/* body fade in */
@keyframes jqmBackgroundOpacity { from { opacity: 0; } to { opacity: 0.97; } }

body { color: #000000; animation-name: jqmBackgroundOpacity; animation-duration: 2s;
background-position: center top; background-repeat: no-repeat; background-size: cover; }

/* background image queries */
@media (max-width: 425px) { body { background-image: url(../images/bg.png); } }
@media (min-width: 426px) and (max-width: 768px) { body { background-image: url(../images/bg-tablet.png); } }
@media (min-width: 769px) { body { background-image: url(../images/bg.svg); } }

video { margin-bottom: 1em; }

/* center & left-right-space for small screens */
header, article, section, p, h1, h2, h3, figure, video, footer, #leaf, ul, ol, dl, .button-spacer, section.tags, form, blockquote { margin-right: auto; margin-left: auto; width: 100%; }

@media (max-width: 1024px), (orientation: portrait) { header, article, section, p, h1, h2, h3, figure, video, footer, #leaf, ul, ol, dl, .button-spacer, form, blockquote { width: 96%; } }

@media (max-width: 768px) { header, article, section, p, h1, h2, h3, figure, video, footer, #leaf, ul, ol, dl, .button-spacer, form, blockquote { width: 93%; } }

.highlight { margin-right: auto; margin-left: auto; max-width: 768px; padding: 20px; margin-bottom: 20px; background: repeating-linear-gradient( 45deg, #f6f6f6, #f6f6f6 10px, #f7fdfe 10px, #f7fdfe 20px ); }

blockquote { margin-right: auto; margin-left: auto; max-width: 768px; padding: 20px; margin-bottom: 20px; font-size: 0.875em; line-height: 1.6; padding-top: 0.65em; color: grey; }

/* margins */
main { margin-top: 18em; margin-bottom: 10em; }
#leaf { margin-top: 7em; margin-bottom: 8.5em; }

article p { margin-bottom: 2em; }
p:last-of-type, section, ol, figure.spacer, dl { margin-bottom: 3.875em; }

.section-spacer { margin-bottom: 10em; }
.no-spacer { margin-bottom: 1.5em; }

/* width */
div.overview, div.standard, div.medium, div.max, div.min { margin-right: auto; margin-left: auto; }
.standard, header, footer, #leaf, .button-spacer, h1 { max-width: 1024px; }
.max { width: 100% !important; }
.medium { max-width: 840px; }
.min, p, ul, h2, h3, form { max-width: 640px; }

/* Screenreader only */
.sr-only { border: 0; clip: rect(0, 0, 0, 0); clip-path: polygon(0px 0px, 0px 0px, 0px 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; }

/* fonts */
html { font-family: Inter, sans-serif; font-weight: 300; font-size: 1.1em; line-height: 1.7; }
@media (max-width: 768px) { html { font-size: 1em; } }

/* sizes */
strong, b, .button, th, .highlight { font-weight: 600; }
nav a  { font-weight: 600;  font-size: .75em; }
h1 { font-weight: 800; font-size: 2.5em; line-height: 1.3; padding-bottom: 0.75em; }
h2 { font-weight: 800; font-size: 1.75em; line-height: 1.3; padding: 1.75em 0 0.75em 0; }
h3 { font-weight: 800; font-size: 1em; line-height: 1.3; padding: 2.5em 0 0.75em 0; }
@media (max-width: 425px) { h1 { font-size: 1.75em !important; } h2 { font-size: 1.5em !important; } }

p.annotation { font-family: "Times New Roman", Palatino, serif; font-size: 0.8em; line-height: 1.4; padding-top: 0.65em; }

@media (max-width: 425px) { h1 { font-size: 2.4em; } h2 { font-size: 1.8em; } }

h1, h2 { text-align: center; }
h1, h2, h3, p, blockquote { hyphens: auto; }
.button { letter-spacing: 0.02em; text-align: center; }

figcaption { font-size: 0.75em; line-height: 1.4; padding: 12px 8px 8px 8px; text-align: center; }
section.hpfirst p { font-size: 1.1em; line-height: 1.4; padding: 12px 8px 8px 8px; text-align: center; }

@media (max-width: 425px) { figcaption { padding: 4px 0 4px 5px; } }

/* article figcaption { line-height: 3; } */
a:hover, p a, nav a.selected { border-bottom-width: 2px; border-bottom-style: solid; }
figure a:hover { border: 0 none !important; }
sup { font-size: 10px; }

/* HEADER & FOOTER */
header { z-index: 100; position: absolute; top: 0; left: 0; right: 0;
padding-top: 2.5em; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }

header nav { padding-bottom: 2.75em; }
nav a { text-transform: uppercase; margin-right: 2em; }
nav a:last-child {  margin-right: 0; }
svg#logo { width: 7.5em; height: 4.25em; }


/* FOOTER */
footer { padding-top: 1.15em; border-top-width: 2px; border-top-style: solid; }
footer address, footer address a { font-style: normal; border-bottom: none; }
footer { display: flex; flex-direction: row; justify-content: space-between; }
footer nav { align-self: flex-start; }

#leaf { text-align: center; }
#leaf .icon { padding-left: 4px; }

@media (max-width: 768px) {
footer { flex-direction: column; align-items: center; }
footer nav { align-self: center; margin-top: 1.75em; transition: all 0.7s ease-in-out; }
footer nav { display: none; } }

/* COLORS */
figcaption { color: #454545; }
a, header, footer, .logocolor, svg#logo .logocolor { text-decoration: none; color:#0033cc; border-color:#0033cc; fill:#0033cc; }
a:hover, a.selected, svg#logo:hover .logocolor, .button:hover, address { color: #000000; border-color: #000000; fill: #000000; }
h2 .icon, a:hover .icon {stroke: #000000; } a:active, a:active .icon { border-color: #cc33cc; color: #cc33cc; }
a .icon, .icon { stroke:#0033cc; }
a:active svg#logo .logocolor { fill: #cc33cc; }
dd:nth-child(4n+2), dd:nth-child(6n) { border-bottom-color: #636452; }
::selection { background: #cc33cc; color: #ffffff; }

/* IMAGES */
/* hero max-width: 1800px; */
.hero { width: 100% !important; margin-bottom: 4.75em; overflow: hidden; }
.hero img { width: 100%; height: auto; }

@media (max-width: 768px) { .hero img { max-width: 200%; width: auto; height: auto; margin-left: -15%; } }

/* inline article */
figure img { border-radius: 2px; }
figure.one, figure.two, figure.three, figure.four, figure.five { margin-bottom: 1em; margin-top: 5em; }
figure.one img, figure.two img, figure.three img, figure.four img, figure.five img { margin-bottom: 1.25em; }
h2.headlineoverfigure { margin-bottom: -2em; margin-top: 3em; }

figure.one img { float: none; width: 95%; margin: 0 auto; }

figure.two img { float: left; width: 49%; margin-right: 2%; }
figure.two img:nth-child(2n) { margin-right: 0 !important; }

figure.three img { float: left; width: 32%; margin-right: 2%; }
figure.three img:nth-child(3n) { margin-right: 0 !important; }

figure.four img { float: left; width: 24%; margin-right:1%; }
figure.four img:nth-child(4n) { margin-right: 0 !important; }

figure.five img { float: left; width: 19%; margin-right:1%; }
figure.five img:nth-child(5n) { margin-right: 0 !important; }


figure:after, figure figcaption:after { content: ""; display: table; clear: both; }

figure.one img, figure.two img, figure.three img { padding-bottom: 12px; }

@media (max-width: 768px) { figure.one img, figure.two img, figure.three img { float: none; width: 100% !important; } }

/* img hover */
a img.trans { transition: all .5s cubic-bezier(.4, .2, .2, 1); transform: translateY(0); filter: brightness(100%); }
a:hover img.trans { border-bottom-width: 0; transform: translateY(-3px); filter: brightness(110%); box-shadow: 0px 9px 27px -3px rgba(0,0,0,0.11); z-index: 1000; }

/* img zoom */
img.zoom { transition: all 0.7s ease-in; }
img.zoom:hover { transform: scale(1.1); z-index: 1000; }
img.superzoom { transition: all 0.7s ease-in-out; }
img.superzoom:hover { transform: scale(1.4); z-index: 1000; }

/* DIVS */
/* facts, collage, more */
h2#facts, h2#collage, h2#more, h2#related { padding-bottom: 1em; }
dl { column-count: 2; column-gap: 1em; }
dd { break-inside: avoid; page-break-inside: avoid; min-height: 4em; }
dt:before { content: "# "; }
dd { opacity: .6; }
dd:nth-child(4n+2), dd:nth-child(6n) { border-bottom-width: 1px; border-bottom-style: solid; padding-bottom: 1.5em; margin-bottom: 0.75em; }
dd a:hover { border: none; }

@media (max-width: 768px) {
dl { column-count: 1; }
dd { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #636452; padding-bottom: 1.5em; margin-bottom: 0.75em; }
dd:last-child { border-bottom: none; }
dd { min-height: 2em; } }

/* buttons */
.button-spacer { text-align: center; display: block; }
.button { margin-right: 8px; margin-bottom: 8px; user-select: none; transition: all .2s ease; border-width: 1px; border-style: solid; border-radius: 1em; letter-spacing: 1px; padding: 5px 11px 3px 11px; word-spacing: 1px; overflow: hidden; cursor: pointer; display: inline-block; }
.button:hover { transform: scale(1.03); border-width: 1px; }

/* icons */
.icon { width: 28px; height: 28px; stroke-width: 1px; fill: none; margin-bottom: 12px; margin-right: 4px; } #leaf .icon { margin-bottom: 0; margin-right: 0; }
a:hover .icon { transform: scale(1.05); }

/* table */
table { max-width: 740px; margin-right: auto; margin-left: auto; }
th { text-align: left; padding-right: 12px; }

/* search */
.input, .submit { display: inline-block; padding: 10px 15px; font-size: 15px; border-radius: 0; }
.input { border: 1px solid #0033cc; width: 80%; }
@media (max-width: 768px) { .input { width: 70%; } }
.submit { background-color: #0033cc; color: white; border: 1px solid transparent; }

/* LAYOUT COLLAGE */
/* IE grid fallback */
.collage a img:hover { cursor: zoom-in; } .collage > figure { float: left; width: 32%; margin-right: 2%; margin-bottom: 2%; } .collage > figure:nth-child(3n+0) { margin-right: 0 !important; } .collage > figcaption:before { content: ""; display: table; clear: both; }

@supports (display: grid) {

.collage > figure { float: none; width: 100%; height: auto; }
.collage { display: grid; grid-gap: 1.5vw; align-content: center;
 justify-content: center; }

/* LAYOUT   */
.layout figure:first-child { grid-area: 1 / 3 / 3 / 7; align-self: end; } .layout figure:nth-child(2) { grid-area: 1 / 7 / 3 / 12; } .layout figure:nth-child(3) { grid-area: 3 / 1 / 5 / 8; } .layout figure:nth-child(4) { grid-area: 3 / 8 / 4 / 11; } .layout figure:nth-child(5) { grid-area: 3 / 11 / 4 / 14; } .layout figure:nth-child(6) { grid-area: 4 / 8 / 5 / 11; } .layout figure:nth-child(7) { grid-area: 4 / 11 / 5 / 14; } .layout figure:nth-child(8) { grid-area: 5 / 1 / 6 / 5; align-self: end; } .layout figure:nth-child(9) { grid-area: 5 / 5 / 6 / 10; } .layout figure:nth-child(10) { grid-area: 5 / 11 / 6 / 14; } .layout figure:nth-child(11) { grid-area: 6 / 1 / 7 / 5; } .layout figure:nth-child(12) { grid-area: 6 / 5 / 7 / 9; } .layout figure:nth-child(13) { grid-area: 6 / 9 / 7 / 14; } .layout figure:nth-child(14) { grid-area: 7 / 1 / 8 / 5; } .layout figure:nth-child(15) { grid-area: 7 / 5 / 8 / 9; }

/* LAYOUT 1 */
.layout-1 figure:first-child { grid-area: 1 / 4 / 2 / 7; } .layout-1 figure:nth-child(2) { grid-area: 1 / 7 / 2 / 10; } .layout-1 figure:nth-child(3) { grid-area: 2 / 1 / 3 / 4; } .layout-1 figure:nth-child(4) { grid-area: 2 / 4 / 3 / 7 }
.layout-1 figure:nth-child(5) { grid-area: 2 / 7 / 3 / 10; } .layout-1 figure:nth-child(6) { grid-area: 3 / 2 / 4 / 5; } .layout-1 figure:nth-child(7) { grid-area: 3 / 5 / 4 / 7; } .layout-1 figure:nth-child(8) { grid-area: 3 / 7 / 4 / 10; }
.layout-1 figure:nth-child(9) { grid-area: 4 / 5 / 5 / 1; } .layout-1 figure:nth-child(10) { grid-area: 4 / 5 / 5 / 8; } .layout-1 figure:nth-child(11) { grid-area: 5 / 2 / 6 / 5; } .layout-1 figure:nth-child(12) { grid-area: 5 / 5 / 6 / 8; } .layout-1 figure:nth-child(13) { grid-area: 6 / 2 / 7 / 5; } .layout-1 figure:nth-child(14) { grid-area: 6 / 5 / 7 / 7; } .layout-1 figure:nth-child(15) { grid-area: 6 / 7 / 7 / 10; }

/* LAYOUT 2 */ .layout-2 figure:first-child { grid-area: 1 / 1 / 2 / 3; align-self: end; } .layout-2 figure:nth-child(2) { grid-area: 1 / 3 / 2 / 7;align-self: end; }
.layout-2 figure:nth-child(3) { grid-area: 1 / 7 / 2 / 10; align-self: end; } .layout-2 figure:nth-child(4) { grid-area: 2 / 1 / 3 / 5; } .layout-2 figure:nth-child(5) { grid-area: 2 / 5 / 3 / 9; } .layout-2 figure:nth-child(6) { grid-area: 3 / 1 / 4 / 4;align-self: end; } .layout-2 figure:nth-child(7) { grid-area: 3 / 4 / 4 / 7;align-self: end; } .layout-2 figure:nth-child(8) { grid-area: 3 / 7 / 4 / 9; } .layout-2 figure:nth-child(9) { grid-area: 3 / 9 / 4 / 11; } .layout-2 figure:nth-child(10) { grid-area: 4 / 1 / 5 / 3; } .layout-2 figure:nth-child(11) { grid-area: 4 / 3 / 5 / 5; } .layout-2 figure:nth-child(12) { grid-area: 4 / 5 / 5 / 7; } .layout-2 figure:nth-child(13) { grid-area: 5 / 1 / 6 / 3; } .layout-2 figure:nth-child(14) { grid-area: 5 / 3 / 6 / 7; } .layout-2 figure:nth-child(15) { grid-area: 5 / 7 / 6 / 10; }

/* LAYOUT 3 */
.layout-3 figure:first-child { grid-area: 1 / 2 / 2 / 4; } .layout-3 figure:nth-child(2) { grid-area: 1 / 4 / 2 / 7; } .layout-3 figure:nth-child(3) { grid-area: 2 / 1 / 3 / 3; } .layout-3 figure:nth-child(4) { grid-area: 2 / 3 / 3 / 5; } .layout-3 figure:nth-child(5) { grid-area: 2 / 5 / 3 / 7; } .layout-3 figure:nth-child(6) { grid-area: 2 / 7 / 3 / 9; align-self: end; } .layout-3 figure:nth-child(7) { grid-area: 3 / 1 / 4 / 5; } .layout-3 figure:nth-child(8) { grid-area: 3 / 5 / 4 / 7; } .layout-3 figure:nth-child(9) { grid-area: 3 / 7 / 4 / 9; } .layout-3 figure:nth-child(10) { grid-area: 4 / 1 / 5 / 3; } .layout-3 figure:nth-child(11) { grid-area: 4 / 3 / 5 / 5; } .layout-3 figure:nth-child(12) { grid-area: 4 / 5 / 5 / 7; } .layout-3 figure:nth-child(13) { grid-area: 4 / 7 / 5 / 9; align-self: end; } .layout-3 figure:nth-child(14) { grid-area: 5 / 2 / 6 / 6; } .layout-3 figure:nth-child(15) { grid-area: 5 / 6 / 6 / 9; }

/* LAYOUT 4 */ .layout-4 figure:first-child { grid-area: 1 / 2 / 2 / 4;align-self: end; } .layout-4 figure:nth-child(2) { grid-area: 1 / 4 / 2 / 6;align-self: end; } .layout-4 figure:nth-child(3) { grid-area: 1 / 6 / 2 / 8;align-self: end; } .layout-4 figure:nth-child(4) { grid-area: 2 / 1 / 3 / 3; } .layout-4 figure:nth-child(5) { grid-area: 2 / 3 / 3 / 6;align-self: end; } .layout-4 figure:nth-child(6) { grid-area: 2 / 6 / 3 / 8;align-self: end; } .layout-4 figure:nth-child(7) { grid-area: 3 / 2 / 4 / 4;align-self: end; } .layout-4 figure:nth-child(8) { grid-area: 3 / 4 / 4 / 6;align-self: end; } .layout-4 figure:nth-child(9) { grid-area: 3 / 6 / 4 / 8; } .layout-4 figure:nth-child(10) { grid-area: 4 / 2 / 5 / 4; } .layout-4 figure:nth-child(11) { grid-area: 4 / 4 / 5 / 7; } .layout-4 figure:nth-child(12) { grid-area: 4 / 7 / 5 / 9; } .layout-4 figure:nth-child(13) { grid-area: 5 / 1 / 6 / 3; } .layout-4 figure:nth-child(14) { grid-area: 5 / 3 / 6 / 5; } .layout-4 figure:nth-child(15) { grid-area: 5 / 5 / 6 / 7; }

/* LAYOUT 5 */ .layout-5 figure:first-child { grid-area: 1 / 2 / 2 / 4;align-self: end; } .layout-5 figure:nth-child(2) { grid-area: 1 / 4 / 2 / 7;align-self: end; } .layout-5 figure:nth-child(3) { grid-area: 2 / 1 / 3 / 4; } .layout-5 figure:nth-child(4) { grid-area: 2 / 4 / 3 / 6;align-self: end; } .layout-5 figure:nth-child(5) { grid-area: 2 / 6 / 3 / 8;align-self: end; } .layout-5 figure:nth-child(6) { grid-area: 3 / 2 / 4 / 6; } .layout-5 figure:nth-child(7) { grid-area: 3 / 6 / 4 / 8; } .layout-5 figure:nth-child(8) { grid-area: 4 / 1 / 5 / 3; } .layout-5 figure:nth-child(9) { grid-area: 4 / 3 / 5 / 6;align-self: end; } .layout-5 figure:nth-child(10) { grid-area: 4 / 6 / 5 / 8;align-self: end; } .layout-5 figure:nth-child(11) { grid-area: 5 / 1 / 6 / 3;align-self: end; } .layout-5 figure:nth-child(12) { grid-area: 5 / 3 / 6 / 5;align-self: end; } .layout-5 figure:nth-child(13) { grid-area: 5 / 5 / 6 / 8; } .layout-5 figure:nth-child(14) { grid-area: 6 / 2 / 7 / 4; } .layout-5 figure:nth-child(15) { grid-area: 6 / 4 / 7 / 6; }

/* LAYOUT 6 */
.layout-6 > figure { float: left; width: 32% !important; margin-right: 2% !important; margin-bottom: 2% !important; } .layout-6 > figure:nth-child(3n+0) { margin-right: 0 !important; } .layout-6 > figcaption:before { content: ""; display: table; clear: both; } } /* END supports */

@supports (display: grid) {
.layout-6 > figure {width: 32% !important; margin-right: 2% !important; margin-bottom: 2% !important; }
.layout-6 { display: inherit !important; } } /* END supports */

br.clear { content: ""; display: table; clear: both; }

/* LAYOUT OVERVIEW */
/* IE grid fallback */
.overview > a { float: left; width: 32%; margin-right: 2%; margin-bottom: 2%; } .overview > a:nth-child(3n+0) { margin-right: 0 !important ; } .overview > figcaption:before { content: ""; display: table; clear: both; }

@supports (display: grid) {
.overview > a { width: 100%; height: auto; margin: 0 0 8% 0; } .overview { display: grid; gap: 1.5em; align-items: end; grid-template-columns: 1fr 1fr 1fr; } .overview a:nth-child(1) { width: 80%; justify-self: right; } .hpfirst figure:nth-child(1) { width: 100%; } .overview a:nth-child(3n+4) { align-self: start; } .overview a:nth-child(4n+5) { width: 80%; justify-self: center; } .overview a:nth-child(4n+4) { width: 80%; justify-self: right; } .overview a:nth-child(n+7) { align-self: start; } } /* END supports */

@media (max-width: 768px) { .overview { grid-template-columns: 1fr 1fr; } }

/* lists overview */
ol.longlist { padding-left: 12%; }
ol.shortlist { padding-left: 35%; }
@media (max-width:425px) { ol.longlist, ol.shortlist { padding-left: 2.5em; } }

.nobullet { list-style-type: none; }

@media print {
html { font-size: 0.875em; line-height: 1.5; }
.standard, header, footer, #leaf, .button-spacer, h1, .max, .medium, .min, p, ul, h2, h3, img { width: 85%; }
body { background-color: #fff; background-image: none; }
header nav, footer nav, #leaf, .noprint { display: none; }
header { flex-direction: column; align-items: center; padding-left: 0; border-bottom: none; }
footer { flex-direction: column; align-items: center; padding-left: 0; max-width: 500px; }
main { margin-top: 10em; margin-bottom: 1em; }
h2.headlineoverfigure { margin-bottom: -2em; margin-top: 1.5em; }
dl { column-count: 1; }
dd { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #636452; padding-bottom: 1.5em; margin-bottom: 0.75em; }
dd:last-child { border-bottom: none; } dd { min-height: 2em; } }