@charset "UTF-8";
/* CSS Document */

:root{
--textfarbe: rgba(90,90,90,.8);
--textfarbe_dunkel: rgba(90,90,90,.9);
--bildtitel: rgba(90,90,90,.80);
--hover: rgba(205,93,42,.6);
}

html {
//font-size: 22px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}


/* Typografie */

ueberschrift {
font-family: "Open sans", sans-serif;
color: var(--textfarbe);
font-size: .75em;
letter-spacing: 0.17em;
font-weight: 600;
}

lauftext {
font-family: "Open sans", sans-serif;
color: var(--textfarbe);
font-size: .78rem;
line-height: 1.4rem;
letter-spacing: 0.04rem;
font-weight: 400;
}

figure {
display: flex;
flex-flow: column;
}

bu_titel {
font-family: "Open sans", sans-serif;
color: var(--textfarbe);
text-decoration: none;
font-size: 0.7rem;
letter-spacing: 0.08rem;
font-weight: 600;
margin-top: .4rem;
margin-bottom: 1.4rem;
text-align: center;
}

.bu_block {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
//background-color: aliceblue;
}

bu_titel_ansicht {
font-family: "Open sans", sans-serif;
color: var(--bildtitel);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06rem;
margin-top: 18px;
text-decoration: none;
text-align: center;

}

bu_titel_technik_jahr {
display: block;
font-family: "Open sans", sans-serif;
text-decoration: none;
color: var(--bildtitel);
font-size: .75rem;
font-weight: 300;
letter-spacing: 0.03rem;
margin-top: 3px;
line-height: 1.5rem;
text-align: center;
}

zurück_weiter {
display: block;
font-family: "Open sans", sans-serif;
text-decoration: none;
color: rgba(205,93,42,.9);
font-size: .75rem;
letter-spacing: 0.08rem;
font-weight: 300;
margin-top: 15px;
margin-bottom: 2rem;
text-align: center;
}

t {
color: darkslategrey;
}

zurück_weiter a {
color: rgba(205,93,42,.9);
text-decoration: none;
}

zurück_weiter a:hover {
color: var(--hover);
text-decoration: none;
}


/* Typografie Ende */


header {
position: fixed;
top:0;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 2.8rem;
background-color: rgba(240,249,255,.95);
}

.name {
margin-top: 0.2rem;
margin-left: 1.4rem;
width: 11.7rem;
opacity: .7;
}

nav {
position: absolute;
text-align: left;
top: 0.1rem;
right: -12rem;
background:rgba(247,255,255,.95);
box-shadow: -0.6rem 0.6rem 1rem 0px rgba(0,100,300,0.30);
border-top-left-radius: 0.6rem;
border-bottom-left-radius: 0.6rem;
transition: 400ms ease-in-out;
z-malerei: 10;
}

.nav-toggle:checked ~ nav{
right: 0px;
}

.nav-toggle:checked ~ #overlay{
/*background: red;*/
height: 100%;
width: 100%;
position: fixed;
top:0;
left:0;
z-malerei: 9;
}

nav ul {
margin-top: 2.4rem;
padding: 0px;
list-style: none;
}

nav li{
margin-bottom: 1.3rem;
margin-right: 0.05rem;
font-family: "Open sans", sans-serif; text-decoration: none;
font-size: .9rem;
font-weight: 400;
letter-spacing: 0.1rem;
}

nav a {
color: var(--textfarbe);
padding: 1.2rem;
text-decoration: none;
height: 100%;
}

nav a:hover {
color: var(--hover);
background-color:#D4F3FF;
}

.nav-toggle {
display: none;
}

.nav-toggle-label {
position: absolute;
top: 0.8rem;
right: 0px;
width: 1.6rem;
margin-right: 1.45rem;
}

.x-box {
display: flex;
justify-content: flex-index;
width: 1.5rem;
height: 1.5rem;
background:rgba(247,255,255);
}


/* ----------- Bildtafeln -----------*/

img{
width: 100%;
aspect-ration: 1/1;
border-radius: 0px;
}

section{
display: flex;
justify-content: center;
//background-color: beige;
}

.bildtafeln{
width: 60%;
height: 2rem;
margin-top: 5.3rem;
display: flex;
flex-wrap: wrap;
text-decoration: none;
background-color: white;
}



.der_kuss {
width: 100%;
}

.gesternmorgen {
width: 100%;
}

.madame_o {
width: 100%;
}

.amerikanischer_dampf {
width: 100%;
}

.friedrichs_blumen {
width: 100%;
}

.strandpartie {
width: 100%;
}

.das_schwarze_schaf {
width: 100%;
}

.friedenskirche {
width: 100%;
}

.luise {
width: 100%;
}

.regierungsviertel {
width: 100%;
}

.blauer_sturm {
width: 100%;
}

.n-angst {
width: 100%;
}

.feuergrund {
width: 100%;
}

.deutscher_hirsch {
width: 100%;
}

.am_hafen {
width: 100%;
}

.der_farbyeti {
width: 100%;
}

.trommelbild {
width: 100%;
}

.giganten {
width: 100%;
}

.element_erde {
width: 100%;
}

.element_feuer {
width: 100%;
}

.element_wasser {
width: 100%;
}

.element_luft {
width: 100%;
}

.der_lindenbaum {
width: 100%;
}

/*--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------*/


@media (min-width: 1200px){

ueberschrift {
font-family: "Open sans", sans-serif;
color: var(--textfarbe);
font-size: 1rem;
letter-spacing: 0.14rem;
font-weight: 500;
}

lauftext {
font-family: "Open sans", sans-serif;
color: var(--textfarbe);
font-size: .9rem;
line-height: 1.7rem;
letter-spacing: 0.07rem;
font-weight: 300;
}

header {
position: fixed;
top:0;
display: flex;
justify-content: center;
align-content: center;
width: 100%;
height: 5rem;
background-color: rgba(255,255,255);
background-color: white;
}

.name {
width: 16rem;
}

nav {
position: fixed;
display: flex;
justify-content: center;
width: 100%;
height: 2.7rem;
top: 5rem;
right: 0px;
background-color: rgba(255,255,255);
//background-color: aqua;
box-shadow: -7px 7px 18px 0px rgba(0,100,300,0.0);
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
z-malerei: 10;
}

nav ul {
display: flex;
flex-direction: row;
margin-top: 0px;
list-style: none;
}

nav li{
font-family: "Open sans", sans-serif; text-decoration: none;
font-size: 0.9rem;
font-weight:400;
letter-spacing: 0.1em;
}

nav a {
color: var(--textfarbe);
margin-left: .8rem;
margin-right: .8rem;
padding: 0px;
text-decoration: none;
}

nav a:hover {
color: rgba(205,93,42,.6);
background-color: rgba(255,255,255,.95);
}

.nav-toggle {
display: none;
}

.nav-toggle-label {
display: none;
position: absolute;
top: 0.8rem;
right: 0px;
width: 1.6rem;
margin-right: 1.4rem;
}

/*-----------------------------------------------------------*/


section{
display: flex;
justify-content: center;
}

.bildtafeln{
width: 850px;
height: 100px;
margin-top: 10rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
text-decoration: none;
background-color: white;
}

bu_titel {
font-family: "Open sans", sans-serif; line-height: inherit;
color: var(--textfarbe);
font-size: 0.8em;
letter-spacing: 0.1em;
font-weight: 600;
padding-top: 0.1rem;
padding-bottom: 1rem;
text-align: center;
}

.der_kuss {
width: 29%;
}

.gesternmorgen {
width: 30.7%;
}

.madame_o {
width: 29.4%;
}

.amerikanischer_dampf {
width: 100%;
}

.friedrichs_blumen {
width: 32.9%;
}

.strandpartie {
width: 32.3%;
}

.das_schwarze_schaf {
width: 23.4%;
}

.friedenskirche {
width: 25%;
}

.luise {
width: 36.5%;
}

.regierungsviertel {
width: 27.5%;
}

.blauer_sturm {
width: 54%;
}

.n-angst {
width: 40.1%;
}

.feuergrund {
width: 29.3%;
}

.deutscher_hirsch {
width: 29.6%;
}

.am_hafen {
width: 30%;
}

.der_farbyeti {
width: 22.2%;
}

.trommelbild {
width: 44%;
}

.giganten {
width: 22.2%;
}

.element_erde {
width: 19%;
}

.element_feuer {
width: 19%;
}

.element_wasser {
width: 19%;
}

.element_luft {
width: 19%;
}

.der_lindenbaum {
margin-top: 10px;
width: 100%;
}



}