From 583787b4ab0c932ffa8e71f2ae884d4b4b8723fc Mon Sep 17 00:00:00 2001
From: Gylan <gylan.salih@outlook.de>
Date: Fri, 22 Nov 2024 03:06:40 +0100
Subject: [PATCH] Updates

---
 CHANGELOG.md                  |   11 +-
 dist/css/main.css             |  209 ++++--
 dist/css/main.css.map         |    2 +-
 public/portfolio.html         |   19 +-
 script.js                     |  226 +++++-
 src/scss/_portfolio-page.scss | 1249 ++++++++++++++++-----------------
 6 files changed, 957 insertions(+), 759 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb85be1..fc93dec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -46,10 +46,13 @@ Lookbook:
 
 **0.0.16 - Latest Updates**
 
-- Started Again to work on the Portfolio :)
-- Cleaning some css and Grouping with #regio and #endregio learned from C##
-- filter changed name to design, coding, marketing 
-- slider transition, nav dots
+- Started working on the portfolio again :)
+- Cleaning up some CSS and grouping using #regio and #endregio (learned from C#).
+- Renamed the filter to "design," "coding," and "marketing."
+- Added slider transitions and navigation dots.
+- Disabled the previous visibility of Holo Effects.
+- Deleted the html acard2 ID.
+- Made the progress bar clickable, and the timer functionality has been updated.
 
 **0.0.15 - Previous Updates**
 
diff --git a/dist/css/main.css b/dist/css/main.css
index af8d61b..0987545 100644
--- a/dist/css/main.css
+++ b/dist/css/main.css
@@ -1867,37 +1867,37 @@ body.menu-open {
 }
 /* Navigation Dots */
 .carousel-wrapper .nav-dot {
-  background: rgb(0, 0, 0);
+  background: rgb(255, 255, 255); /* Default light mode color */
   border-radius: 50%;
+  border: 2px solid #000000; /* Dark border for light mode */
   cursor: pointer;
   display: block;
-  width: 25px;
-  height: 25px;
+  width: 14px;
+  height: 14px;
   transition: all 0.3s ease;
-  margin: 0 10px;
+  margin: 0 4px;
   overflow: hidden;
 }
 
 /* Dark Mode Navigation Dots */
 .dark-mode .carousel-wrapper .nav-dot {
-  background: rgb(0, 0, 0);
-  border: 2px solid #ffffff; /* Dark border for dark mode */
+  background: rgb(0, 0, 0); /* Black background for dark mode */
+  border: 2px solid #ffffff; /* White border for dark mode */
 }
 
 /* Active Navigation Dot */
 .carousel-wrapper .nav-dot.active {
-  background: #ffffff;
+  background: #000000; /* Black background for active dots */
   width: 100px;
-  height: 30px;
-  border-radius: 0;
+  height: 14px;
+  border-radius: 24px;
   transform: scale(1);
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
 }
 
-/* Navigation Dot Loading Effect */
+/* Fortschrittsbalken-Animation nur einmal abspielen */
 .carousel-wrapper .nav-dot.loading::before {
-  animation: progressBar 10s linear forwards;
-  background: #000;
+  animation: progressBar 5s linear forwards;
+  background: #ffffff;
   content: "";
   display: block;
   width: 100%;
@@ -1906,22 +1906,40 @@ body.menu-open {
   left: 0;
   top: 0;
   transform-origin: left;
-  transform: scaleX(0);
+  transform: scaleX(0); /* Start mit 0 */
   border-radius: 0;
+  pointer-events: none; /* Keine Mausinteraktionen */
+  animation-iteration-count: 1; /* Animation nur einmal */
+  animation-play-state: running; /* Animation wird sofort gestartet */
+}
+
+/* Verhindert Interaktionen auf dem Container während des Ladeprozesses */
+.carousel-wrapper .nav-dot.loading {
+  pointer-events: none; /* Keine Interaktionen während der Ladeanimation */
 }
 
-/* Hover Effect for Inactive Dots */
+/* Hover Effect for Inactive Round Dots */
 .carousel-wrapper .nav-dot:hover {
-  background: #ffffff;
+  background: #000000; /* Inactive dots turn black on hover */
+  transform: scale(1.1);
+}
+
+/* Hover Effect for Inactive Round Dots */
+.dark-mode .carousel-wrapper .nav-dot:hover {
+  background: #ffffff; /* Inactive dots turn black on hover */
   transform: scale(1.1);
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
 }
 
 /* Hover Effect for Active Dot */
 .carousel-wrapper .nav-dot.active:hover {
-  transform: scale(1.2);
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
-  background: #ffffff;
+  transform: scale(1.2); /* Active dot only scales, no color change */
+  background: #000000; /* Keep the black background for active dot */
+}
+
+/* Hover Effect for Active Dot in Dark Mode */
+.dark-mode .carousel-wrapper .nav-dot.active:hover {
+  transform: scale(1.2); /* Active dot only scales, no color change */
+  background: #000000; /* Keep the black background for active dot in dark mode */
 }
 
 /* Keyframes for Loading Animation */
@@ -1933,6 +1951,18 @@ body.menu-open {
     transform: scaleX(1) translateZ(0);
   }
 }
+/* Innerer Fortschrittsbalken */
+.carousel-wrapper .nav-dot .progress-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0%; /* Anfangszustand */
+  height: 100%;
+  background-color: #ffffff;
+  transition: width 0.1s ease-out; /* Übergang für sanfte Animation */
+  pointer-events: none; /* Verhindert alle Mausinteraktionen auf dem Fortschrittsbalken */
+}
+
 /*------------------------------------------------------------*/
 /* Landing Page Slider ENDE                                   */
 /*------------------------------------------------------------*/
@@ -2008,6 +2038,13 @@ body.menu-open {
 
 /* -------------------- CSS FÜR ALLE Effekte ENDE ------------------------*/
 /* -------------------- rare holo ------------------------*/
+.card[data-rarity="rare holo"]:not([data-gallery=true]) .card__glare:after {
+  content: "";
+  /* clip-path: inset(11.5% 8.5% 44.5% 8.5%); */
+  inset: -14.97% -6.17% -2.65% -13.62%;
+  background-image: radial-gradient(rgb(60, 60, 60) 100%, rgba(0, 0, 0, 0.73) 100%, rgb(0, 0, 0) 100%);
+}
+
 .card[data-rarity="rare holo"] .card__shine {
   --space: 1.5%;
   --h: 21;
@@ -2028,44 +2065,17 @@ body.menu-open {
   background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.6) 35%, rgb(0, 0, 0) 85%);
 }
 
-/* -------------------- rare holo galaxy ------------------------*/
-.card[data-rarity="rare holo galaxy"] .card__glare {
-  background-image: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(222, 245, 250, 0.7) 10%, rgba(255, 255, 255, 0.5) 20%, rgba(0, 0, 0, 0.5) 90%);
-}
-
-.card[data-rarity="rare holo"]:not([data-gallery=true]) .card__glare:after,
-.card[data-rarity="rare holo galaxy"] .card__glare:after {
-  content: "";
-  /* clip-path: inset(11.5% 8.5% 44.5% 8.5%); */
-  inset: -14.97% -6.17% -2.65% -13.62%;
-  background-image: radial-gradient(rgb(60, 60, 60) 5%, rgba(0, 0, 0, 0.73) 35%, rgb(0, 0, 0) 100%);
-}
-
-.card[data-rarity="rare holo galaxyFullshine"] .card__shine {
-  --space: 4%;
-  /* clip-path: inset( 11.5% 8.5% 44.5% 8.5% ); */
-  background-image: var(--galaxy), url(""), url(""), repeating-linear-gradient(82deg, rgb(219, 204, 86) calc(var(--space) * 1), rgb(121, 199, 58) calc(var(--space) * 2), rgb(58, 192, 183) calc(var(--space) * 3), rgb(71, 98, 207) calc(var(--space) * 4), rgb(170, 69, 209) calc(var(--space) * 5), rgb(255, 90, 180) calc(var(--space) * 6), rgb(255, 90, 180) calc(var(--space) * 7), rgb(170, 69, 209) calc(var(--space) * 8), rgb(71, 98, 207) calc(var(--space) * 9), rgb(58, 192, 183) calc(var(--space) * 10), rgb(121, 199, 58) calc(var(--space) * 11), rgb(219, 204, 86) calc(var(--space) * 12)), radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, 0.6) 5%, rgba(150, 150, 150, 0.3) 40%, rgb(0, 0, 0) 100%);
-  background-blend-mode: color-dodge, color-burn, saturation, screen;
-  background-position: var(--galaxybg, cover), var(--galaxybg, cover), var(--galaxybg, cover), calc((50% - var(--posx)) * 2.5 + 50%) calc((50% - var(--posy)) * 2.5 + 50%), center;
-  background-size: cover, cover, cover, 400% 900%, cover;
-  filter: brightness(0.75) contrast(1.2) saturate(1.5);
-  mix-blend-mode: color-dodge;
-}
-
-.card[data-rarity="rare holo galaxy"] .card__shine {
-  --space: 4%;
-  clip-path: inset(-4.59% -3.53% -1.76% -6.48%);
-  background-image: var(--birthday2), var(--galaxy), var(--cosmosbg), repeating-linear-gradient(82deg, rgb(208, 208, 208) calc(var(--space) * 1), rgb(190, 204, 179) calc(var(--space) * 2), rgb(195, 213, 211) calc(var(--space) * 3), rgb(71, 98, 207) calc(var(--space) * 4), rgb(0, 0, 0) calc(var(--space) * 5), rgb(0, 0, 0) calc(var(--space) * 6), rgb(255, 90, 180) calc(var(--space) * 7), rgb(170, 69, 209) calc(var(--space) * 8), rgb(71, 98, 207) calc(var(--space) * 9), rgb(226, 240, 239) calc(var(--space) * 10), rgb(121, 199, 58) calc(var(--space) * 11), rgb(255, 226, 1) calc(var(--space) * 12)), radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, 0.6) 5%, rgba(150, 150, 150, 0.3) 40%, rgb(0, 0, 0) 100%);
-  background-blend-mode: color-dodge, color-burn, saturation, screen;
-  background-position: var(--galaxybg, cover), var(--galaxybg, cover), var(--galaxybg, cover), calc((50% - var(--posx)) * 2.5 + 50%) calc((50% - var(--posy)) * 2.5 + 50%), center;
-  background-size: cover, cover, cover, 400% 900%, cover;
-  filter: brightness(0.75) contrast(1.2) saturate(1.5);
-  mix-blend-mode: color-dodge;
-}
-
-/* -------------------- rare holo v check------------------------*/
+/* -------------------- rare holo v check ------------------------*/
 .card[data-rarity*="rare holo v1"] .card__shine,
 .card[data-rarity*="rare holo v1"] .card__shine:after {
+  background-image: none;
+  filter: none;
+  background-blend-mode: normal;
+}
+
+/* rare holo v1 bei Hover */
+.card[data-rarity*="rare holo v1"]:hover .card__shine,
+.card[data-rarity*="rare holo v1"]:hover .card__shine:after {
   --space: 5%;
   --angle: 133deg;
   --imgsize: 500px;
@@ -2076,15 +2086,14 @@ body.menu-open {
   filter: brightness(0.8) contrast(2.95) saturate(0.5);
 }
 
-.card[data-rarity="rare holo v1"] .card__shine:after {
+.card[data-rarity="rare holo v1"]:hover .card__shine:after {
   content: "";
-  /* background-position: center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy); */
   background-size: var(--imgsize) 100%, 200% 400%, 195% 100%, 200% 100%;
   filter: brightness(1) contrast(2.5) saturate(1.75);
   mix-blend-mode: soft-light;
 }
 
-.card[data-rarity="rare holo v1"] .card__glare {
+.card[data-rarity="rare holo v1"]:hover .card__glare {
   filter: brightness(0.9) contrast(1.75);
   background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgb(255, 255, 255) 0%, rgba(133, 137, 141, 0.33) 45%, rgba(100, 100, 100, 0.65) 120%);
   opacity: calc(var(--o) * 0.66);
@@ -2092,6 +2101,13 @@ body.menu-open {
 
 /* -------------------- rare holo vmax ------------------------*/
 .card[data-rarity="rare holo vmax"] .card__shine {
+  background-image: none;
+  filter: none;
+  background-blend-mode: normal;
+}
+
+/* rare holo vmax bei Hover */
+.card[data-rarity="rare holo vmax"]:hover .card__shine {
   --space: 6%;
   --angle: 133deg;
   --imgsize: 60% 30%;
@@ -2102,7 +2118,7 @@ body.menu-open {
   filter: brightness(calc(var(--hyp) * 0.3 + 0.5)) contrast(2.5) saturate(0.6);
 }
 
-.card[data-rarity="rare holo vmax"] .card__glare {
+.card[data-rarity="rare holo vmax"]:hover .card__glare {
   filter: brightness(0.9) contrast(1.75);
   background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgb(255, 255, 255) 0%, rgba(133, 137, 141, 0.33) 45%, rgba(100, 100, 100, 0.65) 120%);
   opacity: calc(var(--o) * 0.66);
@@ -2114,6 +2130,9 @@ body.menu-open {
   --space: 5%;
   --angle: 133deg;
   --imgsize: 18% 15%;
+  /* Standard: Kein sichtbarer Effekt beim Laden der Seite */
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
   background-image: var(--Vstar), repeating-linear-gradient(0deg, rgb(255, 119, 115) calc(var(--space) * 1), rgb(255, 237, 95) calc(var(--space) * 2), rgb(168, 255, 95) calc(var(--space) * 3), rgb(131, 255, 247) calc(var(--space) * 4), rgb(120, 148, 255) calc(var(--space) * 5), rgb(216, 117, 255) calc(var(--space) * 6), rgb(255, 119, 115) calc(var(--space) * 7)), repeating-linear-gradient(var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%), radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(0, 0, 0, 0.1) 12%, rgba(0, 0, 0, 0.15) 20%, rgba(0, 0, 0, 0.25) 120%);
   background-blend-mode: soft-light, hue, hard-light;
   background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
@@ -2123,12 +2142,20 @@ body.menu-open {
 
 .card[data-rarity="rare holo vstar"] .card__shine:after {
   content: "";
+  /* Standard: Kein sichtbarer Effekt beim Laden der Seite */
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
   background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
-  /* background-position: center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy); */
   filter: brightness(calc(var(--hyp) * 0.5 + 0.8)) contrast(1.5) saturate(1.75);
   mix-blend-mode: exclusion;
 }
 
+.card[data-rarity="rare holo vstar"]:hover .card__shine,
+.card[data-rarity="rare holo vstar"]:hover .card__shine:after {
+  /* Effekt sichtbar bei Hover */
+  opacity: 1;
+}
+
 .card[data-rarity="rare holo vstar"] .card__glare {
   filter: brightness(0.9) contrast(1.75);
   background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgb(255, 255, 255) 0%, rgba(133, 137, 141, 0.33) 45%, rgba(100, 100, 100, 0.65) 120%);
@@ -2141,6 +2168,9 @@ body.menu-open {
   --space: 5%;
   --angle: 133deg;
   --imgsize: 50% 42%;
+  /* Standard: Kein sichtbarer Effekt beim Laden der Seite */
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
   background-image: var(--illusion), repeating-linear-gradient(0deg, rgb(255, 119, 115) calc(var(--space) * 1), rgb(255, 237, 95) calc(var(--space) * 2), rgb(168, 255, 95) calc(var(--space) * 3), rgb(131, 255, 247) calc(var(--space) * 4), rgb(120, 148, 255) calc(var(--space) * 5), rgb(216, 117, 255) calc(var(--space) * 6), rgb(255, 119, 115) calc(var(--space) * 7)), repeating-linear-gradient(var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%), radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(0, 0, 0, 0.1) 12%, rgba(0, 0, 0, 0.15) 20%, rgba(0, 0, 0, 0.25) 120%);
   background-blend-mode: exclusion, hue, hard-light;
   background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
@@ -2150,21 +2180,37 @@ body.menu-open {
 
 .card[data-rarity="rare ultra"] .card__shine:after {
   content: "";
+  /* Standard: Kein sichtbarer Effekt beim Laden der Seite */
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
   background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
-  /*  background-position: center center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy); */
   filter: brightness(calc(var(--hyp) * 0.5 + 0.8)) contrast(1.6) saturate(1.4);
   mix-blend-mode: exclusion;
 }
 
+.card[data-rarity="rare ultra"]:hover .card__shine,
+.card[data-rarity="rare ultra"]:hover .card__shine:after {
+  /* Effekt sichtbar bei Hover */
+  opacity: 1;
+}
+
 .card[data-rarity="rare ultra"] .card__glare {
   filter: brightness(0.9) contrast(1.75);
   background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgb(255, 255, 255) 0%, rgba(133, 137, 141, 0.33) 45%, rgba(100, 100, 100, 0.65) 120%);
   opacity: calc(var(--o) * 0.66);
 }
 
-/* -------------------- ShineBlitz ------------------------*/
+/* ShineBlitz im Normalzustand - unsichtbar, keine Effekte */
 .card[data-rarity=ShineBlitz] .card__shine,
 .card[data-rarity=ShineBlitz] .card__shine:after {
+  background-image: none;
+  filter: none;
+  background-blend-mode: normal;
+}
+
+/* ShineBlitz bei Hover - der Effekt wird sichtbar */
+.card[data-rarity=ShineBlitz]:hover .card__shine,
+.card[data-rarity=ShineBlitz]:hover .card__shine:after {
   --space: 5%;
   --angle: 133deg;
   --imgsize: 25% 20%;
@@ -2175,22 +2221,33 @@ body.menu-open {
   filter: brightness(0.75) contrast(2.5) saturate(0.75);
 }
 
-.card[data-rarity=ShineBlitz] .card__shine:after {
+/* Weiterer Effekt mit Zusatz bei Hover */
+.card[data-rarity=ShineBlitz]:hover .card__shine:after {
   content: "";
   background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
   filter: brightness(1.2) contrast(1) saturate(1.75);
   mix-blend-mode: exclusion;
 }
 
-.card[data-rarity=ShineBlitz] .card__glare {
+/* Glare-Effekt bei Hover */
+.card[data-rarity=ShineBlitz]:hover .card__glare {
   filter: brightness(0.9) contrast(1.75);
   background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgb(255, 255, 255) 0%, rgba(133, 137, 141, 0.33) 45%, rgba(100, 100, 100, 0.65) 120%);
   opacity: calc(var(--o) * 0.66);
 }
 
 /* -------------------- rare rainbow ------------------------*/
+/* Rare Rainbow im Normalzustand - unsichtbar, keine Effekte */
 .card[data-rarity^="rare rainbow"] .card__shine,
 .card[data-rarity^="rare rainbow"] .card__shine:after {
+  background-image: none;
+  filter: none;
+  background-blend-mode: normal;
+}
+
+/* Rare Rainbow bei Hover - der Effekt wird sichtbar */
+.card[data-rarity^="rare rainbow"]:hover .card__shine,
+.card[data-rarity^="rare rainbow"]:hover .card__shine:after {
   --rainbowspace: 9%;
   --overlayspace: 12%;
   --angle: -20deg;
@@ -2203,7 +2260,8 @@ body.menu-open {
   filter: brightness(calc(var(--hyp) * 0.25 + 0.66)) contrast(2.2) saturate(0.9);
 }
 
-.card[data-rarity^="rare rainbow"] .card__shine:after {
+/* Weiterer Effekt mit Zusatz bei Hover */
+.card[data-rarity^="rare rainbow"]:hover .card__shine:after {
   content: "";
   background-position: center, 0% calc(var(--posy) * -1.75), calc(var(--posx) * -1.75) calc(var(--posy) * -1), bottom left;
   mix-blend-mode: exclusion;
@@ -2229,8 +2287,16 @@ body.menu-open {
   mix-blend-mode: exclusion;
 }
 
-/* -------------------- RADIANTT ------------------------*/
+/* Standardzustand - Karte ohne den Radiant-Effekt */
 .card[data-rarity*=radiant] .card__shine {
+  /* Standard Hintergründe (keine Strahleneffekte) */
+  background-image: none;
+  filter: none;
+  mix-blend-mode: normal;
+}
+
+/* Wenn man über die Karte hovert, wird der Radiant-Effekt sichtbar */
+.card[data-rarity*=radiant]:hover .card__shine {
   --barwidth: 1.2%;
   --space: 200px;
   background-image: repeating-linear-gradient(0deg, hsl(180, 70%, 50%) calc(var(--space) * 1), hsl(110, 80%, 50%) calc(var(--space) * 2), hsl(80, 90%, 50%) calc(var(--space) * 3), hsl(50, 90%, 50%) calc(var(--space) * 4), hsl(80, 90%, 50%) calc(var(--space) * 5), hsl(110, 80%, 50%) calc(var(--space) * 6), hsl(180, 70%, 50%) calc(var(--space) * 7)), repeating-linear-gradient(45deg, hsl(0, 0%, 10%) 0%, hsl(0, 0%, 10%) 1%, hsl(0, 0%, 10%) var(--barwidth), hsl(0, 0%, 20%) calc(var(--barwidth) + 0.01%), hsl(0, 0%, 20%) calc(var(--barwidth) * 2), hsl(0, 0%, 35%) calc(var(--barwidth) * 2 + 0.01%), hsl(0, 0%, 35%) calc(var(--barwidth) * 3), hsl(0, 0%, 42.5%) calc(var(--barwidth) * 3 + 0.01%), hsl(0, 0%, 42.5%) calc(var(--barwidth) * 4), hsl(0, 0%, 50%) calc(var(--barwidth) * 4 + 0.01%), hsl(0, 0%, 50%) calc(var(--barwidth) * 5), hsl(0, 0%, 42.5%) calc(var(--barwidth) * 5 + 0.01%), hsl(0, 0%, 42.5%) calc(var(--barwidth) * 6), hsl(0, 0%, 35%) calc(var(--barwidth) * 6 + 0.01%), hsl(0, 0%, 35%) calc(var(--barwidth) * 7), hsl(0, 0%, 20%) calc(var(--barwidth) * 7 + 0.01%), hsl(0, 0%, 20%) calc(var(--barwidth) * 8), hsl(0, 0%, 10%) calc(var(--barwidth) * 8 + 0.01%), hsl(0, 0%, 10%) calc(var(--barwidth) * 9), hsl(0, 0%, 0%) calc(var(--barwidth) * 9 + 0.01%), hsl(0, 0%, 0%) calc(var(--barwidth) * 10)), repeating-linear-gradient(-45deg, hsl(0, 0%, 10%) 0%, hsl(0, 0%, 10%) 1%, hsl(0, 0%, 10%) var(--barwidth), hsl(0, 0%, 20%) calc(var(--barwidth) + 0.01%), hsl(0, 0%, 20%) calc(var(--barwidth) * 2), hsl(0, 0%, 35%) calc(var(--barwidth) * 2 + 0.01%), hsl(0, 0%, 35%) calc(var(--barwidth) * 3), hsl(0, 0%, 42.5%) calc(var(--barwidth) * 3 + 0.01%), hsl(0, 0%, 42.5%) calc(var(--barwidth) * 4), hsl(0, 0%, 50%) calc(var(--barwidth) * 4 + 0.01%), hsl(0, 0%, 50%) calc(var(--barwidth) * 5), hsl(0, 0%, 42.5%) calc(var(--barwidth) * 5 + 0.01%), hsl(0, 0%, 42.5%) calc(var(--barwidth) * 6), hsl(0, 0%, 35%) calc(var(--barwidth) * 6 + 0.01%), hsl(0, 0%, 35%) calc(var(--barwidth) * 7), hsl(0, 0%, 20%) calc(var(--barwidth) * 7 + 0.01%), hsl(0, 0%, 20%) calc(var(--barwidth) * 8), hsl(0, 0%, 10%) calc(var(--barwidth) * 8 + 0.01%), hsl(0, 0%, 10%) calc(var(--barwidth) * 9), hsl(0, 0%, 0%) calc(var(--barwidth) * 9 + 0.01%), hsl(0, 0%, 0%) calc(var(--barwidth) * 10));
@@ -2241,7 +2307,8 @@ body.menu-open {
   mix-blend-mode: color-dodge;
 }
 
-.card[data-rarity*=radiant] .card__shine:after {
+/* Glitter-Effekt bei Hover */
+.card[data-rarity*=radiant]:hover .card__shine:after {
   content: "";
   background-image: var(--glitter), repeating-linear-gradient(55deg, rgb(255, 161, 158) calc(var(--space) * 1), rgb(85, 178, 255) calc(var(--space) * 2), rgb(255, 199, 146) calc(var(--space) * 3), rgb(130, 255, 213) calc(var(--space) * 4), rgb(253, 170, 240) calc(var(--space) * 5), rgb(148, 241, 255) calc(var(--space) * 6), rgb(255, 161, 158) calc(var(--space) * 7));
   background-size: 25% 25%, 400% 100%;
@@ -2251,7 +2318,8 @@ body.menu-open {
   background-blend-mode: multiply;
 }
 
-.card[data-rarity*=radiant] .card__shine:before {
+/* Halo und Glare bei Hover */
+.card[data-rarity*=radiant]:hover .card__shine:before {
   content: "";
   z-index: 7;
   grid-area: 1/1;
@@ -2262,7 +2330,8 @@ body.menu-open {
   mix-blend-mode: multiply;
 }
 
-.card[data-rarity=radiant] .card__glare {
+/* Glare bei Hover */
+.card[data-rarity=radiant]:hover .card__glare {
   background-image: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.6) 30%, rgba(0, 0, 0, 0.8) 80%);
 }
 
diff --git a/dist/css/main.css.map b/dist/css/main.css.map
index 891f683..38fe6bd 100644
--- a/dist/css/main.css.map
+++ b/dist/css/main.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/scss/_globals.scss","../../src/scss/_fonts.scss","../../src/scss/_header.scss","../../src/scss/_portfolio-page.scss","../../src/scss/_single-card-page.scss","../../src/scss/_skills-page.scss","../../src/scss/_contact-page.scss","../../src/scss/_about-page.scss","../../src/scss/_footer.scss"],"names":[],"mappings":";AAAA;AAEA;AAOA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AACA;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAWF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;IACE;IACA;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAMJ;AACA;AACA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AAGA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;EACE;IACE;;EAEF;IACE;;;AAIJ;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;AACA;AAKA;AACA;AACA;AACA;EACE;IACI;;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAMF;AACA;AACA;ACtRA;AAEA;AAEA;AAEA;AACA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;AAEA;AAEA;EACI;EACA;;AAEJ;AAGA;AACA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;AAEA;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;ACnLA;AAEA;AAGA;AACA;AACA;AAIA;AACA;AAAA;EAEE;EACA;AACD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAGF;EACE;;;AAKF;AACA;EACE;IACE;IACA;AACD;AAAA;IAEC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;AACA;EACE;IACE;IACA;AACD;AAAA;IAEC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAMJ;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAIF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;;;AAKJ;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACE;AACA;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;AACA;AACA;AAIF;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACF;EACA;;;AAGC;AACA;EACC;IACE;IACA;IACA;IACA;IACA;;;AAIJ;AACA;EACE;IACE;IACA;IACA;IACA;IACA;;;AAKF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACF;;;AAGF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACI;EACA;EACA;EACA;EACA;EACF;;;AAIF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;;;AAKJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;;;AAIJ;EACI;EACA;;;AAGJ;EACI;IACI;IACA;;EAEJ;IACI;IACA;;;AAIR;EACI;IACI;IACA;;EAEJ;IACI;IACA;;;AAKR;AACA;AACA;AAKA;AACA;AACA;AAEA;AACA;EACE;;;AAEF;AACA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;IACE;IACA;;EAEF;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;AACA;AACA;AAMF;AACA;AACA;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;EACE;EACA;AACD;;;AAID;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAIF;EACE;IACE;IACA;IACA;IACA;IACA;;;AAIJ;AACA;AACA;AAGA;AACF;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAGJ;AAgCF;AAGA;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAKJ;AACA;EACE;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;;;AAIF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;;AAIJ;AACA;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;;AAIJ;ACx7BF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAaF;AAEA;AAED;AACD;EACE;;;AAIF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;IACE;IACA;;;AAIJ;EACE;IACE;;;AA+BJ;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAEA;AACA;EACE;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;;;AAIJ;AACA;EACE;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;;;AAIJ;AAMA;AACA;AACA;AASE;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;AACA;EACE;IACE;IACA;;;AAIJ;AACA;EACA;EACA;EACA;EACA;EACA;;;AAKA;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;;AAIJ;AACA;EACE;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;;;AA2BJ;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAIF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAKF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAED;AAmCH;AACA;AACA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAIF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAKF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;IACA;;;AAIJ;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;IACA;IACA;IACA;;;AAIJ;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;IACA;IACA;;;AAIJ;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;IACI;;EAEJ;IACI;;;AAIN;AACA;AACA;AA6CA;AACA;AACA;AACA;AACA;AAGA;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAIF;AAAA;EAGE;;;AAMF;EACE;EACA;EAEA;EACA;;;AAIF;EACE;;;AAOF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAEF;AAME;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA,kBACE;EAmDF;EACA;EACA;EAEA;;;AAIF;EAEE;;;AAWF;AAEA;EAEE,kBACA;;;AAUF;AAAA;EAGE;AACD;EACC;EAEA;;;AAQF;EAEE;AAEA;EAEA,kBACE;EA0BF;EACA;EACA;EAEA;EACA;;;AAIF;EAEE;EAEA;EAEA,kBACA;EA2BA;EACA;EACA;EAEA;EACA;;;AAMD;AAED;AAAA;EAGE;EACA;EACA;EAEA,kBACE;EA2BF;EACA;EACA;EAEA;;;AAIF;EAEE;AAED;EACC;EAEA;EACA;;;AAIF;EAEE;EAEA;EAQA;;;AAMF;AAEA;EACE;EACA;EACA;EAGA,kBAEE;EA6BF;EACA;EACA,qBACE;EAKF;;;AAKF;EAEE;EAEA;EAQA;;;AAKF;AAEA;AAAA;EAGE;EACA;EACA;EAEA,kBACE;EA2BF;EACA;EACA;EAEA;;;AAIF;EAEE;EAEA;AACD;EAEC;EACA;;;AAKF;EAEE;EAEA;EAQA;;;AAKF;AAIA;AAAA;EAGE;EACA;EACA;EAEA,kBACE;EA2BF;EACA;EACA;EAEA;;;AAIF;EAEE;EAEA;AACF;EAEE;EACA;;;AAQF;EAEE;EAEA;EAQA;;;AAKF;AAMA;AAAA;EAGE;EACA;EACA;EAEA,kBACA;EA2BA;EACA;EACA;EAEA;;;AAIF;EAEE;EAEA;EAEA;EACA;;;AAKF;EAEE;EAEA;EAQA;;;AAKH;AAKC;AAAA;EAGE;EACA;EACA;EACA;EACA;EAEA,kBACE;EAoBF;EACA;EACA;EAEA;;;AAIF;EAEE;EAEA;EACA;;;AAMD;AAID;AAAA;EAGE;EACA;EAEA,kBACE;EAWF;EACA;EACA;EAEA;;;AAKF;EAEE;EAEA,kBACE;EAUF;EAEA;EACA;;;AAMD;AAKD;EAEE;EACA;EAGA,kBACE;EA0DF;EACA,qBACE;EAIF;EAEA;EACA;;;AAIF;EAEE;EAEA,kBACE;EAWF;EACA;EAEA;EACA;EAEA;;;AAIF;EAEE;EACA;EACA;EAEA,kBACE;EAQF,kBACE;EAEF;EACA;EAEA;;;AAIF;EACE;;;AAMH;AAKC;EAEE;EACA;EACA;EAEA;EAEA,kBACE;EAUA;EACA;EACA;EAEA;;;AAIJ;EAEE;EAEA,kBACE;EAQF;EACA;EAEA;EACA;;;ACj0DN;AAEA;AAIA;AACA;AACA;AAEA;AACA;EACI;EACA;EACA;;;AAGF;EACE;EACA;;;AAaJ;EACI;EACA;EACA;EACA;AACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACI;EACA;EACA;EACA;;;AAIF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACA;;;AAIJ;EACE;IACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAIJ;AACA;EACE;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;EACA;;;AAIF;EACE;IACE;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;AACA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;IACA;;EAGF;IACE;;;AAIJ;AACA;AACA;AAUF;AACA;AACA;AAGA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACF;;EAGA;IACE;IACA;;EAGF;IACE;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAMF;AACA;AACA;AAGF;AACE;EACE;EACA;EACA;EACA;;;ACrcJ;AAEA;AAEA;AACA;AACA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;AACA;AChFA;AAEA;ACFA;AAEA;AAIA;AACA;AACA;AAEA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;AACA;AAMA;AAEA;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;AACA;AAIA;AACA;AACA;AAEA;AACA;EACE;IACE;;;AAIJ;EACE;IACE;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;AACA;AACA;AAIA;AACA;AACA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;AACA;AC9RF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACG;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACI;;;AAGJ;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAWD;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAYJ;AACA;EACC;EACA;EACA;EACA;;;AAGD;EACI;EACA;EACA;EACA;EACA;;;AAMJ;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACI;EACF;EACA;EACA;EACA;EACA;EACA","file":"main.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../src/scss/_globals.scss","../../src/scss/_fonts.scss","../../src/scss/_header.scss","../../src/scss/_portfolio-page.scss","../../src/scss/_single-card-page.scss","../../src/scss/_skills-page.scss","../../src/scss/_contact-page.scss","../../src/scss/_about-page.scss","../../src/scss/_footer.scss"],"names":[],"mappings":";AAAA;AAEA;AAOA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AACA;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAWF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;IACE;IACA;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAMJ;AACA;AACA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AAGA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;EACE;IACE;;EAEF;IACE;;;AAIJ;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;AACA;AAKA;AACA;AACA;AACA;EACE;IACI;;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAMF;AACA;AACA;ACtRA;AAEA;AAEA;AAEA;AACA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;AAEA;AAEA;EACI;EACA;;AAEJ;AAGA;AACA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;AAEA;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;ACnLA;AAEA;AAGA;AACA;AACA;AAIA;AACA;AAAA;EAEE;EACA;AACD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAGF;EACE;;;AAKF;AACA;EACE;IACE;IACA;AACD;AAAA;IAEC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;AACA;EACE;IACE;IACA;AACD;AAAA;IAEC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAMJ;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAIF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;;;AAKJ;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACE;AACA;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;AACA;AACA;AAIF;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACF;EACA;;;AAGC;AACA;EACC;IACE;IACA;IACA;IACA;IACA;;;AAIJ;AACA;EACE;IACE;IACA;IACA;IACA;IACA;;;AAKF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACF;;;AAGF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACI;EACA;EACA;EACA;EACA;EACF;;;AAIF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;;;AAKJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;;;AAIJ;EACI;EACA;;;AAGJ;EACI;IACI;IACA;;EAEJ;IACI;IACA;;;AAIR;EACI;IACI;IACA;;EAEJ;IACI;IACA;;;AAKR;AACA;AACA;AAKA;AACA;AACA;AAEA;AACA;EACE;;;AAEF;AACA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;IACE;IACA;;EAEF;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;AACA;AACA;AAMF;AACA;AACA;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;EACE;EACA;AACD;;;AAID;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAIF;EACE;IACE;IACA;IACA;IACA;IACA;;;AAIJ;AACA;AACA;AAGA;AACF;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAGJ;AAgCF;AAGA;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAKJ;AACA;EACE;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;;;AAIF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;;AAIJ;AACA;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;;AAIJ;ACx7BF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAaF;AAEA;AAED;AACD;EACE;;;AAIF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;IACE;IACA;;;AAIJ;EACE;IACE;;;AA+BJ;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAEA;AACA;EACE;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;;;AAIJ;AACA;EACE;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;;;AAIJ;AAMA;AACA;AACA;AASE;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;AACA;EACE;IACE;IACA;;;AAIJ;AACA;EACA;EACA;EACA;EACA;EACA;;;AAKA;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;;AAIJ;AACA;EACE;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;;;AA2BJ;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAIF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAKF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAED;AAmCH;AACA;AACA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAIF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAKF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;IACA;;;AAIJ;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;IACA;IACA;IACA;;;AAIJ;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;IACA;IACA;;;AAIJ;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AA6BF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;;;AAIF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;;;AAIF;AACA;EACE;EACA;;;AAIF;AACA;EACE;EAEA;;;AAGF;AACA;EACE;EAEA;;;AAGF;AACA;EACE;IACI;;EAEJ;IACI;;;AAIN;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;AACA;AACA;AA6CA;AACA;AACA;AACA;AACA;AAGA;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAIF;AAAA;EAGE;;;AAMF;EACE;EACA;EAEA;EACA;;;AAIF;EACE;;;AAOF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAEF;AAME;AAEA;EAEE;AACD;EACC;EAEA;;;AAQF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA,kBACE;EAmDF;EACA;EACA;EAEA;;;AAGF;EAEE;;;AAYN;AAEA;AAAA;EAEE;EACA;EACA;;;AAGF;AACA;AAAA;EAEE;EACA;EACA;EAEA,kBACE;EA2BF;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EAOA;;;AAMF;AAEA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EAEA,kBACE;EA2BF;EACA;EACA,qBACE;EAKF;;;AAGF;EACE;EACA;EAOA;;;AAMF;AAEA;AAAA;EAGI;EACA;EACA;AAEA;EACA;EACA;EAEA,kBACI;EA2BJ;EACA;EACA;EAEA;;;AAGJ;EAEI;AAEA;EACA;EACA;EAEA;EACA;EACA;;;AAGJ;AAAA;AAGI;EACA;;;AAGJ;EAEI;EAEA;EAQA;;;AAKJ;AAEA;AAAA;EAGI;EACA;EACA;AAEA;EACA;EACA;EAEA,kBACI;EA2BJ;EACA;EACA;EAEA;;;AAGJ;EAEI;AAEA;EACA;EACA;EAEA;EACA;EACA;;;AAGJ;AAAA;AAGI;EACA;;;AAGJ;EAEI;EAEA;EAQA;;;AAKJ;AACA;AAAA;EAEE;EACA;EACA;;;AAGF;AACA;AAAA;EAEE;EACA;EACA;EAEA,kBACE;EA2BF;EACA;EACA;EAEA;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EAEA;EAQA;;;AAKC;AACF;AACD;AAAA;EAEE;EACA;EACA;;;AAGF;AACA;AAAA;EAEE;EACA;EACA;EACA;EACA;EAEA,kBACE;EAoBF;EACA;EACA;EAEA;;;AAGF;AACA;EACE;EACA;EACA;;;AAMG;AAID;AAAA;EAGE;EACA;EAEA,kBACE;EAWF;EACA;EACA;EAEA;;;AAKF;EAEE;EAEA,kBACE;EAUF;EAEA;EACA;;;AAMN;AACA;AACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EAEA,kBACE;EAyDF;EACA,qBACE;EAIF;EAEA;EACA;;;AAGF;AACA;EACE;EACA,kBACE;EAUF;EACA;EAEA;EACA;EAEA;;;AAGF;AACA;EACE;EACA;EACA;EACA,kBACE;EAQF,kBACE;EAEF;EACA;EAEA;;;AAGF;AACA;EACE;;;AAOC;AAKC;EAEE;EACA;EACA;EAEA;EAEA,kBACE;EAUA;EACA;EACA;EAEA;;;AAIJ;EAEE;EAEA,kBACE;EAQF;EACA;EAEA;EACA;;;AChyDN;AAEA;AAIA;AACA;AACA;AAEA;AACA;EACI;EACA;EACA;;;AAGF;EACE;EACA;;;AAaJ;EACI;EACA;EACA;EACA;AACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACI;EACA;EACA;EACA;;;AAIF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACA;;;AAIJ;EACE;IACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAIJ;AACA;EACE;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;EACA;;;AAIF;EACE;IACE;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;AACA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;IACA;IACA;;EAGF;IACE;;;AAIJ;AACA;AACA;AAUF;AACA;AACA;AAGA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACF;;EAGA;IACE;IACA;;EAGF;IACE;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAMF;AACA;AACA;AAGF;AACE;EACE;EACA;EACA;EACA;;;ACrcJ;AAEA;AAEA;AACA;AACA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;AACA;AChFA;AAEA;ACFA;AAEA;AAIA;AACA;AACA;AAEA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;AACA;AAMA;AAEA;AACA;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;AACA;AAIA;AACA;AACA;AAEA;AACA;EACE;IACE;;;AAIJ;EACE;IACE;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;AACA;AACA;AAIA;AACA;AACA;AAEA;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;AACA;AC9RF;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACG;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACI;;;AAGJ;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAWD;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAYJ;AACA;EACC;EACA;EACA;EACA;;;AAGD;EACI;EACA;EACA;EACA;EACA;;;AAMJ;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACI;EACF;EACA;EACA;EACA;EACA;EACA","file":"main.css"}
\ No newline at end of file
diff --git a/public/portfolio.html b/public/portfolio.html
index 633260c..943d434 100644
--- a/public/portfolio.html
+++ b/public/portfolio.html
@@ -242,14 +242,12 @@ <h1 class="title-slider" href="www.gylansalih.com">Portfolio</h1>
         <option>rare ultra</option>
         <option>ShineBlitz</option>
         <option>radiant</option>
-        <option>rare holo</option>
-        <option>rare holo galaxy</option>
+        <option>rare holo</option
         <option>rare holo vmax</option>
         <option>rare rainbow</option>
         <option>rare secret</option>
         <option>rare holo v1</option>
         <option>rare holo vstar</option>
-        <option>rare holo galaxyFullshine</option>
     </select>
     </div>
     </div>
@@ -263,8 +261,7 @@ <h1 class="title-slider" href="www.gylansalih.com">Portfolio</h1>
 
                 <div class="holographic__section">
                     <a href="/public/Card1.html" class="transition-link">
-                        <div id="acard2" class="card holographic" data-rarity="rare holo v" data-category="Coding">
-                            <div class="card__back"></div>
+                        <div class="card holographic" data-rarity="rare holo v" data-category="Coding">
                             <div class="card__effects">
                                 <img src="/src/assets/img/reduced_images/New3.jpeg" class="card_images" loading="lazy">
                                 <div class="card__shine"></div>
@@ -281,7 +278,7 @@ <h1 class="title-slider" href="www.gylansalih.com">Portfolio</h1>
 
                 <div class="holographic__section">
                     <a href="/public/Card1.html">
-                        <div id="acard2" class="card holographic" data-rarity="rare holo v" data-category="Coding">
+                        <div class="card holographic" data-rarity="rare holo v" data-category="Coding">
                             <div class="card__effects">
                                 <img src="/src/assets/gifs/RedSamurai.gif" class="card_images" loading="lazy">
                                 <div class="card__shine"></div>
@@ -296,7 +293,7 @@ <h1 class="title-slider" href="www.gylansalih.com">Portfolio</h1>
                 
 
                 <div class="holographic__section">
-                    <div id="acard2" class="card holographic" data-rarity="rare holo v" data-category="Design">
+                    <div class="card holographic" data-rarity="rare holo v" data-category="Design">
                                 <div class="card__effects">
                                     <img src="/src/assets/gifs/Dragon.gif" class="card_images" loading="lazy">
                                     <div class="card__shine"></div>
@@ -310,7 +307,7 @@ <h1 class="title-slider" href="www.gylansalih.com">Portfolio</h1>
 
 
                 <div class="holographic__section">
-                    <div id="acard2" class="card holographic" data-rarity="rare holo v" data-category="Coding">
+                    <div class="card holographic" data-rarity="rare holo v" data-category="Coding">
                                 <div class="card__effects">
                                     <img src="/src/assets/gifs/natureworld.gif" class="card_images" loading="lazy">
                                     <div class="card__shine"></div>
@@ -325,7 +322,7 @@ <h1 class="title-slider" href="www.gylansalih.com">Portfolio</h1>
 
 
                 <div class="holographic__section">
-                    <div id="acard2" class="card holographic" data-rarity="rare holo v" data-category="Design">
+                    <div class="card holographic" data-rarity="rare holo v" data-category="Design">
                                 <div class="card__effects">
                                     <img src="/src/assets/img/reduced_images/New5.jpeg" class="card_images" loading="lazy">
                                     <div class="card__shine"></div>
@@ -339,7 +336,7 @@ <h1 class="title-slider" href="www.gylansalih.com">Portfolio</h1>
 
 
                 <div class="holographic__section">
-                    <div id="acard2" class="card holographic" data-rarity="rare holo v" data-category="Marketing">
+                    <div class="card holographic" data-rarity="rare holo v" data-category="Marketing">
                                 <div class="card__effects">
                                     <img src="/src/assets/img/reduced_images/New6.jpeg"  class="card_images" loading="lazy">
                                     <div class="card__shine"></div>
@@ -352,7 +349,7 @@ <h1 class="title-slider" href="www.gylansalih.com">Portfolio</h1>
                 </div>
 
                 <div class="holographic__section">
-                    <div id="acard2" class="card holographic" data-rarity="rare holo v" data-category="Super Selten">
+                    <div class="card holographic" data-rarity="rare holo v" data-category="Super Selten">
                                 <div class="card__effects">
                                     <img src="/src/assets/img/reduced_images/New7.jpg" class="card_images" loading="lazy">
                                     <div class="card__shine"></div>
diff --git a/script.js b/script.js
index db8abf5..8b3e82a 100644
--- a/script.js
+++ b/script.js
@@ -255,53 +255,213 @@ document.addEventListener('DOMContentLoaded', function() {
 // Landing Page Slider / Carousel            //
 // -----------------------------------------//
 
+// $(document).ready(function() {
+//   var autoplayInterval = 7000; // Time in milliseconds between slides
+//   var autoplayTimer;
+//   var startX, startY, endX, endY;
+
+//   function changeSlide(next) {
+//       var $current = $('.slide.active');
+//       var current = $current.data('slide');
+      
+//       if (current === next) {
+//           return;
+//       }
+      
+//       $('.slide').removeClass('active');
+//       $('.slide[data-slide=' + next + ']').addClass('active');
+      
+//       $('.nav-dot').removeClass('active loading');
+//       $('.nav-dot[data-slide=' + next + ']').addClass('active loading');
+//   }
+
+//   function startAutoplay() {
+//       autoplayTimer = setInterval(function() {
+//           var $current = $('.slide.active');
+//           var current = $current.data('slide');
+//           var next = $current.next('.slide').length ? 
+//                       $current.next('.slide').data('slide') : 
+//                       $('.slide').first().data('slide');
+          
+//           changeSlide(next);
+//       }, autoplayInterval);
+//   }
+
+//   function stopAutoplay() {
+//       clearInterval(autoplayTimer);
+//   }
+
+//   $('.nav-dot').on('click', function(e) {
+//       e.preventDefault();
+      
+//       var next = $(this).data('slide');
+//       changeSlide(next);
+      
+//       stopAutoplay();  // Stop autoplay on manual change
+//       startAutoplay(); // Restart autoplay
+//   });
+
+//   // Swipe event handling
+//   $('.carousel-wrapper').on('touchstart mousedown', function(e) {
+//       if(e.type === 'touchstart') {
+//           startX = e.originalEvent.touches[0].pageX;
+//           startY = e.originalEvent.touches[0].pageY;
+//       } else {
+//           startX = e.pageX;
+//           startY = e.pageY;
+//           e.preventDefault();
+//       }
+//       stopAutoplay();  // Stop autoplay on swipe start
+//   });
+
+//   $('.carousel-wrapper').on('touchend mouseup', function(e) {
+//       if(e.type === 'touchend') {
+//           endX = e.originalEvent.changedTouches[0].pageX;
+//           endY = e.originalEvent.changedTouches[0].pageY;
+//       } else {
+//           endX = e.pageX;
+//           endY = e.pageY;
+//       }
+      
+//       var diffX = endX - startX;
+//       var diffY = endY - startY;
+
+//       if(Math.abs(diffX) > Math.abs(diffY)) {
+//           if(diffX > 50) {
+//               // Swipe right
+//               var $current = $('.slide.active');
+//               var prev = $current.prev('.slide').length ? 
+//                          $current.prev('.slide').data('slide') : 
+//                          $('.slide').last().data('slide');
+//               changeSlide(prev);
+//           } else if(diffX < -50) {
+//               // Swipe left
+//               var $current = $('.slide.active');
+//               var next = $current.next('.slide').length ? 
+//                          $current.next('.slide').data('slide') : 
+//                          $('.slide').first().data('slide');
+//               changeSlide(next);
+//           }
+//       }
+
+//       startAutoplay(); // Restart autoplay after swipe end
+//   });
+
+//   // Optional: Start with the first slide active
+//   changeSlide($('.nav-dot.active').data('slide'));
+
+//   // Add 'loading' class to the first dot immediately
+//   $('.nav-dot.active').addClass('loading');
+
+//   // Start autoplay when the document is ready
+//   startAutoplay();
+// });
+
 $(document).ready(function() {
-  var autoplayInterval = 10000; // Time in milliseconds between slides
+  var autoplayInterval = 5000; // Gesamtzeit für das Autoplay (jetzt 10 Sekunden)
+  var progressTimer;
   var autoplayTimer;
   var startX, startY, endX, endY;
 
+  // Funktion zum Wechseln der Folien
   function changeSlide(next) {
-      var $current = $('.slide.active');
-      var current = $current.data('slide');
+    var $current = $('.slide.active');
+    var current = $current.data('slide');
+
+    if (current === next) {
+        return;
+    }
+
+    // Entferne die 'active' Klasse von allen Folien
+    $('.slide').removeClass('active');
+    // Setze die 'active' Klasse auf die nächste Folie
+    $('.slide[data-slide=' + next + ']').addClass('active');
+
+    // Entferne die 'active' und 'loading' Klasse von allen Navigationspunkten
+    $('.nav-dot').removeClass('active loading');
+    // Setze die 'active' und 'loading' Klasse auf den nächsten Navigationspunkt
+    var $nextDot = $('.nav-dot[data-slide=' + next + ']');
+    $nextDot.addClass('active loading');
+
+    // Starte die Fortschritts-Animation
+    startProgressBar($nextDot);
+  }
+
+  // Funktion zum Starten des Fortschrittsbalkens
+  function startProgressBar(dot) {
+    var $dot = $(dot);
+    var $progressBar = $dot.find('.progress-bar');
+
+    // Lösche den aktuellen Fortschritt und starte ihn neu
+    $progressBar.css('width', '0%'); // Setze den Fortschritt auf 0%
+
+    var width = 0;
+    var duration = autoplayInterval; // Die Dauer, die der Fortschrittsbalken benötigt (jetzt dynamisch)
+    var step = 100 / (duration / 100); // Berechne, wie schnell der Balken wachsen muss, abhängig vom Timer
+
+    clearInterval(progressTimer); // Stoppe den vorherigen Timer, falls vorhanden
+    progressTimer = setInterval(function() {
+      width += step;
+      $progressBar.css('width', width + '%');
       
-      if (current === next) {
-          return;
+      if (width >= 100) {
+        clearInterval(progressTimer); // Stoppe den Timer, wenn der Fortschritt 100% erreicht
+        $dot.removeClass('loading'); // Entferne die 'loading' Klasse
+        changeSlideNext(); // Gehe zur nächsten Folie
       }
-      
-      $('.slide').removeClass('active');
-      $('.slide[data-slide=' + next + ']').addClass('active');
-      
-      $('.nav-dot').removeClass('active loading');
-      $('.nav-dot[data-slide=' + next + ']').addClass('active loading');
+    }, 100); // Der Timer wird alle 100 Millisekunden aktualisiert
   }
 
+  // Wechsel zur nächsten Folie, wenn der Fortschritt abgeschlossen ist
+  function changeSlideNext() {
+    var $current = $('.slide.active');
+    var next = $current.next('.slide').length ? 
+              $current.next('.slide').data('slide') : 
+              $('.slide').first().data('slide');
+    
+    changeSlide(next); // Wechsel zur nächsten Folie
+  }
+
+  // Funktion zum Starten des Autoplay
   function startAutoplay() {
-      autoplayTimer = setInterval(function() {
-          var $current = $('.slide.active');
-          var current = $current.data('slide');
-          var next = $current.next('.slide').length ? 
-                      $current.next('.slide').data('slide') : 
-                      $('.slide').first().data('slide');
-          
-          changeSlide(next);
-      }, autoplayInterval);
+    autoplayTimer = setInterval(function() {
+      var $current = $('.slide.active');
+      var current = $current.data('slide');
+      var next = $current.next('.slide').length ? 
+                $current.next('.slide').data('slide') : 
+                $('.slide').first().data('slide');
+
+      changeSlide(next);
+    }, autoplayInterval);
   }
 
+  // Funktion zum Stoppen des Autoplay
   function stopAutoplay() {
-      clearInterval(autoplayTimer);
+    clearInterval(autoplayTimer);
+    clearInterval(progressTimer); // Stoppe auch den Fortschrittstimer
   }
 
+  // Klick-Event für Navigation Dots
   $('.nav-dot').on('click', function(e) {
       e.preventDefault();
       
       var next = $(this).data('slide');
-      changeSlide(next);
       
-      stopAutoplay();  // Stop autoplay on manual change
-      startAutoplay(); // Restart autoplay
+      // Stoppe die aktuelle Ladeanimation und setze sie zurück
+      var $nextDot = $('.nav-dot[data-slide=' + next + ']');
+      $nextDot.removeClass('loading'); // Entferne die 'loading' Klasse
+
+      // Ein kurzer Timeout, um sicherzustellen, dass die Animation zurückgesetzt wird
+      setTimeout(function() {
+        $nextDot.addClass('loading'); // Setze sie zurück
+      }, 10); // Sehr kurzer Timeout (10 ms)
+
+      changeSlide(next);
+      stopAutoplay();  // Stoppe Autoplay bei manuellem Wechsel
+      startAutoplay(); // Starte Autoplay neu
   });
 
-  // Swipe event handling
+  // Touch- und Maus-Eventhandling für Swipe
   $('.carousel-wrapper').on('touchstart mousedown', function(e) {
       if(e.type === 'touchstart') {
           startX = e.originalEvent.touches[0].pageX;
@@ -311,9 +471,10 @@ $(document).ready(function() {
           startY = e.pageY;
           e.preventDefault();
       }
-      stopAutoplay();  // Stop autoplay on swipe start
+      stopAutoplay();  // Stoppe Autoplay beim Start des Swipes
   });
 
+  // Erkenne das Ende des Swipes oder Maus-Events
   $('.carousel-wrapper').on('touchend mouseup', function(e) {
       if(e.type === 'touchend') {
           endX = e.originalEvent.changedTouches[0].pageX;
@@ -328,14 +489,14 @@ $(document).ready(function() {
 
       if(Math.abs(diffX) > Math.abs(diffY)) {
           if(diffX > 50) {
-              // Swipe right
+              // Swipe nach rechts
               var $current = $('.slide.active');
               var prev = $current.prev('.slide').length ? 
                          $current.prev('.slide').data('slide') : 
                          $('.slide').last().data('slide');
               changeSlide(prev);
           } else if(diffX < -50) {
-              // Swipe left
+              // Swipe nach links
               var $current = $('.slide.active');
               var next = $current.next('.slide').length ? 
                          $current.next('.slide').data('slide') : 
@@ -344,19 +505,20 @@ $(document).ready(function() {
           }
       }
 
-      startAutoplay(); // Restart autoplay after swipe end
+      startAutoplay(); // Starte Autoplay nach Beendigung des Swipes neu
   });
 
-  // Optional: Start with the first slide active
+  // Optional: Start mit der ersten Folie als aktiv
   changeSlide($('.nav-dot.active').data('slide'));
 
-  // Add 'loading' class to the first dot immediately
+  // Füge die 'loading' Klasse sofort zum ersten Navigationspunkt hinzu
   $('.nav-dot.active').addClass('loading');
 
-  // Start autoplay when the document is ready
+  // Starte Autoplay beim Laden der Seite
   startAutoplay();
 });
 
+
 //#endregion
 
 
diff --git a/src/scss/_portfolio-page.scss b/src/scss/_portfolio-page.scss
index dccd292..4078fb6 100644
--- a/src/scss/_portfolio-page.scss
+++ b/src/scss/_portfolio-page.scss
@@ -743,6 +743,32 @@
   -webkit-text-stroke: 2px rgba(194, 167, 167, 0.116);
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 /* Slider Navigation */
 .carousel-wrapper .navigation {
   display: flex;
@@ -771,37 +797,38 @@
 
 /* Navigation Dots */
 .carousel-wrapper .nav-dot {
-  background: rgb(0, 0, 0);
+  background: rgb(255, 255, 255); /* Default light mode color */
   border-radius: 50%;
+  border: 2px solid #000000; /* Dark border for light mode */
   cursor: pointer;
   display: block;
-  width: 25px;
-  height: 25px;
+  width: 14px;
+  height: 14px;
   transition: all 0.3s ease;
-  margin: 0 10px;
+  margin: 0 4px;
   overflow: hidden;
 }
 
 /* Dark Mode Navigation Dots */
 .dark-mode .carousel-wrapper .nav-dot {
-  background: rgb(0, 0, 0);
-  border: 2px solid #ffffff; /* Dark border for dark mode */
+  background: rgb(0, 0, 0); /* Black background for dark mode */
+  border: 2px solid #ffffff; /* White border for dark mode */
 }
 
 /* Active Navigation Dot */
 .carousel-wrapper .nav-dot.active {
-  background: #ffffff;
+  background: #000000; /* Black background for active dots */
   width: 100px;
-  height: 30px;
-  border-radius: 0;
+  height: 14px;
+  border-radius: 24px;
   transform: scale(1);
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
+  // box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
 }
 
-/* Navigation Dot Loading Effect */
+/* Fortschrittsbalken-Animation nur einmal abspielen */
 .carousel-wrapper .nav-dot.loading::before {
-  animation: progressBar 10s linear forwards;
-  background: #000;
+  animation: progressBar 5s linear forwards;
+  background: #ffffff;
   content: '';
   display: block;
   width: 100%;
@@ -810,22 +837,44 @@
   left: 0;
   top: 0;
   transform-origin: left;
-  transform: scaleX(0);
+  transform: scaleX(0); /* Start mit 0 */
   border-radius: 0;
+  pointer-events: none; /* Keine Mausinteraktionen */
+  animation-iteration-count: 1; /* Animation nur einmal */
+  animation-play-state: running; /* Animation wird sofort gestartet */
 }
 
-/* Hover Effect for Inactive Dots */
+/* Verhindert Interaktionen auf dem Container während des Ladeprozesses */
+.carousel-wrapper .nav-dot.loading {
+  pointer-events: none; /* Keine Interaktionen während der Ladeanimation */
+}
+
+/* Hover Effect for Inactive Round Dots */
 .carousel-wrapper .nav-dot:hover {
-  background: #ffffff;
+  background: #000000; /* Inactive dots turn black on hover */
   transform: scale(1.1);
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
+  // box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
+}
+
+/* Hover Effect for Inactive Round Dots */
+.dark-mode .carousel-wrapper .nav-dot:hover {
+  background: #ffffff; /* Inactive dots turn black on hover */
+  transform: scale(1.1);
+  // box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
 }
 
 /* Hover Effect for Active Dot */
 .carousel-wrapper .nav-dot.active:hover {
-  transform: scale(1.2);
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
-  background: #ffffff;
+  transform: scale(1.2); /* Active dot only scales, no color change */
+  // box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
+  background: #000000; /* Keep the black background for active dot */
+}
+
+/* Hover Effect for Active Dot in Dark Mode */
+.dark-mode .carousel-wrapper .nav-dot.active:hover {
+  transform: scale(1.2); /* Active dot only scales, no color change */
+  // box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
+  background: #000000; /* Keep the black background for active dot in dark mode */
 }
 
 /* Keyframes for Loading Animation */
@@ -838,6 +887,19 @@
   }
 }
 
+/* Innerer Fortschrittsbalken */
+.carousel-wrapper .nav-dot .progress-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0%; /* Anfangszustand */
+  height: 100%;
+  background-color: #ffffff;
+  transition: width 0.1s ease-out; /* Übergang für sanfte Animation */
+  pointer-events: none; /* Verhindert alle Mausinteraktionen auf dem Fortschrittsbalken */
+}
+
+
 /*------------------------------------------------------------*/
 /* Landing Page Slider ENDE                                   */
 /*------------------------------------------------------------*/
@@ -974,8 +1036,22 @@
   
   
   
-  //#region rare holo 
+//#region rare holo 
     /* -------------------- rare holo ------------------------*/
+
+    .card[data-rarity="rare holo"]:not([data-gallery="true"]) .card__glare:after{
+  
+      content: "";
+     /* clip-path: inset(11.5% 8.5% 44.5% 8.5%); */
+      inset: -14.97% -6.17% -2.65% -13.62%;
+      
+      background-image: radial-gradient(
+        rgb(60, 60, 60) 100%,
+        rgba(0, 0, 0, 0.73) 100%,
+        rgba(0, 0, 0) 100%
+      );
+    }
+    
     
     .card[data-rarity="rare holo"] .card__shine {
     
@@ -1045,8 +1121,7 @@
       background-position: center, calc(((50% - var(--posx)) * 25) + 50%) center, calc(var(--posx)*-1.2) var(--posy), var(--pos), center;
       background-size: 100px 100px, 200% 200%, 237% 237%, 195% 195%, 120% 120%;
     
-      filter: brightness(calc((var(--hyp) + 0.7)*0.7)) contrast(3) saturate(.35);
-    
+      filter: brightness(calc((var(--hyp) + 0.7) * 0.7)) contrast(3) saturate(.35);
     }
     
     .card[data-rarity="rare holo"] .card__glare.svelte-y0attf {
@@ -1061,278 +1136,163 @@
 
     //#endregion
   
-  //#region rare holo galaxy
-    /* -------------------- rare holo galaxy ------------------------*/
-    
-    .card[data-rarity="rare holo galaxy"] .card__glare {
-      
-      background-image:
-      radial-gradient( 
-        farthest-corner circle 
-        at var(--mx) var(--my), 
-        rgba(222, 245, 250, 0.7) 10%, 
-        rgba(255, 255, 255, 0.5) 20%, 
-        rgba(0, 0, 0, 0.5) 90% 
-        );
-        
-    }
-    
-    .card[data-rarity="rare holo"]:not([data-gallery="true"]) .card__glare:after,
-    .card[data-rarity="rare holo galaxy"] .card__glare:after {
-  
-      content: "";
-     /* clip-path: inset(11.5% 8.5% 44.5% 8.5%); */
-      inset: -14.97% -6.17% -2.65% -13.62%;
-      
-      background-image: radial-gradient(
-        rgb(60, 60, 60) 5%,
-        rgba(0, 0, 0, 0.73) 35%,
-        rgba(0, 0, 0) 100%
-      );
-    }
-    
-    
-    .card[data-rarity="rare holo galaxyFullshine"] .card__shine {
-    
-      --space: 4%;
-    
-      /* clip-path: inset( 11.5% 8.5% 44.5% 8.5% ); */
-    
-      background-image: 
-        var(--galaxy),
-        url(''),
-        url(''), 
-        repeating-linear-gradient(
-          82deg, 
-          rgb(219, 204, 86) calc(var(--space)*1), 
-          rgb(121, 199, 58) calc(var(--space)*2), 
-          rgb(58, 192, 183) calc(var(--space)*3), 
-          rgb(71, 98, 207) calc(var(--space)*4), 
-          rgb(170, 69, 209) calc(var(--space)*5), 
-          rgb(255, 90, 180) calc(var(--space)*6), 
-          rgb(255, 90, 180) calc(var(--space)*7), 
-          rgb(170, 69, 209) calc(var(--space)*8), 
-          rgb(71, 98, 207) calc(var(--space)*9), 
-          rgb(58, 192, 183) calc(var(--space)*10), 
-          rgb(121, 199, 58) calc(var(--space)*11), 
-          rgb(219, 204, 86) calc(var(--space)*12) 
-        ), 
-        radial-gradient( 
-          farthest-corner circle 
-          at var(--mx) var(--my), 
-          rgba(255, 255, 255, 0.6) 5%, 
-          rgba(150, 150, 150, .3) 40%, 
-          rgb(0, 0, 0) 100% 
-      );
-    
-      background-blend-mode: color-dodge, color-burn, saturation, screen;
-      background-position: var(--galaxybg, cover), var(--galaxybg, cover), var(--galaxybg, cover), calc(((50% - var(--posx)) * 2.5) + 50%) calc(((50% - var(--posy)) * 2.5) + 50%), center;
-      background-size: cover, cover, cover, 400% 900%, cover;
-    
-      filter: brightness(.75) contrast(1.2) saturate(1.5);
-      mix-blend-mode: color-dodge;
-    
-    }
-    
-    .card[data-rarity="rare holo galaxy"] .card__shine {
-    
-      --space: 4%;
-    
-      clip-path: inset(-4.59% -3.53% -1.76% -6.48%);
-    
-      background-image: 
-      var(--birthday2),
-      var(--galaxy),
-      var(--cosmosbg),
-      repeating-linear-gradient(
-        82deg, 
-        rgb(208, 208, 208) calc(var(--space)*1), 
-        rgb(190, 204, 179) calc(var(--space)*2), 
-        rgb(195, 213, 211) calc(var(--space)*3), 
-        rgb(71, 98, 207) calc(var(--space)*4), 
-        rgb(0, 0, 0) calc(var(--space)*5), 
-        rgb(0, 0, 0) calc(var(--space)*6), 
-        rgb(255, 90, 180) calc(var(--space)*7), 
-        rgb(170, 69, 209) calc(var(--space)*8), 
-        rgb(71, 98, 207) calc(var(--space)*9), 
-        rgb(226, 240, 239) calc(var(--space)*10), 
-        rgb(121, 199, 58) calc(var(--space)*11), 
-        rgb(255, 226, 1) calc(var(--space)*12) 
-      ), 
-      radial-gradient(
-        farthest-corner circle 
-        at var(--mx) var(--my), 
-        rgba(255, 255, 255, 0.6) 5%, 
-        rgba(150, 150, 150, .3) 40%, 
-        rgb(0, 0, 0) 100%
-      );
-    
-    
-      background-blend-mode: color-dodge, color-burn, saturation, screen;
-      background-position: var(--galaxybg, cover), var(--galaxybg, cover), var(--galaxybg, cover), calc(((50% - var(--posx)) * 2.5) + 50%) calc(((50% - var(--posy)) * 2.5) + 50%), center;
-      background-size: cover, cover, cover, 400% 900%, cover;
-    
-      filter: brightness(.75) contrast(1.2) saturate(1.5);
-      mix-blend-mode: color-dodge;
-    
-    }
-    //#endregion
-  
-  //#region rare holo v check
-     /* -------------------- rare holo v check------------------------*/
-    
-    .card[data-rarity*="rare holo v1"] .card__shine,
-    .card[data-rarity*="rare holo v1"] .card__shine:after {
-    
-      --space: 5%;
-      --angle: 133deg;
-      --imgsize: 500px;
     
-      background-image:
-        var(--grain),
-        repeating-linear-gradient( 0deg, 
-          rgb(255, 119, 115) calc(var(--space)*1), 
-          rgba(255,237,95,1) calc(var(--space)*2), 
-          rgba(168,255,95,1) calc(var(--space)*3), 
-          rgba(131,255,247,1) calc(var(--space)*4), 
-          rgba(120,148,255,1) calc(var(--space)*5), 
-          rgb(216, 117, 255) calc(var(--space)*6), 
-          rgb(255, 119, 115) calc(var(--space)*7)
-        ),
-        repeating-linear-gradient( 
-          var(--angle), 
-          #0e152e 0%, 
-          hsl(180, 10%, 60%) 3.8%, 
-          hsl(180, 29%, 66%) 4.5%, 
-          hsl(180, 10%, 60%) 5.2%, 
-          #0e152e 10% , 
-          #0e152e 12% 
-          ),
-        radial-gradient(
-          farthest-corner circle 
-          at var(--mx) var(--my),
-          rgba(0, 0, 0, .1) 12%, 
-          rgba(0, 0, 0, .15) 20%, 
-          rgba(0, 0, 0, .25) 120%
-        );
-    
-      background-blend-mode: screen, hue, hard-light;
-      background-size: var(--imgsize) 100%, 200% 700%, 300% 100%, 200% 100%;
-      background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
-      
-      filter: brightness(.8) contrast(2.95) saturate(.5);
-    
-    }
-    
-    .card[data-rarity="rare holo v1"] .card__shine:after {
-    
-      content: "";
-    
-     /* background-position: center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy); */
-      background-size: var(--imgsize) 100%, 200% 400%, 195% 100%, 200% 100%;
-    
-      filter: brightness(1) contrast(2.5) saturate(1.75);
-      mix-blend-mode: soft-light;
-    
-    }
-    
-    .card[data-rarity="rare holo v1"] .card__glare {
-      
-      filter: brightness(0.9) contrast(1.75);
-      
-      background: radial-gradient(
-        farthest-corner circle 
-        at var(--mx) var(--my),
-        rgb(255, 255, 255) 0%,
-        rgba(133, 137, 141, .33) 45%, 
-        rgba(100, 100, 100, .65) 120%
-      );
-    
-      opacity: calc(var(--o) * .66);
-    }
-    
-    //#endregion
-  
-  //#region rare holo vmax
-    /* -------------------- rare holo vmax ------------------------*/
-    
-    .card[data-rarity="rare holo vmax"] .card__shine {
-      --space: 6%;
-      --angle: 133deg;
-      --imgsize: 60% 30%;
+//#region rare holo v 1
+/* -------------------- rare holo v check ------------------------*/
 
+.card[data-rarity*="rare holo v1"] .card__shine,
+.card[data-rarity*="rare holo v1"] .card__shine:after {
+  background-image: none;
+  filter: none;
+  background-blend-mode: normal;
+}
 
-      background-image:
-       /* Vmax Hintergrund */
-        var(--Vmaxbg),
-
-        /* Schicht für den Regenbogen-Glanz */
-        repeating-linear-gradient( -33deg, 
-          rgb(206, 42, 36) calc(var(--space)*1),  
-          rgb(157, 170, 223) calc(var(--space)*2), 
-          rgb(45, 153, 146) calc(var(--space)*3), 
-          rgb(29, 151, 36) calc(var(--space)*4), 
-          rgb(181, 64, 228) calc(var(--space)*5), 
-          rgb(206, 42, 36) calc(var(--space)*6)
-        ),
-          repeating-linear-gradient(
-        var(--angle), 
-        rgba(14, 21, 46, 0.5) 0%, 
-        hsl(180, 10%, 50%) 2.5%, 
-        hsl(83, 50%, 35%) 5%, 
-        hsl(180, 10%, 50%) 7.5%, 
-        rgba(14, 21, 46, 0.5) 10%, 
-        rgba(14, 21, 46, 0.5) 15%
-      ),
-        radial-gradient(
-          farthest-corner circle 
-          at var(--mx) var(--my),
-          rgba(6, 218, 255, 0.6) 0%, 
-          rgba(38, 235, 127, 0.6) 25%, 
-          rgba(155, 78, 228, 0.6) 50%, 
-          rgba(228, 78, 90, 0.6) 75%
-        );
-    
-      background-blend-mode: color-burn, screen, soft-light;
-      background-size: var(--imgsize), 1100% 1100%, 600% 600%, 200% 200%;
-      background-position: 
-        center, 
-        0% var(--posy), 
-        var(--posx) var(--posy), 
-        var(--posx) var(--posy);
-    
-      filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2.5) saturate(.6);
-    
-    }
-    
-    
-    .card[data-rarity="rare holo vmax"] .card__glare {
-      
-      filter: brightness(0.9) contrast(1.75);
-      
-      background: radial-gradient(
-        farthest-corner circle 
-        at var(--mx) var(--my),
-        rgb(255, 255, 255) 0%,
-        rgba(133, 137, 141, .33) 45%, 
-        rgba(100, 100, 100, .65) 120%
-      );
-    
-      opacity: calc(var(--o) * .66);
-    }
-    //#endregion
-  
-  //#region rare holo vsta
-    /* -------------------- rare holo vstar ------------------------*/
-    
-    .card[data-rarity="rare holo vstar"] .card__shine,
-    .card[data-rarity="rare holo vstar"] .card__shine:after {
+/* rare holo v1 bei Hover */
+.card[data-rarity*="rare holo v1"]:hover .card__shine,
+.card[data-rarity*="rare holo v1"]:hover .card__shine:after {
+  --space: 5%;
+  --angle: 133deg;
+  --imgsize: 500px;
+
+  background-image:
+    var(--grain),
+    repeating-linear-gradient( 0deg, 
+      rgb(255, 119, 115) calc(var(--space)*1), 
+      rgba(255,237,95,1) calc(var(--space)*2), 
+      rgba(168,255,95,1) calc(var(--space)*3), 
+      rgba(131,255,247,1) calc(var(--space)*4), 
+      rgba(120,148,255,1) calc(var(--space)*5), 
+      rgb(216, 117, 255) calc(var(--space)*6), 
+      rgb(255, 119, 115) calc(var(--space)*7)
+    ),
+    repeating-linear-gradient( 
+      var(--angle), 
+      #0e152e 0%, 
+      hsl(180, 10%, 60%) 3.8%, 
+      hsl(180, 29%, 66%) 4.5%, 
+      hsl(180, 10%, 60%) 5.2%, 
+      #0e152e 10% , 
+      #0e152e 12% 
+    ),
+    radial-gradient(
+      farthest-corner circle 
+      at var(--mx) var(--my),
+      rgba(0, 0, 0, .1) 12%, 
+      rgba(0, 0, 0, .15) 20%, 
+      rgba(0, 0, 0, .25) 120%
+    );
+  
+  background-blend-mode: screen, hue, hard-light;
+  background-size: var(--imgsize) 100%, 200% 700%, 300% 100%, 200% 100%;
+  background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
+  
+  filter: brightness(.8) contrast(2.95) saturate(.5);
+}
+
+.card[data-rarity="rare holo v1"]:hover .card__shine:after {
+  content: "";
+  background-size: var(--imgsize) 100%, 200% 400%, 195% 100%, 200% 100%;
+  filter: brightness(1) contrast(2.5) saturate(1.75);
+  mix-blend-mode: soft-light;
+}
+
+.card[data-rarity="rare holo v1"]:hover .card__glare {
+  filter: brightness(0.9) contrast(1.75);
+  background: radial-gradient(
+    farthest-corner circle 
+    at var(--mx) var(--my),
+    rgb(255, 255, 255) 0%,
+    rgba(133, 137, 141, .33) 45%, 
+    rgba(100, 100, 100, .65) 120%
+  );
+  opacity: calc(var(--o) * .66);
+}
+
+//#endregion
+
+//#region rare holo vmax
+/* -------------------- rare holo vmax ------------------------*/
+
+.card[data-rarity="rare holo vmax"] .card__shine {
+  background-image: none;
+  filter: none;
+  background-blend-mode: normal;
+}
+
+/* rare holo vmax bei Hover */
+.card[data-rarity="rare holo vmax"]:hover .card__shine {
+  --space: 6%;
+  --angle: 133deg;
+  --imgsize: 60% 30%;
+
+  background-image:
+    var(--Vmaxbg),
+    repeating-linear-gradient( -33deg, 
+      rgb(206, 42, 36) calc(var(--space)*1),  
+      rgb(157, 170, 223) calc(var(--space)*2), 
+      rgb(45, 153, 146) calc(var(--space)*3), 
+      rgb(29, 151, 36) calc(var(--space)*4), 
+      rgb(181, 64, 228) calc(var(--space)*5), 
+      rgb(206, 42, 36) calc(var(--space)*6)
+    ),
+    repeating-linear-gradient(
+      var(--angle), 
+      rgba(14, 21, 46, 0.5) 0%, 
+      hsl(180, 10%, 50%) 2.5%, 
+      hsl(83, 50%, 35%) 5%, 
+      hsl(180, 10%, 50%) 7.5%, 
+      rgba(14, 21, 46, 0.5) 10%, 
+      rgba(14, 21, 46, 0.5) 15%
+    ),
+    radial-gradient(
+      farthest-corner circle 
+      at var(--mx) var(--my),
+      rgba(6, 218, 255, 0.6) 0%, 
+      rgba(38, 235, 127, 0.6) 25%, 
+      rgba(155, 78, 228, 0.6) 50%, 
+      rgba(228, 78, 90, 0.6) 75%
+    );
+
+  background-blend-mode: color-burn, screen, soft-light;
+  background-size: var(--imgsize), 1100% 1100%, 600% 600%, 200% 200%;
+  background-position: 
+    center, 
+    0% var(--posy), 
+    var(--posx) var(--posy), 
+    var(--posx) var(--posy);
+  
+  filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2.5) saturate(.6);
+}
+
+.card[data-rarity="rare holo vmax"]:hover .card__glare {
+  filter: brightness(0.9) contrast(1.75);
+  background: radial-gradient(
+    farthest-corner circle 
+    at var(--mx) var(--my),
+    rgb(255, 255, 255) 0%,
+    rgba(133, 137, 141, .33) 45%, 
+    rgba(100, 100, 100, .65) 120%
+  );
+  opacity: calc(var(--o) * .66);
+}
+
+//#endregion
+
+//#region rare holo vsta
+/* -------------------- rare holo vstar ------------------------*/
     
-      --space: 5%;
-      --angle: 133deg;
-      --imgsize: 18% 15%;
+.card[data-rarity="rare holo vstar"] .card__shine,
+.card[data-rarity="rare holo vstar"] .card__shine:after {
+
+    --space: 5%;
+    --angle: 133deg;
+    --imgsize: 18% 15%;
     
-      background-image:
+    /* Standard: Kein sichtbarer Effekt beim Laden der Seite */
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+
+    background-image:
         var(--Vstar),
         repeating-linear-gradient( 0deg, 
           rgb(255, 119, 115) calc(var(--space)*1), 
@@ -1351,7 +1311,7 @@
           hsl(180, 10%, 60%) 5.2%, 
           #0e152e 10% , 
           #0e152e 12% 
-          ),
+        ),
         radial-gradient(
           farthest-corner circle 
           at var(--mx) var(--my),
@@ -1360,56 +1320,64 @@
           rgba(0, 0, 0, .25) 120%
         );
     
-      background-blend-mode: soft-light, hue, hard-light;
-      background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
-      background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
-      
-      filter: brightness(calc((var(--hyp) * .5) + 0.5)) contrast(2) saturate(.75);
-    
-    }
-    
-    .card[data-rarity="rare holo vstar"] .card__shine:after {
-    
-      content: "";
-    
-      background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
-     /* background-position: center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy); */
+    background-blend-mode: soft-light, hue, hard-light;
+    background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
+    background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
     
-      filter: brightness(calc((var(--hyp) * .5) + 0.8)) contrast(1.5) saturate(1.75);
-      mix-blend-mode: exclusion;
-    
-    }
-    
-    
-    .card[data-rarity="rare holo vstar"] .card__glare {
-      
-      filter: brightness(0.9) contrast(1.75);
-      
-      background: radial-gradient(
-        farthest-corner circle 
-        at var(--mx) var(--my),
-        rgb(255, 255, 255) 0%,
-        rgba(133, 137, 141, .33) 45%, 
-        rgba(100, 100, 100, .65) 120%
-      );
-    
-      opacity: calc(var(--o) * .66);
-    }
-    //#endregion
-  
-  //#region rare ultra
-    /* --------------------rare ultra  ------------------------*/
+    filter: brightness(calc((var(--hyp) * .5) + 0.5)) contrast(2) saturate(.75);
+}
+
+.card[data-rarity="rare holo vstar"] .card__shine:after {
+
+    content: "";
+
+    /* Standard: Kein sichtbarer Effekt beim Laden der Seite */
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+
+    background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
+    filter: brightness(calc((var(--hyp) * .5) + 0.8)) contrast(1.5) saturate(1.75);
+    mix-blend-mode: exclusion;
+}
+
+.card[data-rarity="rare holo vstar"]:hover .card__shine,
+.card[data-rarity="rare holo vstar"]:hover .card__shine:after {
+
+    /* Effekt sichtbar bei Hover */
+    opacity: 1;
+}
+
+.card[data-rarity="rare holo vstar"] .card__glare {
     
+    filter: brightness(0.9) contrast(1.75);
     
+    background: radial-gradient(
+      farthest-corner circle 
+      at var(--mx) var(--my),
+      rgb(255, 255, 255) 0%,
+      rgba(133, 137, 141, .33) 45%, 
+      rgba(100, 100, 100, .65) 120%
+    );
     
-    .card[data-rarity="rare ultra"] .card__shine,
-    .card[data-rarity="rare ultra"] .card__shine:after {
+    opacity: calc(var(--o) * .66);
+}
+//#endregion
+
+//#region rare ultra
+/* --------------------rare ultra  ------------------------*/
+
+.card[data-rarity="rare ultra"] .card__shine,
+.card[data-rarity="rare ultra"] .card__shine:after {
+
+    --space: 5%;
+    --angle: 133deg;
+    --imgsize: 50% 42%;
     
-      --space: 5%;
-      --angle: 133deg;
-      --imgsize: 50% 42%;
+    /* Standard: Kein sichtbarer Effekt beim Laden der Seite */
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
     
-      background-image:
+    background-image:
         var(--illusion),
         repeating-linear-gradient( 0deg, 
           rgb(255, 119, 115) calc(var(--space)*1), 
@@ -1428,7 +1396,7 @@
           hsl(180, 10%, 60%) 5.2%, 
           #0e152e 10% , 
           #0e152e 12% 
-          ),
+        ),
         radial-gradient(
           farthest-corner circle 
           at var(--mx) var(--my),
@@ -1437,179 +1405,181 @@
           rgba(0, 0, 0, .25) 120%
         );
     
-      background-blend-mode: exclusion, hue, hard-light;
-      background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
-      background-position: center center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
-    
-      filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2) saturate(1.5);
-    
-    }
-    
-    .card[data-rarity="rare ultra"] .card__shine:after {
-    
-      content: "";
+    background-blend-mode: exclusion, hue, hard-light;
+    background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
+    background-position: center center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
     
-      background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
-    /*  background-position: center center, 0% var(--posy), calc( var(--posx) * -1) calc( var(--posy) * -1), var(--posx) var(--posy); */
-    
-      filter: brightness(calc((var(--hyp)*0.5) + .8)) contrast(1.6) saturate(1.4);
-      mix-blend-mode: exclusion;
+    filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2) saturate(1.5);
+}
+
+.card[data-rarity="rare ultra"] .card__shine:after {
+
+    content: "";
+
+    /* Standard: Kein sichtbarer Effekt beim Laden der Seite */
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
     
-    }
+    background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
+    filter: brightness(calc((var(--hyp)*0.5) + .8)) contrast(1.6) saturate(1.4);
+    mix-blend-mode: exclusion;
+}
+
+.card[data-rarity="rare ultra"]:hover .card__shine,
+.card[data-rarity="rare ultra"]:hover .card__shine:after {
+
+    /* Effekt sichtbar bei Hover */
+    opacity: 1;
+}
+
+.card[data-rarity="rare ultra"] .card__glare {
     
+    filter: brightness(0.9) contrast(1.75);
     
+    background: radial-gradient(
+      farthest-corner circle 
+      at var(--mx) var(--my),
+      rgb(255, 255, 255) 0%,
+      rgba(133, 137, 141, .33) 45%, 
+      rgba(100, 100, 100, .65) 120%
+    );
     
+    opacity: calc(var(--o) * .66);
+}
+//#endregion
+
+//#region ShineBlitz
+/* ShineBlitz im Normalzustand - unsichtbar, keine Effekte */
+.card[data-rarity="ShineBlitz"] .card__shine,
+.card[data-rarity="ShineBlitz"] .card__shine:after {
+  background-image: none;
+  filter: none;
+  background-blend-mode: normal;
+}
+
+/* ShineBlitz bei Hover - der Effekt wird sichtbar */
+.card[data-rarity="ShineBlitz"]:hover .card__shine,
+.card[data-rarity="ShineBlitz"]:hover .card__shine:after {
+  --space: 5%;
+  --angle: 133deg;
+  --imgsize: 25% 20%;
+  
+  background-image:
+    var(--trainerbg),
+    repeating-linear-gradient( 0deg, 
+      rgb(255, 119, 115) calc(var(--space)*1), 
+      rgba(255,237,95,1) calc(var(--space)*2), 
+      rgba(168,255,95,1) calc(var(--space)*3), 
+      rgba(131,255,247,1) calc(var(--space)*4), 
+      rgba(120,148,255,1) calc(var(--space)*5), 
+      rgb(216, 117, 255) calc(var(--space)*6), 
+      rgb(255, 119, 115) calc(var(--space)*7)
+    ),
+    repeating-linear-gradient( 
+      var(--angle), 
+      #0e152e 0%, 
+      hsl(180, 10%, 60%) 3.8%, 
+      hsl(180, 29%, 66%) 4.5%, 
+      hsl(180, 10%, 60%) 5.2%, 
+      #0e152e 10% , 
+      #0e152e 12% 
+    ),
+    radial-gradient(
+      farthest-corner circle 
+      at var(--mx) var(--my),
+      rgba(0, 0, 0, .1) 12%, 
+      rgba(0, 0, 0, .15) 20%, 
+      rgba(0, 0, 0, .25) 120%
+    );
+  
+  background-blend-mode: difference, hue, hard-light;
+  background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
+  background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
+  
+  filter: brightness(0.75) contrast(2.5) saturate(.75);
+}
+
+/* Weiterer Effekt mit Zusatz bei Hover */
+.card[data-rarity="ShineBlitz"]:hover .card__shine:after {
+  content: "";
+  background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
+  filter: brightness(1.2) contrast(1) saturate(1.75);
+  mix-blend-mode: exclusion;
+}
+
+/* Glare-Effekt bei Hover */
+.card[data-rarity="ShineBlitz"]:hover .card__glare {
+  filter: brightness(0.9) contrast(1.75);
   
+  background: radial-gradient(
+    farthest-corner circle 
+    at var(--mx) var(--my),
+    rgb(255, 255, 255) 0%,
+    rgba(133, 137, 141, .33) 45%, 
+    rgba(100, 100, 100, .65) 120%
+  );
   
-    .card[data-rarity="rare ultra"] .card__glare {
-      
-      filter: brightness(0.9) contrast(1.75);
-      
-      background: radial-gradient(
-        farthest-corner circle 
-        at var(--mx) var(--my),
-        rgb(255, 255, 255) 0%,
-        rgba(133, 137, 141, .33) 45%, 
-        rgba(100, 100, 100, .65) 120%
-      );
-    
-      opacity: calc(var(--o) * .66);
-    }
-    //#endregion
+  opacity: calc(var(--o) * .66);
+}
+  //#endregion ShineBlitz
 
-  //#region ShineBlitz
-    /* -------------------- ShineBlitz ------------------------*/
-    
-  
-    
-    
-    
-    .card[data-rarity="ShineBlitz"] .card__shine,
-    .card[data-rarity="ShineBlitz"] .card__shine:after {
-    
-      --space: 5%;
-      --angle: 133deg;
-      --imgsize: 25% 20%;
-    
-      background-image:
-      var(--trainerbg),
-        repeating-linear-gradient( 0deg, 
-          rgb(255, 119, 115) calc(var(--space)*1), 
-          rgba(255,237,95,1) calc(var(--space)*2), 
-          rgba(168,255,95,1) calc(var(--space)*3), 
-          rgba(131,255,247,1) calc(var(--space)*4), 
-          rgba(120,148,255,1) calc(var(--space)*5), 
-          rgb(216, 117, 255) calc(var(--space)*6), 
-          rgb(255, 119, 115) calc(var(--space)*7)
-        ),
-        repeating-linear-gradient( 
-          var(--angle), 
-          #0e152e 0%, 
-          hsl(180, 10%, 60%) 3.8%, 
-          hsl(180, 29%, 66%) 4.5%, 
-          hsl(180, 10%, 60%) 5.2%, 
-          #0e152e 10% , 
-          #0e152e 12% 
-          ),
-        radial-gradient(
-          farthest-corner circle 
-          at var(--mx) var(--my),
-          rgba(0, 0, 0, .1) 12%, 
-          rgba(0, 0, 0, .15) 20%, 
-          rgba(0, 0, 0, .25) 120%
-        );
-    
-      background-blend-mode: difference, hue, hard-light;
-      background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
-      background-position: center, 0% var(--posy), var(--posx) var(--posy), var(--posx) var(--posy);
-    
-      filter: brightness(0.75) contrast(2.5) saturate(.75);
-      
-    }
-    
-    .card[data-rarity="ShineBlitz"] .card__shine:after {
-    
-      content: "";
-    
-      background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
-       
-      filter: brightness(1.2) contrast(1) saturate(1.75);
-      mix-blend-mode: exclusion;
-    
-    }
-    
-    
-    .card[data-rarity="ShineBlitz"] .card__glare {
-      
-      filter: brightness(0.9) contrast(1.75);
-      
-      background: radial-gradient(
-        farthest-corner circle 
-        at var(--mx) var(--my),
-        rgb(255, 255, 255) 0%,
-        rgba(133, 137, 141, .33) 45%, 
-        rgba(100, 100, 100, .65) 120%
-      );
-    
-      opacity: calc(var(--o) * .66);
-    }
-    //#endregion
-    
-  //#region rare rainbow
+//#region rare rainbow
    /* -------------------- rare rainbow ------------------------*/
-    
-  
-  
-    
-    .card[data-rarity^="rare rainbow"] .card__shine,
-    .card[data-rarity^="rare rainbow"] .card__shine:after {
-    
-      --rainbowspace: 9%;
-      --overlayspace: 12%;
-      --angle: -20deg;
-      --angle2: 130deg;
-      --imgsize: 130% 180%;
-    
-      background-image:
-        var(--rainbow),
-        repeating-linear-gradient( var(--angle), 
-          rgb(253, 71, 65) calc(var(--rainbowspace)*1), 
-          rgb(255, 243, 151) calc(var(--rainbowspace)*2), 
-          rgb(95, 255, 180) calc(var(--rainbowspace)*3), 
-          rgba(131,255,247,1) calc(var(--rainbowspace)*4), 
-          rgb(75, 198, 255) calc(var(--rainbowspace)*5), 
-          rgb(255, 73, 246) calc(var(--rainbowspace)*6), 
-          rgb(255, 56, 49) calc(var(--rainbowspace)*7)
-        ),
-        repeating-linear-gradient( var(--angle2), 
-          rgba(89, 46, 80, 0.5) calc(var(--overlayspace)*1), 
-          hsl(263, 43%, 76%) calc(var(--overlayspace)*2), 
-          rgb(223, 96, 202) calc(var(--overlayspace)*3), 
-          hsl(180, 57%, 56%) calc(var(--overlayspace)*4), 
-          rgba(14, 21, 46, 0.5) calc(var(--overlayspace)*5) , 
-          rgba(14, 21, 46, 0.5) calc(var(--overlayspace)*6) 
-        ),
-        var(--illusion2);
-    
-      background-size: 20% 15%, 500% 500%, 1000% 1000%, var(--imgsize);
-      background-position: center, calc( var(--posx) * 1.5 ) calc( var(--posy) * 1.5 ), calc( var(--posx) * 1.5 ) var(--posy), bottom left;
-      background-blend-mode: color-burn, soft-light, normal;
-    
-      filter: brightness(calc((var(--hyp)*0.25) + 0.66)) contrast(2.2) saturate(.9);
-    
-    }
-    
-    .card[data-rarity^="rare rainbow"] .card__shine:after {
-    
-      content: "";
-    
-      background-position: center, 0% calc( var(--posy) * -1.75 ), calc( var(--posx) * -1.75 ) calc( var(--posy) * -1 ) , bottom left;
-      mix-blend-mode: exclusion;
-    
-    }
+ /* Rare Rainbow im Normalzustand - unsichtbar, keine Effekte */
+.card[data-rarity^="rare rainbow"] .card__shine,
+.card[data-rarity^="rare rainbow"] .card__shine:after {
+  background-image: none;
+  filter: none;
+  background-blend-mode: normal;
+}
+
+/* Rare Rainbow bei Hover - der Effekt wird sichtbar */
+.card[data-rarity^="rare rainbow"]:hover .card__shine,
+.card[data-rarity^="rare rainbow"]:hover .card__shine:after {
+  --rainbowspace: 9%;
+  --overlayspace: 12%;
+  --angle: -20deg;
+  --angle2: 130deg;
+  --imgsize: 130% 180%;
+  
+  background-image:
+    var(--rainbow),
+    repeating-linear-gradient( var(--angle), 
+      rgb(253, 71, 65) calc(var(--rainbowspace)*1), 
+      rgb(255, 243, 151) calc(var(--rainbowspace)*2), 
+      rgb(95, 255, 180) calc(var(--rainbowspace)*3), 
+      rgba(131,255,247,1) calc(var(--rainbowspace)*4), 
+      rgb(75, 198, 255) calc(var(--rainbowspace)*5), 
+      rgb(255, 73, 246) calc(var(--rainbowspace)*6), 
+      rgb(255, 56, 49) calc(var(--rainbowspace)*7)
+    ),
+    repeating-linear-gradient( var(--angle2), 
+      rgba(89, 46, 80, 0.5) calc(var(--overlayspace)*1), 
+      hsl(263, 43%, 76%) calc(var(--overlayspace)*2), 
+      rgb(223, 96, 202) calc(var(--overlayspace)*3), 
+      hsl(180, 57%, 56%) calc(var(--overlayspace)*4), 
+      rgba(14, 21, 46, 0.5) calc(var(--overlayspace)*5) , 
+      rgba(14, 21, 46, 0.5) calc(var(--overlayspace)*6) 
+    ),
+    var(--illusion2);
+  
+  background-size: 20% 15%, 500% 500%, 1000% 1000%, var(--imgsize);
+  background-position: center, calc( var(--posx) * 1.5 ) calc( var(--posy) * 1.5 ), calc( var(--posx) * 1.5 ) var(--posy), bottom left;
+  background-blend-mode: color-burn, soft-light, normal;
+  
+  filter: brightness(calc((var(--hyp)*0.25) + 0.66)) contrast(2.2) saturate(.9);
+}
+
+/* Weiterer Effekt mit Zusatz bei Hover */
+.card[data-rarity^="rare rainbow"]:hover .card__shine:after {
+  content: "";
+  background-position: center, 0% calc( var(--posy) * -1.75 ), calc( var(--posx) * -1.75 ) calc( var(--posy) * -1 ) , bottom left;
+  mix-blend-mode: exclusion;
+}
+
     //#endregion
   
-  //#region rare secret
+//#region rare secret
      /* -------------------- rare secret ------------------------*/
     
   
@@ -1663,149 +1633,146 @@
     
     }
     //#endregion
-    
-  //#region RADIANTT
-     /* -------------------- RADIANTT ------------------------*/
-    
-  
-    
-    
-    .card[data-rarity*="radiant"] .card__shine {
-    
-      --barwidth: 1.2%;
-      --space: 200px;
-    
-    
-      background-image: 
-        repeating-linear-gradient( 0deg, 
-          hsl(180, 70%, 50%) calc(var(--space)*1), 
-          hsl(110, 80%, 50%) calc(var(--space)*2), 
-          hsl(80, 90%, 50%) calc(var(--space)*3), 
-          hsl(50, 90%, 50%) calc(var(--space)*4), 
-          hsl(80, 90%, 50%) calc(var(--space)*5), 
-          hsl(110, 80%, 50%) calc(var(--space)*6), 
-          hsl(180, 70%, 50%) calc(var(--space)*7) 
-        ),
-        repeating-linear-gradient( 
-          45deg, 
-          hsl(0,0%,10%) 0% ,  
-          hsl(0,0%,10%) 1% , 
-          hsl(0,0%,10%) var(--barwidth),
-          hsl(0,0%,20%) calc( var(--barwidth) + 0.01% ) ,
-          hsl(0,0%,20%) calc( var(--barwidth) * 2 ),
-          hsl(0,0%,35%) calc( var(--barwidth) * 2 + 0.01% ) ,
-          hsl(0,0%,35%) calc( var(--barwidth) * 3 ) ,
-          hsl(0,0%,42.5%) calc( var(--barwidth) * 3 + 0.01% ) ,
-          hsl(0,0%,42.5%) calc( var(--barwidth) * 4 ) ,
-          hsl(0,0%,50%) calc( var(--barwidth) * 4 + 0.01% ) ,
-          hsl(0,0%,50%) calc( var(--barwidth) * 5 ) ,
-          hsl(0,0%,42.5%) calc( var(--barwidth) * 5 + 0.01% ) ,
-          hsl(0,0%,42.5%) calc( var(--barwidth) * 6 ) ,
-          hsl(0,0%,35%) calc( var(--barwidth) * 6 + 0.01% ) ,
-          hsl(0,0%,35%) calc( var(--barwidth) * 7 ) ,
-          hsl(0,0%,20%) calc( var(--barwidth) * 7 + 0.01% ) ,
-          hsl(0,0%,20%) calc( var(--barwidth) * 8 )  ,
-          hsl(0,0%,10%) calc( var(--barwidth) * 8 + 0.01% ) ,
-          hsl(0,0%,10%) calc( var(--barwidth) * 9 )  ,
-          hsl(0,0%,0%) calc( var(--barwidth) * 9 + 0.01% ) ,
-          hsl(0,0%,0%) calc( var(--barwidth) * 10 ) 
-        ),
-        repeating-linear-gradient( 
-          -45deg, 
-          hsl(0,0%,10%) 0% ,  
-          hsl(0,0%,10%) 1% , 
-          hsl(0,0%,10%) var(--barwidth),
-          hsl(0,0%,20%) calc( var(--barwidth) + 0.01% ) ,
-          hsl(0,0%,20%) calc( var(--barwidth) * 2 ),
-          hsl(0,0%,35%) calc( var(--barwidth) * 2 + 0.01% ) ,
-          hsl(0,0%,35%) calc( var(--barwidth) * 3 ) ,
-          hsl(0,0%,42.5%) calc( var(--barwidth) * 3 + 0.01% ) ,
-          hsl(0,0%,42.5%) calc( var(--barwidth) * 4 ) ,
-          hsl(0,0%,50%) calc( var(--barwidth) * 4 + 0.01% ) ,
-          hsl(0,0%,50%) calc( var(--barwidth) * 5 ) ,
-          hsl(0,0%,42.5%) calc( var(--barwidth) * 5 + 0.01% ) ,
-          hsl(0,0%,42.5%) calc( var(--barwidth) * 6 ) ,
-          hsl(0,0%,35%) calc( var(--barwidth) * 6 + 0.01% ) ,
-          hsl(0,0%,35%) calc( var(--barwidth) * 7 ) ,
-          hsl(0,0%,20%) calc( var(--barwidth) * 7 + 0.01% ) ,
-          hsl(0,0%,20%) calc( var(--barwidth) * 8 )  ,
-          hsl(0,0%,10%) calc( var(--barwidth) * 8 + 0.01% ) ,
-          hsl(0,0%,10%) calc( var(--barwidth) * 9 )  ,
-          hsl(0,0%,0%) calc( var(--barwidth) * 9 + 0.01% ) ,
-          hsl(0,0%,0%) calc( var(--barwidth) * 10 ) 
-        );
-    
-      background-size: 400% 400%, 210% 210%, 210% 210%;
-      background-position: 
-        calc( ((var(--posx) - 50%) * -2.5) + 50% ) calc( ((var(--posy) - 50%) * -2.5) + 50% ), 
-        calc( ((var(--posx) - 50%) * 1.5) + 50% ) calc( ((var(--posy) - 50%) * 1.5) + 50% ), 
-        calc( ((var(--posx) - 50%) * 1.5) + 50% ) calc( ((var(--posy) - 50%) * 1.5) + 50% );
-    
-      background-blend-mode: exclusion, darken, color-dodge;
-    
-      filter: brightness(.95) contrast(4) saturate(0.75);
-      mix-blend-mode: color-dodge;
-    
-    }
-    
-    .card[data-rarity*="radiant"] .card__shine:after {
-    
-      content: "";
-    
-      background-image: 
-        var(--glitter), 
-        repeating-linear-gradient( 55deg, 
-        rgb(255, 161, 158) calc(var(--space)*1), 
-        rgb(85, 178, 255) calc(var(--space)*2), 
-        rgb(255, 199, 146) calc(var(--space)*3), 
-        rgb(130, 255, 213) calc(var(--space)*4), 
-        rgb(253, 170, 240) calc(var(--space)*5), 
-        rgb(148, 241, 255) calc(var(--space)*6), 
-        rgb(255, 161, 158) calc(var(--space)*7) 
-      );
-    
-      background-size: 25% 25%, 400% 100%;
-      background-position: center, calc( ((var(--posx) - 50%) * -2.5) + 50% ) calc( ((var(--posy) - 50%) * -2.5) + 50% );
-      
-      filter: brightness(1) contrast(1) saturate(0);
-      mix-blend-mode: soft-light;
-    
-      background-blend-mode: multiply;
-      
-    }
-    
-    .card[data-rarity*="radiant"] .card__shine:before {
-      
-      content: "";
-      z-index: 7;
-      grid-area: 1/1;
-    
-      background-image:
-        radial-gradient(
-          farthest-corner ellipse 
-          at calc( ((var(--mx)) * 0.5) + 25% ) calc( ((var(--my)) * 0.5) + 25% ),
-          rgba(100, 100, 100, .5) 5%, 
-          rgba(50, 50, 50, .4) 15%, 
-          rgba(0, 0, 0, .6) 30%
-        );
-    
-      background-image:
-        radial-gradient( farthest-corner ellipse at calc( ((var(--mx)) * 0.5) + 25% ) calc( ((var(--my)) * 0.5) + 25% ), rgba(100, 100, 100, .8) 10%, rgba(50, 50, 50, .34) 20%, rgba(0, 0, 0, 1) 50% );
-    
-      background-position: center;
-      background-size: 350% 350%;
-    
-      mix-blend-mode: multiply;
-    
-    }
-    
-    .card[data-rarity="radiant"] .card__glare {
-      background-image: radial-gradient(farthest-corner circle at var(--mx) var(--my),
-          rgba(255, 255, 255, .9) 10%, rgba(255, 255, 255, .6) 30%, rgba(0, 0, 0, .8) 80%);
-    }
-    //#endregion
-  
-  //#region rare holo
+
+//#region radianT
+/* Standardzustand - Karte ohne den Radiant-Effekt */
+.card[data-rarity*="radiant"] .card__shine {
+  /* Standard Hintergründe (keine Strahleneffekte) */
+  background-image: none;
+  filter: none;
+  mix-blend-mode: normal;
+}
+
+/* Wenn man über die Karte hovert, wird der Radiant-Effekt sichtbar */
+.card[data-rarity*="radiant"]:hover .card__shine {
+  --barwidth: 1.2%;
+  --space: 200px;
+
+  background-image: 
+    repeating-linear-gradient( 0deg, 
+      hsl(180, 70%, 50%) calc(var(--space)*1), 
+      hsl(110, 80%, 50%) calc(var(--space)*2), 
+      hsl(80, 90%, 50%) calc(var(--space)*3), 
+      hsl(50, 90%, 50%) calc(var(--space)*4), 
+      hsl(80, 90%, 50%) calc(var(--space)*5), 
+      hsl(110, 80%, 50%) calc(var(--space)*6), 
+      hsl(180, 70%, 50%) calc(var(--space)*7) 
+    ),
+    repeating-linear-gradient( 
+      45deg, 
+      hsl(0,0%,10%) 0% ,  
+      hsl(0,0%,10%) 1% , 
+      hsl(0,0%,10%) var(--barwidth),
+      hsl(0,0%,20%) calc( var(--barwidth) + 0.01% ) ,
+      hsl(0,0%,20%) calc( var(--barwidth) * 2 ),
+      hsl(0,0%,35%) calc( var(--barwidth) * 2 + 0.01% ) ,
+      hsl(0,0%,35%) calc( var(--barwidth) * 3 ) ,
+      hsl(0,0%,42.5%) calc( var(--barwidth) * 3 + 0.01% ) ,
+      hsl(0,0%,42.5%) calc( var(--barwidth) * 4 ) ,
+      hsl(0,0%,50%) calc( var(--barwidth) * 4 + 0.01% ) ,
+      hsl(0,0%,50%) calc( var(--barwidth) * 5 ) ,
+      hsl(0,0%,42.5%) calc( var(--barwidth) * 5 + 0.01% ) ,
+      hsl(0,0%,42.5%) calc( var(--barwidth) * 6 ) ,
+      hsl(0,0%,35%) calc( var(--barwidth) * 6 + 0.01% ) ,
+      hsl(0,0%,35%) calc( var(--barwidth) * 7 ) ,
+      hsl(0,0%,20%) calc( var(--barwidth) * 7 + 0.01% ) ,
+      hsl(0,0%,20%) calc( var(--barwidth) * 8 )  ,
+      hsl(0,0%,10%) calc( var(--barwidth) * 8 + 0.01% ) ,
+      hsl(0,0%,10%) calc( var(--barwidth) * 9 )  ,
+      hsl(0,0%,0%) calc( var(--barwidth) * 9 + 0.01% ) ,
+      hsl(0,0%,0%) calc( var(--barwidth) * 10 ) 
+    ),
+    repeating-linear-gradient( 
+      -45deg, 
+      hsl(0,0%,10%) 0% ,  
+      hsl(0,0%,10%) 1% , 
+      hsl(0,0%,10%) var(--barwidth),
+      hsl(0,0%,20%) calc( var(--barwidth) + 0.01% ) ,
+      hsl(0,0%,20%) calc( var(--barwidth) * 2 ),
+      hsl(0,0%,35%) calc( var(--barwidth) * 2 + 0.01% ) ,
+      hsl(0,0%,35%) calc( var(--barwidth) * 3 ) ,
+      hsl(0,0%,42.5%) calc( var(--barwidth) * 3 + 0.01% ) ,
+      hsl(0,0%,42.5%) calc( var(--barwidth) * 4 ) ,
+      hsl(0,0%,50%) calc( var(--barwidth) * 4 + 0.01% ) ,
+      hsl(0,0%,50%) calc( var(--barwidth) * 5 ) ,
+      hsl(0,0%,42.5%) calc( var(--barwidth) * 5 + 0.01% ) ,
+      hsl(0,0%,42.5%) calc( var(--barwidth) * 6 ) ,
+      hsl(0,0%,35%) calc( var(--barwidth) * 6 + 0.01% ) ,
+      hsl(0,0%,35%) calc( var(--barwidth) * 7 ) ,
+      hsl(0,0%,20%) calc( var(--barwidth) * 7 + 0.01% ) ,
+      hsl(0,0%,20%) calc( var(--barwidth) * 8 )  ,
+      hsl(0,0%,10%) calc( var(--barwidth) * 8 + 0.01% ) ,
+      hsl(0,0%,10%) calc( var(--barwidth) * 9 )  ,
+      hsl(0,0%,0%) calc( var(--barwidth) * 9 + 0.01% ) ,
+      hsl(0,0%,0%) calc( var(--barwidth) * 10 ) 
+    );
+  background-size: 400% 400%, 210% 210%, 210% 210%;
+  background-position: 
+    calc( ((var(--posx) - 50%) * -2.5) + 50% ) calc( ((var(--posy) - 50%) * -2.5) + 50% ), 
+    calc( ((var(--posx) - 50%) * 1.5) + 50% ) calc( ((var(--posy) - 50%) * 1.5) + 50% ), 
+    calc( ((var(--posx) - 50%) * 1.5) + 50% ) calc( ((var(--posy) - 50%) * 1.5) + 50% );
+  
+  background-blend-mode: exclusion, darken, color-dodge;
+  
+  filter: brightness(.95) contrast(4) saturate(0.75);
+  mix-blend-mode: color-dodge;
+}
+
+/* Glitter-Effekt bei Hover */
+.card[data-rarity*="radiant"]:hover .card__shine:after {
+  content: "";
+  background-image: 
+    var(--glitter), 
+    repeating-linear-gradient( 55deg, 
+      rgb(255, 161, 158) calc(var(--space)*1), 
+      rgb(85, 178, 255) calc(var(--space)*2), 
+      rgb(255, 199, 146) calc(var(--space)*3), 
+      rgb(130, 255, 213) calc(var(--space)*4), 
+      rgb(253, 170, 240) calc(var(--space)*5), 
+      rgb(148, 241, 255) calc(var(--space)*6), 
+      rgb(255, 161, 158) calc(var(--space)*7) 
+    );
+  background-size: 25% 25%, 400% 100%;
+  background-position: center, calc( ((var(--posx) - 50%) * -2.5) + 50% ) calc( ((var(--posy) - 50%) * -2.5) + 50% );
+  
+  filter: brightness(1) contrast(1) saturate(0);
+  mix-blend-mode: soft-light;
+  
+  background-blend-mode: multiply;
+}
+
+/* Halo und Glare bei Hover */
+.card[data-rarity*="radiant"]:hover .card__shine:before {
+  content: "";
+  z-index: 7;
+  grid-area: 1/1;
+  background-image:
+    radial-gradient(
+      farthest-corner ellipse 
+      at calc( ((var(--mx)) * 0.5) + 25% ) calc( ((var(--my)) * 0.5) + 25% ),
+      rgba(100, 100, 100, .5) 5%, 
+      rgba(50, 50, 50, .4) 15%, 
+      rgba(0, 0, 0, .6) 30%
+    );
+  
+  background-image:
+    radial-gradient( farthest-corner ellipse at calc( ((var(--mx)) * 0.5) + 25% ) calc( ((var(--my)) * 0.5) + 25% ), rgba(100, 100, 100, .8) 10%, rgba(50, 50, 50, .34) 20%, rgba(0, 0, 0, 1) 50% );
+  
+  background-position: center;
+  background-size: 350% 350%;
+  
+  mix-blend-mode: multiply;
+}
+
+/* Glare bei Hover */
+.card[data-rarity="radiant"]:hover .card__glare {
+  background-image: radial-gradient(farthest-corner circle at var(--mx) var(--my),
+      rgba(255, 255, 255, .9) 10%, rgba(255, 255, 255, .6) 30%, rgba(0, 0, 0, .8) 80%);
+}
+
+//#endregion radianT
+
+//#region rare holo
    /* -------------------- rare holo ------------------------*/