/* Nexpell – Saloman Kane Creator
   Wird als css/template.css geladen.
*/

:root {
  --nx-template-id: "nexpell_saloman_kane";
  --sk-red: #df1f1f;
  --sk-red-hover: #bd1717;
  --sk-black: #090909;
  --sk-text: #171717;
  --sk-muted: #747474;
  --sk-border: #e6e6e6;
  --sk-soft: #f7f7f6;
  --sk-radius: 6px;
}

/* =========================================================
   GLOBAL / BUILDER
========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  color: var(--sk-text);
  background: #fff;
}

[data-nx-zone="content"] {
  gap: 0 !important;
  row-gap: 0 !important;
}

.nx-html-block,
[data-nx-zone="content"] > .nx-live-item,
[data-nx-zone="content"] > .nx-live-item > .nx-live-content,
body.builder-active [data-nx-zone="content"] > .nx-live-item,
body.builder-active [data-nx-zone="content"] > .nx-live-item > .nx-live-content {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sk-home-block {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

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

html body #mainNavbar,
html body #mainNavbar.nx-tk-nav-surface-light,
html body #mainNavbar.nx-tk-nav-surface-dark {
  --nx-nav-bg: #fff;
  --nx-nav-fg: #151515;
  --nx-nav-surface-light-bg: #fff;
  --nx-nav-surface-light-fg: #151515;
  --nx-nav-surface-dark-bg: #fff;
  --nx-nav-surface-dark-fg: #151515;
  --nx-dd-bg: #fff;
  --nx-dd-fg: #151515;
  min-height: 58px;
  color: #151515;
  background: #fff;
  border-bottom: 1px solid #ececec;
  box-shadow: none !important;
}

html body #mainNavbar .container,
html body #mainNavbar .container-fluid {
  max-width: 1180px;
}

html body #mainNavbar .navbar-brand img {
  display: block;
  width: auto;
  max-width: 210px;
  max-height: 45px;
  object-fit: contain;
}

html body #mainNavbar .navbar-brand,
html body #mainNavbar .navbar-nav .nav-link,
html body #mainNavbar #themeToggle {
  color: #151515;
}

html body #mainNavbar .navbar-nav {
  gap: .3rem;
}

html body #mainNavbar .navbar-nav .nav-link {
  position: relative;
  padding-inline: .7rem;
  font-size: .88rem;
  font-weight: 650;
}

html body #mainNavbar .navbar-nav .nav-link:hover,
html body #mainNavbar .navbar-nav .nav-link:focus-visible,
html body #mainNavbar .navbar-nav .nav-link.active {
  color: var(--sk-red);
}

html body #mainNavbar .navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: -.85rem;
  height: 2px;
  background: var(--sk-red);
}

html body #mainNavbar .dropdown-menu {
  color: #151515;
  background: #fff;
  border-color: #e5e5e5;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* =========================================================
   HERO – die HTML-Struktur kommt aus theme.json
========================================================= */

.sk-home-hero {
  overflow: hidden;
  background: var(--sk-black) !important;
}

.sk-home-hero > .container {
  max-width: 1180px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.sk-home-hero .row {
  min-height: 300px;
}

.sk-home-hero .col-lg-5 {
  position: relative;
  z-index: 2;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.sk-home-hero .col-lg-5::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: -95px;
  bottom: 0;
  width: 170px;
  background: linear-gradient(90deg, #080808 0%, #080808 38%, transparent 100%);
  pointer-events: none;
}

.sk-home-hero .col-lg-5 > img {
  width: min(100%, 330px) !important;
  max-width: 330px !important;
  max-height: 155px;
  margin-bottom: .7rem !important;
  object-fit: contain;
  object-position: left center;
}

.sk-home-hero p {
  color: #fff;
}

.sk-home-hero p:nth-of-type(1) {
  font-size: 1.15rem !important;
  line-height: 1.25;
}

.sk-home-hero p:nth-of-type(2) {
  color: #d3d3d3 !important;
  font-size: .92rem;
}

.sk-home-hero .btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sk-home-hero .btn-danger {
  color: #fff;
  background: var(--sk-red);
  border-color: var(--sk-red);
}

.sk-home-hero .btn-danger:hover {
  background: var(--sk-red-hover);
  border-color: var(--sk-red-hover);
}

.sk-home-hero .btn-outline-light {
  color: #fff;
  border-color: rgba(255,255,255,.55);
}

.sk-home-hero .col-lg-7 {
  position: relative;
  align-self: stretch;
  padding: 0;
}

.sk-home-hero .col-lg-7 img {
  display: block;
  width: 100% !important;
  height: 300px !important;
  min-height: 300px;
  object-fit: cover !important;
  object-position: center;
  border-radius: 0 !important;
}

/* =========================================================
   CONTENT
========================================================= */

.sk-home-block section:not(.sk-home-hero) > .container {
  max-width: 1180px;
}

/* Überschriften */
.sk-home-block h2 {
  letter-spacing: -.015em;
}

.sk-home-block h2[style*="text-transform:uppercase"] {
  position: relative;
}

.sk-home-block h2[style*="text-transform:uppercase"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.48rem;
  width: 22px;
  height: 2px;
  background: var(--sk-red);
}

/* Neueste Video Sektion */
#saloman-featured section {
  border-bottom: 1px solid #ececec;
}

#saloman-featured > section > .container {
  padding-top: 1rem !important;
  padding-bottom: 1.1rem !important;
}

#saloman-featured img {
  box-shadow: none;
}

/* Kurz & knapp */
#saloman-featured .col-lg-4 > div {
  background: #fff;
}

#saloman-featured .col-lg-4 li {
  color: #222;
}

/* Alle Videos */
#saloman-videos > section > .container {
  padding-top: .7rem !important;
  padding-bottom: 1.5rem !important;
}

#saloman-videos .badge {
  border-radius: 3px !important;
  font-size: .68rem;
  font-weight: 750;
  text-transform: uppercase;
}

#saloman-videos article {
  height: 100%;
}

#saloman-videos article img {
  transition: transform .22s ease;
}

#saloman-videos article:hover img {
  transform: scale(1.025);
}

#saloman-videos article h3 {
  line-height: 1.3;
}

/* =========================================================
   ABOUT / SUPPORT
========================================================= */

#saloman-about > section {
  position: relative;
  overflow: hidden;
  background: #090909 !important;
}

#saloman-about > section::before,
#saloman-about > section::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  height: 34px;
  background: #fff;
  pointer-events: none;
}

#saloman-about > section::before {
  top: -22px;
  transform: rotate(-1.1deg);
}

#saloman-about > section::after {
  bottom: -24px;
  transform: rotate(.8deg);
}

#saloman-about > section > .container {
  position: relative;
  z-index: 1;
  padding-top: 1.8rem !important;
  padding-bottom: 1.8rem !important;
}

#saloman-about h2,
#saloman-about p,
#saloman-about span {
  color: #fff;
}

#saloman-about .btn-outline-light {
  border-radius: 3px;
  font-size: .75rem;
  font-weight: 750;
  text-transform: uppercase;
}

#saloman-about .btn-danger {
  color: #fff;
  background: var(--sk-red);
  border-color: var(--sk-red);
  border-radius: 3px;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* =========================================================
   FOOTER
========================================================= */

html body footer.nx-footer.nx-tk-bg-footer {
  --nx-color-footer-bg: #fff;
  --nx-color-footer-border: #e6e6e6;
  --nx-color-footer-text: #333;
  --nx-color-footer-muted: #777;
  --nx-color-footer-link: #555;
  --nx-color-footer-link-hover: var(--sk-red);
  color: #333;
  background: #fff;
  border-top: 1px solid #e6e6e6;
  box-shadow: none;
}

html body footer.nx-footer.nx-tk-bg-footer h6,
html body footer.nx-footer.nx-tk-bg-footer .fw-semibold {
  color: #222;
}

html body footer.nx-footer.nx-tk-bg-footer p,
html body footer.nx-footer.nx-tk-bg-footer small,
html body footer.nx-footer.nx-tk-bg-footer .small,
html body footer.nx-footer.nx-tk-bg-footer .nx-tk-text-muted,
html body footer.nx-footer.nx-tk-bg-footer [data-nx-inline="year"],
html body footer.nx-footer.nx-tk-bg-footer [data-nx-inline="copyright_text"] {
  color: #777;
}

html body footer.nx-footer.nx-tk-bg-footer a {
  color: #555;
}

html body footer.nx-footer.nx-tk-bg-footer a:hover {
  color: var(--sk-red);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
  .sk-home-hero .row {
    min-height: 0;
  }

  .sk-home-hero .col-lg-5 {
    padding: 2rem 0 1.5rem;
  }

  .sk-home-hero .col-lg-5::after {
    display: none;
  }

  .sk-home-hero .col-lg-7 img {
    height: 340px !important;
    min-height: 340px;
  }

  html body #mainNavbar .navbar-nav .nav-link.active::after {
    display: none;
  }
}

@media (max-width: 767.98px) {
  html body #mainNavbar .navbar-brand img {
    max-width: 170px;
    max-height: 40px;
  }

  .sk-home-hero .col-lg-5 > img {
    max-width: 280px !important;
  }

  .sk-home-hero .col-lg-7 img {
    height: 260px !important;
    min-height: 260px;
  }

  #saloman-featured > section > .container,
  #saloman-videos > section > .container {
    padding-inline: 1rem;
  }
}

@media (max-width: 575.98px) {
  .sk-home-hero .btn {
    width: 100%;
  }

  .sk-home-hero .d-flex {
    display: grid !important;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }

  #saloman-videos article img {
    transition: none;
  }
}


/* === CURRENT templates.html compatibility === */
.sk-hero>.container,.sk-latest>.container,.sk-videos>.container,.sk-about>.container{
  width:min(100% - 2rem,1180px);max-width:1180px;margin-inline:auto}
.sk-hero{
  overflow:hidden;background:#080808;color:#fff}
  .sk-hero-grid{display:grid;grid-template-columns:minmax(330px,.82fr) minmax(0,1.35fr);min-height:300px}
  .sk-hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:1.75rem 2rem 1.75rem 0}
  .sk-hero-logo{display:block;width:min(100%,330px);height:auto;max-height:145px;object-fit:contain;object-position:left;margin:0 0 .7rem}
  .sk-hero-title{margin:0 0 .2rem;color:#fff;font-size:1.18rem;font-weight:800}
  .sk-hero-subtitle{margin:0 0 1.1rem;color:#d1d1d1;font-size:.9rem}
  .sk-hero-media img{display:block;width:100%;height:300px;max-width:none;object-fit:cover}
.sk-latest{
  padding:1rem 0 1.15rem;background:#fff;border-bottom:1px solid #eee}
  .sk-section-title{width:max-content;max-width:100%;margin:0 0 1rem;padding-bottom:.38rem;border-bottom:2px solid #df1f1f;font-size:1.1rem;font-weight:900;text-transform:uppercase}
  .sk-latest-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(245px,1fr);gap:2rem}
  .sk-featured{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.8fr);gap:1.5rem;align-items:center}
  .sk-featured-media{position:relative;overflow:hidden;border-radius:4px}
  .sk-featured-media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
  .sk-featured-media>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:#000a;color:#fff}
  .sk-quick{padding:.9rem 1.1rem;border:1px solid #e7e7e7;border-radius:4px}
  .sk-quick a{display:block;padding:.52rem 0;border-bottom:1px solid #eee;color:#222;text-decoration:none;font-size:.78rem}
  .sk-quick .accent{color:#df1f1f}
.sk-videos{
  padding:.8rem 0 1.55rem}
  .sk-video-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
  .sk-video-head h2{font-size:1.05rem;font-weight:900;text-transform:uppercase}
  .sk-video-head a{color:#df1f1f;font-size:.7rem;font-weight:800;text-decoration:none;text-transform:uppercase}
  .sk-filters{display:flex;flex-wrap:wrap;gap:.45rem;margin:.5rem 0 .9rem}
  .sk-filters span{padding:.32rem .8rem;border:1px solid #ddd;border-radius:3px;font-size:.65rem;font-weight:800;text-transform:uppercase}
  .sk-filters .active{background:#df1f1f;border-color:#df1f1f;color:#fff}
  .sk-video-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}
  .sk-video-thumb{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:3px}
  .sk-video-thumb img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
  .sk-video-thumb>span{position:absolute;right:.3rem;bottom:.25rem;padding:.1rem .28rem;background:#000c;color:#fff;font-size:.62rem}
  .sk-video-card h3{margin:.42rem 0 .12rem;font-size:.7rem;font-weight:900;text-transform:uppercase}
  .sk-video-card p{margin:0;color:#777;font-size:.64rem}
.sk-about{
  padding:1.5rem 0;background:#090909;color:#fff}
  .sk-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
  .sk-about .sk-section-title{color:#fff}
  .sk-about-person{display:grid;grid-template-columns:minmax(150px,.72fr) minmax(0,1.28fr);gap:1rem;align-items:center}
  .sk-about-person>img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
  .sk-about p{color:#ddd;font-size:.8rem}
  .sk-support{padding:1rem 1.15rem;border:1px solid #393939;border-radius:4px}
  .sk-support h2{font-size:1rem;font-weight:900;text-transform:uppercase}
  .sk-support>.btn{width:100%}
  .sk-support>div{display:flex;gap:1.4rem;margin-top:.8rem;color:#ddd;font-size:.72rem}
.sk-hero .btn-primary,.sk-latest .btn-primary,.sk-about .btn-primary{--bs-btn-bg:#df1f1f;--bs-btn-border-color:#df1f1f;--bs-btn-hover-bg:#b91818;--bs-btn-hover-border-color:#b91818}
@media(max-width:991.98px){.sk-hero-grid,.sk-latest-grid,.sk-about-grid{grid-template-columns:1fr}
  .sk-featured{grid-template-columns:1.2fr .8fr}.sk-video-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767.98px){.sk-featured{grid-template-columns:1fr}.sk-video-grid{grid-template-columns:repeat(2,1fr)}.sk-about-person{grid-template-columns:1fr}}

/* =========================================================
   CURRENT HERO – FINAL
   40% links / 60% rechts, volle Browserbreite
========================================================= */
.sk-hero{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#050505;
  color:#fff;
}

.sk-hero>.container{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

.sk-hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:50% 50%;
  width:100%;
  height:360px;
  min-height:360px;
  margin:0;
  align-items:stretch;
}

.sk-hero-copy{
  position:relative;
  z-index:3;
  isolation:isolate;
  overflow:visible;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100%;
  min-width:0;
  height:360px;
  box-sizing:border-box;
  padding:2.25rem 3.25rem 2.25rem max(1rem,calc((100vw - 1180px)/2));
}

/* brush.png: linke Fläche + 15% Überlappung nach rechts */
.sk-hero-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 115%;
    height: 100%;
    background: url("../img/brush.png") no-repeat right center / 100% 100%;
    transform: none;
    pointer-events: none;
}

.sk-hero-logo,
.sk-hero-title,
.sk-hero-subtitle,
.sk-hero .sk-actions{
  position:relative;
  z-index:2;
}

.sk-hero-logo{
  display:block;
  width:min(100%,330px);
  max-width:330px;
  height:auto;
  max-height:145px;
  margin:0 0 .7rem;
  object-fit:contain;
  object-position:left center;
}



@media(max-width:991.98px){
  .sk-hero-grid{
    grid-template-columns:1fr;
    height:auto;
    min-height:0;
  }

  .sk-hero-copy{
    width:100%;
    height:auto;
    padding:2rem 1rem;
  }

  .sk-hero-copy::before{
    width:100%;
    transform:none;
  }

  .sk-hero-media{
    width:100%;
    height:320px;
  }

  .sk-hero-media img{
    width:100% !important;
    height:320px !important;
    min-height:320px !important;
  }

}

@media(max-width:575.98px){
  .sk-hero-media{height:250px}
  .sk-hero-media img{
    height:250px !important;
    min-height:250px !important;
  }
}

/* =========================================================
   ABOUT BRUSH – komplette Browserbreite
========================================================= */
.sk-about{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:transparent !important;
  color:#fff;
}

/* about-brush.png über die komplette Seitenbreite */
.sk-about::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:0;
  width:100vw;
  height:100%;
  background:url("../img/about-brush.png") no-repeat center center / 100% 100%;
  pointer-events:none;
}

/* Inhalt bleibt in der normalen 1180px Contentbreite */
.sk-about>.container{
  position:relative;
  z-index:1;
  width:min(100% - 2rem,1180px);
  max-width:1180px;
  margin-inline:auto;
}

.sk-about .sk-section-title,
.sk-about h2,
.sk-about p,
.sk-about span{
  color:#fff;
}

@media(max-width:991.98px){
  .sk-about::before{
    left:0;
    width:100vw;
    background-size:100% 100%;
  }
}

/* === HERO brush.png bis ganz an den linken Browserrand === */
.sk-hero-copy::before {
    left: 0;
    width: 125%;
    transform: none;
    background-position: left center;
    background-size: 100% 100%;
}

/* Der Text bleibt an der normalen Contentlinie */
.sk-hero-copy{
  padding-left:max(1rem,calc((100vw - 1180px)/2));
}

@media(max-width:991.98px){
  .sk-hero-copy::before{
    left:0;
    width:100%;
    transform:none;
  }
}

/* === HERO.PNG: in die feste Hero-Höhe einpassen === */
.sk-hero-grid{
  height:360px;
  min-height:360px;
  align-items:stretch;
}

.sk-hero-copy{
  height:360px;
  min-height:360px;
  align-self:stretch;
}

.sk-hero-media{
  position:relative;
  width:100%;
  height:360px;
  min-height:360px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sk-hero-media img{
  display:block;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-width:100%;
  object-fit:contain !important;
  object-position:center center;
}

@media(max-width:991.98px){
  .sk-hero-grid{
    height:auto;
    min-height:0;
  }

  .sk-hero-copy{
    height:auto;
    min-height:0;
  }

  .sk-hero-media{
    height:320px;
    min-height:320px;
  }

  .sk-hero-media img{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
  }
}

@media(max-width:575.98px){
  .sk-hero-media{
    height:250px;
    min-height:250px;
  }
}


/* === HERO.PNG FINAL: volle rechte Breite bis zum Außenrand === */
.sk-hero-media{
  width:100%;
  min-width:0;
  height:360px;
  overflow:hidden;
}

.sk-hero-media img{
  display:block;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  max-width:none !important;
  object-fit:fill !important;
  object-position:center center;
}