body {
  background-color: #0c0c14; 
  color: #ffffff; /* Weiße Schriftfarbe, um Lesbarkeit sicherzustellen */
  overflow: scroll;
}
html {
  scrollbar-gutter: stable;
}



* {
  border: none;
}

.card:not(.inner-card,.card1,.card4,.card5,.card2,.card7,.special-color) {
  padding: 2em;
  width: auto;
  background: #2a2935;
  text-align: center;
  border-radius: 10px;
  position: relative;
}

.card4{
  padding: 2em;
  width: auto;
  background:#2a2935;
  text-align: center;
  border-radius: 10px;
  position: relative;
  text-decoration: none;
}
.main-image {
  width: 100%;

}

.neon{
  fill: white;
  text-shadow: 0 0 10px #fff;
}


.card1,.card7{
  text-align: left;
  padding: 2em;
  width: auto;
  background: linear-gradient(45deg,#2a2935, #1f1e27);
  border-radius: 10px;
  position: relative;
}
.heading-left {
  position: relative;
  top:-15%;
}
.Erfahrung {
  top:-5%;
}
.text-left {
  position: relative;
  top:-15%;
  opacity: 0.6;
}


.card2{
  width: auto;
  background: #2a2935;
  text-align: center;
  border-radius: 10px;
  position: relative;
}

.card-image {
  object-fit: cover;
  width: 100%; /* Bild nimmt die volle Breite der Karte ein */
  height: 100%; /* Höhe wird automatisch angepasst */
  border-radius: 10px; /* Gleiche abgerundete Ecken wie die Karte */
}

.special-color { 
  background-color: rgb(60, 92, 119);
  padding: 2em;
  width: auto;
  text-align: center;
  border-radius: 10px;
  position: relative;
}

.großer-text {
  font-size: 24px;
  color: rgb(104, 163, 211);
  line-height: 0.3;
  font-weight: bold;
}
.text-normal {
  opacity: 0.6;

}


@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.container:not(.container2) {
  width: 60%;
  height: 60%;
  max-width: 1200px;
  max-height: 1080px;
  margin: 1vw auto;
  padding: 10px;
  display: grid;
  grid-template-columns: 0.25fr 1fr 1fr 1fr 0.25fr;
  grid-template-rows: 0.25fr 1fr 0.5fr 0.5fr 1fr 0.25fr;
  column-gap: 30px;
  row-gap: 30px;
  grid-template-areas: 
    ".   .     .   area2 ."
    ". area1 area1 area2 ."
    "area3 area3 area4 area2 ."
    ". area5 area4 area6 area6"
    ". area5 area7 area7 ."
    ". area5   .     .   .";
  justify-content: center;
}

.card1 { grid-area: area1; } 
.card2 { grid-area: area2; } 
.card3 { grid-area: area3; } 
.card4 { grid-area: area4; } 
.card5 { grid-area: area5; } 
.card6 { grid-area: area6; } 
.card7 { grid-area: area7; }

.card4::after, .card4::before { 
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle),
   rgb(60, 92, 119),
   rgb(255, 255, 255),
   rgb(60, 92, 119),
   rgb(255, 255, 255),
   rgb(60, 92, 119));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 5px;
  border-radius: 13px;
  animation: 5s spin linear infinite;
}
.card4::before {
  filter: blur(1rem);
  opacity: 0.6;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

.card:not(.special-color, .card4, .inner-card1, .inner-card2, .inner-card3, .inner-card4):hover {
  background-color: #3a3a4a; 
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
  transform: translateY(-5px); /* Hebt die Karte leicht an */
  transition: all 0.1s ease-in-out; 
}

.card5:hover .inner-card {
  background-color: #2e2e3a; 
  border-color:rgb(71, 110, 141) ;
}

.card5:hover .logo-text  {
  opacity: 1;
}
.card5:hover .beschreibung-text {
  opacity: 1;
}



.card1:hover .text-left {
  opacity: 1;
}
.card7:hover .großer-text {
  text-shadow: 0 0 5px rgb(74, 150, 160);
}
.card7:hover .text-normal {
  opacity: 1;
}
.card:hover .h1 {
  text-shadow: 
    0 0 5px #d4edff;

}


.special-color:hover { 
  background-color: rgb(71, 110, 141);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
  transform: translateY(-5px); /* Hebt die Karte leicht an */
  transition: all 0.1s ease-in-out; 
}

.no-wrap {
  white-space: nowrap; 
}

.hiding {
  color: transparent;
}

.card5 {
  position: relative;
  background: linear-gradient(45deg,#2a2935, #1f1e27);
  padding: 2em;
  width: auto;
  text-align: center;
  border-radius: 10px;
  position: relative;
}

.card4::after, .card4::before {
  transition: all 0.2s ease-in; /* Längere Übergangszeit für sanfteren Effekt */
  
}

.card4:hover::after {
  padding: 6px;
}

.card4:hover::before {
  padding: 20px;
  opacity: 0.4;
}



.container2 {
  position: absolute; 
  top: 66%; 
  left: 48%;
  transform: translate(-50%, -50%); 
  width: 92%; 
  height: 60%; 
  border-bottom-right-radius: 10px;
  text-align: center; /* Zentriert den Text innerhalb der Karte */
  color: white; /* Beispieltextfarbe */
  display: flex;
  flex-direction: column; 
  justify-content: center; /* Zentriert die inneren Karten vertikal */
  align-items: center ; /* Zentriert die inneren Karten horizontal */
  gap: 10px; /* Abstand zwischen den inneren Karten */
  padding: 20px; /* Optionaler Innenabstand */
  overflow-x: hidden;
  overflow-y: scroll;
  direction: rtl;
  
  
}


.inner-card {
  background-color: #2f2e3b;
  width: 80%;
  height: 86px;
  padding: 2.5em;
  border-radius: 10px;
  position: relative; 
  border-color: rgb(60, 92, 119);
  border-style: solid;
  overflow: hidden;
  display: flex;
  align-items: center;
  direction: ltr;
  box-shadow: 0px 0px 8px  rgb(0, 0, 0)
 
}

.logo {grid-area: i-area1;}
.logo-text {grid-area: i-area2;}
.beschreibung-text {grid-area: i-area3;}

.container2 .inner-card:first-of-type {
  margin-top: 60%; /* Verschiebt das erste Element nach unten */
}
.Logo {
  position: relative;
  width: 25%;
  height: auto;
  left: -25px;
  margin-right: 25px ;
}

.logo-text {
  position: relative;
  width: 30%;
  opacity: 0.6;
  
}
.beschreibung-text {
  position: relative;
  width: 30%;
  left: 25px;
  opacity: 0.6;

}



::-webkit-scrollbar{
  width: 0.7em;
}
::-webkit-scrollbar-track {
  background: rgb(50, 77, 99);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgb(86, 133, 172);
  border-radius: 10px;
}


.container3 {
  position: fixed;
  background-color: #2a2935;
  width: 200px;
  height: 40px;
  top: 4%;
  left: 50%;
  translate: -50% -50%;
  margin: 50px auto;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  box-shadow: 0px 0px 8px  rgb(0, 0, 0);
  align-items: center;
  z-index: 4;
}
.hotbar-buttons{
  position:relative;
  background-color:#3a3a4a;
  width: 45%;
  height: 100%;
  border-radius: 8px;
  color: rgb(71, 110, 141) ;
  border: #ffffff;
  font-size: 17px;
}
.button1 {
  right: 3.5%;
  background-color: #a7a7a7;
  text-shadow: 0 0 5px rgb(126, 208, 255),
  0 0 10px rgb(126, 208, 255),
  0 0 15px rgb(126, 208, 255);
  box-shadow: 0px 0px 8px  rgb(0, 0, 0);
}
.button2 {
  left: 3.5%;
  text-align: center;
  font-size: 17px;
  text-decoration: none;
}
.projekte-text {
  font-size: 20px;
  position: relative;
  top: 7px;
}
.main-text{
  color: white;

}