:root {
  /* === Primärfarben === */
  --white: #ffffff;
  --blue-dark: #1e3a8a;

  /* === Sekundärfarben === */
  --gray-light: #f3f4f6;
  --blue-light: #93c5fd;
  --sage: #d1fae5;

  /* === Akzentfarben === */
  /* --gold: #f09819; */
  --gold: #f09819;
  --coral: #ff5857;
  --rose: #fbe4e8;
  --lavender: #ede9fe;
}

/* General Styling*/
body {
  font-family: "Everett" !important;
  background-color: black !important;
}
a {
  color: #1428a0;
}
img {
  max-width: 100%;
}

strong {
  font-weight: 500 !important;
}

.wnh {
  width: 100%; /* Die Slideshow füllt die volle Breite */
  height: 800px; /* Feste Höhe, kann nach Bedarf angepasst werden */
  position: relative; /* Relative Position für die Slideshow */
  overflow: hidden; /* Verhindert, dass Bilder über den Container hinausgehen */
}

.wnh img {
  width: 100%;
  height: auto; /* Höhe passt sich an, um das Seitenverhältnis beizubehalten */
  object-fit: cover; /* Das Bild wird skaliert, um den Container zu füllen, auch wenn es beschnitten wird */
  display: block; /* Entfernt jeglichen Abstand um das Bild */
}

.white {
  color: #fff;
}
.black {
  color: #1d1d1f;
}
.grey {
  color: #86868b;
}
.top-50 {
  margin-top: 50px;
}
/* Header Style */
.nav-wrapper {
  /* mix-blend-mode: overlay; */
  /* color: color-mix(in srgb, var(--background-color) 50%, white); */
  height: 64px;
  /* background: rgba(15, 15, 15, 0.75); */
  padding: 0px;
  background: rgba(15, 15, 15, 0);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999;
}

.navbar-nav .nav-link {
  font-weight: 600; /* Erhöht die Schriftstärke (400 = normal, 700 = fett) */
}

.nav-wrapper ul li {
  padding-top: 8px;
}

.nav-wrapper ul li a {
  color: white;
  font-size: 16px;
  margin-right: 24px;
}

.nav-wrapper ul li a:hover {
  color: #cbfb45;
  text-decoration: none;
}

.nav-wrapper ul img {
  margin-top: -5px !important;
}

.nav-menu .current-menu-item a {
  /* color: #A7C7E7 !important; */
  font-weight: 500 !important;
  /* color: #A7C7E7 !important; */
  text-decoration: none !important;
}

@media (max-width: 991px) {
  .awx-display-desktop {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .nav-wrapper ul li {
    /* display: none; */
  }

  .menu-item-gtranslate > a {
    display: flex !important;
    margin-top: -12px !important;
  }

  .footer-countries {
    display: none;
  }

  .cards-big {
    display: none !important;
  }

  .awx-header-info {
    display: none !important;
  }

  .swiper-slide {
    width: 100% !important; /* Deine gewünschte Breite */
  }
}

.navbar-hamburger {
  display: block;
  box-shadow: none !important;
}

.awx-card {
  background-color: blue;
}

.navbar-toggler {
  margin-top: -8px;
  color: #f0f;
}

.nav-item {
  text-align: left !important;
  margin-top: 12px;
  border-bottom: 1px solid #4b4b4b;
  white-space: nowrap;
}

@media screen and (max-width: 782px) {
  .nav-item {
    /* font-size: 12px;
    margin-top: 0px;
    padding: 8px 0px 8px 24px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);  */
  }
}

.navbar-brand {
  margin-top: 5px;
  margin-right: 24px !important;
}

.navbar-brand :hover {
  /* opacity: 0.95; */
}

.menu-item-gtranslate {
  position: relative;
  color: white !important;
  padding-top: 12px !important;
  padding-bottom: 22px !important;
  margin-bottom: -10px !important;
}

.menu-item-gtranslate a {
  color: white !important;
  font-size: 18px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.menu-item-gtranslate img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 50%;
}

.menu-item-gtranslate span {
  font-size: 12px;
  line-height: 1;
  margin-top: -10px;
  padding-top: 12px;
}

.menu-item-gtranslate .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0 0 0 -20px;
  padding: 10px 0;
  list-style: none;
  background: rgba(15, 15, 15, 0.8);
  backdrop-filter: blur(
    10px
  ) !important; /* Weiche Unschärfe für den Hintergrund */
  -webkit-backdrop-filter: blur(10px) !important; /* Safari-Unterstützung */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  width: max-content;
  z-index: 1000;
  border-radius: 10px;
}

.menu-item-gtranslate:hover .dropdown-menu,
.menu-item-gtranslate:focus-within .dropdown-menu {
  display: block;
}

.menu-item-gtranslate .dropdown-menu li {
  padding: 5px 20px;
}

.menu-item-gtranslate .dropdown-menu li a {
  display: flex;
  align-items: center;
  color: white !important;
  font-size: 18px;
}

.menu-item-gtranslate .dropdown-menu li a:hover {
  /* background: rgba(255, 255, 255, 0.1); */
  color: #fff;
}

/* Footer Styling */
.footer-wrapper {
  color: #86868b;
  font-size: 0.7em;
  margin-top: -10px;
}
.footer-wrapper ul {
  list-style: none;
  padding-bottom: 10px;
  padding-inline-start: 0px;
}
.footer-wrapper ul a {
  color: #515154;
}
.my-apple-wrapper {
  padding-bottom: 15px;
  margin-top: 10px;
}
.copyright {
  margin-top: 15px;
}
.footer-country {
  margin-top: 8px;
}
.flag-wrapper {
  display: inline-block;
  vertical-align: middle;
  padding-right: 5px;
}
.footer-country-name {
  display: inline-block;
  vertical-align: middle;
}
.footer-links-terms ul {
  display: flex;
}
.footer-links-terms ul li {
  padding: 0 10px;
  border-right: 1px solid #d2d2d7;
}
.footer-links-terms ul li:first-child {
  padding-left: 0;
}
.footer-links-terms ul li:last-child {
  border-right: 0;
}

.footer-wrapper ul li {
  padding: 4px 0;
}
.upper-text-container {
  border-bottom: 1px solid #d2d2d7;
  padding: 17px 0 10px;
  margin-bottom: 20px;
}
.upper-text-container a {
  color: #515154;
}
/*Sixth Section*/
.highlight-wrapper-06 .left-side-wrapper .left-side-container {
  background-image: url("../images/home/spyder.png");
  background-position: bottom;
  padding-top: 0px;
  margin: 0 0 10px 0;
  background-size: cover;
}

.highlight-wrapper-06 .right-side-wrapper .right-side-container {
  background-image: url("../images/home/apple-card-monthly.png");
  background-color: #1428a0;
  background-position: bottom;
  padding-top: 35px;
  margin: 0 0 10px 0;
  background-size: auto;
}

.left-side-container {
  min-height: 515px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}

.right-side-container {
  min-height: 515px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
.left-side-wrapper {
  padding-right: 0px;
  padding-left: 0px;
}

.right-side-wrapper {
  padding-right: 0px;
  padding-left: 0px;
}
.highlight-wrapper-06 .links-wrapper {
  max-width: 300px;
  margin: 0 auto;
}
.links-wrapper ul {
  list-style: none;
}
.product-title {
  font-weight: 700;
  font-size: 56px;
}
.brief-description {
  font-size: 2em;
}
.highlight-wrapper-06 .description-wraper {
  max-width: 480px;
  margin: 7px auto;
}
.description-wraper.white {
  color: white;
}
.links-wrapper {
  padding: 15px 0;
}
.links-wrapper ul li {
  display: inline-block;
  padding-right: 20px;
}
.links-wrapper ul li a {
  color: #1428a0;
  text-decoration: none;
  font-size: 14px;
}
.links-wrapper ul li a:hover {
  color: #000;
}
.links-wrapper ul li a:after {
  font-family: "FontAwesome";
  font-weight: 900;
  content: "\f105";
  padding-left: 10px;
}
.title-wraper {
  font-weight: 600;
  font-size: 56px;
  line-height: 1.15em;
  letter-spacing: -0.04em;
}
.title-wraper.bold {
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15em;
  letter-spacing: -0.04em;
}
.right-side-wrapper .title-wraper {
  max-width: 500px;
  margin: 0 auto;
}
.description-wrapper {
  font-size: 24px;
  font-weight: 200;
  padding: 10px 0;
}
/*Fifth Section*/
.highlight-wrapper-05 .left-side-wrapper .left-side-container {
  background-image: url("../images/home/actors.png");
  background-color: #000;
  padding-top: 35px;
  margin: 0 0 10px 0;
  background-size: cover;
}
.highlight-wrapper-05 .right-side-wrapper .right-side-container {
  background-image: url("../images/home/watch.png");
  background-color: #fbfbfd;
  background-position: bottom;
  padding-top: 35px;
  margin: 0 0 10px 0;
  background-size: auto;
}
.highlight-wrapper-05 .description-wraper {
  max-width: 450px;
  margin: 7px auto;
}
.watch-more-wrapper a {
  text-decoration: none;
  font-size: 0.85em;
  color: #fff;
}
.watch-more-wrapper a:after {
  font-family: "FontAwesome";
  font-weight: 900;
  content: "\f144";
  padding-left: 15px;
}
.tvshow-logo-wraper {
  padding: 340px 0 0px;
}
/* Fourth section */
.highlight-wrapper-04 .left-side-wrapper .left-side-container {
  background-image: url("../images/home/apple-blue-logo.png");
  background-color: #000;
  padding-top: 35px;
  margin: 0 0 10px 0;
  background-size: cover;
}
.highlight-wrapper-04 .right-side-wrapper .right-side-container {
  background-image: url("../images/home/iphone11-colored.png");
  background-color: white;
  background-position: bottom;
  padding-top: 35px;
  margin: 0 0 10px 0;
  background-size: auto;
}
.links-wrapper.white li a {
  color: #fff;
}
.highlight-wrapper-04 .right-side-wrapper .title-wraper {
  max-width: 380px;
}

/*Third section*/
.hightlight-wrapper-03 {
  background-image: url("../images/home/iphone11-pro-bg.png");
  height: 580px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  padding: 65px 20px;
  color: #fff;
}

/*Third section*/
.hightlight-wrapper-03 {
  background-image: url("../images/home/iphone11-pro-bg.png");
  height: 580px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  padding: 65px 20px;
  color: #fff;
}
/*Second section*/
.highlight-wrapper-02 {
  background-image: url("../images/home/macbookair-new-sm.png");
  height: 580px;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: initial;
  background-color: #fbfbfd;
  text-align: center;
  padding: 65px 20px;
  color: #fff;
  margin-bottom: 10px;
}
/*First Section*/
.highlight-wrapper-01 {
  background-image: url("../images/home/ipodPronew-sm.png");
  height: 580px;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: initial;
  background-color: #fbfbfd;
  text-align: center;
  padding: 65px 20px;
  color: #fff;
  margin-bottom: 10px;
}

.hightlight-wrapper-sub-01 {
  /* background-image: url("../images/home/select-3d-s48z.png"); */
  text-align: center;
  background-color: white;
  padding: 24px 0px;
}

.hightlight-wrapper-sub-01-left {
  background-image: url("../images/home/select-3d-s48z.png");
  background-repeat: no-repeat;
  background-size: cover; /* Bild so skalieren, dass es den gesamten Bereich abdeckt */
  background-position: center; /* Das Bild wird mittig positioniert */
  height: 400px; /* Die Höhe des Elements ist 100% der Höhe des Viewports */
}

/* Für mobile Geräte: Bild zentrieren */
@media (max-width: 768px) {
  /* Für Bildschirme mit max. Breite von 768px */
  .hightlight-wrapper-sub-01 {
    background-position: center center; /* Zentriert das Bild */
    background-size: 60%; /* Bild auf kleineren Geräten reduzieren */
  }

  .awx-carousel .swiper-slide {
    width: 100% !important;
    box-sizing: border-box;
  }
}

.hightlight-content-black {
  background-color: rgba(0, 0, 0, 0.5);
}

.hightlight-content-black-sub {
  background-color: rgba(0, 0, 0, 0.5);
}

.ipod-caption {
  color: #86868b;
  font-size: 12px;
  line-height: 1.33337;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding-top: 310px;
}
/* Alert section */
.alert-section {
  text-align: center;
  padding: 20px;
}
.alert-title {
  font-weight: 600;
  color: #1d1d1f;
  padding: 10px;
}
.alert-text {
  max-width: 90%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  /*Nav bar*/
  .nav-item {
    text-align: center !important;
    padding: 0;
    border-bottom: 0px;
  }
  /*Footer styling*/
  .my-apple-wrapper {
    border-bottom: 1px solid #d2d2d7;
  }
  /*Sixth section*/
  .highlight-wrapper-06 .left-side-wrapper .left-side-container {
    margin: 5px 5px 10px 10px;
  }
  .highlight-wrapper-06 .right-side-wrapper .right-side-container {
    background-color: #1428a0;
    margin: 5px 10px 10px 5px;
  }
  .highlight-wrapper-06 .links-wrapper {
    max-width: 600px;
  }
  /*Fifth section*/
  .highlight-wrapper-05 .left-side-wrapper .left-side-container {
    margin: 5px 5px 5px 10px;
  }
  .highlight-wrapper-05 .right-side-wrapper .right-side-container {
    margin: 5px 10px 5px 5px;
  }
  /*fourth section*/
  .highlight-wrapper-04 .left-side-wrapper .left-side-container {
    margin: 10px 5px 5px 10px;
  }
  .highlight-wrapper-04 .right-side-wrapper .right-side-container {
    margin: 10px 10px 5px 5px;
  }
  .title-wraper.bold {
    font-size: 56px;
  }
  /* Second section */
  .highlight-wrapper-02 {
    min-height: 692px;
    background-image: url("../images/home/macbookair-new.png");
  }
  .new-alert {
    color: #bf4801;
    font-size: 18px;
  }
  /* First section */
  .highlight-wrapper-01 {
    background-image: url("../images/home/ipodPronew.png");
    min-height: 692px;
  }
  .ipod-caption {
    padding-top: 415px;
  }
  /*Alert section*/
  .alert-text {
    max-width: 85%;
    margin: 0 auto;
  }
}
@media (min-width: 992px) {
  /*Footer styling*/
  .copyright {
    margin-top: 10px;
  }
  .footer-country {
    margin-top: 10px;
  }
  .footer-links-terms {
    margin-top: 10px;
  }

  .cards-small {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .bb {
    display: none;
  }
}

.logo-carousel {
  overflow: hidden;
  padding: 0px 30px 20px 0px;
  margin-top: 0px 0px 200px 0px;
  white-space: nowrap;
  position: relative;
}

.logo-row {
  display: inline-block; /* Flex-Layout verwenden für bessere Steuerung */
  width: calc(100%); /* Vergrößert die Breite für Klone */
  animation: scroll-left 20s linear infinite;
}

.logo-row.reverse {
  animation: scroll-right 20s linear infinite;
}

.logo-carousel:hover .logo-row {
  /* animation-play-state: paused; */
}

.logo-row img {
  height: 100px; /* Passe die Höhe der Logos an */
  margin: 0 20px;
}

@keyframes scroll-left {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}

#location-table {
  border-collapse: collapse;
  width: 100%; /* Optional: Tabelle auf die volle Breite setzen */
}

#location-table th,
#location-table td {
  border-bottom: 1px solid #444; /* Nur Querlinien */
  line-height: 1.6; /* Vergrößert den Zeilenabstand */
  font-size: 14px;
  vertical-align: middle; /* Inhalte vertikal zentrieren */
  padding: 8px; /* Optional: Innenabstand für bessere Lesbarkeit */
}

.flag-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: cover; /* Verhindert Verzerrungen und sorgt dafür, dass das Bild den gesamten Container ausfüllt */
  background-repeat: no-repeat;
  border-radius: 50%; /* Macht die Flagge rund */
  object-fit: cover; /* Stellt sicher, dass das Bild korrekt skaliert wird und nicht verzerrt wird */
  object-position: center; /* Zentriert das Bild, damit es nicht abgeschnitten wird */
  border: 1px solid #ccc; /* Grauer Rand */
}

#location-table td:nth-child(2), /* 2. Spalte */
#location-table td:nth-child(4) {
  /* 3. Spalte */
  white-space: nowrap; /* Verhindert Zeilenumbruch */
}

#location-table a {
  color: #1428a0; /* Samsung Blau */
  text-decoration: none; /* Unterstreichung entfernen */
}

#location-table a:hover {
  text-decoration: underline; /* Unterstreichung beim Hover hinzufügen */
}

.language-switcher ul {
  display: none; /* Verstecke die Liste standardmäßig */
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  list-style: none;
  padding: 5px;
  z-index: 1000;
}

.language-switcher:hover ul {
  display: block; /* Zeige die Liste beim Hover/Klick */
}

.language-switcher select {
  display: none; /* Verstecke das Dropdown-Select, falls vorhanden */
}

.language-switcher img {
  cursor: pointer; /* Zeiger ändern, um Klickbarkeit zu zeigen */
}

.extra-menu {
  background-color: #333; /* Farbe des erweiterten Menüs */
  color: white;
  display: none;
  /* transition: max-height 0.3s ease-out; */
}

.extra-menu.show {
  display: block;
  max-height: 300px; /* Maximale Höhe beim Anzeigen des Menüs */
}

.navbar-toggler.collapsed + .extra-menu {
  display: none;
}

/* Menü unter dem Header, fixiert, aber nur auf die Höhe des Menüs beschränkt */
#navbarResponsive {
  position: fixed; /* Menü fixiert am oberen Rand */
  top: 64px; /* Abstände unterhalb des Headers, hier 56px (anpassen je nach Höhe deines Headers) */
  left: 0;
  width: 100%; /* Menü soll die ganze Breite einnehmen */
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);

  /* background-color: rgba(
    135,
    127,
    117,
    0.5
  ); */

  margin-top: -64px;

  /* background: rgba(15, 15, 15, 0); */
  display: none; /* Zu Beginn unsichtbar */
  z-index: 998; /* Menü wird über anderem Inhalt angezeigt */
  overflow-y: auto; /* Falls mehr Inhalt im Menü vorhanden ist */
  transition: opacity 0s ease-out, transform 0.1s ease-out;
  /* backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); */
}

/* Wenn das Menü sichtbar ist, ändern wir display */
#navbarResponsive.show {
  display: block; /* Zeige das Menü, wenn es geöffnet wird */
}

/* Optional: Hintergrundschattierung für den restlichen Inhalt */
body.menu-open {
  overflow: hidden; /* Verhindert das Scrollen des Body-Inhalts */
}

/* Stil für die Links im Menü */
#navbarResponsive a {
  padding: 10px 15px; /* Füge Padding hinzu für bessere Benutzererfahrung */
}

.sub-collapse {
  position: fixed;
  top: 64px; /* Falls du den Header fixiert hast, um es unter der Navbar zu positionieren */
  left: 0;
  right: 0;
  z-index: 1050; /* Stellen Sie sicher, dass das Menü über dem Inhalt liegt */
  opacity: 0; /* opacity: 0; Menü ist transparent, wenn es nicht angezeigt wird */
  height: 0; /* Höhe auf 0 setzen */
  /* transition: all 0.5s ease;  Übergang für fließende Animation */
  /* background-color: black; */
}

/* Das Dropdown-Menü ein wenig abheben, wenn geöffnet */
.sub-collapse.show {
  display: block;
  /* background: rgba(255, 255, 255, 0.75); */
  opacity: 0.95; /* Menü ist transparent, wenn es nicht angezeigt wird */
  /* background-color: white; */
  height: auto; /* Höhe anpassen, damit das Menü den Inhalt zeigt */
  /* backdrop-filter: blur(10px); */
  /* -webkit-backdrop-filter: blur(10px); */
}

.sub-collapse-title {
  font-family: "Everett";
  font-size: 24px;
  margin: 14px !important;
  /* color: #CBFB45; */
  color: white !important; /* Standardfarbe */
  text-align: left !important;
}

.sub-collapse-item {
  text-align: left !important;
  padding: 6px 0 6px 32px !important;
  white-space: nowrap;
  position: relative; /* Notwendig für das Pseudo-Element */
  /* backdrop-filter: blur(10px); */
  /* -webkit-backdrop-filter: blur(10px); */
}

.sub-collapse-item a {
  color: white !important; /* Standardfarbe */
  font-size: 18px;
  font-weight: 300 !important;
  text-decoration: none; /* Optional: Unterstreichen entfernen */
  transition: color 0.1s ease; /* Sanfte Übergangsanimation */
}

.sub-collapse-item a:hover {
  color: #cbfb45 !important;
}

.sub-collapse-item:hover::before {
  content: "\f04b";
  font-family: "FontAwesome";
  position: absolute;
  /* transform: scaleX(-0); */
  color: #cbfb45; /* Farbe des Punkts (z. B. Rot) */
  margin-left: -10px;
}

.sub-collapse-line {
  border-bottom: 1px solid #4b4b4b;
}

.navbar {
  display: flex;
  align-items: center; /* Elemente vertikal zentrieren */
  justify-content: space-between; /* Platz zwischen Logo und Buttons */
}

.navbar-icons {
  display: flex; /* Setzt die Icons nebeneinander */
  gap: 10px; /* Abstand zwischen den Icons 15px */
  align-items: center; /* Zentriert die Icons vertikal */
}

.navbar-icons .btn-icon {
  display: inline-flex; /* Stellt sicher, dass die Icons als Inline-Flex-Elemente behandelt werden */
  text-decoration: none; /* Entfernt Unterstreichung */
  color: #ffffff; /* Farbe der Icons */
  font-size: 20px; /* Größe der Icons */
  transition: color 0.1s ease, transform 0.3s ease; /* Animation bei Hover */
}

.navbar-icons .btn-icon:hover {
  color: #007bff; /* Farbe bei Hover */
}

.awx-card {
  position: relative;
  overflow: hidden; /* Verhindert, dass der Kreis über die Kachel hinausgeht */
  cursor: pointer;
  z-index: 1; /* Kachel bleibt im Vordergrund */
}

.awx-hover-circle {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
}

.awx-hover-circle-txt {
  position: relative;
  z-index: 1; /* Text bleibt im Vordergrund */
  color: #fff; /* Standard-Schriftfarbe */
  transition: color 0.3s ease-out;
}

/* Schriftfarbe bei Hover */
.awx-card:hover .awx-hover-circle-txt {
  color: black !important; /* Setzt die Schriftfarbe beim Hover auf schwarz */
}

.awx-card *:hover .awx-hover-circle-txt {
  color: black !important; /* Setzt die Schriftfarbe beim Hover auf schwarz */
}

.awx-clr-auto {
  transition: color 0.3s ease; /* Weiche Übergänge der Textfarbe */
}

.awx-clr-light {
  color: white;
  transition: color 0.3s ease-in-out;
}

.awx-clr-dark {
  color: #151515;
  transition: color 0.3s ease-in-out;
}

.awx-header-info {
  display: flex;
  align-items: center; /* Zentriert den Pfeil vertikal */
  justify-content: center; /* Zentriert den Pfeil horizontal */
  font-size: 18px;
  font-weight: 300;
  /* color: color-mix(in srgb, var(--background-color) 50%, white); */
}

.awx-btn-bmg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important; /* Rund machen */
  font-size: 18px;
  cursor: pointer;
  overflow: hidden;
}

.awx-btn-bmr {
  width: 50px !important; /* Größe des runden Buttons */
  height: 50px !important; /* Höhe = Breite für perfekten Kreis */
  border: 1px solid #cbfb45 !important;
  background-color: #cbfb45 !important;
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.awx-btn-bmr:hover {
  border: 1px solid white !important;
  background-color: white !important;
  /* transition: transform 0.3s ease-out, opacity 0.3s ease-out; */
}

.awx-btn-bmr-secondary {
  color: black;
  width: 50px !important; /* Größe des runden Buttons */
  height: 50px !important; /* Höhe = Breite für perfekten Kreis */
  background-color: transparent !important;
  border: 1px solid black !important;
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.awx-btn-bmr-secondary:hover {
  color: white;
  border: 1px solid black !important;
  background-color: black !important;
  /* transition: transform 0.3s ease-out, opacity 0.3s ease-out; */
}

.awx-btn-bmr-sm {
  width: 32px !important; /* Größe des runden Buttons */
  height: 32px !important; /* Höhe = Breite für perfekten Kreis */
  border: 1px solid #cbfb45 !important;
  background-color: #cbfb45 !important;
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.awx-btn-bmr-sm:hover {
  border: 1px solid white !important;
  background-color: white !important;
  /* transition: transform 0.3s ease-out, opacity 0.3s ease-out; */
}

.awx-btn-bmg-sec-sm {
  color: black;
  width: 40px; /* Größe des runden Buttons */
  height: 40px; /* Höhe = Breite für perfekten Kreis */
  background-color: white !important;
  border: 1px solid white !important;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.awx-btn-bmg-sec-sm:hover {
  color: white;
  border: 1px solid black !important;
  background-color: black !important;
}

.awx-btn-bmg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important; /* Rund machen */
  font-size: 18px;
  cursor: pointer;
  overflow: hidden;
}

.awx-btn-bmg-sm {
  width: 40px;
  height: 40px;
}

.awx-btn-bmg-md {
  width: 50px;
  height: 50px;
}

.awx-btn-bmg-trsp-black {
  color: black;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid black !important;
}

.awx-btn-bmg-trsp-white {
  color: white;
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid white !important;
}

.awx-btn-bmg-green {
  color: black;
  background-color: #cbfb45;
  border: 1px solid #cbfb45 !important;
}

.awx-btn-bmg-black {
  color: white !important;
  background-color: black;
  border: 1px solid black !important;
}

.awx-btn-bmg-trsp-white-inverse {
  color: white;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid white !important;
}

.awx-btn-bmg-trsp-white-inverse:hover {
  color: black;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid white !important;
}

.awx-arrow {
  /* transform: scaleX(1.5) !important;
  transform: scaleX(1.5) !important;
  transform: scaleY(1.0) !important;
  transform-origin: center center; */
  display: inline-block;
  font-size: 24px;
  position: absolute;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

header {
  transition: color 0.3s ease-in-out;
}

.awx-header-cta button,
.awx-header-cta .awx-btn-word {
  display: inline-block;
  vertical-align: middle; /* Vertikale Ausrichtung */
  margin-left: 5px; /* Abstand anpassen */
  color: color-contrast(var(--background-color) vs #000000, #ffffff);
}

@media (max-width: 991px) {
  .awx-overlay-left {
    height: 25vh !important;
  }
}

.category-area {
  list-style: none;
  padding-left: 24px;
}

.category-area.sticky {
  position: fixed; /* Die Liste wird fixiert */
  top: 60px;
  padding-left: 24px;
  z-index: 1;
  width: auto;
}

/* Sticky-Effekt für die Kategorie-Liste */
.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-single.hidden {
  display: none;
}

.btn-toggle {
  display: inline-block; /* Sorgt dafür, dass die Breite nur so groß wie der Inhalt ist */
  width: auto; /* Stellt sicher, dass der Button nicht die volle Breite nimmt */
  margin: 24px 0;
  color: #cbfb45;
  background-color: #151515;
  cursor: pointer;
  border: none !important;
  font-family: "Everett";
  font-size: 32px !important;
  font-weight: 300;
  text-align: left; /* Falls der Button von flex beeinflusst wird */
  white-space: nowrap; /* Verhindert Zeilenumbruch */
  max-width: fit-content;
  align-self: start; /* Falls der Button in einem flex-Container ist */
}

.btn-toggle:hover {
  color: white;
}

/* Listeneinträge */
.category-list li {
  cursor: pointer;
  padding: clamp(6px, 6px, 6px);
  display: flex;
  align-items: center;
  transition: background-color 0.3s, color 0.3s;
}

/* Standardfarbe des Icons */
.category-list li i {
  margin-right: 12px;
  color: #151515;
  transition: color 0.3s;
}

/* Standardfarbe des Textes */
.category-list li .elementor-icon-list-text {
  font-family: Everett, sans-serif;
  font-size: clamp(16px, 20px, 24px) !important;
  line-height: clamp(24px, 24px, 24px);
  color: white;
  font-weight: 300 !important;
  transition: color 0.3s;
}

/* Hover-Effekt */
.category-list li:hover i,
.category-list li:hover .elementor-icon-list-text {
  color: #cbfb45;
}

/* Aktiver Zustand */
.category-list li.active {
  color: #cbfb45; /* Die Farbe für den aktiven Zustand */
}

/* Aktives Icon und Text */
.category-list li.active i,
.category-list li.active .elementor-icon-list-text {
  color: #cbfb45; /* Das aktive Icon bekommt auch die gleiche Farbe */
}

.awx-lst-product-img {
  height: 160px;
}

.awx-section-header-products {
  list-style: none;
  padding-left: 24px;
}

.awx-section-header-products.sticky {
  position: fixed; /* Die Liste wird fixiert */
  top: 0px;
  padding-left: 10px;
  z-index: 1;
  width: auto;
}

.product-single.hidden {
  display: none;
}

.btn-toggle {
  display: inline-block; /* Sorgt dafür, dass die Breite nur so groß wie der Inhalt ist */
  width: auto; /* Stellt sicher, dass der Button nicht die volle Breite nimmt */
  margin: 24px 0;
  color: #cbfb45;
  background-color: #151515;
  cursor: pointer;
  border: none !important;
  font-family: "Everett";
  font-size: 32px !important;
  font-weight: 300;
  text-align: left; /* Falls der Button von flex beeinflusst wird */
  white-space: nowrap; /* Verhindert Zeilenumbruch */
  max-width: fit-content;
  align-self: start; /* Falls der Button in einem flex-Container ist */
}

.btn-toggle:hover {
  color: white;
}

@media screen and (max-width: 768px) {
  .awx_box_menu {
    visibility: hidden;
    display: none;
  }
}

/* ====== Base Styles (Hidden by default) ====== */
.category-list-mobile {
  display: none; /* Wird nur auf mobilen Geräten angezeigt */
  list-style: none;
}

/* ====== Shared List Item Styles (optional for consistency) ====== */
.category-list-mobile li {
  cursor: pointer;
  text-align: center;
  border: 1px solid #ccc;
  margin: 2px;
  padding: 6px;
  color: white;
  /* background-color: #151515; */
  font-family: "Everett", sans-serif;
  font-size: 16px;
  font-weight: 300;
  transition: background 0.3s, color 0.3s;
}

.category-list-mobile li:hover {
  background-color: white;
  color: black;
}

/* ====== Active State ====== */
.category-list-mobile li.active {
  background-color: #cbfb45;
  color: black;
  font-weight: 500;
}

/* ====== Label Handling (desktop) ====== */
.category-list-mobile .mobile-label {
  display: none;
}

/* ====== Mobile Styles ====== */
@media (max-width: 768px) {
  .category-list-mobile {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(15, 15, 15, 0);
    /* backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); */
    /* border-top: 1px solid #444;
    border-bottom: 1px solid #444; */
  }

  .category-list-mobile li {
    flex: 0 0 auto;
    min-width: 50px;
    max-width: 80px;
    border-radius: 6px;
    margin: 2px;
    padding: 6px 0 4px 0;
    white-space: nowrap;
    background-color: #151515;
  }

  .category-list-mobile .mobile-label {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Sticky behavior */
  .category-list-mobile.sticky {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: #151515;
    /* background: rgba(15, 15, 15, 0); */
    /* backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); */
    padding: 6px 0;
    /* border-top: none;
    border-bottom: 1px solid #444; */
  }
}