@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro:600|Space+Mono:400,700&display=swap');

/*h2.number i {*/
/*font-size: 133%;*/
/*}*/

.container-verschoben {
color: red;
}

.esenseTitleMargin {
margin-left: 30px;
/*text-transform: lowercase;*/
}

.esenseCancel {
text-decoration: line-through;
color: #FF0000;
}

.esenseRec {
position: absolute;
z-index: 200;
width: 200px;
font-family: 'Source Serif Pro', serif;
font-size: 12px;
color: black;
letter-spacing: 1px;
line-height: 16px;
margin: 12px;
}
@media screen and (max-width: 700px) {
.esenseRec {
width: 140px;
font-size: 11px;
}
}
:root {
/*	proportionen clock-container*/
--ratio-clock: 1 / 1;
--width-clock: calc(70vmin);
--height-clock: calc(var(--width-clock) * 1);
--color: rgb(255, 0, 0);
--line-height-1: 42px;
--line-height-1durch2: calc(var(--line-height-1) / 2);
--line-height-2durch3: calc(var(--line-height-1) * 2 / 3);
--line-height-2durch4: calc(var(--line-height-1) * 2 / 4);
--line-height-2durch5: calc(var(--line-height-1) * 2 / 5);

--line-height-5durch9: calc(var(--line-height-1) * 5 / 9);
/*    --font-size-1: 58px;*/
--faktor-zeilenabstand: 1.28;
--font-size-1: calc(var(--line-height-1) * var(--faktor-zeilenabstand));
--font-size-1durch2: calc(var(--line-height-1durch2) * var(--faktor-zeilenabstand));
--font-size-2durch4: calc(var(--line-height-2durch4) * var(--faktor-zeilenabstand));
--font-size-2durch5: calc(var(--line-height-2durch5) * 1.16);
--font-size-5durch9: calc(var(--line-height-5durch9) * var(--faktor-zeilenabstand));
}

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

html {
font-size: 1em;
line-height: var(--line-height-1);
font-family: 'Space Mono', monospace;
margin: 8px;
}

body {
}


header {
display: grid;
position: relative;
top: 0;
left: 0;
grid-template-columns: 1fr 2fr 1fr;
max-width: 1200px;

}


.start {
display: inline-block;
position: fixed;
top: 0px;
left: 48%;
/*        width: 40%;*/

padding: 8px;

}

main {
}

footer {
display: grid;
position: sticky;
bottom: 0px;
left: 0px;
width: 100%;
grid-template-columns: 2fr 1fr 1fr;
grid-gap: calc(var(--line-height-1) * 2 / 4);
background-color: white;
padding-top: 8px;
padding-left: calc(var(--line-height-1) * 2 / 4);
padding-bottom: 16px;
z-index: 1000;
margin: 0px;
}

.abstand {
height: var(--line-height-1);
}

/* TYPE */
h1,
h2 {
font-size: var(--font-size-1);
}

h1 {
font-weight: bold;
text-transform: uppercase;
color: var(--color);
display: block;
margin-right: 30px;
}

h2 {
font-weight: bold;
/*    text-transform: uppercase; */
}

h3 {
display: block;
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: var(--font-size-2durch4);
line-height: var(--line-height-2durch4);
}


.auf-mitte {
left: 50%;
}


.cv {
display: block;
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: var(--font-size-2durch5);
line-height: var(--line-height-2durch5);
width: 90vw;
max-width: 600px;
}

p {
display: block;
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: var(--font-size-2durch5);
line-height: var(--line-height-2durch5);
}

.regular {
font-family: 'Space Mono', monospace;
font-weight: 400;
}


nav {
display: grid;
grid-template-rows: auto;
grid-row-gap: 1px;
display: block;
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: var(--font-size-2durch5);
}


ul {
}


li {
display: block;
line-height: var(--line-height-2durch5);
margin-top: 0;
/*    margin-right: 10px;*/
padding: 0px 4px 2px 4px;
}

a {
color: black;
/*        background-color: red;*/
/*border-top: 1px solid black;*/

/*text-decoration: none;*/
/*border-bottom: 2px blue dotted;*/
margin-top: 0px;
}

a:hover {
color: gray;
}

a:visited {
color: black;
}

a:visited:hover {
color: gray;
}


.fullframe-link {
position: fixed;
width: 100%;
height: 100%;
color: var(--color);
background-color: transparent;
z-index: 100;
}

:root {
/*	proportionen clock-container*/
--ratio-clock: 1 / 1;
--width-clock: calc(70vmin);
--height-clock: calc(var(--width-clock) * 1);
}


.clock-placer {
position: fixed;
left: 0px;
top: 0px;
width: calc(100% - 16px);
height: calc(100% - 16px);
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 1fr auto 1fr;

}

.clock-container {
display: grid;
align-items: center;


grid-template-columns: repeat(7, 10vmin);
grid-template-rows: repeat(7, 10vmin);
margin: auto;


}


.clock-element-12 {
grid-area: 1 / 4 / 2 / 5;
text-align: center;
}

.clock-element-1 {
grid-area: 2 / 5 / 3 / 6;
text-align: center;
}

.clock-element-2 {
grid-area: 3 / 6 / 4 / 7;
text-align: center;
}

.clock-element-3 {
grid-area: 4 / 7 / 5 / 8;
text-align: center;
}

.clock-element-4 {
grid-area: 6 / 6 / 5 / 7;
text-align: center;
}

.clock-element-5 {
grid-area: 6 / 5 / 7 / 6;
text-align: center;
}

.clock-element-6 {
grid-area: 7 / 4 / 8 / 5;
text-align: center;
}

.clock-element-7 {
grid-area: 6 / 3 / 7 / 4;
text-align: center;
}

.clock-element-8 {
grid-area: 5 / 2 / 6 / 3;
text-align: center;
}

.clock-element-9 {
grid-area: 4 / 1 / 5 / 2;
text-align: center;
}

.clock-element-10 {
grid-area: 3 / 2 / 4 / 3;
text-align: center;
}

.clock-element-11 {
grid-area: 2 / 3 / 3 / 4;
text-align: center;
}


/*
.background {
	position: fixed;
	top: 100px;
	width: 100%;
	height: auto;
	z-index: -1;
	align-content: space-around;
}
*/

.grid-container-artist {
display: grid;
grid-template-columns: auto auto auto auto auto auto 1fr;
grid-template-rows: calc(var(--line-height-1) * 5);
overflow-y: hidden;
overflow-x: scroll;
width: 98vw;
/*    padding-top: 50px;*/
}

.quadrat-2von2 {
/*    width: 100%;*/
max-width: 100vh;
height: auto;
/*background-image: url(../bahnhof_bilder/_DSC5797_Cut_1zu1_SW_Grau.jpg);*/
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: -1;
}

.quadrat-1von2 {
width: 50%;
height: auto;
}

.container-1 {
}


.player-bandcamp {
width: 100%;
height: auto;
}

.text-4von4 {
display: grid;
width: 100%;
grid-template-columns: 1fr;
margin-bottom: 2.8vh;

}

.text-1von4 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 2.8vh;
margin-bottom: 2.8vh;


}

.text-2von4 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: calc(var(--line-height-1) * 2 / 4);
margin-bottom: calc(var(--line-height-1) * 2 / 4);


}


.quadrat {
display: block;
position: relative;
height: calc(var(--line-height-1) * 5);
max-width: calc(var(--line-height-1) * 5);
padding: 1px;
z-index: 100;
}

.bild-5-zeilen {
display: block;
position: relative;
height: calc(var(--line-height-1) * 5);
max-width: calc(var(--line-height-1) * 5);
padding: 1px;
z-index: -100;
}

.bild-7-zeilen {
display: block;
position: relative;
height: calc(var(--line-height-1) * 7);
max-width: calc(var(--line-height-1) * 7);
padding: 1px;
z-index: -100;
}

.bild-75-breit {
display: block;
position: relative;
width: 75%;
height: auto;
padding: 1px;
z-index: -100;
}

.player-bandcamp {
height: calc(var(--line-height-1) * 5);
width: calc(var(--line-height-1) * 5);
}


.main-info {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto auto auto;
}

.number {
color: var(--color);
text-transform: uppercase;


}

.artist .weapon .date {
color: black;

}

.weapon {
font-style: italic;
white-space: nowrap;
}

.open {
color: gainsboro;
text-transform: uppercase;
}


.legende {
/*	display: block;*/
font-family: 'Source Serif Pro', serif;
font-size: 12px;
color: black;
transform: rotate(-90deg);
letter-spacing: 1px;
margin: 0px;
width: 30px;
height: auto;
/*border: 1px solid;*/
text-align: center;
}

.trans {
color: transparent;
}

@media screen and (max-width: 700px) {


:root {
--line-height-1: 34px;
--faktor-zeilenabstand: 1.3;
--font-size-2durch5: calc(var(--line-height-2durch5) * 1.12);

}


header {
grid-template-columns: 1fr 2fr;
}

nav {
grid-area: 2 / 1 / 3 / 3
}


li {
display: inline-block;
}

.clock-placer {
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 1fr auto 1fr;
}

.clock-container {
grid-template-columns: repeat(7, 12vmin);
grid-template-rows: repeat(7, 12vmin);
}

.kopf {
display: block;
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: var(--font-size-2durch4);
line-height: var(--line-height-2durch4);
}

.text-2von4 {
display: block;
grid-template-columns: auto;
grid-gap: var(--line-height-2durch4);
margin-bottom: var(--line-height-2durch4);
}

footer {

}

}

@media screen and (min-width: 1200px) {

:root {
--line-height-1: 48px;
--faktor-zeilenabstand: 1.25;
}

.grid-container-artist {
display: grid;
grid-template-columns: auto auto auto auto auto auto 1fr;
grid-template-rows: calc(var(--line-height-1) * 5);
overflow-y: hidden;
/*    overflow-x: scroll;*/
width: 98vw;
}
}