* {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "jali-latin-variable", sans-serif;
  font-variation-settings: "wght" 400;
}
body {
  padding: 3px;
  margin: 0;
  display: flex;
  height: 100dvh;
  overflow: hidden;
  font-family: "jali-latin-variable", sans-serif;
  font-variation-settings: "wght" 400;
  background-color: black;
  position: relative;
}

.haupt-überschrift {
  transition: 400ms ease;
  font-variation-settings: "wght" 500;
}

.haupt-überschrift:hover {
  font-variation-settings: "wght" 650;
  letter-spacing: 0.5px;
}

.link-ja {
  color: white;
  text-decoration: underline;
}

.link-nein {
  color: black;
  text-decoration: none;
}

a {
  text-decoration: none;
}

.link-nein:hover {
  color: white;
}

h2 {
  font-size: 1.25rem;
  margin-block: 0.5rem;
}

.border-effect {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px; /* Dicke der Border */
  background: linear-gradient(90deg, black 48%, white 50%, white 50%, black 52%)
      top / 100% 3px no-repeat,
    linear-gradient(90deg, black 48%, white 50%, white 50%, black 52%) bottom /
      100% 3px no-repeat,
    linear-gradient(180deg, black 48%, white 50%, white 50%, black 52%) left /
      3px 100% no-repeat,
    linear-gradient(180deg, black 48%, white 50%, white 50%, black 52%) right /
      3px 100% no-repeat;
  pointer-events: none;
  transition: background 0.2s ease-out; /* Verzögerung der Hintergrundbewegung */
}

.border-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.3s;
}

.hidden {
  opacity: 0;
}

.container {
  display: flex;
  width: 100%;
}
.sidebar {
  width: 15dvw;
  background: #333;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}
.sidebar ul {
  margin-top: 2dvh;
  display: flex;
  flex-direction: column;
  list-style: none;
  font-size: 1.25rem;
  align-items: center;
}
.sidebar li {
  padding: 10px 0;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.sidebar li:hover {
  transform: scale(1.1);
}

.logo {
  text-align: center;
  padding-top: 20px;
  max-width: 85%;
  max-height: 70dvh;
  display: flex;
  justify-content: center;
}
.logo svg {
  height: auto;
  width: inherit;
  transition: fill 0.3s ease;
  fill: black;
}

.logo svg:hover {
  fill: white;
}

.content {
  background-color: grey;
  background-image: url("bag.jpg");
  height: inherit;
  width: 100%;
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease-in-out;
}
.project-list {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  justify-content: flex-start;
  transition: transform 0.5s ease-in-out;
}
.project-list.close {
  display: none;
}
.project {
  flex: 0 0 6dvw;
  /*     background: rgb(179,179,179);
background: radial-gradient(circle, rgba(179,179,179,0.95) 0%, rgba(84,84,84,0.95) 100%);*/
  background: rgb(190, 190, 190);
  background: radial-gradient(
    circle,
    rgba(190, 190, 190, 0.95) 0%,
    rgba(0, 0, 0, 0.95) 100%
  );

  margin: 0 5px;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  font-size: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  transition: background 0.3s, flex 0.5s, filter 0.5s ease-in-out;
}

/* Helligkeits-Animation */
@keyframes ambient {
  0% {
    filter: brightness(1);
  } /* Normale Helligkeit */
  50% {
    filter: brightness(1.4);
  } /* Heller */
  100% {
    filter: brightness(1);
  } /* Zurück zur Normalität */
}

.ambient-animation {
  animation: ambient 3s ease-in-out;
}

.project:hover {
  background-image: url("bag2.jpg");
  flex: 0 0 8dvw;
  /* Vergrößert die Spalte bei Hover */
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2),
    0 6px 20px 0 rgba(255, 255, 255, 0.19);
}
.project p {
  transform: rotate(90deg); /* Drehung des Textes um 90 Grad */
  transform-origin: center; /* Bestimmt den Drehpunkt */
  display: inline;
  transition: opacity 0.5s;
}

.project.open {
  flex: 0 0 85dvw; /* Maximale Breite beim Öffnen des Projekts */
  justify-content: center;
  margin: 0;
  background-image: url("bag2.jpg");
  background-attachment: fixed;
}

.project.open p {
  opacity: 0;
}

.project.close {
  flex: 0; /* Minimale Breite beim Schließen des Projekts */
  margin: 0;
}

/*.project-list .project.open ~ .project {
            transform: translateX(-100%); /* Verschiebt alle Projekte nach links 
        }

        /* Positioniere die Überschrift des geöffneten Projekts rechts */
.project.open .project-title {
  position: absolute;
  top: 20px; /* Abstand vom oberen Rand */
  right: 20px; /* Positioniere sie am rechten Rand */
  font-size: 24px;
  color: #333;
}

.einblendungen {
  width: inherit;
}

.eb {
  display: none;
}

.eb.open {
  display: flex;
  flex-direction: column;
  margin: 9dvh;
  height: calc(
    100dvh - 18dvh
  ); /* Passt sich dynamisch an die Viewport-Höhe an */
  overflow: hidden; /* Verhindert Scrollen des gesamten .eb */
}

.eb-inhalt {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.eb-scroll {
  width: 50dvw;
  margin-right: 20px;
  max-height: 70dvh; /* Nutzt die volle Höhe des Eltern-Containers */
}

.eb-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.eb-scroll::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
}
.eb-scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.eb-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}
.eb-scroll::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.9);
}

.eb-scroll ul {
  line-height: 1.3rem;
  font-size: 1.125rem;
  list-style-type: circle;
}

.eb-scroll .dreierreihe {
  display: flex;
  flex-direction: row;
  margin-bottom: 4%;
  gap: 2%;
  justify-content: center; /* Horizontal zentrieren */
  align-items: center;
}
.eb-scroll .zweierreihe {
  display: flex;
  flex-direction: row;
  gap: 2%;
  justify-content: center; /* Horizontal zentrieren */
  align-items: center;
  margin-bottom: 4%;
}

h2 {
  font-variation-settings: "wght" 480;
}

.mehrabstand {
  margin-top: 6rem;
}

.eb-scroll video {
  margin-left: 3%;
  width: 94%;
  height: auto;
  margin-bottom: 4%;
}
.eb-scroll .einzelimg {
  margin-left: 2%;
  width: 96%;
  height: auto;
  max-width: 50dvw;
}

.bildermittig .einzelimgmid {
  margin-inline: auto;
  width: auto;
  height: auto;
  max-height: 65dvh;
  max-width: 40dvw;
}

.abstandimg {
  margin-bottom: 3dvh;
}

.bildermittig {
  display: flex;
  justify-content: center; /* Horizontal zentrieren */
  align-items: center;
  height: fit-content;
  margin-bottom: 3dvh;
}
.dreierreihe img {
  margin-inline: 3px;
  width: 30%;
  height: auto;
}

.zweierreihe img {
  width: 46%;
  height: auto;
}

.bildopen:hover {
  cursor: pointer;
}

.schließen {
  background-color: transparent;
  border: 1px solid #000000;
  display: inline-block;
  cursor: pointer;
  color: #000000;
  padding: 8px 18px;
  margin-left: 5px;
  text-decoration: none;
  font-family: "jali-latin-variable", sans-serif;
  font-variation-settings: "wght" 400;
  transition: font-variation-settings 0.5 ease, background-color 0.3s ease,
    color 0.3s ease;
}
.schließen:hover {
  background-color: black;
  font-variation-settings: "wght" 500;
  display: inline-block;
  cursor: pointer;
  color: white;
  padding: 8px 18px;
  text-decoration: none;
}

.tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
  display: none;
  pointer-events: none; /* Verhindert, dass das Tooltip interaktiv ist */
  z-index: 1000;
}

.horizontal {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}

.eb .horizontal {
  justify-content: space-between;
}

.eb-inhalt {
  padding-top: 5ddvh;
}

.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: 1px solid #000000;
  display: inline-block;
  cursor: pointer;
  color: #000000;
  padding: 6px 12px;
  text-decoration: none;
  font-size: 20px;
  line-height: 100%;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-button:hover {
  background-color: black;

  display: inline-block;
  cursor: pointer;
  color: white;
  line-height: 100%;
  text-decoration: none;
}
.eb-beschreibung {
  width: 25dvw;
  margin-left: 20px;
  margin-right: 100px;
}

.eb-beschreibung p {
  line-height: 1.35rem;
  font-size: 1.125rem;
}

.eb-text {
  width: 75%;
  margin-left: 2%;
  margin-top: 0.5dvh;
  margin-bottom: 2dvh;
  line-height: 1.35rem;
  font-size: 1.125rem;
}

.i-rechts {
  font-family: "swear-display-cilati", sans-serif;
  font-weight: 500;
  font-style: normal;
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  text-align: center;
  width: 2rem;
  height: 3rem;
  color: white;
  font-size: 3rem;
  background: none;
  border: black;
  transition: font-size 0.5s ease;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

@keyframes slide-in-blurred-top {
  0% {
    transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 0%;
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}

.slidein {
  animation: slide-in-blurred-top-normal 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s
    1 normal both;
}

body::before {
  background: var(--border-horizontal), var(--border-vertical);
}

.logo img:hover {
  fill: rgb(223, 223, 223);
}

.intro-container {
  top: 0;
  left: 0;
  position: absolute;
  width: 100dvw;
  height: 100dvh;
  opacity: 1;
  transition: opacity 1s ease-out;
  z-index: 10000;
}

.background-intro {
  background-color: #000000;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  opacity: 0.5;
  animation: fadeOut2 3.3s 0s ease-in-out forwards,
    fadeOut 0.5s 3.5s ease-out forwards;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background-image: url("bag.jpg"); /* Ersetze mit deinem Bild-URL */
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 3s ease-out;
  z-index: -100000;
  animation: fadeOut 0.5s 3.3s ease-out forwards;
}

.svg-animation {
  height: 26dvh;
  width: auto;
  fill-opacity: 0;
  fill: white;
  stroke: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  stroke-dasharray: 0 700;
  z-index: 1003;
  animation: draw 2s 0s ease-out forwards, fillc 0.2s 2.5s ease-out forwards,
    höhe1 0.2s 2.5s ease-out forwards, höhe2 0.5s 3.25s ease-out forwards,
    fadeOut 0.5s 3.25s ease-out forwards;
}

.svg-animation2 {
  height: 24dvh;
  width: auto;
  fill-opacity: 0;
  fill: rgb(255, 255, 255);
  stroke: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  stroke-dasharray: 0 700;
  z-index: 1002;
  animation: draw 2s 0s ease-out forwards, höhe1 0.3s 2.4s ease-out forwards,
    fadeOut 0s 2.8s forwards;
}

.svg-animation3 {
  height: 22dvh;
  width: auto;
  fill-opacity: 0;
  fill: white;
  stroke: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  z-index: 1001;
  stroke-dasharray: 0 700;
  animation: draw 2s ease-out forwards, höhe1 0.4s 2.3s ease-out forwards,
    fadeOut 0s 2.8s forwards;
}

@keyframes moveRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100dvw);
    opacity: 0;
  }
}

@keyframes draw {
  to {
    stroke-dasharray: 700 0;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

@keyframes fadeOut2 {
  to {
    opacity: 1;
  }
}

@keyframes fillc {
  to {
    fill-opacity: 1;
  }
}

@keyframes höhe1 {
  to {
    height: 26.4dvh;
  }
}
@keyframes höhe2 {
  to {
    height: 22dvh;
  }
}

/*index*/

.burger {
  display: none;
}

.start1 {
  animation: verg 0.7s 7.5s ease-in-out;
}
.start2 {
  animation: verg 0.7s 8s ease-in-out;
}
.start3 {
  animation: verg 0.7s 8.5s ease-in-out;
}
.start4 {
  animation: fül 0.7s 9s ease-in-out;
}

.start1 li {
  animation: farb 0.7s 7.5s ease-in-out;
}
.start2 li {
  animation: farb 0.7s 8s ease-in-out;
}
.start3 li {
  animation: farb 0.7s 8.5s ease-in-out;
}

@keyframes verg {
  from,
  to {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
@keyframes fül {
  from,
  to {
    fill: black;
  }
  50% {
    fill: white;
  }
}
@keyframes farb {
  from,
  to {
    color: black;
  }
  50% {
    color: white;
  }
}

.texthome {
  display: flex;
  height: inherit;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.texthome h1 {
  width: 0;
  display: inline-block; /* Nur so breit wie der Text */
  color: white;
  overflow: hidden;
  border-right: 0.15em solid rgb(255, 255, 255);
  white-space: nowrap;
  letter-spacing: 0.15em;
  animation: typing 3.5s 3.7s steps(31, end) forwards,
    blink-caret 0.75s step-end infinite;
}

/* Der Tipp-Effekt mit dynamischer Breite */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 35.5ch;
  } /* Anzahl der Zeichen anpassen */
}

/* Der blinkende Cursor-Effekt */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: rgb(255, 255, 255);
  }
}

.thumbnail {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 200px;
  transform-origin: top left;
  animation: fall linear infinite;
  display: none;
  animation-play-state: running;
}

.thumbnail:hover {
  cursor: pointer;
  transform: scale(1.1);
}

@keyframes fall {
  0% {
    transform: translateY(-150px);
  }
  100% {
    transform: translateY(100dvh);
  }
}

/* kontakt*/
.kontakt {
  width: inherit;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.formular {
  min-height: 50%;
  height: auto;
  width: 50%;
  padding: 2rem;
  background-image: url("bag2.jpg");
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2),
    0 6px 20px 0 rgba(255, 255, 255, 0.19);
  border-radius: 10px;
  font-size: 1.1rem;
}
.formular h1 {
  font-family: "jali-latin-variable", sans-serif;
  font-variation-settings: "wght" 450;
}

.formular p {
  margin-top: 2%;
}

#contact-form {
  margin-top: 15px;
  width: 100%;
  height: 100%;
  font-size: 1rem;
}
#name {
  margin: 1px;
  margin-left: 5px;
  padding: 8px 10px;
  width: 50%;
  font-size: 1rem;
}

#email {
  margin: 1px;
  margin-left: 5px;
  padding: 8px 10px;
  width: 50%;
  font-size: 1rem;
}
#message {
  margin: 1px;
  margin-top: 5px;

  padding: 8px 10px;
  width: 100%;
  height: 20dvh;
  font-size: 1rem;
  resize: none;
}
.abschicken {
  margin: 3px;
  margin-right: 8px;
  background-color: black;
  border: 1px solid #000000;
  display: inline-block;
  cursor: pointer;
  color: white;
  padding: 8px 18px;
  text-decoration: none;
  font-family: "jali-latin-variable", sans-serif;
  font-variation-settings: "wght" 400;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.abschicken:hover {
  background-color: white;

  display: inline-block;
  cursor: pointer;
  color: black;
  padding: 8px 18px;
  text-decoration: none;
  transform: scale(1.1);
}

/*about*/
.über {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

mark {
  background-color: lightgray; /* Hellgraue Markierung */
}

.profile-container {
  position: relative;
  z-index: 100;
  width: 25%;
  height: 100%;
  right: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("ichbg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.profile-image {
  width: auto;
  height: 90%;

  object-fit: cover;
  z-index: 1000;
}

#burger {
  display: none;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Linke Boxen */
.left1 {
  top: 10%;
  left: 12%;
}
.left2 {
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
} /* Weiter links wie bei einem Kreis */
.left3 {
  top: 70%;
  left: 12%;
}

/* Rechte Boxen */
.right1 {
  top: 10%;
  right: 7.5%;
  z-index: 1;
}
.box2.left3 {
  text-align: left;
}

.box3 {
  width: 40%;
  height: fit-content;

  position: absolute;
  display: flex;
  flex-direction: column;
  background-image: url("bag2.jpg");
  border-radius: 10px;
  padding: 2% 2%;
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2),
    0 6px 20px 0 rgba(255, 255, 255, 0.19);
}

.box3 h1 {
  color: black;
  font-size: 2.25rem;
  font-family: "jali-latin-variable", sans-serif;
  font-variation-settings: "wght" 450;
}
.box3 .erstesp {
  margin-top: 2%;
}
.box3 .letztesp {
  margin-bottom: 1%;
}
.box3 p {
  text-align: left;
  margin-bottom: 1%;
  /* margin-left: 3%; */
  line-height: 1.9rem;

  font-size: 1.4rem;
}

.box2 {
  z-index: 101;
  position: absolute;
  text-align: center;
}

.box2 h1 {
  color: white;
}
.box2 h2 {
  color: white;
}

.line-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  pointer-events: none;
  z-index: 10; /* Bringt SVG über die Boxen */
}

line {
  display: absolute;
}

#fähigkeiten {
  margin-top: 0.25rem;
  text-align: left;
  line-height: 1.9rem;
  margin-left: 15%;
  color: white;
  font-family: "jali-latin-variable", sans-serif;
  font-variation-settings: "wght" 480;
  font-size: 1.25rem;
}

strong {
  font-variation-settings: "wght" 500;
}

.pc {
  display: block;
}

.nopc {
  display: none;
}

@media screen and (min-width: 1300px) {
  .eb-scroll {
    overflow-y: scroll;
  }
}

@media screen and (max-width: 1400px) {
  .box3 h1 {
    color: black;
    font-size: 2rem;
  }
  .box3 p {
    line-height: 1.8rem;
    font-size: 1.2rem;
  }
}

@media screen and (max-height: 900px) {
  .box3 h1 {
    color: black;
    font-size: 2rem;
  }
  .box3 p {
    line-height: 1.7rem;
    font-size: 1.2rem;
  }
  .right1 {
    top: 3%;
    right: 7.5%;
    z-index: 1;
  }
}

@media screen and (max-width: 1300px) {
  .container {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;

    height: 10dvh;

    flex-direction: row-reverse;

    padding: 1dvh;
  }
  .sidebar ul {
    margin-top: 0;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    list-style: none;
    font-size: 1.25rem;
    align-items: center;
    line-height: 100%;
  }

  h2 {
    font-variation-settings: "wght" 450;
  }
  #fähigkeiten {
    font-variation-settings: "wght" 450;
  }

  .sidebar li {
    padding: 0;
    cursor: pointer;
    transition: transform 0.3s ease;
    line-height: 8dvh;
  }

  .sidebar li:hover {
    transform: scale(1.1);
  }

  .logo {
    text-align: center;
    padding-top: 0px;
    height: 8dvh;
    width: auto;
    display: flex;
    justify-content: center;
  }
  .logo svg {
    height: auto;
    width: inherit;
    transition: fill 0.3s ease;
    fill: white;
  }

  .content {
    background-color: grey;
    background-image: url("bag.jpg");
    background-size: cover;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s ease-in-out;
  }

  .logo svg:hover {
    fill: white;
  }

  .pc {
    display: none;
  }
  .nopc {
    display: block;
  }

  .svg-animation {
    height: auto;
    width: 90dvw;
  }
  .svg-animation2 {
    height: auto;
    width: 86dvw;
  }
  .svg-animation3 {
    height: auto;
    width: 82dvw;
  }

  @keyframes höhe1 {
    to {
      height: auto;
      width: 91dvw;
    }
  }
  @keyframes höhe2 {
    to {
      height: auto;
      width: 82dvw;
    }
  }

  .formular {
    min-height: 50%;
    height: auto;
    width: 90%;
    padding: 2rem;
    background-image: url("bag2.jpg");
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2),
      0 6px 20px 0 rgba(255, 255, 255, 0.19);
    border-radius: 10px;
    font-size: 1.1rem;
  }

  .project:hover {
    background-image: url("bag2.jpg");
    flex: 0 0 8dvh; /* Vergrößert die Spalte bei Hover */
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2),
      0 6px 20px 0 rgba(255, 255, 255, 0.19);
  }

  .project-list {
    flex-direction: column;
    width: inherit;
    margin-top: 2px;
  }

  .project {
    flex: 0 0 6dvh;
    /*     background: rgb(179,179,179);
background: radial-gradient(circle, rgba(179,179,179,0.95) 0%, rgba(84,84,84,0.95) 100%);*/
    background: rgb(190, 190, 190);
    background: radial-gradient(
      circle,
      rgba(190, 190, 190, 0.95) 0%,
      rgba(0, 0, 0, 0.95) 100%
    );
    width: 100dvw;
    max-width: 100dvw;
    min-width: 100dvw;
    margin: 2px 0;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    height: 50%;
    position: relative;
    font-size: 1.5rem;
    white-space: inherit;
    overflow: hidden;
    text-overflow: clip;
    transition: background 0.3s, flex 0.5s, filter 0.5s ease-in-out;
  }

  .project p {
    transform: rotate(0); /* Drehung des Textes um 90 Grad */
    transform-origin: center; /* Bestimmt den Drehpunkt */
    display: inline;
  }

  .horizontal {
    margin-bottom: 3dvh;
  }

  .eb-inhalt {
    padding-top: 0;
    flex-direction: column;
    overflow-y: scroll;
    max-height: 73dvh;
    min-height: 0;
    margin: 0 1.5dvw;
  }

  .eb.open {
    margin: 5dvw 5dvw;
  }

  .eb-beschreibung {
    width: 81dvw;
    display: inline;
    margin-right: 20px;
    margin-left: 1dvw;
    margin-bottom: 4dvh;
  }
  .eb-beschreibung p {
    margin-left: 2%;
  }

  .eb-text {
    width: 100%;
  }

  .eb-scroll {
    width: 81dvw;

    margin-left: 1dvw;
  }

  .eb-inhalt::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .eb-inhalt::-webkit-scrollbar-track {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
  }
  .eb-inhalt::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }
  .eb-inhalt::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
  }
  .eb-inhalt::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.9);
  }

  .nav-button {
    position: absolute;
    top: 86dvh;
    transform: translateY(-50%);
    background-color: transparent;
    border: 1px solid #000000;
    display: inline-block;
    cursor: pointer;
    color: #000000;
    padding: 8px 30px;
    text-decoration: none;
    font-size: 18px;
    line-height: 100%;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .prev {
    left: 5dvw;
  }

  .next {
    right: 5dvw;
  }

  .eb-scroll video {
    margin-left: 3%;
    width: 94%;
    height: auto;
    margin-bottom: 4%;
  }
  .eb-scroll .einzelimg {
    margin-left: 2%;
    width: 96%;
    height: auto;
    max-width: 80dvw;
  }

  .bildermittig .einzelimgmid {
    margin-inline: auto;
    width: auto;
    height: auto;
    max-height: 65dvh;
    max-width: 70dvw;
  }

  .bildermittig {
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;
    height: fit-content;
    margin-bottom: 4%;
  }
  .dreierreihe img {
    margin-inline: 1px;
    width: 33%;
    height: auto;
  }

  .zweierreihe img {
    width: 50%;
    height: auto;
  }

  .project.open {
    flex: 0 0 90dvh; /* Maximale Breite beim Öffnen des Projekts */
    justify-content: center;
    margin: 0;
    background-image: url("bag2.jpg");
    background-attachment: fixed;
    width: 100%;
  }

  .project.close {
    flex: 0; /* Minimale Breite beim Schließen des Projekts */
    margin: 0;
  }

  .project-list .project.open ~ .project {
    transform: translateY(-100%); /* Verschiebt alle Projekte nach links */
  }

  .content.imüber {
    overflow-y: scroll;
    padding-bottom: 5dvh;
    height: 230dvh;
  }

  .content.imüber::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .content.imüber::-webkit-scrollbar-track {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
  }
  .content.imüber::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }
  .content.imüber::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
  }
  .content.imüber::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.9);
  }

  .link-nein {
    color: white;
  }

  .left1 {
    top: 8%;
    left: 12%;
  }
  .left2 {
    top: 26%;
    left: 6%;
    transform: translateY(0);
  } /* Weiter links wie bei einem Kreis */
  .left3 {
    top: 44%;
    left: 12%;
  }

  .profile-container {
    left: 20dvw;
    bottom: 8dvh;
  }

  .right1 {
    top: 75%;
    right: 5dvw;
  }
  .box3 {
    width: 90dvw;
  }

  line {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  h1 {
    font-size: 1.4rem;
  }

  h2 {
    font-variation-settings: "wght" 420;
    font-size: 1.2rem;
  }

  .eb-beschreibung p {
    font-size: 1rem;
  }

  #name {
    width: 70%;
  }
  #email {
    width: 70%;
  }

  p {
    font-size: 1rem;
  }

  .texthome h1 {
    font-size: 1.1rem;
  }

  #fähigkeiten {
    font-size: 1.2rem;
    font-variation-settings: "wght" 420;
  }
  .profile-container {
    left: 28dvw;
    bottom: 12dvh;
    height: 80%;
    right: 0dvw;
  }
  .nopc {
    fill: white;
  }

  .left1 {
    top: 8%;
    left: 12%;
  }
  .left2 {
    top: 23%;
    left: 2%;
    transform: translateY(0);
  } /* Weiter links wie bei einem Kreis */
  .left3 {
    top: 35%;
    left: 8%;
  }

  .right1 {
    top: 70%;
    right: 2.5dvw;
  }

  .box3 h1 {
    font-size: 2rem;
  }

  .box3 p {
    font-size: 1rem;
    line-height: 1.4rem;
  }
  .start1 {
    animation: none;
  }
  .start2 {
    animation: none;
  }
  .start3 {
    animation: none;
  }
  .start4 {
    animation: none;
  }

  .start1 li {
    animation: none;
  }
  .start2 li {
    animation: none;
  }
  .start3 li {
    animation: none;
  }

  .project {
    flex: 0 0 6dvh;
    /*     background: rgb(179,179,179);
background: radial-gradient(circle, rgba(179,179,179,0.95) 0%, rgba(84,84,84,0.95) 100%);*/
    background: rgb(190, 190, 190);
    background: radial-gradient(
      circle,
      rgba(190, 190, 190, 0.95) 0%,
      rgba(0, 0, 0, 0.95) 100%
    );
    width: 100dvw;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    height: 50%;
    position: relative;
    font-size: 1.5rem;
    white-space: inherit;
    overflow: hidden;
    text-overflow: clip;
    transition: background 0.3s, flex 0.5s, filter 0.5s ease-in-out;
  }
  .eb.open {
    margin: 5dvw 1dvw 7dvw 1dvw;
  }

  .eb-scroll video {
    margin-left: 0;
    width: 88dvw;
    height: auto;
    margin-bottom: 4%;
  }
  .eb-scroll .einzelimg {
    margin-left: 2%;
    
    height: auto;
    max-width: 88dvw;
    width: 88dvw;
  }

  .bildermittig .einzelimgmid {
    margin-inline: auto;
    width: auto;
    height: auto;
    max-height: 80dvh;
    max-width: 90dvw;
  }

  .bildermittig {
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;
    height: fit-content;
    margin-bottom: 4%;
    width: 89dvw;
  }
  .dreierreihe img {
    margin-inline: 1px;
    width: 33%;
    height: auto;
  }

  .horizontal {
    margin-bottom: 2dvh;
    padding-inline: 2px;
  }

  .eb-scroll .zweierreihe{
    width: 88dvw;
    margin-bottom: 9%;
  }

  .eb-scroll .dreierreihe{
    width: 88dvw;
    margin-bottom: 9%;
  }

  .zweierreihe img {
    width: 50%;
    height: auto;
  }

  .burger {
    display: block;
    height: 8dvh;
    width: auto;
  }

  .normal {
    display: none;
  }
  html {
    overflow: hidden;
  }
  body {
    overflow: hidden;
  }
  .container {
    overflow: hidden;
  }
  .sidebar ul {
    flex-direction: column;
    font-size: 1rem;
    gap: 1dvh;
    padding-block: 1dvh;
  }

  .sidebar {
    flex-direction: row;
    overflow: visible;
    height: fit-content;
    transform: translateZ(50px);
    align-items: center;
    z-index: 1000;
  }

  

  .sidebar li {
    line-height: calc(10dvh / 3);
  }
  #burger {
    z-index: 900;
    background-color: #333;
    position: absolute;
    width: inherit;
    margin-left: -1dvh;
    transform: translate(200%, 11.9dvh);
    transition: transform 0.3s ease;
    max-width: calc(100dvw - 6px);
    height: auto;
    display: block;
  }

  #burger.ausgefahren {
    transform: translate(0%, 11.9dvh);
  }

  .link-nein {
    color: white;
  }

  .burger {
    width: 4dvh;
    height: 4dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    margin-right: 8px;
  }

  .burger span {
    width: 100%;
    height: 3px;
    background: white;
    transition: 0.3s ease-in-out;
    position: absolute;
  }

  .eb-inhalt {
    max-height: 71dvh;
  }

  .burger span:nth-child(1) {
    top: 0; /* Obere Linie bleibt oben */
  }

  .burger span:nth-child(2) {
    top: 50%; /* Mittlere Linie in der Mitte */
    transform: translateY(-50%); /* Ausrichten der Mitte */
  }

  .burger span:nth-child(3) {
    bottom: 0; /* Untere Linie bleibt unten */
  }

  /* Burger-Menü wird aktiv und verändert sich */
  .burger.active span:nth-child(1) {
    transform: translateY(1.8dvh) rotate(45deg);
    background-color: white; /* Obere Linie bewegt sich nach unten rechts */
  }

  .burger.active span:nth-child(2) {
    opacity: 0; /* Mittlere Linie wird unsichtbar */
  }

  .burger.active span:nth-child(3) {
    transform: translateY(-1.8dvh) rotate(-45deg);
    background-color: white; /* Untere Linie bewegt sich nach oben links */
  }

  @media screen and (max-width: 400px) {
    .nav-button {
      padding: 6px 20px;
    }
  }
}