/* =========================================================
   Clan / eSports Template CSS
   Ziel: Widgets im Clan-Template optisch komplett von Bootstrap 5
   abheben (Dark / eSports / „MYKD“-Style Richtung).
   Wird über Core-Widget `core_template_scope` geladen.
   ========================================================= */

:root{
  --nx-clan-bg: #131313;
  --nx-clan-bg-2: rgba(17, 17, 17, 0.6);
  --nx-clan-border: rgba(255,255,255,.10);
  --nx-clan-text: rgba(255,255,255,.92);
  --nx-clan-muted: rgba(255,255,255,.68);
  --nx-clan-glow: rgba(13,110,253,.35);
}

/* Pattern entfernt (wie gewünscht) */

/* --- Hero & Header --- */
.nx-clan-hero,
.nx-clan-hero-split,
.nx-clan-header{
  color: var(--nx-clan-text) !important;
}

.nx-clan-header .nx-header-ink{
  color: var(--nx-clan-text) !important;
}
.nx-clan-header .nx-header-ink-muted{
  color: var(--nx-clan-muted) !important;
}

.nx-clan-hero{
  /* Kein !important, damit `background-image` aus Inline-Style (Headerbild) gewinnt. */
  background: linear-gradient(180deg, rgba(5,8,18,.75) 0%, rgba(2,6,23,.95) 100%);
  position: relative;
}

.nx-clan-hero-split{
  /* Kein !important, damit `background-image` aus Inline-Style gewinnt. */
  background: linear-gradient(180deg, rgba(5,8,18,.75) 0%, rgba(2,6,23,.95) 100%);
  position: relative;
}

.nx-clan-hero-ink{
  position: relative;
}

.nx-clan-hero-ink .nx-tk-hero-muted-inverse,
.nx-clan-hero-ink .nx-tk-text-muted{
  color: var(--nx-clan-muted) !important;
}

.nx-clan-hero .btn.btn-primary,
.nx-clan-hero .btn.btn-lg.btn-primary{
  border: 1px solid rgba(255,122,24,.60) !important;
  background: linear-gradient(180deg, rgba(255,122,24,.98) 0%, rgba(255,90,0,.88) 100%) !important;
  box-shadow: 0 14px 40px rgba(255,122,24,.18) !important;
  color: #0b0b0b !important;
}

.nx-clan-hero .nx-hero-cta-secondary{
  /* Zweiter Button als "Outline" wie im Referenz-Header */
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,122,24,.85) !important;
  color: rgba(255,255,255,.95) !important;
}
.nx-clan-hero .nx-hero-cta-secondary:hover{
  border-color: rgba(255,122,24,.70) !important;
}

/* Header-spezifische Text-Ausrichtung */
.nx-clan-hero--header .row.justify-content-center{
  justify-content: flex-start !important;
}
.nx-clan-hero--header .container.position-relative{
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
.nx-clan-hero--header .col-lg-10.col-xl-8{
  margin-left: 0 !important;
  width: 100%;
  max-width: 720px;
}
.nx-clan-hero--header .nx-hero-inner-ink{
  padding-top: 6vh;
}
.nx-clan-hero--header .nx-hero-inner-ink .d-flex.flex-wrap.gap-2{
  margin-top: 1.25rem;
}
.nx-clan-hero--header h1.display-5{
  font-size: clamp(2.4rem, 5.2vw, 4.6rem) !important;
  line-height: 1.02 !important;
}
.nx-clan-hero--header [data-nx-inline="subtitle"]{
  font-size: .78rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* Overlay-Variante über Carousel (negative margin-top, kein Layout-Shift) */
.nx-clan-hero--overlay{
  background: transparent !important;
  margin-top: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
  z-index: 10;
  max-height: 100vh;
  overflow: hidden;
}

/* `nx-overlay-push` aus dem generischen Theme sorgt für Padding-Top.
   Für den Clan-Overlay-Text darf das nicht zusätzlich “aus dem Carousel raus” schieben. */
.nx-clan-hero--overlay.nx-overlay-push{
  padding-top: 0 !important;
}
.nx-clan-hero--overlay .container.position-relative{
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
.nx-clan-hero--overlay .row.justify-content-center{
  justify-content: flex-start !important;
}
.nx-clan-hero--overlay .col-lg-10.col-xl-8{
  margin-left: 0 !important;
  width: 100%;
  max-width: 720px;
}
.nx-clan-hero--overlay .nx-hero-inner-ink{
  padding-top: 12vh;
}
.nx-clan-hero--overlay .nx-hero-inner-ink .d-flex.flex-wrap.gap-2{
  margin-top: 1.25rem;
}
.nx-clan-hero--overlay h1.display-5{
  font-size: clamp(2.4rem, 5.2vw, 4.6rem) !important;
  line-height: 1.02 !important;
}
.nx-clan-hero--overlay [data-nx-inline="subtitle"]{
  font-size: .78rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* --- Header/Nav Overlay (Carousel oder Hero) --- */
.nx-clan-nav.nx-nav-overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* --- Feature Cards --- */
.nx-clan-feature-grid,
.nx-clan-timeline,
.nx-clan-testimonials,
.nx-clan-faq{
  background: transparent !important;
}

.nx-clan-card{
  background: rgba(2,6,23,.45) !important;
  border: transparent !important;
  border-radius: 0px !important;
  padding: 4rem 2.5rem;
  box-shadow: 0 7px 12px rgba(0,0,0,.35) !important;
  overflow: hidden;
}
.nx-clan-feature-grid a.nx-clan-card,
.nx-clan-feature-grid .nx-clan-card{
  background: rgba(38,38,38,.86) !important;
  border-color: rgba(255,255,255,.12) !important;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1), border-color .28s ease;
}
.nx-clan-feature-grid a.nx-clan-card:focus-visible{
  outline: 2px solid var(--nx-color-primary, var(--bs-primary));
  outline-offset: 3px;
}
/* Gesamte Karte ist <a>: Fließtext/Überschrift ohne Link-Linie; „Mehr erfahren“ nutzt .nx-tk-link-theme (Basis-Design) */
.nx-clan-feature-grid a.nx-clan-card-link{
  text-decoration: none;
}
.nx-clan-feature-grid a.nx-clan-card-link h3,
.nx-clan-feature-grid a.nx-clan-card-link p{
  text-decoration: none;
}
.nx-clan-feature-grid .nx-clan-card .card-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.nx-clan-feature-grid a.nx-clan-card::before{
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 18% 18%, rgba(var(--bs-primary-rgb, 13,110,253), .34) 0%, rgba(var(--bs-primary-rgb, 13,110,253), .14) 30%, rgba(var(--bs-primary-rgb, 13,110,253), 0) 68%),
    radial-gradient(circle at 78% 82%, rgba(var(--bs-primary-rgb, 13,110,253), .22) 0%, rgba(var(--bs-primary-rgb, 13,110,253), .10) 26%, rgba(var(--bs-primary-rgb, 13,110,253), 0) 62%);
  opacity: 0;
  transform: scale(.94);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  z-index: 0;
}
.nx-clan-feature-grid a.nx-clan-card:hover{
  cursor: pointer;
  transform: translateY(-6px);
  border-color: rgba(var(--bs-primary-rgb, 13,110,253), .55) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.34), 0 0 0 1px rgba(var(--bs-primary-rgb, 13,110,253), .22) !important;
}

/* Feature-Grid: „Mehr erfahren“ – Platz immer reserviert (kein Layout-Sprung), sichtbar nur bei Hover */
.nx-clan-feature-grid .nx-clan-card-learn-more{
  display: block;
  width: 100%;
  text-align: center;
  margin-top: auto;
  padding-top: .75rem;
  min-height: 1.5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nx-color-primary) !important;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1);
}
.nx-clan-feature-grid a.nx-clan-card:hover .nx-clan-card-learn-more{
  opacity: 1;
  transform: translateY(0);
  color: var(--nx-color-primary) !important;
  text-decoration: var(--bs-link-decoration, none) !important;
}
.nx-clan-feature-grid a.nx-clan-card:hover::before{
  opacity: 1;
  transform: scale(1);
}
.nx-clan-card .card-body{
  padding: 1.25rem !important;
  position: relative;
  z-index: 1;
}
.nx-clan-feature-grid > .container > h2,
.nx-clan-feature-grid > .container > p{
  color: var(--bs-body-color) !important;
}
.nx-clan-feature-grid{
  color: inherit !important;
}

.nx-clan-icon{
  color: var(--nx-color-primary) !important;
  padding-bottom: 20px !important;
}
/* Icon: Standard = Textfarbe; Primärfarbe + stärkerer Zoom erst bei Hover auf der Karte */
.nx-clan-feature-grid .nx-clan-icon{
  color: var(--bs-body-color) !important;
  transform: scale(1);
  transform-origin: center;
  transition: color .28s ease, transform .28s cubic-bezier(.22,.61,.36,1), filter .28s ease;
}
.nx-clan-feature-grid .nx-clan-icon i.fs-3{
  font-size: 2.5rem !important;
}
.nx-clan-feature-grid a.nx-clan-card:hover .nx-clan-icon{
  color: var(--nx-color-primary) !important;
  transform: scale(1.8);
  filter: drop-shadow(0 10px 22px rgba(var(--bs-primary-rgb, 13,110,253), .32));
}

/* --- Timeline --- */
.nx-clan-timeline-rail{
  background: rgba(13,110,253,.30) !important;
}
.nx-clan-timeline-dot.bg-primary{
  background: rgba(13,110,253,.95) !important;
  box-shadow: 0 0 0 6px rgba(13,110,253,.12), 0 10px 30px rgba(13,110,253,.22);
}
.nx-clan-timeline-dot.bg-success{
  background: rgba(25,135,84,.95) !important;
}
.nx-clan-timeline-dot.bg-warning{
  background: rgba(255,193,7,.95) !important;
}
.nx-clan-timeline .nx-tk-text-muted,
.nx-clan-timeline .nx-tk-text-primary,
.nx-clan-timeline{
  color: var(--nx-clan-text) !important;
}
.nx-clan-timeline .nx-tk-text-muted{
  color: var(--nx-clan-muted) !important;
}

/* --- FAQ / Accordion --- */
.nx-clan-faq .nx-clan-accordion-item{
  border: 1px solid var(--nx-clan-border) !important;
  border-radius: var(--nx-radius-lg) !important;
  background: rgba(2,6,23,.35) !important;
  overflow: hidden;
}

.nx-clan-faq .nx-clan-accordion-button{
  background: rgba(2,6,23,.22) !important;
  color: var(--nx-clan-text) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.nx-clan-faq .nx-clan-accordion-button:not(.collapsed){
  background: rgba(13,110,253,.18) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.nx-clan-faq .accordion-body{
  color: var(--nx-clan-muted) !important;
}

/* --- Testimonials --- */
.nx-clan-testimonial-card{
  background: rgba(2,6,23,.35) !important;
  border: 1px solid var(--nx-clan-border) !important;
  border-radius: var(--nx-radius-lg) !important;
}
.nx-clan-testimonials .nx-tk-text-muted{
  color: var(--nx-clan-muted) !important;
}

/* --- Quote --- */
.nx-clan-quote{
  background: radial-gradient(circle at 20% 0%, rgba(13,110,253,.12) 0%, rgba(2,6,23,.68) 60%, rgba(2,6,23,.88) 100%) !important;
  border: 1px solid var(--nx-clan-border) !important;
  border-radius: var(--nx-radius-lg) !important;
  padding: 1.5rem !important;
}
.nx-clan-blockquote{
  margin: 0;
}
.nx-clan-quote .blockquote-footer{
  color: var(--nx-clan-muted) !important;
}

/* --- Footer --- */
.nx-clan-footer{
  background: var(--nx-clan-bg) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}
.nx-clan-footer *{
  color: var(--nx-clan-text) !important;
}
.nx-clan-footer a{
  color: rgba(255,255,255,.70) !important;
}
.nx-clan-footer a:hover{
  color: var(--nx-color-primary) !important;
}

/* --- Slider / Carousel --- */
.nx-clan-slider .carousel-control-prev-icon,
.nx-clan-slider .carousel-control-next-icon{
  filter: invert(1) drop-shadow(0 8px 16px rgba(0,0,0,.4));
}

.nx-clan-slider{
  position: relative;
  margin-bottom: 0 !important; /* verhindert extra Scroll durch mb-4 */
  height: 100vh;
  overflow: hidden;
}
.nx-clan-slider > h2,
.nx-clan-slider > p{
  position: absolute;
  left: 2.5rem;
  top: 48%;
  z-index: 5;
  width: min(560px, 92%);
  text-shadow: 0 12px 45px rgba(0,0,0,.75);
}
.nx-clan-slider > p{
  top: 57%;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: rgba(255,255,255,.86) !important;
}

.nx-clan-slider .carousel{
  position: relative;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  border-radius: 0;
  /* Stacking-Context, damit z-index sauber greift */
  z-index: 0;
}
.nx-clan-slider .carousel-inner{
  height: 100vh;
  position: relative;
  isolation: isolate; /* eigener Stacking-Context für saubere Layering-Reihenfolge */
}
.nx-clan-slider .carousel-item{
  height: 100vh;
  position: relative;
  z-index: 2; /* Slides liegen über der Vignette */
}
.nx-clan-slider .carousel-item .ratio{
  height: 100%;
  padding-bottom: 0 !important; /* überschreibt Bootstrap ratio-aspect-ratio */
  position: relative;
}
.nx-clan-slider .carousel-item .ratio img{
  height: 100% !important;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.nx-clan-slider .carousel-item .ratio::after{
  content: "";
  position: absolute;
  inset: 0;
  /* Vollflächige Vignette + leichter Left-Gradient für Lesbarkeit */
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.25) 55%,
      rgba(0,0,0,.70) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.22) 38%,
      rgba(0,0,0,.10) 62%,
      rgba(0,0,0,0) 100%);
  /* Vignette direkt auf dem Bild-Wrapper */
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 768px){
  .nx-clan-slider > h2,
  .nx-clan-slider > p{
    left: 1.25rem;
    width: min(520px, 90%);
  }
  .nx-clan-slider .carousel-caption:has(.nx-clan-slider-caption){
    left: 1.25rem !important;
    width: min(520px, 90%) !important;
  }
  .nx-clan-slider .carousel{
    height: 100vh;
    min-height: 100vh;
  }
}

/* --- Carousel + Overlay-Text: Overlay nimmt keinen zusätzlichen Layout-Space --- */
.nx-live-item:has(.nx-clan-slider){
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.nx-live-item:has(.nx-clan-slider) + .nx-live-item .nx-clan-hero--overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  margin-top: 0 !important;
  overflow: hidden;
  z-index: 30;
}

/* Fallback: falls zwischen Slider und Overlay noch weitere nx-live-items liegen */
.nx-live-item:has(.nx-clan-slider) ~ .nx-live-item .nx-clan-hero--overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  margin-top: 0 !important;
  overflow: hidden;
  z-index: 30;
}
.nx-clan-slider .carousel-caption{
  bottom: 1.25rem;
  /* Bootstrap erwartet absolute Positionierung; nur Layering erhöhen */
  position: absolute !important;
  z-index: 2 !important;
}
.nx-clan-slider .carousel-caption:has(.nx-clan-slider-caption){
  top: auto !important;
  bottom: 15% !important;
  left: 5.5rem !important;
  transform: none !important;
  right: auto !important;
  padding: 0 !important;
  text-align: left !important;
  z-index: 2 !important;
}
.nx-clan-slider-caption{
  width: min(560px, 92%);
}
.nx-clan-slider-eyebrow{
  font-size: 16px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.95) !important;
  margin-bottom: .85rem;
}
.nx-clan-slider-title{
  font-size: 96px !important;
  line-height: 1.02 !important;
  margin: 0 0 1rem 0 !important;
}
.nx-clan-slider-ctas .nx-clan-slider-cta-primary{
  border: 1px solid rgba(255,122,24,.60) !important;
  background: linear-gradient(180deg, rgba(255,122,24,.98) 0%, rgba(255,90,0,.88) 100%) !important;
  box-shadow: 0 14px 40px rgba(255,122,24,.18) !important;
  color: #0b0b0b !important;
}
.nx-clan-slider-ctas .nx-clan-slider-cta-secondary{
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,122,24,.85) !important;
  color: rgba(255,255,255,.95) !important;
}
.nx-clan-slider-ctas .nx-clan-slider-cta-secondary:hover{
  border-color: rgba(255,122,24,.70) !important;
}

/* --- Carousel Caption Animation (unten -> oben, gestaffelt) --- */
@keyframes nx-clan-rise-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 72px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes nx-clan-zoom-in-slow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.085);
  }
}

.nx-clan-slider .carousel-item .nx-clan-slider-eyebrow,
.nx-clan-slider .carousel-item .nx-clan-slider-title,
.nx-clan-slider .carousel-item .nx-clan-slider-ctas .btn{
  opacity: 0;
  transform: translate3d(0, 72px, 0);
  will-change: transform, opacity;
}

/* Subtiler Ken-Burns-Effekt pro aktivem Slide */
.nx-clan-slider .carousel-item .ratio img{
  transform: scale(1);
  transform-origin: center center;
  will-change: transform;
}
.nx-clan-slider .carousel-item.active .ratio img{
  animation: nx-clan-zoom-in-slow 7.5s ease-out forwards;
}

.nx-clan-slider .carousel-item.active .nx-clan-slider-eyebrow{
  animation: nx-clan-rise-in .64s ease-out .12s forwards;
}
.nx-clan-slider .carousel-item.active .nx-clan-slider-title{
  animation: nx-clan-rise-in .74s ease-out .28s forwards;
}
.nx-clan-slider .carousel-item.active .nx-clan-slider-ctas .btn:nth-child(1){
  animation: nx-clan-rise-in .68s ease-out .46s forwards;
}
.nx-clan-slider .carousel-item.active .nx-clan-slider-ctas .btn:nth-child(2){
  animation: nx-clan-rise-in .68s ease-out .60s forwards;
}
.nx-clan-slider .nx-tk-slider-caption--dark{
  background: rgba(5,8,18,.75) !important;
  color: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.nx-clan-slider .nx-tk-slider-caption--light{
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* --- Gallery --- */
.nx-clan-gallery figure{
  border-radius: var(--nx-radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(2,6,23,.35) !important;
}
.nx-clan-gallery img{
  filter: saturate(1.05) contrast(1.05);
}
.nx-clan-gallery figcaption{
  color: rgba(255,255,255,.70) !important;
}

/* --- Logo-Marquee (Clan) --- */
.nx-clan-logo-marquee{
}

/* --- Navigation --- */
.nx-clan-nav .nav-link{
  color: var(--bs-link-color, var(--nx-color-link)) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
}
.nx-clan-nav .nav-link:hover,
.nx-clan-nav .nav-link:focus{
  color: var(--bs-primary) !important;
  text-decoration: none !important;
}
.nx-clan-nav .dropdown-menu{
  background: rgba(5,8,18,.98) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.nx-clan-nav .dropdown-item{
  color: var(--bs-link-color, var(--nx-color-link)) !important;
}
.nx-clan-nav .dropdown-item:hover,
.nx-clan-nav .dropdown-item:focus{
  background: rgba(13,110,253,.16) !important;
  color: var(--bs-primary) !important;
}