/* Hintergrund-Gitter */
body {
  margin: 0;
  min-height: 200vh; /* Damit man scrollen kann */
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  transition: background-size 0.1s ease-out; /* Für sanfte Anpassung */
}

:root {
  --grid-size: 100px;
}


/* Button-Styling */
#toggleButton {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  background-color: black;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  margin-top: 1030px;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
  z-index: 12;
}

#toggleButton:hover {
  background-color: #333;
}

/* Styling für das Play-Symbol (weiße Dreieck) */
.play-icon {
  width: 0;
  height: 0;
  border-left: 15px solid white;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* Styling für das Stop-Symbol (zwei weiße Balken) */
.stop-icon {
  display: flex;
  justify-content: space-between;
  width: 20px;
}

.stop-icon div {
  width: 7px;
  height: 20px;
  background-color: white;
}


.scroll-container {
    position: absolute;
    display: block;
    width: 180vw;
    height: 240vh; 
    overflow: auto; 
    margin: 10px;
    
  }
  


  .grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background-image: none; /* Wird durch JS geändert */
}


.normal h1{
  position: fixed;
  font-size: 78pt;
  margin: 0px;
  color: black;
  font-family: ClashDisplay-Medium;
  z-index: 3;

}

.hover-effect {
  white-space: nowrap;
}

.hover-effect span {
  display: inline-block; /* Damit die Spiegelung korrekt funktioniert */
  font-size: 116pt; /* Gleiche Schriftgröße wie der normale Text */
  transition: transform 0.5s ease; /* Sanfte Übergänge */
  display: inline-block; /* Beibehaltung der Block-Transformation */
  margin-right: -2px;
  
}

.hover-effect:hover span {
  transform: scaleX(-1); /* Spiegelt die Buchstaben beim Hover */
}



h1{
  position: fixed;
  font-size: 116pt;
  margin-left: 35px;
  margin-top: 0px;
  color: black;
  font-family: ClashDisplay-Medium;
}

h2{
  /* beschreibungstext auf der Startseite */
  font-size: 18pt;
  margin: 10px;
  color: black;
  font-family: 'Sentient';
  font-variation-settings: 'wght' 300;
  width: 900px;
  height: 500px;
  margin-top: 500px;
  margin-left: 1000px;
  position: absolute;

}

.pitch{

  margin-top: 160px;
  margin-left: 45px;
  color: black;
  font-family: 'Sentient';
  font-variation-settings: 'wght' 300;

}

h3{
  
  font-size: 22pt;
  margin: 0px;
  color: black;
  font-family: 'ClashDisplay-Medium';

}



.centered-heading{
  display: block;
  position: relative;
}

.title{
  
  font-family: ClashDisplay-Medium; /*schriftgröße der Schrift auf den Bildern der Titelseite*/
  font-size: 30pt;
}

.font1 {
  font-family: "ClashDisplay-Extralight";
  z-index: 2;
}

.font2 {
  font-family: "ClashDisplay-Light";
  z-index: 2;

}

.font3 {
  font-family: "ClashDisplay-Regular";
  z-index: 2;
}

.font4 {
  font-family: "ClashDisplay-Medium";
  z-index: 2;
}

.font5 {
  font-family: "ClashDisplay-SemiBold";
  z-index: 2;
}

.font6 {
  font-family: "ClashDisplay-Bold";
  z-index: 2;
}

.box-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
}

.item {
  width: 600px;
  height: 600px;
  background-color: #ffffff;
  border: solid 2px #cccccc;
  transition: border-color 0.3s ease, border-opacity 0.3s ease;
  transition: transform 0.5s ease; /* Weicher Übergang */
}

.item:hover {
  box-shadow: 0 0 0 5px rgba(0, 0, 255, 0); /* Macht den Rand unsichtbar beim Hover */
}

.item-1:hover{
  opacity: 1;
  transform: translate(-50%, -40%);
}


.flex-container{
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  z-index: 1;
  justify-content: space-evenly;
  

}



.box1 {
    position: absolute;
    width: 20cm;
    height: 20cm;
	  background-size: cover;
	  background-repeat: no-repeat;
    margin: 0px;
    font-size: 50pt;
    color: rgb(0, 0, 0); 
    text-align: center;
  
}

.box2 {
  position: absolute;
  width: 20cm;
  height: 25cm;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0px;
  font-size: 50pt;
  color: rgb(0, 0, 0); 
  text-align: center;
}

.box3 {
  position: absolute;
  width: 15cm;
  height: 21cm;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0px;
  font-size: 50pt;
  color: rgb(0, 0, 0); 
  text-align: center;
}


.box4 {
  position: absolute;
  width: 15cm;
  height: 18cm;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0px;
  font-size: 50pt;
  color: rgb(0, 0, 0); 
  text-align: center;
}

.box5 {
  
  width: 15cm;
  height: 15cm;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0px;
  font-size: 50pt;
  color: rgb(0, 0, 0); 
  text-align: center;
}

/* Info-Overlay */
.box1 h2, .box1 h3,
.box2 h2, .box2 h3,
.box3 h2, .box3 h3,
.box4 h2, .box4 h3,
.box5 h2, .box5 h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  color: white;
  font-size: 16px;
  opacity: 0; /* Unsichtbar standardmäßig */
  text-align: center;
  transition: opacity 0.5s ease, 
              transform 0.5s ease; /* sanfte Bewegung */
}

/* Hover-Effekt: Zeige Titel und Namen */
.box1:hover h2, .box1:hover h3,
.box2:hover h2, .box2:hover h3,
.box3:hover h2, .box3:hover h3,
.box4:hover h2, .box4:hover h3,
.box5:hover h2, .box5:hover h3 {
  opacity: 1;
  transform: translate(-50%, -40%);
}

/* Optional: Verdunkle Hintergrund beim Hover */
.box1:hover, .box2:hover, .box3:hover, .box4:hover, .box5:hover {
  background-color: rgba(0, 0, 0, 0.5); /* Etwas sanftere Verdunkelung */
  background-blend-mode: multiply; /* Mischung mit dem Bild */
  transition: background-color 0.5s ease; /* Sanfter Übergang der Verdunkelung */
}


/* Stil für den Titel (h2) */
.box1 h2, .box2 h2, .box3 h2, .box4 h2, .box5 h2 {
  top: 50%; /* Positioniere den Titel etwas höher */
  font-size: 50px; /* Passe die Schriftgröße an */
  font-weight: bold; /* Mach den Titel fett */
}

/* Stil für den Namen (h3) */
.box1 h3, .box2 h3, .box3 h3, .box4 h3, .box5 h3 {
  top: 60%; /* Positioniere den Namen etwas tiefer */
  font-size: 23px; /* Kleinere Schrift für den Namen */
  font-weight: normal; /* Name bleibt regulär */
}


.post {
width: 100vw;
height: 100vh;
position: relative;
overflow: scroll;
}

header > h1{
  position: relative;
  display: block;
  z-index: 1;
}

.image-container{
  width: 100vw;
  height: 100vh;
  display: block;
  position: absolute;
  margin-top: 1fr;
  z-index: 0;
}

p{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  font-size: 18pt;
  margin: 0px;
  color: black;
  font-family: 'Sentient';
  font-variation-settings: 'wght' 300;
  display: flex;
  gap: 10px;
  width: 400px;


}

img{
  width:500px;
  height: auto;
}




.reload-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  background-color: black;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
  z-index: 6;
}

/* Pfeil-Symbol */
.reload-button::before {
  content: "↻";
  font-size: 38px;
  color: white;
}

/* Hover-Effekt */
.reload-button:hover {
  transform: scale(1.1);
  background-color: #333;
}

.sortable-ghost {
  opacity: 0.5;
  background: #f0f0f0;
  border: 2px dashed #ccc;
}