/* UGROUND Header Hintergrund */
header,
.cs-header,
.cs-headerContent {
    background:#021430 !important;
}
/* UGROUND Header Icons - Original Outline weiß */

.cs-headerContent svg,
.cs-headerContent svg * {
    color:#ffffff !important;
    stroke:currentColor !important;
    fill:transparent !important;
}

/* keine künstliche Linienstärke */
.cs-headerContent svg * {
    stroke-width:inherit !important;
}

/* Warenkorb Zahl */
.cs-headerContent span {
    color:#ffffff !important;
}
/* UGROUND Kategorie Navigation */

.cs-categoriesBox,
.cs-categoryNav {
    background:#ffffff !important;
}

/* Kategorie Texte */
.cs-categoriesBox a,
.cs-categoryNav a {
    font-size:22px !important;
    font-weight:700 !important;
    letter-spacing:1px !important;
    text-transform:uppercase !important;
    color:#021430 !important;
    padding:22px 35px !important;
    position:relative;
}

/* Hover Effekt */
.cs-categoriesBox a:hover,
.cs-categoryNav a:hover {
    color:#021430 !important;
}

/* grüne Sport-Linie unten */
.cs-categoriesBox a:after,
.cs-categoryNav a:after {
    content:"";
    position:absolute;
    left:50%;
    bottom:10px;
    width:0;
    height:4px;
    background:#f3ca39;
    transform:translateX(-50%);
    transition:0.25s ease;
}

.cs-categoriesBox a:hover:after,
.cs-categoryNav a:hover:after {
    width:70%;
}
/* UGROUND obere Service Navigation */

.cs-topBar,
.cs-topbar,
.cs-serviceBar,
.cs-headerTop {
    background:#021430 !important;
    border-bottom:1px solid rgba(255,255,255,0.15) !important;
}

/* Links oben */
.cs-topBar a,
.cs-topbar a,
.cs-serviceBar a,
.cs-headerTop a {
    color:#ffffff !important;
    font-size:15px !important;
    font-weight:600 !important;
    letter-spacing:0.8px !important;
    text-transform:uppercase !important;
    padding:0 18px !important;
}

/* Hover */
.cs-topBar a:hover,
.cs-topbar a:hover,
.cs-serviceBar a:hover,
.cs-headerTop a:hover {
    color:#f3ca39  !important;
}

/* Service Pfeil */
.cs-topBar svg,
.cs-headerTop svg {
    stroke:#ffffff !important;
}

/* Sprachflagge schöner */
.cs-topBar img,
.cs-headerTop img {
    transform:scale(1.15);
    margin-left:15px;
}
/* =========================
   UGROUND FOOTER CLEAN
========================= */

/* kompletter Footer dunkelblau */
footer,
footer *,
.cs-footer,
.cs-footer *,
.cs-footerWrapper,
.cs-footerContent,
.cs-newsletter,
.newsletter,
.cs-footerBottom {
    background-color:#021430 !important;
    color:#ffffff !important;
}

/* Footer-Spalten */
footer {
    background:#021430 !important;
    border-top:4px solid #f3ca39 !important;
}

/* Überschriften */
footer h1,
footer h2,
footer h3,
footer h4,
footer .headline,
footer .cs-footerTitle,
footer .cs-footerHeadline {
    color:#ffffff !important;
    text-transform:uppercase !important;
    font-size:17px !important;
    font-weight:800 !important;
    letter-spacing:1.4px !important;
    margin-bottom:18px !important;
}

/* Fließtext */
footer p,
footer span,
footer div,
footer li {
    color:#ffffff !important;
    font-size:15px !important;
    line-height:1.7 !important;
}

/* Links */
footer a {
    color:#ffffff !important;
    text-decoration:none !important;
    transition:0.25s ease;
}

footer a:hover {
    color:#f3ca39 !important;
}

/* Newsletter Eingabefeld */
footer input,
footer input[type="email"],
footer input[type="text"] {
    background:#ffffff !important;
    color:#021430 !important;
    border:1px solid rgba(255,255,255,0.25) !important;
}

/* Placeholder */
footer input::placeholder {
    color:#777777 !important;
}

/* Newsletter Button */
footer button,
footer .button,
footer input[type="submit"] {
    background:#f3ca39 !important;
    color:#021430 !important;
    border:none !important;
}

/* Trennlinien */
footer hr,
.cs-footerBottom {
    border-color:rgba(255,255,255,0.18) !important;
}

/* Copyright Zeile */
footer .copyright,
footer small {
    color:#ffffff !important;
}
/* =========================
   UGROUND SUBMENÜ / OFFCANVAS
========================= */


/* Hintergrund Abdunkelung */
[class*="offcanvas"],
[class*="Offcanvas"],
[class*="overlay"],
[class*="Overlay"] {
    background:rgba(0,0,0,0.65) !important;
}


/* linkes Menü */
[class*="offcanvas"] > div:first-child,
[class*="Offcanvas"] > div:first-child,
[class*="menuLayer"] > div:first-child,
[class*="MenuLayer"] > div:first-child {
    background:#021430 !important;
    width:330px !important;
    border-right:4px solid #f3ca39 !important;
}


/* Kopf "Informationen" */
[class*="offcanvas"] h1,
[class*="offcanvas"] h2,
[class*="offcanvas"] h3,
[class*="menuLayer"] h1,
[class*="menuLayer"] h2,
[class*="menuLayer"] h3 {
    background:#021430 !important;
    color:#ffffff !important;
    padding:18px 22px !important;
    font-size:18px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    letter-spacing:1px !important;
    border-bottom:2px solid #f3ca39 !important;
}


/* Menü Links */
[class*="offcanvas"] a,
[class*="Offcanvas"] a,
[class*="menuLayer"] a,
[class*="MenuLayer"] a {
    color:#ffffff !important;
    background:transparent !important;
    display:block !important;
    padding:10px 24px !important;

    font-size:14px !important;
    font-weight:800 !important;
    letter-spacing:1px !important;
    text-transform:uppercase !important;

    transition:0.25s ease;
}


/* Hover + aktiv */
[class*="offcanvas"] a:hover,
[class*="Offcanvas"] a:hover,
[class*="offcanvas"] .active,
[class*="Offcanvas"] .active {
    background:#f3ca39 !important;
    color:#021430 !important;
    padding-left:32px !important;
}


/* Close Button */
[class*="close"],
[class*="Close"],
[class*="offcanvas"] button,
[class*="Offcanvas"] button {
    background:#f3ca39 !important;
    color:#021430 !important;
    font-weight:900 !important;
}


/* X Farbe */
[class*="close"] svg,
[class*="Close"] svg {
    stroke:#021430 !important;
}
/* =========================
   FIX SERVICE SCHWARZER BLOCK
========================= */

/* alle aktiven Dropdown Hintergründe entfernen */
.cs-topBar *,
.cs-headerTop *,
.cs-serviceBar * {
    box-shadow:none !important;
}


/* Service Dropdown Button */
.cs-topBar li,
.cs-headerTop li,
.cs-serviceBar li,
.cs-topBar a,
.cs-headerTop a,
.cs-serviceBar a {
    background:transparent !important;
}


/* wenn Service offen/aktiv */
.cs-topBar li:hover,
.cs-headerTop li:hover,
.cs-serviceBar li:hover,
.cs-topBar li.open,
.cs-headerTop li.open,
.cs-serviceBar li.open,
.cs-topBar li.active,
.cs-headerTop li.active,
.cs-serviceBar li.active {
    background:#f3ca39 !important;
    color:#021430 !important;
    border-radius:0 !important;
}


/* Text und Pfeil im aktiven Feld */
.cs-topBar li:hover *,
.cs-headerTop li:hover *,
.cs-serviceBar li:hover *,
.cs-topBar li.open *,
.cs-headerTop li.open *,
.cs-serviceBar li.open * {
    color:#021430 !important;
    stroke:#021430 !important;
}
/* SLIDER DESIGN - RUNDE ECKEN + SCHATTEN */

.nivoSlider,
.cs-slider,
.cs-sliderWrapper {
    border-radius:18px !important;
    overflow:hidden !important;
    box-shadow:0 15px 40px rgba(0,0,0,0.25) !important;
}

/* Bilder ebenfalls abrunden */
.nivoSlider img,
.cs-slider img {
    border-radius:18px !important;
}
/* =========================
   STARTSEITE PRODUKTE FINAL
========================= */

/* Abstand Überschrift */
.cs-startTitle {
    margin:70px auto 35px auto !important;
}

/* Überschrift */
.cs-betHeading {
    color:#021430 !important;
    font-size:32px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:1.2px !important;
}

/* Untertitel */
.cs-subtitle {
    color:#021430 !important;
    font-size:16px !important;
    font-weight:500 !important;
    margin-top:10px !important;
}

/* Produktreihe */
.cs-productListing {
    max-width:1280px !important;
    margin:35px auto 90px auto !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:24px !important;
}

/* Produktkarte */
.cs-articlePreview {
    flex:0 0 260px !important;
    width:230px !important;
    max-width:230px !important;
    background:#ffffff !important;
    border-radius:22px !important;
    padding:24px !important;
    box-shadow:0 12px 35px rgba(0,0,0,0.14) !important;
    overflow:hidden !important;
    transition:0.3s ease !important;
}

/* Hover */
.cs-articlePreview:hover {
    transform:translateY(-8px) !important;
    box-shadow:0 18px 45px rgba(0,0,0,0.24) !important;
}

/* Produktbild */
.cs-articlePreview img {
    width:100% !important;
    height:250px !important;
    object-fit:contain !important;
    border-radius:16px !important;
}

/* Produkttitel */
.cs-articlePreview a,
.cs-articlePreview .cs-title {
    color:#021430 !important;
    font-size:15px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    line-height:1.25 !important;
    text-decoration:none !important;
}

/* Preis */
.cs-price,
.cs-articlePreview .cs-price {
    color:#021430 !important;
    font-size:15px !important;
    font-weight:800 !important;
}

/* Lagerstatus */
.cs-articlePreview .cs-stock,
.cs-articlePreview [class*="stock"] {
    color:#00843d !important;
    font-weight:800 !important;
}

/* Mobil sauber */
@media (max-width:900px) {
    .cs-articlePreview {
        flex:0 0 45% !important;
        width:45% !important;
        max-width:45% !important;
    }
}

@media (max-width:600px) {
    .cs-articlePreview {
        flex:0 0 90% !important;
        width:90% !important;
        max-width:90% !important;
    }
}
/* =====================================
   STARTSEITE PRODUKTBOXEN + HEADINGS
   Trendprodukte + Zuletzt gesehen
===================================== */


/* Überschrift mit unterbrochener Linie */
.cs-siteHeading {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:35px !important;
    margin:70px auto 45px auto !important;
}

.cs-siteHeading:before,
.cs-siteHeading:after {
    content:"" !important;
    height:1px !important;
    background:#ddd !important;
    flex:1 !important;
    display:block !important;
}

.cs-siteHeading span {
    background:#fff !important;
    padding:0 25px !important;
    color:#001b3d !important;
    font-size:34px !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-transform:uppercase !important;
}


/* Untertitel */
.cs-subtitle {
    color:#001b3d !important;
    font-size:16px !important;
    margin-bottom:50px !important;
}


/* Produktbereich */
.cs-productListing {
    justify-content:center !important;
    gap:40px !important;
}


/* ALLE Produktkarten */
.cs-articlePreview,
.cs-articlePreviewBox,
.cs-productPreview,
article[itemtype*="Product"] {

    background:#fff !important;

    border-radius:18px !important;

    padding:25px !important;

    box-shadow:
    0 18px 35px rgba(0,0,0,0.13) !important;

    transition:all .25s ease !important;

    overflow:hidden !important;
}


/* Hover */
.cs-articlePreview:hover,
.cs-productPreview:hover,
article[itemtype*="Product"]:hover {

    transform:translateY(-8px);

    box-shadow:
    0 25px 45px rgba(0,0,0,0.20) !important;
}


/* Bilder */
.cs-articlePreview img,
.cs-productPreview img,
article[itemtype*="Product"] img {

    border-radius:12px !important;

    max-height:280px !important;

    object-fit:contain !important;
}


/* Produktname */
.cs-articlePreview h3,
.cs-productPreview h3,
article[itemtype*="Product"] h3 {

    color:#001b3d !important;

    font-weight:900 !important;

    text-transform:uppercase !important;
}


/* Lager grün sauber */
.cs-stock,
.cs-availability {

    color:#008b3a !important;
    font-weight:700 !important;
}


/* Desktop 4 nebeneinander */
@media(min-width:1000px){

.cs-productListing article {
    width:23% !important;
}

}
/* HEADLINE LINIEN FINAL FIX */

.cs-siteHeading {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:28px !important;
    margin:70px auto 35px auto !important;
    text-align:center !important;
    position:relative !important;
}

.cs-siteHeading:before,
.cs-siteHeading:after {
    content:"" !important;
    display:block !important;
    height:1px !important;
    background:#e5e5e5 !important;
    flex:1 1 auto !important;
    max-width:360px !important;
    position:static !important;
}

.cs-siteHeading span {
    background:#ffffff !important;
    padding:0 24px !important;
    position:relative !important;
    z-index:2 !important;
    color:#021430 !important;
}
/* =====================================
   LA STARS FOOTER KOMPLETT DESIGN
===================================== */


/* Footer Grundschrift */
footer,
.cs-footer,
.cs-footerBox,
.cs-footerBoxInner {

    font-family:'Poppins', sans-serif !important;

    color:#ffffff !important;

    font-size:15px !important;

    font-weight:400 !important;

    line-height:1.8 !important;
}


/* Footer Spalten */
.cs-footerBox {
    padding:10px 25px !important;
}


/* Überschriften */
.cs-footerBoxHeader {

    color:#ffffff !important;

    font-size:18px !important;

    font-weight:900 !important;

    text-transform:uppercase !important;

    letter-spacing:1px !important;

    margin-bottom:28px !important;

    position:relative !important;
}


/* Gelber LA Stars Akzent */
.cs-footerBoxHeader:after {

    content:"";

    display:block;

    width:50px;

    height:4px;

    background:#f3ca39;

    border-radius:10px;

    margin-top:12px;
}


/* Texte im Footer */
.cs-footerBox p,
.cs-footerBox div,
.cs-footerBox span {

    color:#ffffff !important;

    font-size:15px !important;

    font-weight:400 !important;

    line-height:1.8 !important;
}


/* Links */
.cs-footerBox a {

    color:#ffffff !important;

    font-size:15px !important;

    text-decoration:none !important;

    transition:all .25s ease;
}


/* Hover Gelb */
.cs-footerBox a:hover {

    color:#f3ca39 !important;

    padding-left:5px;
}


/* Newsletter Bereich */
.cs-footerRow.newsletter,
.cs-footerNewsletter {

    color:#ffffff !important;
}


/* Newsletter Text */
.cs-footerNewsletter * {

    font-size:15px !important;
}


/* Eingabefeld */
.cs-footer input {

    border-radius:8px !important;

    border:none !important;

    padding:18px !important;

    font-family:'Poppins', sans-serif !important;
}


/* Newsletter Button */
.cs-footer button {

    background:#f3ca39 !important;

    color:#001b3d !important;

    border-radius:8px !important;

    transition:.25s ease;
}


.cs-footer button:hover {

    transform:scale(1.05);
}


/* Copyright unten */
.cs-footerCopyright,
.cs-footerBottom {

    color:rgba(255,255,255,.7) !important;

    font-size:13px !important;
}
/* NEWSLETTER FINAL EXAKT */

footer .cs-footerRow.newsletter {
    background:#f3ca39 !important;
    max-width:1200px !important;
    margin:70px auto 50px auto !important;
    padding:35px !important;
    border-radius:22px !important;
    border:none !important;
    box-shadow:0 20px 45px rgba(0,0,0,.25) !important;
}

footer .cs-footerRow.newsletter > .cs-footerInner.cs-container {
    background:#f3ca39 !important;
    max-width:none !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
}

footer .cs-footerNewsletter {
    background:#f3ca39 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:30px !important;
    width:100% !important;
}

footer .cs-footerNewsletterBox {
    background:#f3ca39 !important;
    color:#021430 !important;
    font-weight:800 !important;
}

footer .cs-footerNewsletterBox.headline {
    font-size:22px !important;
    text-transform:uppercase !important;
    letter-spacing:1px !important;
}

footer .cs-footerNewsletterBox.text {
    font-size:15px !important;
}

footer .cs-footerNewsletterBox.input {
    display:flex !important;
    justify-content:flex-end !important;
}

footer .cs-footerNewsletterBox.input input {
    background:#ffffff !important;
    color:#021430 !important;
    height:56px !important;
    width:360px !important;
    border:none !important;
    border-radius:10px 0 0 10px !important;
    padding:0 20px !important;
}

footer .cs-footerNewsletterBox.input button {
    background:#021430 !important;
    color:#ffffff !important;
    height:56px !important;
    width:64px !important;
    border:none !important;
    border-radius:0 10px 10px 0 !important;
}
/* Newsletter Text Style */

footer .cs-footerNewsletterBox {
    font-size:17px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
}

footer .cs-footerNewsletterBox:first-child {
    font-size:28px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:1px !important;
}

footer .cs-footerNewsletterBox:first-child:after {
    content:"";
    display:block;
    width:60px;
    height:5px;
    background:#001b3d;
    border-radius:10px;
    margin-top:12px;
}
/* Newsletter Text unter Überschrift setzen */

footer .cs-footerNewsletter {
    display:grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows:auto auto auto !important;
    column-gap:60px !important;
}


/* Überschrift */
footer .cs-footerNewsletterBox:nth-child(1) {
    grid-column:1 !important;
    grid-row:1 !important;
}


/* Beschreibung */
footer .cs-footerNewsletterBox:nth-child(2) {
    grid-column:1 !important;
    grid-row:2 !important;
    margin-top:20px !important;
    max-width:550px !important;
    font-size:18px !important;
    line-height:1.5 !important;
}


/* Eingabe rechts */
footer .cs-footerNewsletterBox.input {
    grid-column:2 !important;
    grid-row:1 / span 3 !important;
    align-self:center !important;
}


/* Linie Abstand */
footer .cs-footerNewsletterBox:first-child:after {
    margin-top:18px !important;
    margin-bottom:0 !important;
}
/* Newsletter Eingabefeld größer */

footer .cs-footerNewsletterBox.input {
    min-width:520px !important;
}

footer .cs-footerNewsletterBox.input input {
    width:460px !important;
    min-width:460px !important;
}

footer .cs-footerNewsletterBox.input button {
    min-width:70px !important;
}
/* FOOTER ÜBERSCHRIFTEN LA STARS STYLE */

footer .cs-footerBoxHeader {
    font-size:22px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:1.5px !important;
    color:#ffffff !important;
    margin-bottom:35px !important;
}


/* Gelbe Linie unter Überschrift */
footer .cs-footerBoxHeader:after {
    content:"";
    display:block;
    width:75px !important;
    height:6px !important;
    background:#f3ca39 !important;
    border-radius:20px !important;
    margin-top:20px !important;
}


/* Footer Text etwas hochwertiger */
footer .cs-footerBox,
footer .cs-footerBox a {
    font-size:17px !important;
    line-height:1.8 !important;
    font-weight:500 !important;
}


/* Links Hover wie Fan-Shop */
footer .cs-footerBox a:hover {
    color:#f3ca39 !important;
}