@media (max-width: 37.5em) { 

}

@media (min-width: 37.5em) and (max-width: 48em) { 

}


@media (min-width: 48em) and (max-width: 64em) { 

}
@media (min-width: 64em) and (max-width: 80em) { 
}

@media (min-width: 80em) { 
}



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

body {
  background-color: #F8F7F3;
  font-family: sans-serif;
  color: #000;
  height: 100vh;
  overflow-x: hidden;
  position: relative;
}

.spirale {
  position: absolute;
  top: 1.25em;
  left: 1.25em;
  width: 4.375em; 
  height: auto;
}

.intro {
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   padding-left: 3.75em;
 }
 
 .intro h1 {
   font-size: 6.5rem;
   font-weight: bold;
   line-height: 1.2;
 }
 

html {
  scroll-behavior: smooth;
}

.top-nav {
  padding: 1.25em;
}

.top-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.top-nav li {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900; 
  font-size: 4.0625em;
  line-height: 1.4;
  text-transform: uppercase;
}

.top-nav a {
  color: black;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 0.125em;
}





.about {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 7.5em 3.75em; 
   gap: 2.5em;
 }
 
 .about-left img {
   width: 28.125em;
   height: auto;
 }
 
 .about-divider {
   width: 0.125em;
   background-color: #000;
   height: 25em;
 }
 
 .about-right {
   max-width: 31.25em;
 }
 
 .about-right p {
   font-size: 0.9rem;
   line-height: 1.5;
 }
 

 #Lieblingsbilder

 .lieblingsbilder-section {
   position: relative;
   height: 100vh;
   width: 100%;
   background-color: white;
   padding: 3.125em;
   box-sizing: border-box;
  }
  .lieblingsbilder-title img {
   width: 35em;
   display: block;
   margin: 0 auto -2.5em auto;
  }
  .bilder-container {
   position: relative;
   width: 100%;
   height: 70vh;
  }
  .bild {
   position: absolute;
   object-fit: cover;
  }
 
  .bild-links {
   bottom: 0;
   left: 0;
   width: 40%;
   height: auto;
  }

  .bild-mitte {
   bottom: 0;
   left: 45%;
   width: 20%;
   height: auto;
  }

  .bild-rechts {
   top: 0;
   right: 0;
   width: 15%;
   height: auto;
  }

  .abschnitt-abstand {
   height: 0.3em; 
  }

  #MeineKunst
  .meine-kunst-section {
   position: relative;
   min-height: 100vh;
   width: 100%;
   background-color: white;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   padding: 18.75em 3.125em 3.125em 3.125em;
   box-sizing: border-box;
  }


  .meine-kunst-title img {
   width: 25em;
   margin-left: 30%;
   margin-bottom: -5em; 
  }

  .kunstbilder-container {
   position: relative;
   width: 100%;
   height: 70vh;
  }
  .kunstbild {
   position: absolute;
   object-fit: cover;
   border-radius: 0.5em;
  }
  
  .kunst-oben {
   bottom: 0;
   left: 5%;
   width: 27%;
   height: auto;
   z-index: 1;
  }


  .kunst-unten {
   bottom: 0;
   left: 30%;
   width: 30%;
   height: auto;
   z-index: 1;
  }

  .kunst-mitte {
   top: 10%;
   left: 50%;
   width: 20%;
   height: auto;
   z-index: 2;
  }

  .kunst-rechts {
   top: -20%;
   right: 8%;
   width: 20%;
   height: auto;
   z-index: 0;
  }

  .menschen-section {
   position: relative;
   height: 40em;
   width: 100%;
  }
  .menschen-title img {
   height: 9em; 
   position: absolute;
   left: 3.125em;
   top: 26em; 
   transform: rotate(-90deg);
   transform-origin: top left;
  }

  .menschen-bilder-container {
   position: absolute;
   left: 25%;
   top: 0;
   width: 70%;
   height: 100%;
  }

.menschen-bild {
 position: absolute;
 width: 8.4375em;
 height: auto;
}

.bild-1 { left: 10em; top: -3.75em; }
.bild-2 { left: -0.9375em; top: 1.25em; }
.bild-3 { left: 8.4375em; top: 9.375em; }
.bild-4 { left: 18.8125em; top: 8.125em; }
.bild-5 { left: 28.75em; top: 8.75em; }
.bild-6 { left: 31.25em; top: 21.875em; }
.bild-7 { left: 18.75em; top: 20em; }
.bild-8 { left: 40.625em; top: 16.25em; }
.bild-9 { left: 38.75em; top: 6.25em; }
.bild-10 { left: 26.875em; top: -4.0625em; }


#Magazin

.magazin-container {
  position: relative; /*Rahmen für dasabdeckende Bild */
}





body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.layout {
  display: grid;
  grid-template-columns: repeat(100, 1fr); /*Raster*/
  grid-template-rows: repeat(130, 1em);    
  position: relative;
  width: 100%;
  height: auto;
}

.text-vertical {
  position: absolute;
  top: 0;
  right: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 3.75em;
  font-weight: bold;
}


.skyline {
  grid-column: 18 / span 34;
  grid-row: 4; /* 3.125em ≈ 4. Reihe */
  width: 100%;
}

.skyline-label {
  grid-column: 53 / span 30;
  grid-row: 37;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: bold;
  font-size: 1.2em;
}

.schokolade {
  grid-column: 68 / span 15;
  grid-row: 25;
  width: 100%;
}

.schokolade-label {
  grid-column: 66 / span 1;
  grid-row: 60;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: bold;
  font-size: 1.2em;
}

.eiskarte {
  grid-column: 21 / span 25;
  grid-row: 39;
  width: 100%;
}

.eiskarte-label {
  grid-column: 20 / span 13;
  grid-row: 85;
  font-weight: bold;
  font-size: 1.2em;
}


.logo-alt {
  grid-column: 20 / span 24;
  grid-row: 91;
  width: 100%;
}

.pfeil {
  grid-column: 28 / span 12;
  grid-row: 103;
  width: 100%;
}

.mein-design {
  grid-column: 29 / span 14;
  grid-row: 120;
  width: 100%;
}

.logo-orange {
  grid-column: 56 / span 25;
  grid-row: 104;
  width: 100%;
}

.logo-black {
  grid-column: 68 / span 15;
  grid-row: 150;
  width: 100%;
}

.logo-grey {
  grid-column: 80 / span 11;
  grid-row: 114;
  width: 100%;
}


/* Nur Animation für die BS7 Bilder */
.logo-orange,
.eiskarte,
.schokolade,
.skyline,
.logo-black,
.logo-grey,
.pfeil,
.mein-design {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-orange:hover,
.eiskarte:hover,
.schokolade:hover,
.skyline:hover,
.logo-black:hover,
.logo-grey:hover,
.pfeil:hover,
.mein-design:hover {
  transform: scale(1.03);
  filter: brightness(1.1);
}








.impressum-section {
   background: #f3f3f3;
   padding: 6.25em 3.75em;
   font-family: 'Helvetica Neue', sans-serif;
   position: relative;
  }
  .impressum-titel img {
   height: 18.75em;
   position: absolute;
   left: -3.75em;
   top: 5em;
   transform: rotate(-90deg);
   transform-origin: top left;
  }
  .impressum-inhalt {
   display: flex;
   gap: 5em;
   justify-content: space-between;
   max-width: 62.5em;
   margin: 0 auto;
  }
  .impressum-links, .impressum-rechts {
   flex: 1;
  }
  .impressum-section h3 {
   font-size: 1.5em;
   margin-bottom: 0.9375em;
  }
  .impressum-section ul,
  .impressum-section ol {
   font-size: 1.125em;
   margin-bottom: 1.875em;
   padding-left: 1.25em;
  }
  .impressum-section a {
   color: #0055aa;
   text-decoration: none;
  }
  .impressum-section a:hover {
   text-decoration: underline;
  }
  .impressum-section table {
   width: 100%;
   border-collapse: collapse;
   font-size: 1.0625em;
   background: white;
   box-shadow: 0 0.125em 0.375em rgba(0,0,0,0.1);
  }
  .impressum-section th,
  .impressum-section td {
   padding: 0.75em;
   border: 0.0625em solid #ccc;
   text-align: left;
  }
  .abschnitt-abstand {
   height: 15.625em;
  }


.top-nav a:focus,
.top-nav a:target {
  color: #305e88;
  padding: 0.25em 0.5em;
  border-radius: 0.25em;
  outline: none;
}