/* Komponenten – übernommen aus der Next.js-Version (globals.css) */
.Menu {
  position: fixed;
  z-index: 9000;
  filter: blur(0px);
  width: 100vw;
  padding-top: 6.5px;
  top: 0;
  /* Titel links, Info/Websites ganz rechts */
  display: flex;
  justify-content: space-between;
}

.curved-text span {
  font-size: var(--font-size-);
}
.curved {
  margin-left: 2px;
  /* bisher Inline-Styles aus CurvedText2/3 */
  display: inline-block;
  transform-origin: 0 100%;
  transition: transform 0.3s ease;
}
/* Hilfs-Span der Hover-Links: Schriftgröße vom Link übernehmen (sonst greift * { font-size }) */
[data-hover-text] {
  font-size: inherit;
}
.value {
  white-space: nowrap;
  display: inline-block;
}

.juliustitle {
  margin-right: 50px;
}

.info {
  transition: 0.3s;
  margin-top: -15px;
}
.underlay1 *,
.underlay1 span{
  -webkit-text-stroke: var(--stroke-size-1) var(--color-3)!important;

}
.underlay *,
.underlay span
{
  -webkit-text-stroke: var(--stroke-size-2) var(--color-4)!important;
}

.contact, .info, .title {
  position: absolute;
}
.info-dec {
  margin-right: 19px;
}
.info-box {
  pointer-events: all;
  border-radius: var(--border-radius-1);
}


/* INDEX */
.ProjectsList {
  margin-top: 55px;
  transition: 0.3s;
}
.IndexRow {
  cursor: pointer;
  border-radius: var(--border-radius-1);
  margin-bottom: 20px;
  padding-left: 5px;
  height: auto;
  transition: 0.3s;
  padding-right: 10px;
}
.ProjectInfo {
  margin: var(--vertical-space-1) 0;
}
.roletext {
  color: var(--color-9);
  font-size: var(--font-size-3);
}
.extrainfo {
  margin-left: 1vw;
}
.ProjectTop {
  display: flex;
  justify-content: space-between;
  width: 51.8vw;
}
.info {
  width: 500px;
}
@media (max-width: 1200px) {
  .right {
    display: none;
  }
  .ProjectTop {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .Menu {
    position: fixed;
    z-index: 9000;
    filter: blur(0px);
    width: 100vw;
    padding-top: 6.5px;
    top: 0;
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 800px) {
  .info {
    width: auto;
  }
}

@media (max-width: 650px) {
  .ProjectsList {
    margin-top: 13vw;
    transition: 0.3s;
  }
  .IndexRow {
    margin-bottom: 5vw;
  }
}


.mobilescreen {
  padding: 30px;
}
.mobilescreen .ImageBalken {
  display: none;
}
.mobilescreen .ImgWrap {
    border-radius: 1.3vw;
    border-width: 0.5vw;
    border-color: rgb(0, 0, 0);
    border-style: solid;
}
.mobilescreen img {
  border-radius: 0.8vw;
  border: 0.2vw solid rgb(0, 0, 0);
}

.BigImage.mobilescreen .ImgWrap {
  border-radius: 3vw;
  border-width: 1vw;
}
.BigImage.mobilescreen img {
  border-radius: 2.1vw;
  border: 0.4vw solid rgb(0, 0, 0);
}

@media (max-width: 800px) {
 .mobilescreen .ImgWrap {
      border-radius: 10vw;
      border-width: 4vw;
      border-style: solid;
  }
  .mobilescreen img {
    border-radius: 6vw;
    border: 1vw solid rgb(0, 0, 0);
  }

  .BigImage.mobilescreen .ImgWrap {
    border-radius: 4vw;
    border-width: 2.5vw;
  }
  .BigImage.mobilescreen img {
    border-radius: 2.1vw;
    border: 2vw solid rgb(0, 0, 0);
  }
}

.BigImage img{
  width: auto;
  height: 70vh;
}
.desktopscreen .Case {
  border-width: 0vw;
  padding: 0;
}



/* IMAGES */
.ImageGrid {
  display: grid;
  width: 50vw;
  grid-template-columns: repeat(18, 1fr);
}
@media (max-width: 1000px) {

  .ImageGrid {
    width: 100%;
    grid-template-columns: repeat(20, 1fr);
  }
}
.ImageGrid img{
  width: 100%;
  height: auto;
  display: inherit;
}

.ImageStream {
  width: 100vw;
  border-radius: var(--border-radius-1);
  z-index: 5000;
  align-items: flex-start;
  grid-gap: 1vw;
  display: flex;
  padding: 0 20px;
  flex-wrap: wrap;
}
.ImageStream img{
  height: auto;
  width: 46vw;
  display: block;
}

.BigImage img{
  width: auto;
  height: 75vh;
}



/* Browser Window */
.ImageContainer {
  border-top-left-radius: 4px;
  z-index: 4000;
  border-top-right-radius: 4px;
  padding-left: 0px;
  margin-right: 6px;
}
.ImageBalken {
  background: rgb(216, 216, 216);
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  box-shadow: inset 1px -2.5px 4px 1px rgba(78, 78, 78, 0.479);
  height: 23px;
  padding-left: 8px;
  display: flex;
  align-items: center;
}
.ImageBalken::before {
  content: "";
  margin-top: -12px;
  width: 98%;
  margin-left: 1%;
  left: 0;
  right: 0;
  position: absolute;
  display: block;
  height: 1.5px;
  display: flex;
  background: rgb(255, 255, 255);
  filter: blur(1px);
  opacity: 0.65;
}
.browsernav {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin-right: 4px;
    z-index: 500;
    position: relative;
    border-radius: 11px;
    /* jetzt <button> statt <div> */
    border: 0;
    padding: 0;
}
.browsernav::before {
  content: "";
  width: 50%;
  margin-left: 25%;
  left: 0;
  right: 0;
  position: absolute;
  display: block;
  height: 2px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  background: rgb(255, 255, 255);
  filter: blur(0.8px);
  opacity: 0.8;
}
@media (max-width: 1000px) {
  .ImageStream {
    padding: 0 5px;
  }
  .ImageStream img{
    width:100%;
    height: auto;
  }
  .ImageStream .desktop  img{
    width: 100%;
    height: auto;
  }
  .BigImage img{
    width: 100%;
    height: auto;
  }
}

@media (max-width: 800px) {
  .ImageBalken {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: inset 1px -2.5px 4px 1px rgba(78, 78, 78, 0.479);
    height: 15px;
    padding-left: 6px;
    display: flex;
    align-items: center;
  }
  .browsernav {
    height: 7px;
    width: 7px;
    margin-right: 4px;
    z-index: 500;
    position: relative;
    border-radius: 11px;
}
}
.kreuz {
  background: red;
}
.kreuz:hover {
  background: rgb(0, 42, 255);
}
.size {
  background: green;
}
.size:hover {
  background: rgb(0, 42, 255);
}



/* NORMAL PAGE */
.Page {
  min-height: 100vh;
  padding-top: 60px;
  padding-bottom: var(--vertical-space-2);
  background: white;
}
.Text *{
  font-size: var(--font-size-3);
}
.Page section {
  width: 50vw;
}
@media (max-width: 1000px) {
  .Page section {
    width: auto;
  }
}
.Text p {
  margin-top: 1vw;
}