/* ======================================
    "Grundeinstellungen"
    ===================================== */

@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("../fonts/ABCMonumentGrotesk-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/*:root ist das oberste Element der Seite*/
:root {
  --page-padding: 16px;
  --font-base: "ABC Monument Grotesk", Arial, Helvetica, sans-serif;

  /* Typografisches Raster */
  --font-small: 24px;
  --line-small: 28px;

  --font-large: 40px;
  --line-large: 56px;

  --font-running-text: 20px;
  --line-running-text: 28px;

  --title-gap: 25px;
  --baseline-offset: 5px; /* damit Namensliste auf selber Grundlinie anfängt wie Projekttitel */
}

/* auf dem Destop werden die mobil anordnen ausgeschalten */
.mobil-version {
  display: none;
}

.mobil-break {
  display: none;
}

    /* schwarze Box */
.box_black{
  position: fixed;
  bottom: 70px;
  right:36px;
  z-index: 1000;

  width: 580px;
  height: 390px;
  padding: 0px;
  background-color: black;
  color: rgb(239,240,241);
  font-size: 26px;
  border: 1.5px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Text ist in der mitte */

  /* 👇 NEU: Start unsichtbar */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);

  transition: opacity .4s ease,
              transform .4s ease;
}

.box_black.show {
  opacity: 1;
  visibility: visible;
}

.box_black a{
  color: white;
  text-decoration: none;
}

.circle {
  position: absolute;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  z-index: 1;
}

.circle-green {
  background: #9BF24A;
  top: 0px;
  left: 0px;
}

.circle-blue {
  background: #7FA6C2;
  bottom: 0px;
  left: 0px;
}

.circle-rose {
  background: #D98AD6;
  bottom: 0px;
  right: 0px;
}

.close-button {
  position: absolute;
  top: 22px;
  right: 22px;

  width: 40px;
  height: 40px;

  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.close-button::before,
.close-button::after {
  content: "";
  position: absolute;

  top: 50%;
  left: 50%;

  width: 100%;
  height: 2px;

  background: rgb(239,240,241);

  transform-origin: center;
}

.close-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}




/* mobile Anpassung */

@media (max-width: 768px) {
        :root {
        --font-large: 22px;
        --line-large: 30px;

       --font-small: 18px;
       --line-small: 24px;

       --title-gap: 6px;
      }
  
    .box_black{
        width: calc(100vw - 32px);
        max-width: 300px;
        height: auto;
        min-height: 200px;
        padding: 30px 20px;
        bottom: 26px;
        right: 16px;
        font-size: var(--font-large);
        line-height: var(--line-large);
    }

    .close-button {
      position: absolute;
      top: 11px;
      right: 11px;
    
      width: 30px;
      height: 30px;
    
      background: none;
      border: none;
      cursor: pointer;
      z-index: 10;
    }

    .circle {
      position: absolute;
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }

}

/* ============
     Vitrine 
  ============= */
.vitrine {
  position: fixed;  
  top: 50%;  /* vertikale Mitte */
  left: 50%;  /*horizontale Mitte */
  transform: translate(-50%, -50%);
  width:calc(100vw - 200px);
  max-width: 1500px;
  height: calc(100vh - 170px);
  max-height: 1000px;
  padding: 20px;
  border: none;
  background-color: black;

  z-index: 1300;
}
.vitrine_thing{
  position: absolute;
}

/* Jedes Objekt einzeln positionieren */
.vitrine_thing:nth-child(1) { top: 4%; left: 3%; }   /* kaffeebereiter */
.vitrine_thing:nth-child(2) { top: 18%; left: 18%; }  /* babykopf */
.vitrine_thing:nth-child(3) { top: 53%; left: 7%; }   /* briefoeffner */
.vitrine_thing:nth-child(4) { top: 70%; left: 69%; }  /* feuerzeug */
.vitrine_thing:nth-child(5) { top: 42%; left: 9%; }  /* frosch */
.vitrine_thing:nth-child(6) { top: 63%; left: 20%; }  /* haftnotiz */
.vitrine_thing:nth-child(7) { top: 78%; left: 49%; }  /* kaffeeloeffel */
.vitrine_thing:nth-child(8) { top: 33%; left: 23%; }  /* nielpferd */
.vitrine_thing:nth-child(9) { top: 72%; left: 2%; }   /* nokia */
.vitrine_thing:nth-child(10) { top: 5%; left: 25%; } /* ohrringe */
.vitrine_thing:nth-child(11) { top: 81%; left: 13%; } /* plueschdino */
.vitrine_thing:nth-child(12) { top: 3%; left: 60%; } /* regal */
.vitrine_thing:nth-child(13) { top: 6%; left: 80%; }  /* salzgabel */
.vitrine_thing:nth-child(14) { top: 23%; left: 85%; } /* boule_kugeln */
.vitrine_thing:nth-child(15) { top: 51%; left: 86%; } /* schloss */
.vitrine_thing:nth-child(16) { top: 17%; left: 63%; } /* schluesselbund */
.vitrine_thing:nth-child(17) { top: 65%; left: 91%; } /* streichhoelzer */
.vitrine_thing:nth-child(18) { top: 61%; left: 52%; } /* stricknadeln */
.vitrine_thing:nth-child(19) { top: 27%; left: 43%; } /* tagebuecher */
.vitrine_thing:nth-child(20) { top: 12%; left: 34%; } /* thorax-buegel */
.vitrine_thing:nth-child(21) { top: 41%; left: 54%; } /* tragetasche */
.vitrine_thing:nth-child(22) { top: 70%; left: 75%; } /* wanduhr */
.vitrine_thing:nth-child(23) { top: 71%; left: 34%; } /* stofftier hund*/
.vitrine_thing:nth-child(24) { top: 54%; left: 40%; } /*sternkarabiner*/

/* Bilder anpassung */
img {
  object-fit: contain; /*seitenverhältnis beibehalten*/
}

/* jedes Bild bekommt einen Wert für height (hoehe) und width (breite) */ 
.h_klein img {
    max-height: 8vh;
    height: auto;
}
.w_klein img{
    max-width: 8vw;
    width: auto;
}

.h_mittel img{
    max-height: 12vh;
    height: auto;
}

.w_mittel img{
    max-width: 12vw;
    width: auto;
}

.h_gross img{
    max-height: 18vh;
    height: auto;
}

.w_gross img{
  max-width: 18vw;
  width: auto;
}

.special_size img{
  max-height: 25vh;
  height: auto;
  max-width: 18vw;
  width: auto;

}


/* Wackeln der Dinge */

@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(6deg); }
  50%  { transform: rotate(-6deg); }
  75%  { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

.vitrine_thing:hover {
  animation: wiggle 0.4s ease-in-out;
}


/* Milchglas beim Klick auf Dinge */

/* Milchglas */
.milk-glass {
  position: absolute; /* innerhalb .vitrine */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.10);

  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Standard: Klick geht durch */

  transition: opacity 0.25s ease;
  z-index: 50; /* über den Bildern, unter Text */
}

.milk-glass.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* nur wenn sichtbar klickbar */
}

/* Texte */
.project_discription > div {
  position: absolute; /* innerhalb .vitrine */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  z-index: 100; /* über Milchglas */
  
  opacity: 0;
  visibility: hidden;
  pointer-events: none; 
  transition: opacity 0.3s;

  /* Rand zum schwarzen Vitrine */
  padding-top: 20px ;
  padding-bottom:10px ;
  padding-left: 8% ;
  padding-right: 8% ;
  box-sizing: border-box; /* Damit padding in width/height eingerechnet wird */
  overflow-y: auto; /* falls der Text zu lang wird, scrollen */
}

.project_discription > div.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Bilder bleiben unverändert */
.vitrine_thing {
  position: absolute; /* unverändert */
  z-index: 10;        /* unter Milchglas */
}


/* textstyling (objekttext)*/
.project_discription p,
.project_discription h2 {
    font-size: 24px;
    line-height: 32px;
    color:white;
    font-weight: normal;
}

h1{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28.8px;
  color: rgb(150, 150, 150);
  margin-top: 22px;
  font-weight: normal;
}
h1 a{
    color: inherit; /* Farbe vom Elternelement wird übernommen */
    text-decoration: none;
}

.vitrine img {
  cursor: pointer;
}

.back-arrow {
  position: fixed;
  top: 16px;
  left: 40px;

  font-size: 28px;
  text-decoration: none;
  color: rgb(150, 150, 150);

  z-index: 3000;
}

.back-arrow:hover {
  opacity: 0.5;
}

/* mobil version */
@media (max-width: 768px) {
  .vitrine {
    display: none;
  }

  .mobil-version {
    display: block;  /* Container sichtbar */
     text-align: center;  /* zentriert inline/inline-block Elemente */
  }

  .mobil-version img {
    display: inline-block;
    width: 100%;      /* Bild etwas schmaler */
    max-width: 600px;
    height: auto;
    margin: 0 auto;  /* horizontal zentriert */
  }
    h1{
    display: block;          /* überschreibt display: flex */
    justify-content: unset;  /* entfernt justify-content: center */
    font-size: var(--font-large);
    line-height: var(--line-small);
    text-align: left;        /* linksbündig */
    margin-top: 16px;
  }

  .back-arrow{
    position:fixed;
    font-size: var(--font-large);
    line-height: var(--line-small);
    left: 16px;
}

  .mobil-break{
    display: block;
  }

  .mobil-version p {
    font-size: 16px;
    line-height: 18px;
    text-align: left;
    color: rgb(150, 150, 150);
  }
  }