@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
:root {
  --back: #62542c;
  --usedColor: #ff8000;
  --durationCy: 2000;
  --test: rgb(247, 194, 2);
  --test2: #614f23a2;
  --shadow: inset 0 0 10px 3px rgba(11, 8, 1, 0);
  --outline: #9c713093;
  --can: false;
  --insets: 10%;
  --t: false;
  --f: url("../pictures/Snapinsta.app_436303921_965689075016814_3319110879304009634_n_1080.jpg");
}
.circle {
  display: flex;
  border-radius: 50%;
  background: conic-gradient(var(--usedColor) var(--p), var(--outline) 0);
  --p: 0%;
  --t: false;
  --can: false;
  transition: --p calc(var(--durationCy) * 1ms) linear;
  position: absolute;
  margin: auto;
  cursor: pointer;
  width: 200px; /* Beispiel: Breite des Kreises */
  height: 200px; /* Beispiel: Höhe des Kreises */
  background-size: cover; /* Das Bild wird so skaliert, dass es den gesamten Kreis bedeckt */
  background-position: center; /* Das Bild wird zentriert innerhalb des Kreises angezeigt */
}

.circle::before {
  position: absolute;
  content: '';
  inset: var(--insets); 
  border-radius: inherit;
  box-shadow: var(--shadow);
  background: var(--back);
  background-image: var(--f);
  background-size: cover; /* Das Bild wird so skaliert, dass es den gesamten Bereich des ::before Elements abdeckt */
  background-position: center; /* Das Bild wird zentriert innerhalb des ::before Elements angezeigt */
}

.circle.invert::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-size: inherit;
  background-position: center;
  filter: invert(1);
}

.textbox {
  position: absolute;
  pointer-events: none;
  background-color: #ffffffcc;
  color: #131313; /* Beispiel für eine dunklere Textfarbe */
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px #0000001a;
  display: none;
  max-width: 500px; /* Maximale Breite der Textbox */
  word-wrap: break-word; /* Umbruch langer Wörter */
  white-space: normal; /* Normale Behandlung des Textinhalts */
  min-width: 250px; /* Minimale Breite der Textbox */
  transform: translate(-50%, -100%); /* Zentrierung über dem Kreis */

  /* Zusätzliche Anpassungen für die Positionierung */
  left: 50%; /* Horizontal zentrieren */
  z-index: 200;
}

.skill-circle {
  position: absolute;
  top: 83%;
  left: 48.2%; /* Anpassen der horizontalen Position für das linke Quadrat */
  width: 70px; /* Beispiel: Breite des Skillpunkt-Kreises */
  height: 70px; /* Beispiel: Höhe des Skillpunkt-Kreises */
  border-radius: 50%;
  background-color: #654801; /* Beispiel: Hintergrundfarbe des Skillpunkt-Kreises */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white; /* Beispiel: Textfarbe der Skillpunkte */
  font-size: 1.5rem; /* Beispiel: Schriftgröße der Skillpunkte */
  font-weight: bold; /* Beispiel: Schriftgewicht der Skillpunkte */
  box-shadow: inset 0 0 17px 10px rgba(198, 155, 2, 0.758); /* Weißer Schimmer an den Rändern */
}

.golden-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -500%); /* Zentrierung über dem Kreis */
  color: rgb(200, 171, 3);
  font-size: 1.2rem;
  font-weight: normal;
  min-width: 250px; /* Minimale Breite der Textbox */
  text-align: center;
}

.golden-textlinks {
  position: absolute;
  top: 84%;
  left: -24%;
  transform: rotate(315deg);
  color: rgb(200, 171, 3);
  font-size: 1.2rem;
  font-weight: normal;
  min-width: 250px; /* Minimale Breite der Textbox */
  text-align: center;
}

.golden-textrechts {
  position: absolute;
  top: 0.5%;
  left: 59.5%;
  transform: rotate(315deg);
  color: rgb(200, 171, 3);
  font-size: 1.2rem;
  font-weight: normal;
  min-width: 250px; /* Minimale Breite der Textbox */
  text-align: center;
}

.golden-number {
  position: absolute;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -110%); /* Zentrierung über dem Kreis */
  color: rgb(200, 171, 3);
  font-size: 3.5rem;
  font-weight: bold;
  text-align: center;
}

.circle:hover .textbox {
  display: block; /* Bei Hover sichtbar machen */
}

.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
  filter: brightness(.2);
}

body{
  height: 100vh;
  display: none; /* grid */
  place-content: center;
  user-select: none;
  z-index: 10;
  -moz-user-select: none;
  -webkit-user-select: none;
  overflow: hidden; /* Verhindert Scrollbalken */
}

figcaption{
  text-align: center;
  margin-top: 30px;
  font: 12pt 'Enriqueta';
}
/* Äußere schwarze Linie */
.line-outer {
  z-index: 5;
}

/* Innere graue Linie */
.line-inner {
  z-index: 0;
  animation: ""; /* Animation für Höhenwachstum */
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.img-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 100% der Viewport-Höhe */
  width: 100vw; /* 100% der Viewport-Breite */
  overflow: hidden; /* Überlauf verstecken, falls das Bild größer ist */
  position: relative;
  background-color: black; /* Fallback-Hintergrundfarbe */
}

.img-center img {
  height: 100%;
  width: 100%;
  object-fit: cover; /* Das Bild wird so skaliert, dass es den gesamten Container ausfüllt */
  filter: brightness(0.5);
  pointer-events: none;
}

.img-center::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Schwarzes Overlay mit 50% Deckkraft */
  pointer-events: none;
}

.overlay {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset 0 0 130px 20px rgba(219, 163, 8, 0.18); /* Weißer Schimmer an den Rändern */
  pointer-events: none; /* Stellt sicher, dass das Overlay keine Interaktionen blockiert */
}

.square {
  display: flex;
  position: absolute;
  width: 500px;
  height: 500px;
  background-color: #453a1d64; /* Hintergrundfarbe mit Transparenz */
  box-shadow: inset 0 0 130px 20px rgba(69, 58, 29, 0.33);; /* Weißer Schimmer an den Rändern */
  transform: rotate(45deg); /* Drehung um 45 Grad */
}

.square.left {
  top: 50%;
  left: 12%; /* Anpassen der horizontalen Position für das linke Quadrat */
  transform: translateY(-30%) rotate(45deg);
}

.square.right {
  top: 50%;
  right: 12%; /* Anpassen der horizontalen Position für das rechte Quadrat */
  transform: translateY(-30%) rotate(45deg);
}

progress {
  display: block; /* block*/
  position: absolute;
  top: 88%;
  left: 41%;
  width: 18%;
  margin: 2em auto;
  border: 2px solid rgb(193, 190, 190); /* Schwarze Linie um das progress-Element */
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Schatten um das progress-Element */
}

#progressValue {
  display: block; /* block */
  position: absolute;
  top: 92%;
  left: 41%;
  width: 18%;
  text-align: center;
  color: white; /* Standard Textfarbe */
  font-size: 1em; /* Schriftgröße */
  font-weight: bold; /* Schriftgewicht */
  margin-top: 0.5em; /* Abstand zur Fortschrittsanzeige */
}

#progressValue .value {
  color: orange; /* Farbe für den aktuellen Wert */
}

#progressValue .max {
  color: white; /* Farbe für das Maximum */
}

progress::-moz-progress-bar {
  background: orange;

}
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  progress {
    height: 14px;
  }
}
progress::-webkit-progress-bar {
    background: transparent;
}  
progress::-webkit-progress-value {  
  background: orange;
}

@keyframes fadeIn {
  0% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}