/* ===== STYLES  Globale Styles ===== */

/* ===== FONT-FACE DEFINITIONS ===== */

/* Webfont: Unique-Bold */
@font-face {
  font-family: 'Unique-Bold';
  src: url('Unique-Bold.eot');
  /* IE9 Compat Modes */
  src: url('Unique-Bold.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../assets/fonts/Unique-Bold.woff') format('woff'),
    /* Modern Browsers */
    url('../assets/fonts/Unique-Bold.woff2') format('woff2'),
    /* Modern Browsers */
    url('../assets/fonts/Unique-Bold.ttf') format('truetype');
  /* Safari, Android, iOS */
  text-rendering: optimizeLegibility;
}

/* Webfont: Unique-Regular */
@font-face {
  font-family: 'Unique-ExtraLight';
  src: url('Unique-Bold.eot');
  /* IE9 Compat Modes */
  src: url('Unique-Bold.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../assets/fonts/Unique-ExtraLight.woff') format('woff'),
    /* Modern Browsers */
    url('../assets/fonts/Unique-ExtraLight.woff2') format('woff2'),
    /* Modern Browsers */
    url('../assets/fonts/Unique-ExtraLight.ttf') format('truetype');
  /* Safari, Android, iOS */
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'GeistMono-UltraLight';
  src: url('../assets/fonts/GeistMono-UltraLight.woff2') format('woff2'),
  url('../assets/fonts/GeistMono-UltraLight.ttf') format('truetype');
}

@font-face {
  font-family: 'GeistMono-Light';
  src: url('../assets/fonts/GeistMono-Light.woff2') format('woff2'),
  url('../assets/fonts/GeistMono-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'GeistMono-Regular';
  src: url('../assets/fonts/GeistMono-Regular.woff2') format('woff2'),
  url('../assets/fonts/GeistMono-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'GeistMono-Medium';
  src: url('../assets/fonts/GeistMono-Medium.woff2') format('woff2'),
  url('../assets/fonts/GeistMono-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'GeistMono-SemiBold';
  src: url('../assets/fonts/GeistMono-SemiBold.woff2') format('woff2'),
  url('../assets/fonts/GeistMono-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'GeistMono-Bold';
  src: url('../assets/fonts/GeistMono-Bold.woff2') format('woff2'),
  url('../assets/fonts/GeistMono-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'GeistMono-UltraBlack';
  src: url('assets/fonts/GeistMono-UltraBlack.woff2') format('woff2'),
  url('../assets/fonts/GeistMono-UltraBlack.ttf') format('truetype');
}

/* ===== CSS CUSTOM PROPERTIES / VARIABLEN ===== */
:root {

  /* first color grüne töne */
  --color-primary: #538e56;  /* braun #B56917 */
  --color-primary-opacity: rgba(83, 142, 86, 0.15);  /* primary mit grün, braun rgba(181, 105, 23, 0.5) */
  --color-background: #efefdf; /* #FFEBCB #FEFEFE #FFFAF1 #F8F0E5 #EEECE0  #f9f5dc  braun #FDF5ED */

   /* second color */
  --color-secondary: #9999cc;  /* grün #d7e5d7  rgba(181, 105, 23, 0.1)*/

  /* third color */
  --color-third: #4E0250; /* gelb #E3D26F aubergine #483C46;  #647500;  #fef4b8 */

  /* text colors */
  --color-text-light: #efefdf;

  /* footer */
  --color-footer-bg: rgba(83, 142, 86, 0.15);  /* gelb #fef4b8  #009640*/
  --color-footer-text: #538e56;  /* rosa #c98bb9 #f7d200 */

  /* Buttons */
  --color-button: #538e56; /* braun #986e49 #F37507 #FDB6EE */
  --color-button-bg: #efefdf;
  --color-button-header-hover: #CCD8C1; /* rgba(83, 142, 86, 0.15) alt #FAEBDB */
  --color-button-active: #CCD8C1;

  --color-button-play: #4E0250 ; /* pink #c98bb9   #f7d200 */
  --color-button-play-bg:  #9999cc;  /* pink #FFEFFB;  #fef4b8 */
  --color-button-play-active: #8682C6; /* pink #F2D6EB*/


  --nav-button-default: #4E0250;
  --nav-button-bg-default: #9999cc;
  --nav-button-hover-default: #8682C6;  /*#8774AD; rgba(78, 2, 80, 0.15)*/
 

  /* beige #EBDFC5 */
  
  --font-unique-bold: 'Unique-Bold', sans-serif;
  --font-unique-light: 'Unique-ExtraLight', sans-serif;
  --font-geist-ultralight: 'GeistMono-UltraLight', monospace;
  --font-geist-light: 'GeistMono-Light', monospace;
  --font-geist-regular: 'GeistMono-Regular', monospace;
  --font-geist-medium: 'GeistMono-Medium', monospace;
  --font-geist-semibold: 'GeistMono-SemiBold', monospace;
  --font-geist-bold: 'GeistMono-Bold', monospace;
  --font-geist-ultra: 'GeistMono-UltraBlack', monospace;
}


/* ===== GLOBAL RESET ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: none !important;
}


/* ===== TYPOGRAPHY SYSTEM ===== */

/* HEADING STYLES */
/* .text-h1 {
  font-family: var(--font-geist-bold);
  font-size: 2.5rem;
  line-height: 1.2;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.text-h2 {
  font-family: var(--font-geist-medium);
  font-size: 2rem;
  line-height: 1.3;
  color: var(--color-primary);
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.text-h3 {
  font-family: var(--font-geist-medium);
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.text-h4 {
  font-family: var(--font-geist-medium);
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--color-primary);
  margin-bottom: 0.8rem;
} */

/* BODY TEXT STYLES */
/* .text-body {
  font-family: var(--font-geist-light);
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  color: var(--color-primary);
  padding: 0px 12vw; Oben/unten 150px, links/rechts 40px
  margin-bottom: 1rem;
} */

/* 
.text-body-medium {
  font-family: var(--font-geist-regular);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
}

.text-body-large {
  font-family: var(--font-geist-light);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-dark);
  margin-bottom: 1.2rem;
} */

/* SPECIAL TEXT STYLES */
/* .text-intro {
  font-family: var(--font-geist-medium);
  font-size: 1.5rem;
  line-height: 1.4;
  text-align: center;
  color: var(--color-primary);
  padding: 0 12vw;
}

.text-small {
  font-family: var(--font-geist-light);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-light);
}

.text-caption {
  font-family: var(--font-geist-light);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-light);
  margin-bottom: 0.5rem;
}

.text-code {
  font-family: var(--font-geist-regular);
  font-size: 0.9rem;
  line-height: 1.5;
  background: rgba(181, 105, 23, 0.1);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  color: var(--color-primary);
}

.text-bold {
  font-family: var(--font-geist-medium);
} */

/* UNIQUE FONT STYLES */
/* .text-unique-bold {
  font-family: var(--font-unique-bold);
  font-size: 1.8rem;
  line-height: 1.2;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.text-unique-light {
  font-family: var(--font-unique-light);
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
} */

/* UTILITY CLASSES */
/* .text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.text-primary { color: var(--color-primary); }
.text-light { color: var(--color-text-light); }
.text-dark { color: var(--color-text-dark); }

.text-nowrap { white-space: nowrap; }
.text-break { 
  word-wrap: break-word;
  overflow-wrap: break-word;
} */


/* LINK STYLES */

/* Allgemeine Link-Stile */
 a {
  text-decoration: none; 
  color:  var(--color-primary);
} 

.text-link {
  color: var(--color-primary);
  text-decoration: none;
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
}

.text-link:hover {
  opacity: 0.8;
  border-bottom-color: var(--color-primary);
}

/* ===== CURSOR STYLES ===== */

.custom-cursor {
 /* opacity: 1 !important; /* Sichtbar machen */
 /* background-color: rgba(255, 0, 0, 0.5);  Rotes halbtransparentes Rechteck */
  position: fixed;
  width: 46px;
  height: 63px;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url('/assets/images/pixel-cursor.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0; /* Anfangs versteckt */
}

.custom-cursor.pointer {
  position: fixed;
  width: 46px;
  height: 63px;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url('/assets/images/pixel-cursor-pointer.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-29.2%, -1%);
}

.custom-cursor.twofingers {
  width: 46px;
  height: 61px;
  background-image: url('/assets/images/pixel-cursor-twofingers.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  position: fixed;
  z-index: 9999;
  transform: translate(-16.9%, -3.9%);
}

.custom-cursor.grabbing {
  width: 46px;
  height: 61px;
  background-image: url('/assets/images/pixel-cursor-grabbing.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  position: fixed;
  z-index: 9999;
  transform: translate(-16.9%, -3.9%);
}


.nav-container {
  display: flex;
  margin-bottom: 3vh; /* Abstand nach unten innerhalb des Headers */
  height: auto;
  z-index: 700;
  pointer-events: auto;
}

.magnetic-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 0 0.4vw;
  /* box-sizing: border-box; */
  z-index: 4;
}

/* ===== BUTTON STYLES ===== */

/* ===== BUTTON MASK EFFEKT - CSS ÜBERGANG ===== */

.magnetic-button {
  position: relative;
  overflow: hidden;
  z-index: 0;
  
  font-size: 0.8rem;
  letter-spacing: 0.01rem;
  padding: 0.7rem 0.9rem;
  border: 1.4px solid var(--color-button);
  border-radius: 1.4rem;
  cursor: pointer;
  background: var(--color-button-bg);
  font-family: var(--font-geist-regular);
  color: var(--color-button);
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  
  /* Standard Transition für Hover */
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

/* Übergangs-Zustand während Scroll-Animation */
.magnetic-button.button-transitioning {
  /* CSS Custom Properties für dynamische Farbmischung */
  --progress: var(--transition-progress, 0);
  
  /* Farbübergänge mit color-mix() */
  background: color-mix(in srgb, 
    var(--color-button-bg) calc((1 - var(--progress)) * 100%), 
    var(--nav-button-bg-default) calc(var(--progress) * 100%)
  );
  
  color: color-mix(in srgb, 
    var(--color-button) calc((1 - var(--progress)) * 100%), 
    var(--nav-button-default) calc(var(--progress) * 100%)
  );
  
  border-color: color-mix(in srgb, 
    var(--color-button) calc((1 - var(--progress)) * 100%), 
    var(--nav-button-default) calc(var(--progress) * 100%)
  );
  
  /* Schnellere Transition für Scroll-Effekt */
  transition:
    background 0.1s linear,
    color 0.1s linear,
    border-color 0.1s linear;
}

/* Hover-Effekt bleibt bestehen */
.magnetic-button:hover:not(.button-transitioning) {
  background: var(--color-button-header-hover);
  color: var(--color-button);
}

/* Hover-Effekt für Buttons im About-Me Bereich */
.magnetic-button.button-transitioning:hover {
  background: color-mix(in srgb, 
    var(--color-button-header-hover) calc((1 - var(--progress)) * 100%), 
    var(--nav-button-hover-default) calc(var(--progress) * 100%)
  ) !important;
}


/* Fallback für Browser ohne color-mix() Unterstützung */
@supports not (background: color-mix(in srgb, red, blue)) {
  .magnetic-button.button-transitioning {
    background: var(--nav-button-bg-default);
    color: var(--nav-button-default);
    border-color: var(--nav-button-default);
  }
}

 

/* Sprache Button */
.magnetic-wrapper.lang {
  padding: 0;
}

#lang-btn{
  border: none;
  background: none; 
  padding: none; 
}

#lang-me-btn:hover {
  font-family: var(--font-geist-bold);
}


/* Sprechblase Button */

/* ===== SVG BUTTON STYLING ===== */

/* SVG Button erhält gleiche Basis-Styles */
.waving-image-link.magnetic-button {
  /* Entferne Standard-Button Styles die nicht passen */
  border: none;
  background: transparent !important; /* Verhindert Background um die Sprechblase */
  padding: 0.7rem 0.4rem;
  
  /* Farbe für SVG */
  color: var(--color-button); /* Für fill und stroke *
  
  /* Transform für Hover-Effekt */
  transform: scale(1);
  transition: 
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

/* SVG Größe und Verhalten */
.waving-image {
  width: 2.4rem;    
  height: 2.4rem;
  transition: all 0.1s linear;
}

/* SVG Path - nutzt currentColor vom Parent */
.svg-speech-bubble {
  fill: var(--color-button-bg); /* Background Farbe */
  stroke: var(--color-button);   /* Border Farbe */
  stroke-width: 1.04;
  stroke-miterlimit: 10;
  transition: 
    fill 0.1s linear,
    stroke 0.1s linear;
}

/* SVG Linien - gleiche Farbe wie Stroke */
.svg-line {
  fill: none;
  stroke: var(--color-button);
  stroke-width: 1.04;
  stroke-miterlimit: 10;
  transition: stroke 0.1s linear;
}

/* Transitioning State für SVG */
.waving-image-link.magnetic-button.button-transitioning .svg-speech-bubble {
  fill: color-mix(in srgb, 
    var(--color-button-bg) calc((1 - var(--progress)) * 100%), 
    var(--nav-button-bg-default) calc(var(--progress) * 100%)
  );
  
  stroke: color-mix(in srgb, 
    var(--color-button) calc((1 - var(--progress)) * 100%), 
    var(--nav-button-default) calc(var(--progress) * 100%)
  );
}

/* Transitioning State für SVG Linien */
.waving-image-link.magnetic-button.button-transitioning .svg-line {
  stroke: color-mix(in srgb, 
    var(--color-button) calc((1 - var(--progress)) * 100%), 
    var(--nav-button-default) calc(var(--progress) * 100%)
  );
}

/* Hover entfernt - kein Background-Change mehr */
.waving-image-link.magnetic-button:hover:not(.button-transitioning) {
  background: transparent !important;
  transform: scale(1.2) !important;; /* Sanfter Scale-Effekt statt 1.2 */
}

.waving-image-link.magnetic-button.button-transitioning:hover {
  background: transparent !important;
  transform: scale(1.2) !important;; 
}


/* .waving-image {
  width: 36px;    
  height: 36px;
  object-fit: contain; */
  /* color: var(--color-button-bg);
  stroke: var(--color-primary); */

  /* Smooth transitions für SVG-Farben */
  /* transition: 
    color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    stroke 0.4s cubic-bezier(0.4, 0, 0.2, 1); */



/* .waving-image-link {
  display: inline-block;
  transition: transform 0.3s ease;
}

.waving-image-link:hover {
  transform: scale(1.2); 10% größer
} */


/* ===== NAVIGATION STYLES ===== */


/* Link für die Überschriften */
/* Titel Verlinkung von main-title */
/* .title-link {
  display: inline-block;
  padding-top: 12px;
  text-decoration: none;
  transform-origin: center;
  z-index: 500;
} */


/* ===== MAIN BODY STYLES ===== */ 
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-geist-light);
  letter-spacing: normal;
  background-color: var(--color-background);
  min-height: 100vh;
  color: var(--color-primary);
}


/* ------ moveable Bilder ----- */
.img-moveable{
  position: absolute;
  width: 24vw;
  height: auto;
  /* border-radius: 5%; */
  transform-origin: center;
  user-select: none; /* Verhindert Textauswahl während des Ziehens */
  z-index: 20; /* hinter dem Text */
}

#foto-ich-klein {
  position: absolute;
  width: 4vw;
  height: auto;
  /* z-index: 1; hinter dem Text */
}




/* ===== SCROLLBAR STYLES ===== */

/* Horizontale Scrollbar komplett verstecken */
body::-webkit-scrollbar:horizontal {
  height: 0px;
  display: none;
}

html::-webkit-scrollbar:horizontal {
  height: 0px;
  display: none;
}

/* Für alle Browser - horizontale Scrollbar verstecken */
body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

/* Zusätzlich für hartnäckige Scrollbars */
*::-webkit-scrollbar:horizontal {
  height: 0px !important;
  display: none !important;
}

/* Fake vertikale Scrollbar */
.fake-vertical-scrollbar {
  position: fixed;
  right: 0;
  top: 0;
  width: 10px;
  height: 100vh;
  background: #f1f1f1;
  z-index: 1000;
  pointer-events: none;
}

.fake-scrollbar-thumb {
  width: 8px;
  background: #c1c1c1;
  border-radius: 4px;
  position: absolute;
  transition: background 0.2s, top 0.1s ease-out;
  pointer-events: auto;
  cursor: pointer;
  min-height: 20px;
}

.fake-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.fake-scrollbar-thumb:active {
  background: #999;
}
/* ------- END CSS für Scrollbar ----- */


/* ===== RESPONSIVE STYLES ===== */
/* @media (max-width: 768px) {
  .text-h1 { font-size: 2rem; }
  .text-h2 { font-size: 1.6rem; }
  .text-h3 { font-size: 1.3rem; }
  .text-intro { 
    font-size: 1.2rem; 
    padding: 0 6vw;
  }
  #hometext {
    font-size: 1.2rem;
    padding: 0 6vw;
  }
}

@media (max-width: 480px) {
  .text-h1 { font-size: 1.8rem; }
  .text-h2 { font-size: 1.4rem; }
  .text-h3 { font-size: 1.2rem; }
  .text-intro { 
    font-size: 1.1rem; 
    padding: 0 4vw;
  }
  #hometext {
    font-size: 1.1rem;
    padding: 0 4vw;
  }
} */



/* From Uiverse.io by G4b413l Loading Punkte */ 
/* .three-body {
  --uib-size: 35px;
  --uib-speed: 0.8s;
  --uib-color: #593F62;
  position: relative;
  display: inline-block;
  height: var(--uib-size);
  width: var(--uib-size);
  animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
 }
 
 .three-body__dot {
  position: absolute;
  height: 100%;
  width: 30%;
 }
 
 .three-body__dot:after {
  content: '';
  position: absolute;
  height: 0%;
  width: 100%;
  padding-bottom: 100%;
  background-color: var(--uib-color);
  border-radius: 50%;
 }
 
 .three-body__dot:nth-child(1) {
  bottom: 5%;
  left: 0;
  transform: rotate(60deg);
  transform-origin: 50% 85%;
 }
 
 .three-body__dot:nth-child(1)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 var(--uib-speed) infinite ease-in-out;
  animation-delay: calc(var(--uib-speed) * -0.3);
 }
 
 .three-body__dot:nth-child(2) {
  bottom: 5%;
  right: 0;
  transform: rotate(-60deg);
  transform-origin: 50% 85%;
 }
 
 .three-body__dot:nth-child(2)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 var(--uib-speed) infinite
     calc(var(--uib-speed) * -0.15) ease-in-out;
 }
 
 .three-body__dot:nth-child(3) {
  bottom: -5%;
  left: 0;
  transform: translateX(116.666%);
 }
 
 .three-body__dot:nth-child(3)::after {
  top: 0;
  left: 0;
  animation: wobble2 var(--uib-speed) infinite ease-in-out;
 }
 
 @keyframes spin78236 {
  0% {
   transform: rotate(0deg);
  }
 
  100% {
   transform: rotate(360deg);
  }
 }
 
 @keyframes wobble1 {
  0%,
   100% {
   transform: translateY(0%) scale(1);
   opacity: 1;
  }
 
  50% {
   transform: translateY(-66%) scale(0.65);
   opacity: 0.8;
  }
 }
 
 @keyframes wobble2 {
  0%,
   100% {
   transform: translateY(0%) scale(1);
   opacity: 1;
  }
 
  50% {
   transform: translateY(66%) scale(0.65);
   opacity: 0.8;
  }
 } */