body {
margin: 0;
background: #efefef;
}

p {
font-family: "maiola", serif;
font-weight: 400;
font-style: normal;
font-size: 1em;
}

h2 {
font-family: "snaga-unicase-display", sans-serif;
font-weight: 100;
font-style: normal;
margin-bottom: 0px;
}

header {
font-family: "snaga-unicase-display-hair", sans-serif;
font-weight: 100;
font-style: normal;
font-size: 3em;


display: grid;
grid-template-columns: repeat(12, 1fr);

align-items: baseline;
background: #efefef;
position: fixed;
padding: 0.2em;
z-index: 1100;
}

nav, nav a, .left, header a{
text-decoration: none;
color: blue;

display: flex;
align-items: baseline;
}

nav {
gap: 20px;
grid-column: 13 / span 2;
}

.left {
grid-column: 1 / span 2;
}

.burger {
color: blue;
font-size: 2em;

display: none;
background: none;
border: none;
}

nav.show {
  display: flex;
}

#toTop {
position: fixed;
left: 1em;
bottom: 2em;
z-index: -1000;

opacity: 0;
color: blue;
font-family: "snaga-unicase-display", sans-serif;
font-size: 0.5em;

width: 1.5em;
height: 1.5em;
border-radius: 50%;
border: none;
background: #efefef;
box-shadow: 0 0 14px rgba(0, 0, 0, 0.12);
transition: opacity 0.25s ease, transform 0.25s ease;
}

#toTop.show {
opacity: 1;
pointer-events: auto;
}



main {
display: grid;
grid-template-columns: repeat(12, 1fr);

padding-top: 15em;
}

.gallery {
display: grid;
grid-column: 1 / 13;
gap: 5px; /*oder doch keine gap machen?*/
}

.introduction {
display: grid;
grid-column: 5 / 13;
text-align: right;

background-color: blue;
color: white;
margin-bottom: 100px;
}

.introduction p, .introduction h2 {
padding: 8px;
}

.item {
overflow: clip;
}

.item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: filter 0.3s ease, transform 0.3s ease;
}
/* ab Bild 10 Wiederholen sich Klassen aka Muster */

.img1 {
grid-column: 5 / 13;
}

.img2 {
grid-column: 5 / 7;
margin-bottom: 100px;
}

.img3 {
grid-column: 1 / 3;
margin-bottom: 100px;
}

.img4 {
grid-column: 3 / 8; 
margin-bottom: 100px;
}

.img5 {
grid-column: 1 / 6;
}

.img6 {
grid-column: 6 / 13;
}

.img7 {
grid-column: 6 / 9;
margin-bottom: 100px;
}

.img8 {
grid-column: 9 / 13;
margin-bottom: 100px;
}

.img9 {
grid-column: 1 / 5;
}

.info {
position: sticky;
inset: 0;
padding: 1em;
opacity: 0;
transition: opacity 0.3s ease;
background-color: #efefef; /*gefällt mir das?*/
color: blue;
}



footer{
position: fixed;
bottom: 0px;
background-color: #efefef;
width: 100%;
overflow: hidden;
}
.ticker-track {
display: inline-flex;
width: max-content;
animation: tickerMove 28s linear infinite;
}

.ticker-track a {
font-family: "snaga-unicase-display", sans-serif;
font-weight: 100;
font-style: normal;
font-size: 2em;
color: blue;
text-decoration: none;
display: inline-block;
}

@keyframes tickerMove {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}


/*unsuree*/
.item.is-open img {
filter: blur(4px);
transform: scale(1.03);
}

.item.is-open .info {
opacity: 1;
}


/* Geräten, die HOVER können */
@media (hover: hover) {
.item:hover img {
filter: blur(4px);
transform: scale(1.03);
}

.item:hover .info {
opacity: 1;
}
}

/* MOBILE */
@media (max-width: 900px) {

nav {
display: none;
}

.burger {
display: grid;
grid-column: 13;
font-size: 1em;
}

.left {
display: grid;
grid-column: 1 / span 2;
font-size: 0.5em;
display: flex;
}


.item.is-open img {
filter: blur(4px);
transform: scale(1.03);
}

.item.is-open .info {
opacity: 1;
}
}

@media (min-width: 901px) and (max-width: 1500px) {
nav {
display: none;
}

.burger {
display: grid;
grid-column: 13;
font-size: 3em;
}

.left {
display: grid;
grid-column: 1 / span 2;
font-size: 1em;
display: flex;
}
}

@media (min-width: 1501px) {}