@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
/* Grundlegende Button-Stilisierung */
button, 
input[type="button"], 
input[type="submit"], 
input[type="reset"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: none;
  color: #333;
  border: none;
  /* weitere Stile */
}

/* Spezifisch für iOS/Safari */
@supports (-webkit-touch-callout: none) {
  button, 
  input[type="button"], 
  input[type="submit"], 
  input[type="reset"] {
    background-color: none !important;
    color: #333 !important;
  }
}

html {
  scroll-behavior: smooth;
  background: #111;
}
body {
  font-family: "Josefin Sans", sans-serif;
  margin: 0;
  background: #aaa;
  overflow-x: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.background-fade {
  animation: backgroundFade 2s ease-out;
}
#overlay {
  z-index: 1500;
  pointer-events: none;
  touch-action: none;
  background: white;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  width: 100%;
  height: 100vh;
  transition: 1s 0.4s;
}
.overlay {
  background: radial-gradient(ellipse, rgba(170, 170, 170, 0) 0%, rgba(65, 65, 65, 1) 100%);
  mix-blend-mode: difference;
  pointer-events: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
}
.blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 110;
  pointer-events: none;
  transition: backdrop-filter 0.25s ease, background-color 1s ease-out;
}
.blur-overlay.blur {
  backdrop-filter: blur(3px);
  background-color: rgba(0, 0, 0, 0.33);
}
.preload-counter {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  display: flex;
  height: calc(100vh - 100px);
  padding-left: 15px;
  align-items: center;
}
#progressBar:before {
  position: fixed;
  content: '';
  left: 0px;
  width: 4px;
  bottom: 0;
  height: 0;
}
#progressBar {
  position: fixed;
  z-index: 99998;
  bottom: 0;
  left: 0;
  width: 4px;
  height: 0%;
  background: #2C9879;
  -moz-transition: height 500ms ease-out, 400ms linear;
  -ms-transition: height 500ms ease-out, 400ms linear;
  -o-transition: height 500ms ease-out, 400ms linear;
  -webkit-transition: height 500ms ease-out, 400ms linear;
  transition: height 500ms ease-out, 400ms linear;
}
@keyframes backgroundFade {
  0% {
    background: #fff;
  }
  100% {
    background: #aaa;
  }
}
.hexagon {
  position: absolute;
  width: 78px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
  opacity: 0;
  transform: translateY(100px);
}
.hexagon svg {
  width: 100%;
  height: 100%;
}
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(var(--slide-distance));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#cursor {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  z-index: 101;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: none;
}
#cursor.animateCursor {
  animation: ripple 1.25s ease;
}
.page-container {
  display: flex;
}
.nav-spacer {
  width: 240px;
}
aside {
  background: #5a6f69;
  backdrop-filter: blur(3px);
  padding: 60px 20px 0 0;
  width: 220px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 111;
}
main {
  flex: 1;
  position: relative;
  z-index: 105;
}
.header {
  position: fixed;
  z-index: 106;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  opacity: 0;
  transition: opacity 1s ease;
  background: linear-gradient(180deg, #AAAAAA 33%, rgba(255, 255, 255, 0) 100%);
}
.current-id-display {
  position: fixed;
  top: 50px;
  left: 240px;
  right: 0;
  color: #666;
  z-index: 109;
  padding: 0 20px;
  font-size: 16px;
  font-weight: bold;
  max-width: 1200px;
  margin: 0 auto;
  text-align: right;
  opacity: 1;
  text-transform: uppercase;
  transform: translateX(0);
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.current-id-display.changing {
  transform: translateX(100px);
  background: rgba(134, 134, 134, 0);
  color: rgba(255, 255, 255, 0);
}
.menu-button {
  display: none;
  position: fixed;
  top: 15px;
  left: 15px;
  font-size: 24px;
  z-index: 1100;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: left 0.3s ease;
}
.menu-icon, .arrow-icon {
  display: none;
  font-size: 24px;
}
/* Standard: Menu-Icon zeigen */
.menu-icon {
  display: block;
}
/* Wenn offen: Pfeil zeigen */
.menu-button.open .menu-icon {
  display: none;
}
.menu-button.open .arrow-icon {
  color: #fff;
  display: block;
  margin-left: -100px;
}
.content-wrapper {
  flex: 1;
  margin: 0 auto;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hexagon-grid {
  position: fixed;
  z-index: 102;
  left: 240px;
  width: calc(100% - 240px);
  height: 100vh;
  overflow: hidden;
}
main > div {
  min-height: 100vh;
  color: #666;
  display: flex;
  align-items: center;
}
main .content-section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  max-width: 1200px;
  opacity: 0;
  line-height: 1.25;
  transform: translateY(20px);
  transition: opacity 2.5s ease-in, transform 1s ease;
  gap: 1rem;
}
.content-section.visible, .header.visible {
  opacity: 1;
  transform: translateY(0);
}
main .content-section .text {
  width: 68%;
  padding: 20px;
}
main .content-section .text-curri {
  width: 50%;
  padding: 20px;
}
main .content-section .image {
  width: 38%;
  padding: 20px;
}
main .content-section .text, main .content-section .text-curri {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 20px;
  font-size: 16px;
  color: #333;
}

main .content-section .text ul, main .content-section .text-curri ul {
  font-weight: normal;
  text-transform: none;
  font-size: 16px;
}

main .content-section .image img {
  margin-top: -100px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.text-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.text-wrapper {
  position: relative;
}
.preview-text {
  margin-bottom: 0;
}
.gradient-overlay {
  display: none;
}
.expand-button {
  display: none;
}
.full-text {
  margin-top: 0;
  display: block;
}
.logo img {
  width: 100%;
}
.justify {
  text-align: justify;
}
.left-justify {
  text-align: left;
}
.left, .mobile-left {
  width: 100%;
  text-align: left;
}
.small {
  font-weight: normal;
  font-size: 12px;
}
.set-top {
  padding-top: 150px;
} 

.set-top-kontakt {
  padding-top: 50px;
}

h2 {
  margin: 0;
}
main div:nth-child(odd) {}
main div:nth-child(even) {}
aside > ul {
  position: relative;
}
ul {
  list-style-type: none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  margin: 0;
}
a {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  color: #d9d8ce;
  position: relative;
  transition: all 0.2s ease-in-out;
}
a::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 0px;
  background: white;
  top: 12px;
  left: -16px;
  transition: width 0.2s ease-in-out;
}
a.sub-list::before {
  left: -56px;
}
/* --------------------------- */
/* Styling for active nav item */
/* --------------------------- */
.active a {
  color: white;
  transform: translateX(16px);
}
.active a::before {
  width: 12px;
}
.active a.sub-list::before {
  width: 52px;
}
#nav-active-marker {
  position: absolute;
  top: 33.5px;
  left: 18px;
  color: white;
  display: flex;
  font-size: 14px;
  align-items: center;
  transition: top 0.2s ease-in-out;
}
.timelines {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
h2.timeline-title {
  width: 100%;
  color: #ccc;
  font-size: 1.5em;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 25px;
  background: linear-gradient(90deg, rgba(90, 111, 105, 1) 0%, rgba(255, 255, 255, 0) 85%);
  text-transform: uppercase;
}
ul.timeline-items {
  list-style-type: none;
  margin: 2em;
  padding: 0.01em 1em 3em 2em;
  border-left: 1px solid #5a6f69;
}
li.timeline-item {
  margin-bottom: 2em;
  margin-top: -0.3em;
}
li.timeline-item h3 {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
  position: relative;
}
li.timeline-item h3::before {
  content: "";
  position: absolute;
  left: -39px;
  background-color: #aaa;
  border: 2px solid #5a6f69;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-0.5px, 0.2em);
}
li.timeline-item > * {
  margin: 1em 0;
}
li.timeline-item .location {
  font-size: 12px;
  font-weight: normal;
  font-style: italic;
}
/* --------------------------- */
/* Footer                      */
/* --------------------------- */
footer {
  position: relative;
  left: -320px;
  width: calc(100% + 1200px);
  height: 200px;
  background: linear-gradient(180deg, rgba(170, 170, 170, 0) 0%, #fff 100%);
}
.content-cal {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.pulse {
  position: fixed;
  top: 0;
  left: 240px;
  right: 0;
  width: 50%;
  height: 90vh;
  margin: 0 auto;
  border-radius: 50%;
  background: none;
  pointer-events: none;
}

 .text-indent-list {
  list-style: none;
  padding-left: 0;
}
        
.text-indent-list li {
  padding-left: 1em; /* Abstand für das Minuszeichen */
  text-indent: -1em; /* Negativer Einzug für das Minuszeichen */

}

.gallery {
  position: relative;
  width: 458px;
  margin: -300px auto 0 auto;
}

    .hexagons-container {
      position: relative;
      width: 458px; /* 25% kleiner als 611px */
      height: 284px; /* 25% kleiner als 378px */
    }

    .clipped-border {
      -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
      clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
      padding: 5px;
      background: linear-gradient(grey, lightgrey);
      width: 157.5px; /* 25% kleiner als 210px */
      height: 157.5px; /* 25% kleiner als 210px */
      transition: transform 0.2s;
      position: absolute;
      cursor: pointer;
    }

    .clipped-border:before {
      content: '';
      position: absolute;
      opacity: 0.5;
      width: 275.25px; /* 25% kleiner als 367px */
      height: 54.75px; /* 25% kleiner als 73px */
      background: white;
      top: 0;
      left: 0;
      z-index: 1;
      transform: rotate(45deg);
      transition: transform 0.5s;
    }

    .clipped-border:hover:before {
      transform: translate(-78.75px, 315%) rotate(45deg); /* 25% kleiner als -105px, 420% */
      transition: transform 0.5s;
    }

    /* Erste Reihe - alle Positionen um 25% verkleinert */
    .clipped-border:nth-child(1) {
      top: 0;
      left: 0;
    }

    .clipped-border:nth-child(3) {
      top: 0;
      left: 148.1px; /* 25% kleiner als 197.5px */
    }

    .clipped-border:nth-child(5) {
      top: 0;
      left: 296.2px; /* 25% kleiner als 395px */
    }

    /* Zweite Reihe - alle Positionen um 25% verkleinert */
    .clipped-border:nth-child(2) {
      top: 123.4px; /* 25% kleiner als 164.5px */
      left: 74.1px; /* 25% kleiner als 98.75px */
    }

    .clipped-border:nth-child(4) {
      top: 123.4px; /* 25% kleiner als 164.5px */
      left: 222.2px; /* 25% kleiner als 296.25px */
    }

    /* Angepasster Bildstil für originale Proportionen */
    .img-container {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
      clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    }

    .img-container img {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      transform: translate(-50%, -50%);
      object-fit: cover; /* Behält das Seitenverhältnis bei und füllt den Container */
    }

    #clipped {
      -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
      clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
      width: 100%;
      height: 100%;
    }

    /* Korrigierter Hover-Effekt */
    .clipped-border:hover {
      transform: scale(1.2);
      transition: transform 0.2s;
      z-index: 100; /* Erhöhter z-index für korrektes Hover-Verhalten */
    }

    .shadow {
      display: none;
    }


    /* Vollbildmodus Styles mit erhöhtem z-index */
    .fullscreen-overlay {
      position: fixed;
      top: 0;
      left: 120px;
      width: 100%;
      height: 100%;
      display: none;
	  backdrop-filter: blur(3px);
	  -webkit-backdrop-filter: blur(3px);
      justify-content: center;
      align-items: center;
      z-index: 110; 
      overflow: hidden;
    }

    .fullscreen-container {
      position: relative;
      width: 800px;
      max-width: 90%;
    }

    .fullscreen-image {
      width: 100%;
      height: auto;
      border-radius: 15px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }

    .close-button {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 30px;
      height: 30px;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      z-index: 5501; /* Höher als das Overlay */
    }

    .close-button:before, .close-button:after {
      content: '';
      position: absolute;
      width: 15px;
      height: 2px;
      background-color: #333;
    }

    .close-button:before {
      transform: rotate(45deg);
    }

    .close-button:after {
      transform: rotate(-45deg);
    }

@keyframes pulse {
  0% {
    background: radial-gradient(circle, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.75) 60%, rgba(255, 255, 255, 0.33) 80%, rgba(255, 255, 255, 0) 100%);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    background: radial-gradient(circle, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.75) 60%, rgba(255, 255, 255, 0.33) 80%, rgba(255, 255, 255, 0) 100%);
    transform: scale(3);
    opacity: 0;
  }
}

@keyframes ripple {
0%   { background: radial-gradient(circle at center, rgba(255,255,255,1) 0%,   rgba(255,255,255,1) 10%, rgba(255,255,255,0) 15%); }
1%   { background: radial-gradient(circle at center, rgba(255,255,255,0.5) 1%, rgba(255,255,255,0.983) 11%, rgba(255,255,255,0) 16%); }
2%   { background: radial-gradient(circle at center, rgba(255,255,255,0.5) 2%, rgba(255,255,255,0.967) 12%, rgba(255,255,255,0) 17%); }
3%   { background: radial-gradient(circle at center, rgba(255,255,255,0.5) 3%, rgba(255,255,255,0.95) 13%, rgba(255,255,255,0) 18%); }
4%   { background: radial-gradient(circle at center, rgba(255,255,255,0.5) 4%, rgba(255,255,255,0.933) 14%, rgba(255,255,255,0) 19%); }
5%   { background: radial-gradient(circle at center, rgba(255,255,255,0.5) 5%, rgba(255,255,255,0.917) 15%, rgba(255,255,255,0) 20%); }
6%   { background: radial-gradient(circle at center, rgba(255,255,255,0.4) 6%, rgba(255,255,255,0.9) 16%, rgba(255,255,255,0) 21%); }
7%   { background: radial-gradient(circle at center, rgba(255,255,255,0.4) 7%, rgba(255,255,255,0.883) 17%, rgba(255,255,255,0) 22%); }
8%   { background: radial-gradient(circle at center, rgba(255,255,255,0.4) 8%, rgba(255,255,255,0.867) 18%, rgba(255,255,255,0) 23%); }
9%   { background: radial-gradient(circle at center, rgba(255,255,255,0.4) 9%, rgba(255,255,255,0.85) 19%, rgba(255,255,255,0) 24%); }
10%  { background: radial-gradient(circle at center, rgba(255,255,255,0.4) 10%, rgba(255,255,255,0.833) 20%, rgba(255,255,255,0) 25%); }
11%  { background: radial-gradient(circle at center, rgba(255,255,255,0.3) 11%, rgba(255,255,255,0.817) 21%, rgba(255,255,255,0) 26%); }
12%  { background: radial-gradient(circle at center, rgba(255,255,255,0.3) 12%, rgba(255,255,255,0.8) 22%, rgba(255,255,255,0) 27%); }
13%  { background: radial-gradient(circle at center, rgba(255,255,255,0.3) 13%, rgba(255,255,255,0.783) 23%, rgba(255,255,255,0) 28%); }
14%  { background: radial-gradient(circle at center, rgba(255,255,255,0.3) 14%, rgba(255,255,255,0.767) 24%, rgba(255,255,255,0) 29%); }
15%  { background: radial-gradient(circle at center, rgba(255,255,255,0.3) 15%, rgba(255,255,255,0.75) 25%, rgba(255,255,255,0) 30%); }
16%  { background: radial-gradient(circle at center, rgba(255,255,255,0.2) 16%, rgba(255,255,255,0.733) 26%, rgba(255,255,255,0) 31%); }
17%  { background: radial-gradient(circle at center, rgba(255,255,255,0.2) 17%, rgba(255,255,255,0.717) 27%, rgba(255,255,255,0) 32%); }
18%  { background: radial-gradient(circle at center, rgba(255,255,255e,0.2) 18%, rgba(255,255,255,0.7) 28%, rgba(255,255,255,0) 33%); }
19%  { background: radial-gradient(circle at center, rgba(255,255,255,0.2) 19%, rgba(255,255,255,0.683) 29%, rgba(255,255,255,0) 34%); }
20%  { background: radial-gradient(circle at center, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.667) 30%, rgba(255,255,255,0) 35%); }
21%  { background: radial-gradient(circle at center, rgba(255,255,255,0.1) 21%, rgba(255,255,255,0.65) 31%, rgba(255,255,255,0) 36%); }
22%  { background: radial-gradient(circle at center, rgba(255,255,255,0.1) 22%, rgba(255,255,255,0.633) 32%, rgba(255,255,255,0) 37%); }
23%  { background: radial-gradient(circle at center, rgba(255,255,255,0.1) 23%, rgba(255,255,255,0.617) 33%, rgba(255,255,255,0) 38%); }
24%  { background: radial-gradient(circle at center, rgba(255,255,255,0.1) 24%, rgba(255,255,255,0.6) 34%, rgba(255,255,255,0) 39%); }
25%  { background: radial-gradient(circle at center, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.583) 35%, rgba(255,255,255,0) 40%); }
26%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 26%, rgba(255,255,255,0.567) 36%, rgba(255,255,255,0) 41%); }
27%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 27%, rgba(255,255,255,0.55) 37%, rgba(255,255,255,0) 42%); }
28%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 28%, rgba(255,255,255,0.533) 38%, rgba(255,255,255,0) 43%); }
29%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 29%, rgba(255,255,255,0.517) 39%, rgba(255,255,255,0) 44%); }
30%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 30%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0) 45%); }
31%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 31%, rgba(255,255,255,0.483) 41%, rgba(255,255,255,0) 46%); }
32%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 32%, rgba(255,255,255,0.467) 42%, rgba(255,255,255,0) 47%); }
33%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 33%, rgba(255,255,255,0.45) 43%, rgba(255,255,255,0) 48%); }
34%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 34%, rgba(255,255,255,0.433) 44%, rgba(255,255,255,0) 49%); }
35%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 35%, rgba(255,255,255,0.417) 45%, rgba(255,255,255,0) 50%); }
36%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 36%, rgba(255,255,255,0.4) 46%, rgba(255,255,255,0) 51%); }
37%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 37%, rgba(255,255,255,0.383) 47%, rgba(255,255,255,0) 52%); }
38%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 38%, rgba(255,255,255,0.367) 48%, rgba(255,255,255,0) 53%); }
39%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 39%, rgba(255,255,255,0.35) 49%, rgba(255,255,255,0) 54%); }
40%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 40%, rgba(255,255,255,0.333) 50%, rgba(255,255,255,0) 55%); }
41%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 41%, rgba(255,255,255,0.317) 51%, rgba(255,255,255,0) 56%); }
42%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 42%, rgba(255,255,255,0.3) 52%, rgba(255,255,255,0) 57%); }
43%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 43%, rgba(255,255,255,0.283) 53%, rgba(255,255,255,0) 58%); }
44%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 44%, rgba(255,255,255,0.267) 54%, rgba(255,255,255,0) 59%); }
45%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 45%, rgba(255,255,255,0.25) 55%, rgba(255,255,255,0) 60%); }
46%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 46%, rgba(255,255,255,0.233) 56%, rgba(255,255,255,0) 61%); }
47%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 47%, rgba(255,255,255,0.217) 57%, rgba(255,255,255,0) 62%); }
48%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 48%, rgba(255,255,255,0.2) 58%, rgba(255,255,255,0) 63%); }
49%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 49%, rgba(255,255,255,0.183) 59%, rgba(255,255,255,0) 64%); }
50%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 50%, rgba(255,255,255,0.167) 60%, rgba(255,255,255,0) 65%); }
51%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 51%, rgba(255,255,255,0.15) 61%, rgba(255,255,255,0) 66%); }
52%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 52%, rgba(255,255,255,0.133) 62%, rgba(255,255,255,0) 67%); }
53%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 53%, rgba(255,255,255,0.117) 63%, rgba(255,255,255,0) 68%); }
54%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 54%, rgba(255,255,255,0.1) 64%, rgba(255,255,255,0) 69%); }
55%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 55%, rgba(255,255,255,0.083) 65%, rgba(255,255,255,0) 70%); }
56%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 56%, rgba(255,255,255,0.067) 66%, rgba(255,255,255,0) 71%); }
57%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 57%, rgba(255,255,255,0.05) 67%, rgba(255,255,255,0) 72%); }
58%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 58%, rgba(255,255,255,0.033) 68%, rgba(255,255,255,0) 73%); }
59%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 59%, rgba(255,255,255,0.017) 69%, rgba(255,255,255,0) 74%); }
60%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 75%); }

/* Ab 61%: Komplett transparent */
61%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 61%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
62%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 62%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
63%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 63%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
64%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 64%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
65%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 65%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
66%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
67%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 67%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
68%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 68%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
69%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 69%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
70%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
71%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 71%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
72%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 72%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
73%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 73%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
74%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 74%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
75%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
76%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 76%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
77%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 77%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
78%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 78%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
79%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 79%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
80%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 80%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
81%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 81%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
82%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 82%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
83%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 83%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
84%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 84%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
85%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 85%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
86%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 86%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
87%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 87%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
88%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 88%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
89%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 89%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
90%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 90%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
91%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 91%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
92%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 92%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
93%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 93%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
94%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 94%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
95%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 95%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
96%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 96%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
97%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 97%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
98%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 98%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
99%  { background: radial-gradient(circle at center, rgba(255,255,255,0) 99%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
100% { background: radial-gradient(circle at center, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); }
}

@media (max-width: 480px) {
      li.timeline-item h3::before {
        left: -37px;
      }
	  .hexagons-container {
        width: 305.5px; /* Hälfte der Desktop-Breite */
        height: 189px; /* Angepasst für die weitere Verschiebung nach unten */
      }

      .clipped-border {
        width: 105px; /* Exakt quadratisch - hälfte der Desktop-Größe */
        height: 105px; /* Exakt quadratisch - hälfte der Desktop-Größe */
      }
      
      /* Erste Reihe */
      .clipped-border:nth-child(1) {
        top: 0;
        left: 0;
      }

      .clipped-border:nth-child(3) {
        top: 0;
        left: 98.75px; /* Hälfte von 197.5px */
      }

      .clipped-border:nth-child(5) {
        top: 0;
        left: 197.5px; /* Hälfte von 395px */
      }

      /* Zweite Reihe */
      .clipped-border:nth-child(2) {
        top: 82.25px; /* Hälfte von 164.5px */
        left: 49.4px; /* Hälfte von 98.75px */
      }

      .clipped-border:nth-child(4) {
        top: 82.25px; /* Hälfte von 164.5px */
        left: 148.1px; /* Hälfte von 296.25px */
      }

      /* Angepasster Glanzeffekt für mobile Ansicht */
      .clipped-border:before {
        width: 183px;
        height: 36px;
      }

      .clipped-border:hover:before {
        transform: translate(-53px, 210%) rotate(45deg);
      }
	
  .fullscreen-overlay {
    left: 0px;
    }
	
  .gallery {
	width: 320px;
	margin: 200px auto 300px auto;
  }
  .hexagon {
    width: 54.6px; /* 78px * (63.2/90) um das Verhältnis beizubehalten */
    height: 63.2px;
  }
  .hexagon-grid {
    left: 0;
    width: 100%;
  }
  #cursor {
    width: 190px;
    height: 190px;
    transform: translate(-50%, -33%);
  }
  .content-wrapper {
    margin: 0;
    padding: 0px 20px 0 20px;
    width: 100%;
  }
  .current-id-display {
    font-size: 12px;
    left: 0;
  }
  main .content-section {
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }
  main div {
    min-height: auto;
  }
  main .content-section .text {
    order: 0;
    width: 100%;
    padding: 20px;
  }
  main .content-section .text-curri {
    text-align: left;
    order: 0;
    width: 100%;
    margin: 0;
    padding: 120px 10px 0 10px;
  }
	
  main .content-section .text ul, main .content-section .text-curri ul {
    font-size: 15px;
}
	
  main .content-section .image {
    width: 100%;
    padding: 150px 20px 0 20px;
    order: -1;
  }
  main .content-section .image img {
    margin-top: 0px;
  }
  main .content-section .image .logo {
    width: 50%;
    padding: 50px 20px 0 20px;
    margin: 0 auto;
    order: -1;
  }
  ul.timeline-items {
    margin: 25px 0;
  }
  h2.timeline-title {
    margin-left: 10px;
  }
  .menu-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .menu-button.open {
    left: 300px;
  }
  .nav-spacer {
    display: none;
  }
  h1.left {
    text-align: center;
  }
  aside {
    background: rgba(90, 111, 105, 0.95);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-right: 2px solid white;
    height: 92vh;
    width: 225px;
  }
  aside.open {
    transform: translateX(0);
  }
  a {
    color: #d9d8ce;
  }
  main {
    margin-left: 0;
  }
  .pulse {
    width: 150%;
    left: -25%;
  }
  .content-cal {
    margin: 0 auto;
  }
  .set-top {
    padding-top: 50px;
  }
  .set-top-kontakt {
    padding-top: 75px;
}
  .text-wrapper {
    max-height: 100px;
    overflow: hidden;
    margin-bottom: 10px;
    transition: max-height 0.33s ease-out;
  }
  .text-wrapper-high {
    max-height: 200px;
    overflow: hidden;
    margin-bottom: 10px;
    transition: max-height 0.33s ease-out;
  }
  .gradient-overlay {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, #aaa 80%);
    pointer-events: none;
  }
  .expand-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    padding: 10px 0;
    margin: -25px auto 10px auto;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
  }
  .show-full-text .text-wrapper, .show-full-text .text-wrapper-high {
    max-height: 1000px;
    transition: max-height 0.3s ease-in;
  }
  .show-full-text .gradient-overlay {
    display: none;
  }
  .left-justify {
    text-align: center;
}
  .justify {
	text-align: left;	
}
}

@media screen and (max-width: 360px) {
	
	.gallery {
		width: 250px;
	}
	
      .hexagons-container {
        width: 244.4px; /* 20% kleiner als 305.5px */
        height: 151.2px; /* 20% kleiner als 189px */
      }

      .clipped-border {
        width: 84px; /* 20% kleiner als 105px */
        height: 84px; /* 20% kleiner als 105px */
      }
      
      /* Erste Reihe */
      .clipped-border:nth-child(1) {
        top: 0;
        left: 0;
      }

      .clipped-border:nth-child(3) {
        top: 0;
        left: 79px; /* 20% kleiner als 98.75px */
      }

      .clipped-border:nth-child(5) {
        top: 0;
        left: 158px; /* 20% kleiner als 197.5px */
      }

      /* Zweite Reihe */
      .clipped-border:nth-child(2) {
        top: 65.8px; /* 20% kleiner als 82.25px */
        left: 39.5px; /* 20% kleiner als 49.4px */
      }

      .clipped-border:nth-child(4) {
        top: 65.8px; /* 20% kleiner als 82.25px */
        left: 118.5px; /* 20% kleiner als 148.1px */
      }

      /* Angepasster Glanzeffekt für sehr kleine Bildschirme */
      .clipped-border:before {
        width: 146.4px; /* 20% kleiner als 183px */
        height: 28.8px; /* 20% kleiner als 36px */
      }

      .clipped-border:hover:before {
        transform: translate(-42.4px, 168%) rotate(45deg); /* 20% kleiner als vorherige Werte */
      }
    }