/* 
 * https://codepen.io/nathan-sr/pen/GRwYaQM  
 * https://codepen.io/dmitrij-rog/pen/JjOLygR/1000
 * https://gegenfeld.com/tools/css-background-generator/
 * 
 * design: https://www.snk.de/snki/
 * 
 * https://codepen.io/codewithshabbir/pen/zYgoLrp
 * 
 * typing effekt
 * https://codepen.io/denic/pen/GRoOxbM
 * 
 * 
 * Hover effekte für navi
 * https://codepen.io/Laetitia-Bonaldo/pen/OPVwjGw
 * 
 * 
 * https://codepen.io/pleasedonotdisturb/pen/GgKxMrb
 * https://codepen.io/tortaruga/pen/ExJzKBj
 * 
 * 
 * verschwindender Text bei hover:
 * https://codepen.io/siwuxie/pen/xxBwgev
 * 
 * <p>Das ist ein Text, der aussieht als w&uuml;rde er gerade eingegeben</p>
 * <div class="hero" data-aos="fade-in" data-aos-delay="100">
 *   <video src="https://www.pexels.com/download/video/2408284/" autoplay loop muted playsinline preload="auto"></video>

 *   <h1 data-aos="fade-in-down"  data-aos-delay="300">
 *     Ride the</br>Waves </br>of Possibility
 *   </h1>
 * </div>
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * https://codepen.io/mojo-jojo-the-scripter/pen/bGPZvQJ
 * logo: https://www.canva.com/design/play?type=TAB7AVEOUWQ&category=tACZCvjI6mE&locale=de-DE
 */
 <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">

/* Animierte Schriften typing ------------------------------------------------------------------------------------------ */
  h1.typing-demo  {
    display: inline-block;
    white-space:;
    overflow: visible;
  
    width: 100%;
    border-right: 0;
    animation: none;
  }

@media only screen and (min-width: 768px) {
  h1.typing-demo,  .typing-demo > h1,  .typing-demo > h2,  .typing-demo > h3  {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    width: 0ch;
    max-width: 100%;
    b/order-right: 3px solid;
    animation: h1-typing 4s steps(35) forwards, blink 2s step-start 3 forwards, removeCursor 0.1s 6s forwards;
    margin-bottom: 20px;
  }
}

.typing-demo p {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 0ch;
  b/order-right: 3px solid yellow;
  animation: typing 4s steps(47) forwards, blink 2s step-start 3 forwards, removeCursor 0.1s 6s forwards;
}

/* Text erscheint */
@keyframes h1-typing {
  from { width: 0ch; }
  to { width: 36ch; }
}
@keyframes typing {
  from { width: 0ch; }
  to { width: 47ch; }
}

/* Langsamer, natürlicher Blink: 1s sichtbar / 1s unsichtbar */
@keyframes blink {
  0%, 50%, 100% { border-color: yellow; }
  25%, 75% { border-color: transparent; }
}

/* Cursor nach Tippen + 2s entfernen */
@keyframes removeCursor {
  to { border-color: transparent; }
}
/* Ende Animierte Schriften typing ----------------------------------------------------------------------------------- */
/* Anfang Animierter Hintergrund --------------------------------------------------------------------------------------- */
#hero-box{
    position:relative;
    width:100%;
    height:auto;

    overflow:hidden;
    border:none; /* keine Rahmen mehr */

    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:1; /* Text über Pseudo-Elementen */
    box-sizing:border-box;
	b/order-radius: var(--border-radius, 4px);
    padding: 15px 25px;

}

/* Unterer Gradient */
#hero-box::before{
    content:"";
    position:absolute;
    inset:-50%;
    background: linear-gradient(135deg, #07172a 0%, #0b3a66 35%, #11849e 65%, #63c7ff 100%);
    background-size: 400% 400%;
    animation: gradientFlow 40s linear infinite;
    z-index:-2; /* ganz unten */
    will-change: background-position;
}

@keyframes gradientFlow{
    0%   { background-position: 0% 0%; }
    100% { background-position: 400% 400%; }
}

  /* Blobs + Grain */
#hero-box::after{
    content:"";
    position:absolute;
    inset:-20%;
    z-index:-1; /* zwischen Gradient und Text */
    pointer-events:none;
    background-image:
      radial-gradient(circle at 20% 20%, rgba(11,58,102,0.95) 0%, rgba(17,132,158,0.85) 60%, rgba(99,199,255,0.06) 100%),
      radial-gradient(circle at 50% 50%, rgba(99,199,255,0.18) 0%, rgba(11,58,102,0.02) 60%, rgba(0,0,0,0) 100%),
      radial-gradient(rgba(255,255,255,0.012) 1px, transparent 1px);
    background-size: 400px 220px, 500px 300px, 4px 4px;
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: 5% 5%, 50% 50%,  0 0;
    mix-blend-mode: screen;
    opacity:0.75;
    filter: blur(64px);
    transform-origin: center;
    animation: blobMove 40s ease-in-out infinite alternate;
    will-change: transform, filter;
}

@keyframes blobMove {
    0%   { transform: translate(0,0) scale(1); }
    30%  { transform: translate(40px,30px) scale(1.02); }
    60%  { transform: translate(-30px,18px) scale(1.01); }
    100% { transform: translate(0,0) scale(1); }
}

/* Textstil */
#hero-box h1, #hero-box p{
    position:relative;
    z-index:2;
    color:#fff;
}

#hero-box h1, #hero-box h3{ 
    margin-bottom:0.225em; 
    font-size:clamp(24px,4vw,44px); 
}

#hero-box h4{ 
    margin-bottom:0.225em; 
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}
#hero-box h4::before{ 
 display: none;

}
#hero-box p{ 
    margin-bottom:0; 
}
#hero-box a {
    position:relative;
    z-index:2;
    color: skyblue;  /* hell für dunklen Hintergrund */
    a/nimation: textSync 20s linear infinite;
}

@media (prefers-reduced-motion: reduce){
    #hero-box::before,
    #hero-box::after { animation: none !important; transition: none !important; }
}

@keyframes textSync {
  /* Beispiel: 0–25 dunkler Bereich → helle Schrift   60%  { color: yellow; } */   
    0%   { color: skyblue; }
    10%  { color: skyblue; }
    19%  { color: skyblue; }
    19.30%  { color: blue; }
    30.30%  { color: blue; }
    43%  { color: skyblue; }
    100%  { color: skyblue; }
}
















/* ENDE Animierter hintergrund --------------------------------------------------------------------------------------- */
.hero {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  max-width: 100%;
  margin: 0 auto;
}

.hero video {
  width: 100%;
  height: 100%;
  filter: contrast(140%) brightness(90%) grayscale(100%);
}

.hero h1 {
  position: absolute;
  color: #545454;
  font-size: clamp(2rem, 9vw, 7rem);
  font-weight: bolder;
  mix-blend-mode: difference;
  text-transform: uppercase;
  text-align: center;
}






/* View Timeline für den Triggerpunkt */
.slide-in-up {
  animation: slideUp 1s cubic-bezier(.22,.9,.28,1) forwards;
  animation-timeline: view();
  animation-range: entry 25% cover 45%;
}


@keyframes slideUp {
  from {
    transform: translateY(28px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


.wrapper .breadcrumb-right {
  display: none;
}

/* Ab 992px sichtbar und rechts im Wrapper */

@media (min-width: 992px) {

  .wrapper {
    position: relative; /* wichtig für absolute Positionierung */
  }
  .wrapper .breadcrumb-right {
    position: absolute; /* innerhalb des Wrappers */
    top: 0;
    right: 0;
    bottom: 0;           /* volle Höhe vom Wrapper */
    width: 40px;

    display: flex;       /* Flexbox für Zentrierung */
    flex-direction: column;
    justify-content: center; /* vertikal mittig */
    a/lign-items: center;     /* horizontal mittig */

    background-color: #fff00090;

    
    text-orientation: mixed;
    transform: rotate(180deg); /* optional: Richtung anpassen */
    text-align: center;
  }
  .wrapper .breadcrumb-right > * {
    border: 1px solid blue;
    writing-mode: vertical-rl;
    margin: 3px;
  }

}



.h1-animate-01 {
  display: inline-block;
  color: #dbd56e;
  background: -webkit-linear-gradient(25deg, #fff, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3rem;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid;
  animation: type 1.5s steps(90) 1.5s 1 normal both, cursor 1s step-end infinite;
  position: relative;
}

@keyframes type {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes cursor {
  50% {
    border-color: transparent;
  }
}


/*
const el = document.querySelector('.box');
const bg = getComputedStyle(el).backgroundColor;

function isDark(color) {
  const [r, g, b] = color.match(/\d+/g).map(Number);
  const luminance = (0.299*r + 0.587*g + 0.114*b);
  return luminance < 80; // Schwellenwert
}

if (isDark(bg)) {
  el.classList.add('text-light');
} else {
  el.classList.add('text-dark');
}






*/




:root {
  --hex-size: 250px; /* Durchmesser des Hexagons */
}

/* Container für subtilen Schatten */
.hex-container {
  display: inline-block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  margin: 30px auto;

}

/* Hexagon selbst */
.hexagon {
  
  position: relative;
  display: flex; 
  justify-content: flex-start;
  width: var(--hex-size);
  height: calc(var(--hex-size) * 0.866); /* Höhe = Breite * sqrt(3)/2 ≈ 0.866 */
  background: linear-gradient(160deg, rgba(179, 229, 255, 0.8) 0%, rgba(110, 198, 255, 0.6) 40%, rgba(0, 154, 223, 0.2) 100%);
  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
  transition: all 0.25s ease;
  align-items: center;
  padding: 0 15%; 
}

.hex-content {
  width: 80%;
  max-height: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 0 auto;
}

.hex-content p {
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow : hidden;
    max-width: 15em;
    line-height: 1.5;
    font-size: 0.9rem;
    padding-top: 10px;
}


/* obere und untere Dreiecke */
.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  border-left: calc(var(--hex-size) / 2) solid transparent;
  border-right: calc(var(--hex-size) / 2) solid transparent;
}

.video-container {
  width: 1920px;
  height: 650px;
  overflow:hidden;
}

video {
  width: 1920px;
  height: auto;
  overflow:hidden;
}

/*
.content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100%;
  place-items: center;
  background: rgba(53, 54, 72, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: inherit;
  box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.2) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 10;
  color: var(--light-clr);
  overflow-y: auto;
  padding: 30px 30px 10px;
}

.content::-webkit-scrollbar {
  width: 7px;
}

.content::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.3rem var(--scrollbar-track);
  border-radius: 40px;
  margin: 18px 0;
}

.content::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0.5rem var(--scrollbar-thumb);
  background-color: var(--primary-clr);
  outline: none;
  border-radius: 40px;
}