/* Header Structure
----------------------------------------*/
#site-header {
  background-image: url('https://www.xilolix.com/wp-content/uploads/2024/11/XiloliX-CoCreation-Background.webp') !important;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 400px;
  position: relative;
}

/* Navigation Structure
----------------------------------------*/
.navigation-top {
  position: relative;
  padding-bottom: 10px;
}

@media (min-width: 769px) {
  .navigation-top {
    height: 60px;
  }
}

/* Primary Navigation
----------------------------------------*/
.primary-navigation {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-left: 12px;
  background-color: #333333;
  border-bottom: 1px solid #222;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Inter Tight", sans-serif;
}

.menu-main-container {
  padding-bottom: 10px;
  flex: 1;
}

/* Navigation Widget
----------------------------------------*/
.navigation-widget-right {
  position: absolute;
  top: 7px;
  right: 2%;
  padding-right: 20px;
  width: auto;
  max-width: 20%;
  display: flex;
  white-space: nowrap;
}

.navigation-widget-right li {
  font-weight: 400 !important;
}

.page-template-page-templates.page-template-ai-page.page-template-page-templatesai-page-php div.navigation-widget-right {
  top: -26px !important;
}


body.home.page-template.page-template-page-templates.page-template-ai-page.page-template-page-templatesai-page-php .navigation-widget-right {
    position: fixed;
    top: 60px;
    right: 0;
}

.navigation-widget .widget-title {
  display: none;
}

/* Mobile Navigation & Widget
----------------------------------------*/
@media screen and (max-width: 768px) {
  .primary-navigation {
    flex-wrap: nowrap;
    padding: 10px;
  }

  .navigation-widget-right {
    display: none;
  }

  .menu-main-container {
    flex: 0 1 auto;
  }

  #menu-main-nav {
    flex-direction: column;
  }
  
  #menu-main-nav li {
    margin: 10px 0;
  }

  .mobile-navigation-widget,
  .mobile-navigation-widget.ai-page-widget {
    display: block !important;
    position: relative;
    float: right;
    max-width: 30%;
    margin: 0 0 0 20px;
    border-bottom: none;
  }

  @media screen and (max-width: 768px) {
    .mobile-navigation-widget {
        border: none !important;
    }
    
    /* Verhindert Border-Doppelung */
    .mobile-navigation-widget + article {
        border-top: none !important;
    }
}

/* Change border color for front page articles */
.colors-dark.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child), .colors-dark .widget ul li {
  border-top-color: #222 !important;
}

  .mobile-navigation-widget.ai-page-widget {
    top: -30px;
  }
}

/* Desktop - hide mobile widget */
@media screen and (min-width: 769px) {
  .mobile-navigation-widget,
  .mobile-navigation-widget.ai-page-widget {
    display: none;
  }
}

/* Mobile Content Widget
----------------------------------------*/
.mobile-navigation-widget {
  display: none;
}

@media screen and (max-width: 768px) {
  .mobile-navigation-widget {
    display: block;
    position: relative;
    top: -92px;
    left: 5%;
    float: right;
    max-width: 30%;
    margin: 0 0 0 20px;
  }
}

@media screen and (max-width: 768px) {
  .page-template-page-wiki-page.page-template-page-templatespage-wiki-page-php .mobile-navigation-widget {
    display: block;
    position: relative;
    top: -158px; 
    float: right;
    max-width: 30%;
    margin: 0 0 0 20px;
    z-index: 600;
  }
}

body.home.page-template.page-template-page-templates.page-template-ai-page.page-template-page-templatesai-page-php .mobile-navigation-widget {
  left: 0;
}

@media screen and (max-width: 768px) {
  .page-template-default.home.page-template-default.page .mobile-navigation-widget {
    top: -90px;
    left: 0;
  }
}

@media screen and (max-width: 768px) {
  .page-template-ai-page .mobile-navigation-widget {
    top: -30px;
    left: 36%;
  }
}

@media screen and (max-width: 664px) {
  .page-template-ai-page .mobile-navigation-widget {
    top: -30px;
    left: 32%;
  }
}

@media screen and (max-width: 570px) {
  .page-template-ai-page .mobile-navigation-widget {
    top: -30px;
    left: 28%;
  }
}

@media screen and (max-width: 490px) {
  .page-template-ai-page .mobile-navigation-widget {
    top: -30px;
    left: 24%;
  }
}

@media screen and (max-width: 410px) {
  .page-template-ai-page .mobile-navigation-widget {
    top: -30px;
    left: 20%;
  }
}

@media screen and (max-width: 320px) {
  .page-template-ai-page .mobile-navigation-widget {
    top: -30px;
    left: 14%;
  }
}


@media screen and (max-width: 768px) {
  .position-1 .navigation-widget {
    display: none;
  }
}

/* Navigation Elements
----------------------------------------*/
#top-menu li a:hover, #top-menu li a:focus {
  color: #FFD700 !important;
  text-decoration: none !important;
}

#top-menu li.current-menu-item a:focus {
  color: #2EDAF1 !important;
  text-decoration: none !important;
}

@media (min-width: 769px) {
  .page-template-default #top-menu {
    padding-left: 5px;
  }
}


.site-branding img {
  max-height: 60px;
}

/* Language Menu - Desktop & Mobile
----------------------------------------*/
.menu-human-ai-container,
.mobile-navigation-widget .menu-human-ai-container {
  margin-bottom: 2px;
  display: flex;
  justify-content: right;
}

/* Pseudo-Element für Trenner - Abstände anpassen */
#menu-human-ai .menu-item:first-child a::after,
#menu-human-ai-1 .menu-item:first-child a::after {
  content: '|';  /* Nur ein nonbreaking space */
  margin-left: 0.3em;
  margin-right: 0.3em;
  color: #333;
}

/* Aktive/Current Styles */
.current_page_item a,
.current-lang a,
#menu-human-ai-1 .current-lang a {
  pointer-events: none;
  text-decoration: none;
  color: #ffcc00 !important;
  cursor: default;
}

/* Neue Regel nur für Focus */
.current_page_item a:focus,
.current-lang a:focus,
#menu-human-ai-1 .current-lang a:focus {
  color: #2EDAF1 !important;
  text-decoration: none !important;
}

/* Negative margin entfernen und Abstände neu setzen */
.menu-item-1447-ai a {
  padding-left: 0;  /* Das negative padding entfernen */
}

#menu-human-ai li,
#menu-human-ai-1 li {
  margin: 0;  /* Alle Margins auf 0 setzen */
}

@media (min-width: 769px) {
#menu-human-ai li, #menu-human-ai-1 li {
    margin-left: -20px !important;
  }
}

/* Link Styles */
#menu-item-1447-hu a,
#menu-item-1447-ai a,
#menu-human-ai-1 li a {
  padding: 0 !important;
}

/* Hover Effekte */
#menu-item-1447-hu a:hover,
#menu-item-1447-ai a:hover,
#menu-human-ai-1 li a:hover,
#menu-human-ai-1 li a:focus,
#menu-item-1447-hu a:focus,
#menu-item-1447-ai a:focus {
  color: #ffcc00 !important;
  text-decoration: none;
}

/* Hover Effekte */
#menu-human-ai-1 li a:active:focus,
#menu-human-ai-1 li a:active:focus,
#menu-item-1447-hu a:active:focus,
#menu-item-1447-ai a:active:focus {
  color: #2EDAF1 !important;
  text-decoration: none;
}

/* Mobile Navigation & Widget
----------------------------------------*/
.mobile-navigation-widget .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: right;
}

.mobile-navigation-widget .menu li {
  margin: 0;
  padding: 0;
}

.mobile-navigation-widget .widget-title {
  display: none;
}

.mobile-navigation-widget .menu-human-ai-container {
  display: flex;
  justify-content: right;
}

/* Hide Scroll Down Button */
.menu-scroll-down {
  display: none !important;
}

/* Menu-Container anpassen */
.menu-human-ai-container {
  display: flex;
  flex-wrap: nowrap;
}
/* PDF Icon */
.x-pdf, a[href $='.pdf'] {
  background: url('images/icons/pdf.png') no-repeat center left;
  background-size: 20px 20px; 
  padding:0 0 0 25px;
  height:20px;
  width: 20px;
  display: inline-block;
 }

 .x-karo-bg {
  height: 100vh;
    background-color: #222; /* Dunkler Hintergrund */
    background-image: 
      repeating-linear-gradient(45deg, 
        transparent 5px, rgba(46, 218, 241, 0.5) 5px, rgba(46, 218, 241, 0.5) 10px, /* Türkis */
        rgba(255, 215, 0, 0) 10px, rgba(255, 215, 0, 0) 35px, rgba(255, 215, 0, 0.5) 35px, rgba(255, 215, 0, 0.5) 40px, /* Gelb */
        rgba(242, 131, 46, 0.5) 40px, rgba(242, 131, 46, 0.5) 50px, rgba(46, 218, 241, 0) 50px, rgba(46, 218, 241, 0) 60px, /* Orange */
        rgba(46, 218, 241, 0.5) 60px, rgba(46, 218, 241, 0.5) 70px, rgba(255, 215, 0, 0.5) 70px, rgba(255, 215, 0, 0.5) 80px, /* Gelb */
        rgba(46, 218, 241, 0) 80px, rgba(46, 218, 241, 0) 90px, rgba(242, 131, 46, 0.5) 90px, rgba(242, 131, 46, 0.5) 110px, /* Orange */
        rgba(46, 218, 241, 0) 110px, rgba(46, 218, 241, 0) 120px, rgba(46, 218, 241, 0.5) 120px, rgba(46, 218, 241, 0.5) 140px /* Türkis */
      ),
      repeating-linear-gradient(135deg, 
        transparent 5px, rgba(46, 218, 241, 0.5) 5px, rgba(46, 218, 241, 0.5) 10px, /* Türkis */
        rgba(242, 131, 46, 0) 10px, rgba(242, 131, 46, 0) 35px, rgba(242, 131, 46, 0.5) 35px, rgba(242, 131, 46, 0.5) 40px, /* Orange */
        rgba(255, 215, 0, 0.5) 40px, rgba(255, 215, 0, 0.5) 50px, rgba(46, 218, 241, 0) 50px, rgba(46, 218, 241, 0) 60px, /* Gelb */
        rgba(46, 218, 241, 0.5) 60px, rgba(46, 218, 241, 0.5) 70px, rgba(255, 215, 0, 0.5) 70px, rgba(255, 215, 0, 0.5) 80px, /* Gelb */
        rgba(46, 218, 241, 0) 80px, rgba(46, 218, 241, 0) 90px, rgba(242, 131, 46, 0.5) 90px, rgba(242, 131, 46, 0.5) 110px, /* Orange */
        rgba(46, 218, 241, 0) 110px, rgba(46, 218, 241, 0) 140px, rgba(46, 218, 241, 0.5) 140px, rgba(46, 218, 241, 0.5) 160px /* Türkis */
      );
    background-blend-mode: screen; /* Kombiniert die Farben harmonisch */
    opacity: 0.5;
    color: black
  }