/* PSW Shop */


body {
    font-family: 'PSW', Arial, sans-serif;
    font-weight: 400;
	font-size: 1.125rem;
}
/* Unterer Abstand zum Footer (nur Startseite) */
body[data-page="18"] .container.opc-Container {
    margin-bottom: 0 !important;
}
/* Art.Details: LKW */
.delivery-status .status-2, .signal_image .status-2 {
    color: #00a087;
}
.btn:focus-visible, .focus, :focus-visible {
    outline: 2px solid #00a087 !important;
}
.productbox.productbox-hover:focus-visible .productbox-inner::before, .productbox.productbox-hover:focus-within .productbox-inner::before {
	outline: 2px solid #00a087;
}





/***************/
/* H E A D E R */
/***************/
/* Hintergrundfarbe */
header {
    background-color: #eaecee;
    color: #525252;
}
#search {
    display: none;
}
/* Navi Kategorien */
header .navbar-nav>.nav-item>.nav-link {
    font-size: 1.2rem;
    font-family: 'PSW';
    font-weight: 500;
    color: #0d0c18;
}
/* Navi MOBIL */
header .navbar-nav>.nav-item>.nav-link {
    font-size: 1.0rem;
}
header .navbar-nav>.nav-item>.nav-link {
    font-size: 1.0rem;
    padding-bottom: 0.5rem;
    padding-top: 0.8rem;
    line-height: 1.4rem;
}







/***************/
/* F O O T E R */
/***************/
/* Hintergrundfarbe */
#footer {
    margin-top: auto;
    padding: 0.5rem 0 0;
    background-color: #EAECEE;
    color: #333;
}

/* EIGENER FOOTER */
/* Titel und Toggle-Link ausblenden */
#footer .box-linkgroup .productlist-filter-headline,
#footer .box-linkgroup .box-normal-link,
#footer .box-linkgroup .box-normal-link span.text-truncate {
    display: none !important;
}

/* UL in horizontal umwandeln */
#footer .box-linkgroup .nav.flex-column {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* LI nebeneinander */
#footer .box-linkgroup .nav.flex-column .nav-item {
    display: inline-flex !important;
    padding: 0;
    margin: 0;
}

/* Trenner zwischen Links */
#footer .box-linkgroup .nav.flex-column .nav-item + .nav-item::before {
    content: "|";
    margin: 0 0.7rem 0 0.2rem;
    color: #333;
    font-weight: 500;
}

/* Links stylen */
#footer .box-linkgroup .nav-link {
    color: #5D626C !important;
    text-decoration: none !important;
    font-weight: 500;
    white-space: nowrap;
    font-size: 0.9rem;
}
/* Hover-Effekt */
#footer .box-linkgroup .nav-link:hover {
    text-decoration: underline !important;
    color: #007A66 !important;
}

/* Abstand oben/unten */
#footer .box-linkgroup {
    padding-top: 1rem;
    padding-bottom: 0;
}
@media (max-width: 768px) {

    #footer .collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Dropdown-Header optisch neutralisieren */
    #footer .dropdown-toggle {
        pointer-events: none;
        cursor: default;
    }

    #footer .dropdown-toggle::after {
        display: none;
    }
	#footer .box-linkgroup {
		padding-top: 0;
	}	
}


/* EIGENER FOOTER - ENDE */


/* Copyright Hinweis */
.footnote-vat {
    text-align: center;
    font-size: 0.8rem;
}
#copyright {
    background-color: #0d0c18;
    color: #f5f7fa;
    margin-top: 0.3rem;
}
#copyright>div {
    text-align: left;
    padding-left: 5rem;
}






/* LOGO */
#shop-logo {
    display: block;
}
.logo-wrapper {
    min-width: 432px;
    min-height: 80px;
    display: flex;
    align-items: center;
}
/* FontAwesome stabilisieren */
header .fas,
header .far {
    width: 1.1em;
    display: inline-block;
    text-align: center;
}
/* Sticky-Header kleinsten Jump entfernen */
#jtl-nav-wrapper {
    min-height: 0;
}

/* Logo MOBIL */
@media (max-width: 991.98px) {
    #logo {
        text-align: center;
    }

    #logo .navbar-brand {
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }

    #shop-logo {
        display: block;
        height: auto;
        max-width: 100%;
    }
}
@media (max-width: 991.98px) {
    .toggler-logo-wrapper {
        padding-top: 0;
        margin-top: 0;
    }

    header .navbar-brand {
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
}
/* UB: Logo im Header nach oben ziehen (global) */

/* 1. Navbar oben nicht extra aufpolstern */
header .navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Wrapper direkt um Burger + Logo: kein zusätzlicher Abstand */
.toggler-logo-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. Logo-Container selbst: kein Abstand nach oben */
#logo {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 4. Bild selbst: kein extra Padding/Margin */
#shop-logo {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: block;
}



/* Startseite: Produktstreams */
.productbox-inner .productbox-title {
    text-align: center;
    margin-top: 1rem;
}
.productbox-inner .productbox-title a {
    text-decoration: none;
    font-weight: 500;
    line-height: 1.3rem;
}
.productbox-inner .price_wrapper {
    text-align: center;
}
.productbox-inner .price_wrapper span {
    font-size: 1.4rem;
    font-weight: 500;
    color: #333;
}


/* Startseite: Hauptkategorien */
#startseiten-kategorien {
    font-family: 'PSW', sans-serif;
    padding: 1rem 0 5rem;
    background: transparent;
}

#startseiten-kategorien .category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

#startseiten-kategorien .category-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  text-decoration: none;
  color: #fff;
  height: 420px;
  transition: box-shadow 0.4s ease;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

#startseiten-kategorien .category-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

#startseiten-kategorien .category-card .image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

#startseiten-kategorien .category-card:hover .image {
  transform: scale(1.06);
}

#startseiten-kategorien .overlay {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem 0.6rem;
  min-width: 200px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#startseiten-kategorien .category-card:hover .overlay {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

#startseiten-kategorien .overlay h2 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 500;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.6);
  letter-spacing: 1px;
  font-family: 'PSW';
  transition: none;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  #startseiten-kategorien {
    padding: 0 1rem;
  }

  #startseiten-kategorien .overlay {
    padding: 0.6rem 1.2rem 0.4rem;
    bottom: 1rem;
    min-width: auto;
    max-width: 90%;
  }

  #startseiten-kategorien .overlay h2 {
    font-size: 1.4rem;
    white-space: normal;
  }
}

/* Startseite: Hauptkategorien - ENDE */




/* =========================================
   STARTSEITE (data-page="18")
   SECTION HEADER EXAKT AM PRODUKT AUSRICHTEN
   ========================================= */

body[data-page="18"] .home-section-header {
    max-width: 1250px;          /* deine Containerbreite */
    margin: 0 auto 1.5rem;
    padding-left: 15px;         /* exakt wie Produkt-Grid */
    padding-right: 15px;
}

/* Text linksbündig wie Produktbild */
body[data-page="18"] .home-section-header span {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #00A087;

    margin-left: 0;             /* KEIN Zentrieren */
    padding-left: 0;            /* bündig mit Bild */
    border-left: 6px solid #00A087;
    padding-left: 1rem;         /* Abstand zur Linie */
}

/* Mobil */
@media (max-width: 768px) {
    body[data-page="18"] .home-section-header span {
        font-size: 1.6rem;
        border-left-width: 4px;
    }
}




/* Artikeldetails */
.swatches-text.active {
    border: 1px solid #00a087;
    background-color: #00a08733;
}
.swatches-text {
    padding: 0.5rem 0.5rem 0.1rem;
}
h1.product-title.h2 {
    font-weight: 500;
}
body[data-page="1"] .price_wrapper .price.h1 {
    font-weight: 500;
}
/* Buttons */
.btn {
    padding: 0.8rem 0.9375rem 0.5rem;
}
/* Text "Größe ..." */
dt.js-btn-slider-wrapper {
    font-weight: 600;
}
/* Button */
.btn-outline-primary:hover {
    background-color: #009f86;
    color: #eee;
}
aside .nav-panel > .nav > .active > .nav-link {
    border-bottom: 0.2rem solid #00a087;
}
aside .nav-panel .nav-link {
    padding-bottom: 0;
}
#result-wrapper .title h1.h2 {
    font-weight: 600 !important;
    color: #00a087;
}
body[data-page="1"] .price-note span.vat_info {
    font-size: 0.9rem;
}
body[data-page="1"] .price_wrapper .price.h1 {
    margin-bottom: 0;
}



/* Tabelle in Kurzbeschreibung (ARTIKELDETAILS) */
/* =========================
   Kurzbeschreibung Tabelle
   ========================= */

table.kurzbeschArtikel {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 16px 0 40px;
    font-size: 14px;
    background: #fafafa;
    border-radius: 6px;
    overflow: hidden;
}

/* Tabellenzeilen */
table.kurzbeschArtikel tr {
    display: grid;
    grid-template-columns: 140px 1fr;
    border-bottom: 1px solid #e6e6e6;
}

table.kurzbeschArtikel tr:last-child {
    border-bottom: none;
}

/* Zellen */
table.kurzbeschArtikel td {
    padding: 10px 14px;
    vertical-align: middle;
    line-height: 1.4;
}

/* Bezeichnung links */
table.kurzbeschArtikel td:first-child {
    color: #111;
    font-weight: 500;
    background: #f3f3f3;
}

/* Wert rechts */
table.kurzbeschArtikel td:last-child {
    color: #222;
    font-weight: 600;
    background: #ffffff;
}

/* ==============================
   Mobile Optimierung
   ============================== */

@media (max-width: 768px) {

    table.kurzbeschArtikel tr {
        grid-template-columns: 1fr;
        padding: 8px 0;
    }

    table.kurzbeschArtikel td {
        padding: 6px 12px;
    }

    table.kurzbeschArtikel td:first-child {
        background: none;
        color: #888;
        font-size: 12px;
        padding-bottom: 2px;
    }

    table.kurzbeschArtikel td:last-child {
        background: none;
        font-size: 14px;
    }
}
/* Tabelle in Kurzbeschreibung (ARTIKELDETAILS) - ENDE */

















/* =================================================
   Startseite: PSW Shop Info
   ================================================= */

#psw-shop-info {
  font-family: 'PSW', sans-serif;
  padding: 4rem 2rem 0;
  background: #fff;
  color: #0D0C18;
}

/* Layout */
#psw-shop-info .info-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

/* =========================
   BILD / PERSON
   ========================= */
#psw-shop-info .info-image {
  flex: 1 1 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* Referenz für Ecken */
  padding: 1rem;
}

#psw-shop-info .info-image img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Ecklinien – GEHÖREN ZUM BILD */
#psw-shop-info .info-image .corner-decoration {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 2px solid #00A087;
  z-index: 2;
  pointer-events: none;
}

/* links unten */
#psw-shop-info .info-image .left-corner {
  left: 0;
  bottom: 0;
  border-top: none;
  border-right: none;
}

/* rechts oben */
#psw-shop-info .info-image .right-corner {
  right: 0;
  top: 0;
  border-bottom: none;
  border-left: none;
}

/* =========================
   TEXTBEREICH
   ========================= */
#psw-shop-info .info-text {
  flex: 1 1 500px;
  padding-top: 2rem;
}

#psw-shop-info h2 {
  color: #00A087;
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

#psw-shop-info .label {
  color: #00A087;
  font-weight: 600;
}

#psw-shop-info .label-block {
  color: #00A087;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 2rem 0 0.5rem;
}

#psw-shop-info .contact-block a {
  color: #00A087;
  text-decoration: none;
  font-weight: 400;
}

#psw-shop-info .cta-button {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.9rem 1.6rem 0.7rem;
    border: 2px solid #00A087;
    color: #00A087;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#psw-shop-info .cta-button:hover {
  background-color: #00A087;
  color: #fff;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px) {

  #psw-shop-info {
    padding: 3.5rem 1rem 0;
  }

  #psw-shop-info .info-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #psw-shop-info .info-text {
    padding-top: 2rem;
  }

  #psw-shop-info h2 {
    font-size: 2rem;
  }

  #psw-shop-info .label {
    display: block;
  }
  #psw-shop-info .info-container {
	gap: 1rem;
  }
  /* Ecken auch mobil – etwas kleiner */
  #psw-shop-info .info-image .corner-decoration {
    width: 40px;
    height: 40px;
  }
  #psw-shop-info .label-block {
    margin: 2rem 0 0;
  }  
}

/* =================================================
   Startseite: PSW Shop Info – ENDE
   ================================================= */






















/* PSW Fonts – absoluter Pfad, perfektes Caching, kein Flackern */
@font-face {
    font-family: 'PSW';
    src: url('/templates/NOVAChild/fonts/PSW-Type-Light.woff2') format('woff2'),
         url('/templates/NOVAChild/fonts/PSW-Type-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PSW';
    src: url('/templates/NOVAChild/fonts/PSW-Type-Regular.woff2') format('woff2'),
         url('/templates/NOVAChild/fonts/PSW-Type-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PSW';
    src: url('/templates/NOVAChild/fonts/PSW-Type-Medium.woff2') format('woff2'),
         url('/templates/NOVAChild/fonts/PSW-Type-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PSW';
    src: url('/templates/NOVAChild/fonts/PSW-Type-Bold.woff2') format('woff2'),
         url('/templates/NOVAChild/fonts/PSW-Type-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



/* Smartphones (Portrait); Screen = B/w 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) {
	#copyright>div {text-align: center; padding-left: 0;}
	#logo img {display: block;margin: 0 auto;max-width: 80% !important;height: auto;}
	li.nav-item.dropdown.account-icon-dropdown {z-index: 100;}
	.fa-sup {margin-top: -9px;}
	.productbox-inner .price_wrapper span {font-size: 1.1rem;color: #333;}
	.productbox-title {font-size: 0.9rem;}
	.productbox-title a {line-height: 1.2rem !important;margin-bottom: 0.3rem;}
	.productbox-inner .productbox-title {margin-top: 0.5rem;}
	#result-wrapper .productlist-page-nav.productlist-page-nav-header-m {margin-top: 1rem;}
	#product-list .product-wrapper:not(:last-child) {margin-bottom: 1rem;}
	#product-offer .product-info ul.info-essential {margin: 1rem 0;}
	table.kurzbeschArtikel {margin-bottom: 0;}
	ul.info-essential.list-unstyled .product-sku {font-weight: 300;font-size: 1rem;}
	.product-detail #image_wrapper {margin-bottom: 0;}
	#shop-nav li.nav-item.dropdown.account-icon-dropdown {line-height: 2rem !important;}
}

/* (Portrait); Screen = B/w 480 to 767px */
@media (min-width: 480px) and (max-width: 767px) {
	#copyright>div {text-align: center; padding-left: 0;}
	#logo img {display: block;margin: 0 auto;max-width: 80%;height: auto;}
	li.nav-item.dropdown.account-icon-dropdown {z-index: 100;}
	.fa-sup {margin-top: -9px;}
	.productbox-inner .price_wrapper span {font-size: 1.1rem;color: #333;}
	.productbox-title {font-size: 0.9rem;}
	.productbox-title a {line-height: 1.2rem !important;margin-bottom: 0.3rem;}
	.productbox-inner .productbox-title {margin-top: 0.5rem;}
	#result-wrapper .productlist-page-nav.productlist-page-nav-header-m {margin-top: 1rem;}
	#product-list .product-wrapper:not(:last-child) {margin-bottom: 1rem;}
	#product-offer .product-info ul.info-essential {margin: 1rem 0;}
	table.kurzbeschArtikel {margin-bottom: 0;}
	ul.info-essential.list-unstyled .product-sku {font-weight: 300;font-size: 1rem;}
	.product-detail #image_wrapper {margin-bottom: 0;}
	#shop-nav li.nav-item.dropdown.account-icon-dropdown {line-height: 2rem !important;}
}

/* (Portrait); Screen = B/w 768 to 991px */
@media (min-width: 768px) and (max-width: 991px) {
	#copyright>div {text-align: center; padding-left: 0;}
	#logo img {display: block;margin: 0 auto;max-width: 80%;height: auto;}
	li.nav-item.dropdown.account-icon-dropdown {z-index: 100;}
	.fa-sup {margin-top: -9px;}
	.productbox-inner .price_wrapper span {font-size: 1.1rem;color: #333;}
	.productbox-title {font-size: 0.9rem;}
	.productbox-title a {line-height: 1.2rem !important;margin-bottom: 0.3rem;}
	.productbox-inner .productbox-title {margin-top: 0.5rem;}
	#result-wrapper .productlist-page-nav.productlist-page-nav-header-m {margin-top: 1rem;}
	#product-list .product-wrapper:not(:last-child) {margin-bottom: 1rem;}
	#product-offer .product-info ul.info-essential {margin: 1rem 0;}
	table.kurzbeschArtikel {margin-bottom: 0;}
	ul.info-essential.list-unstyled .product-sku {font-weight: 300;font-size: 1rem;}
	.product-detail #image_wrapper {margin-bottom: 0;}
	#shop-nav li.nav-item.dropdown.account-icon-dropdown {line-height: 2rem !important;}
}


/* =========================================
   MOBILE HEADER – LOGO-ZEILE NICHT ZU HOCH
   ========================================= */
@media (max-width: 991.98px) {

    /* Logo-Zeile: Höhe/Padding drastisch reduzieren */
    .toggler-logo-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 2px 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        line-height: 1 !important;
    }

    /* Logo-Wrapper: keine Zusatzabstände */
    #logo.logo-wrapper {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        line-height: 1 !important;
    }

    /* Bootstrap-Brand verursacht oft extra Höhe */
    #logo .navbar-brand {
        display: inline-block;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    /* Bild: deine reduzierte Breite + zusätzlich Höhe begrenzen */
    #logo img {
        display: block;
        margin: 0 auto;
        max-width: 80%;
        height: auto;
        max-height: 42px;   /* <- reduziert die „fette“ Kopfleiste */
    }

    /* Optional: wenn das Bild noch minimal Luft oben/unten hat */
    #logo img#shop-logo {
        vertical-align: top;
    }
    /* Burger: Abstand nach links – das ist DER Fix */
    header #burger-menu {
        margin-left: 4rem !important;
	    margin-right: 0;
		margin-bottom: 0.6rem;
    }
    /* Logo kompakt */
    #logo img {
        max-width: 80%;
        height: auto;
    }

    /* Header nicht unnötig hoch */
    #jtl-nav-wrapper > .container-fluid.container-fluid-xl {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .toggler-logo-wrapper {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }	
}




/* Vertikalen Scrollbalken verhindern */
@media (max-width: 991.98px) {

    html,
    body {
        overflow-y: auto;
    }

    body {
        max-height: 100vh;
        overflow-x: hidden;
    }
}
@media (max-width: 991.98px) {
    .burger-menu-wrapper {
        margin-left: 12px !important;   /* Abstand nach links */
    }
}


/* =================================================
   MOBIL: Deko-Ecken am Bild wie auf Desktop
   ================================================= */
@media (max-width: 991.98px) {

    /* Bild-Wrapper – ggf. anpassen, falls nötig */
    .opc-Container .image-wrapper,
    .opc-Container .opc-image,
    .opc-Container .psw-image {
        position: relative;
    }

    /* Linke untere Ecke */
    .opc-Container .image-wrapper::before,
    .opc-Container .opc-image::before,
    .opc-Container .psw-image::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 24px;
        height: 24px;
        border-left: 3px solid #00a98f;
        border-bottom: 3px solid #00a98f;
        display: block;
    }

    /* Rechte obere Ecke */
    .opc-Container .image-wrapper::after,
    .opc-Container .opc-image::after,
    .opc-Container .psw-image::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: 24px;
        height: 24px;
        border-right: 3px solid #00a98f;
        border-top: 3px solid #00a98f;
        display: block;
    }
}



/* Navigationsleiste */
header .navbar-nav>.nav-item>.nav-link::before {
    border-width: 0 0 1px;
    border-color: #00a087;
}
.nav-panel li.nav-item.active {
    margin-bottom: 1rem;
}
#shop-nav li.nav-item.dropdown.account-icon-dropdown {
    line-height: 3rem;
}