/* ==========================================================
   AFC VIENNA VIKINGS FANSHOP
   COSMOSHOP LEMON – KOMPLETTES ERSATZ-CSS
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");


/* ==========================================================
   DESIGN-VARIABLEN
   ========================================================== */

:root {
    --vv-purple: #440199;
    --vv-purple-dark: #26005d;
    --vv-purple-hover: #5b00c9;
    --vv-yellow: #ffd400;
    --vv-yellow-hover: #e8c200;

    --vv-black: #111111;
    --vv-text: #2b2b2b;
    --vv-grey: #6f6f6f;
    --vv-light: #f5f5f5;
    --vv-border: #e4e4e4;
    --vv-white: #ffffff;

    --vv-container: 1220px;
    --vv-shadow: 0 14px 35px rgba(0, 0, 0, 0.09);
    --vv-transition: 0.22s ease;
}


/* ==========================================================
   RESET UND GRUNDLAYOUT
   ========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--vv-white) !important;
    color: var(--vv-text) !important;
    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 15px;
    line-height: 1.65;
}

body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--vv-purple);
    text-decoration: none;
    transition:
        color var(--vv-transition),
        background-color var(--vv-transition),
        border-color var(--vv-transition),
        transform var(--vv-transition);
}

a:hover,
a:focus {
    color: var(--vv-purple-hover);
    text-decoration: none;
}

p {
    color: var(--vv-text);
}

.cs-container,
.container {
    width: calc(100% - 40px) !important;
    max-width: var(--vv-container) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}


/* ==========================================================
   TYPOGRAFIE
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.cs-headline,
.cs-title,
.cs-productName,
.cs-categoryTitle,
.page-title,
.product-title {
    color: var(--vv-black) !important;
    font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.05;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

h1,
.page-title {
    font-size: clamp(38px, 4vw, 68px);
}

h2 {
    font-size: clamp(30px, 3vw, 48px);
}

h3 {
    font-size: 24px;
}


/* ==========================================================
   PREHEADER – VIOLETT
   ========================================================== */

.cs-topBar {
    min-height: 42px !important;
    background: var(--vv-purple) !important;
    color: var(--vv-white) !important;
    border: 0 !important;
}

.cs-topBar > .cs-container,
.cs-topBar .cs-container {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 42px !important;
}

.cs-topBar a,
.cs-topBar span,
.cs-topBar div {
    color: var(--vv-white) !important;
}

.cs-topBar a {
    font-size: 12px !important;
    font-weight: 600 !important;
}

.cs-topBar a:hover {
    color: var(--vv-yellow) !important;
}

.cs-topBar svg,
.cs-topBar path,
.cs-topBar i {
    color: var(--vv-white) !important;
    fill: currentColor !important;
}

.cs-topBar img {
    filter: none !important;
}


/* ==========================================================
   HEADER
   ========================================================== */

header,
.cs-header {
    position: relative !important;
    z-index: 100;
    background: var(--vv-white) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.cs-headerContent {
    position: relative !important;
    min-height: 170px !important;
    background: var(--vv-white) !important;
    border: 0 !important;
}

/*
   Wichtig:
   Das Logo liegt innerhalb dieses echten Cosmoshop-Containers.
*/

.cs-headerContent > .cs-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    min-height: 170px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}


/* ==========================================================
   LOGO – EXAKT MITTIG UND VOLLSTÄNDIG IM HEADER
   ========================================================== */

.cs-headerContent .cs-logo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    z-index: 20 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 95px !important;
    height: 125px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
}

.cs-headerContent .cs-logo > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 95px !important;
    height: 125px !important;

    margin: 0 !important;
    padding: 0 !important;
}

.cs-headerContent .cs-logo img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 95px !important;
    max-height: 118px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}


/* ==========================================================
   HEADER-ICONS RECHTS
   ========================================================== */

.cs-headerContent .cs-miniButtons {
    position: relative !important;
    z-index: 30 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 18px !important;
    margin-left: auto !important;
}

.cs-headerContent .cs-miniButtons a,
.cs-headerContent .cs-miniButtons button {
    background: transparent !important;
    color: var(--vv-black) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.cs-headerContent .cs-miniButtons a:hover,
.cs-headerContent .cs-miniButtons button:hover {
    color: var(--vv-purple) !important;
    transform: translateY(-1px);
}


/* ==========================================================
   EINZIGE GELBE HEADER-TRENNLINIE
   ========================================================== */

.cs-headerContent::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    display: block;
    width: 100%;
    height: 4px;

    background: var(--vv-yellow);
}

header,
.cs-header,
.cs-headerContent,
.cs-headerContent > .cs-container {
    border-bottom: 0 !important;
}


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

.cs-navigation,
.cs-mainNavigation,
nav {
    background: var(--vv-purple) !important;
    border: 0 !important;
}

.cs-navigation a,
.cs-mainNavigation a,
nav a {
    font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif !important;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.cs-navigation > ul > li > a,
.cs-mainNavigation > ul > li > a {
    color: var(--vv-white) !important;
}

.cs-navigation > ul > li > a:hover,
.cs-mainNavigation > ul > li > a:hover,
.cs-navigation > ul > li.active > a {
    background: var(--vv-yellow) !important;
    color: var(--vv-black) !important;
}


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

.cs-main,
main {
    background: var(--vv-white) !important;
}

.cs-main > .cs-container,
main > .cs-container {
    padding-top: 45px;
    padding-bottom: 75px;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

button,
.cs-button,
.btn,
.button,
input[type="submit"],
input[type="button"],
.cs-addToCart {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 50px;
    padding: 13px 25px;

    background: var(--vv-purple) !important;
    color: var(--vv-white) !important;

    border: 2px solid var(--vv-purple) !important;
    border-radius: 0 !important;
    box-shadow: none;

    font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif !important;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;

    transition:
        background-color var(--vv-transition),
        color var(--vv-transition),
        border-color var(--vv-transition),
        transform var(--vv-transition),
        box-shadow var(--vv-transition);
}

button:hover,
.cs-button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.cs-addToCart:hover {
    background: var(--vv-yellow) !important;
    color: var(--vv-black) !important;
    border-color: var(--vv-yellow) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(68, 1, 153, 0.17);
}


/* ==========================================================
   FORMULARE
   ========================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
select,
textarea {
    min-height: 50px;
    padding: 12px 15px;

    background: var(--vv-white) !important;
    color: var(--vv-black) !important;

    border: 1px solid #cccccc !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: "Inter", Arial, Helvetica, sans-serif !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--vv-purple) !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(68, 1, 153, 0.1) !important;
}


/* ==========================================================
   PRODUKTKARTEN
   ========================================================== */

.cs-productBox,
.cs-productTile,
.cs-product {
    position: relative;
    overflow: hidden;

    background: var(--vv-white) !important;
    border: 1px solid var(--vv-border) !important;
    border-radius: 0 !important;
    box-shadow: none;

    transition:
        border-color var(--vv-transition),
        transform var(--vv-transition),
        box-shadow var(--vv-transition);
}

.cs-productBox:hover,
.cs-productTile:hover,
.cs-product:hover {
    border-color: var(--vv-purple) !important;
    box-shadow: var(--vv-shadow);
    transform: translateY(-5px);
}

.cs-productImage,
.cs-productPicture {
    overflow: hidden;
    background: var(--vv-light) !important;
}

.cs-productImage img,
.cs-productPicture img {
    transition: transform 0.35s ease;
}

.cs-productBox:hover .cs-productImage img,
.cs-productTile:hover .cs-productPicture img {
    transform: scale(1.035);
}

.cs-productName,
.cs-productTitle {
    color: var(--vv-black) !important;
    font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}

.cs-productName a,
.cs-productTitle a {
    color: var(--vv-black) !important;
}

.cs-productName a:hover,
.cs-productTitle a:hover {
    color: var(--vv-purple) !important;
}

.cs-price,
.cs-productPrice {
    color: var(--vv-purple) !important;
    font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif !important;
    font-size: 27px !important;
    font-weight: 700 !important;
}


/* ==========================================================
   FOOTER-SLOGAN
   ========================================================== */

footer {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--vv-white) !important;
    border: 0 !important;
}

footer::before {
    content: "ONCE A VIKING. ALWAYS A VIKING.";

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 118px;
    padding: 24px 20px;

    background: var(--vv-yellow);
    color: var(--vv-black);

    border-top: 0;
    border-bottom: 9px solid var(--vv-purple);

    font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
    font-size: clamp(38px, 3.7vw, 58px);
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}


/* ==========================================================
   FOOTER – ALLGEMEIN
   ========================================================== */

footer .cs-footerRow,
footer .cs-footerInner,
footer .cs-container {
    box-sizing: border-box;
}

footer p,
footer li,
footer span,
footer div {
    color: var(--vv-text);
}

footer a {
    color: var(--vv-black) !important;
}

footer a:hover {
    color: var(--vv-purple) !important;
}


/* ==========================================================
   FOOTER-INFORMATIONSBEREICH
   ========================================================== */

footer .cs-footerRow.top {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--vv-white) !important;
    border: 0 !important;
}

footer .cs-footerRow.top .cs-footerInner {
    padding-top: 58px !important;
    padding-bottom: 52px !important;
    background: var(--vv-white) !important;
}

footer .cs-footerRow.top h2,
footer .cs-footerRow.top h3,
footer .cs-footerRow.top h4,
footer .cs-footerRow.top .cs-title {
    position: relative;

    margin-top: 0;
    margin-bottom: 22px;
    padding-bottom: 12px;

    color: var(--vv-black) !important;

    font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

footer .cs-footerRow.top h2::after,
footer .cs-footerRow.top h3::after,
footer .cs-footerRow.top h4::after,
footer .cs-footerRow.top .cs-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;

    width: 38px;
    height: 4px;

    background: var(--vv-yellow);
}

footer .cs-footerRow.top p,
footer .cs-footerRow.top li {
    color: var(--vv-text) !important;
    line-height: 1.7;
}

footer .cs-footerRow.top ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

footer .cs-footerRow.top li {
    margin-bottom: 5px;
}


/* ==========================================================
   NEWSLETTER – SAUBERER ABSCHLUSS
   ========================================================== */

footer .cs-footerRow.newsletter {
    margin: 0 !important;
    padding: 0 !important;

    background: var(--vv-light) !important;

    border-top: 1px solid var(--vv-border) !important;
    border-bottom: 1px solid var(--vv-border) !important;
}

footer .cs-footerRow.newsletter .cs-footerInner {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

footer .cs-footerNewsletter {
    display: grid !important;
    grid-template-columns: minmax(190px, 250px) minmax(260px, 1fr) minmax(340px, 500px);
    align-items: center !important;
    gap: 30px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

footer .cs-footerNewsletter h2,
footer .cs-footerNewsletter h3,
footer .cs-footerNewsletter h4,
footer .cs-footerNewsletter strong {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--vv-black) !important;

    font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

footer .cs-footerNewsletter p {
    margin: 0 !important;
    color: var(--vv-text) !important;
}

footer .cs-footerNewsletter form {
    display: flex !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 0 0 auto !important;
}

footer .cs-footerNewsletter input[type="email"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 55px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    background: var(--vv-white) !important;
    color: var(--vv-black) !important;

    border: 2px solid var(--vv-purple) !important;
    border-right: 0 !important;
    border-radius: 0 !important;
}

footer .cs-footerNewsletter button,
footer .cs-footerNewsletter input[type="submit"] {
    flex: 0 0 64px !important;

    width: 64px !important;
    min-width: 64px !important;
    height: 55px !important;
    min-height: 55px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--vv-purple) !important;
    color: var(--vv-white) !important;

    border: 2px solid var(--vv-purple) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    transform: none !important;
}

footer .cs-footerNewsletter button:hover,
footer .cs-footerNewsletter input[type="submit"]:hover {
    background: var(--vv-yellow) !important;
    color: var(--vv-black) !important;
    border-color: var(--vv-yellow) !important;
}


/* ==========================================================
   ZAHLUNGSARTEN – KEIN LEERER ODER FARBIGER ZWISCHENBALKEN
   ========================================================== */

footer .cs-footerRow.payments {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    background: var(--vv-white) !important;

    border: 0 !important;
    border-bottom: 1px solid var(--vv-border) !important;
}

footer .cs-footerRow.payments .cs-footerInner,
footer .cs-footerRow.payments.cs-footerInner {
    display: flex !important;
    align-items: center !important;

    min-height: 64px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;

    background: var(--vv-white) !important;
}

footer .cs-footerRow.payments img {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;
    max-height: 25px !important;

    margin-right: 7px !important;

    filter: none !important;
    opacity: 0.8;
}


/* ==========================================================
   COPYRIGHT – VIOLETTER ABSCHLUSS
   ========================================================== */

footer .cs-footerRow.copyright {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    background: var(--vv-purple-dark) !important;
    color: var(--vv-white) !important;

    border: 0 !important;
}

footer .cs-footerRow.copyright .cs-footerInner,
footer .cs-footerRow.copyright.cs-footerInner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 105px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;

    background: var(--vv-purple-dark) !important;
    color: var(--vv-white) !important;

    text-align: center;
}

footer .cs-footerRow.copyright,
footer .cs-footerRow.copyright *,
footer .cs-footerRow.copyright a,
footer .cs-footerRow.copyright span,
footer .cs-footerRow.copyright div,
footer .cs-footerRow.copyright p {
    color: var(--vv-white) !important;
}

footer .cs-footerRow.copyright a:hover {
    color: var(--vv-yellow) !important;
}


/* ==========================================================
   VERSTECKTE LEERE FOOTER-BEREICHE VERMEIDEN
   ========================================================== */

footer .cs-footerRow:empty,
footer .cs-footerInner:empty {
    display: none !important;
}

footer > br,
footer > p:empty {
    display: none !important;
}


/* ==========================================================
   FOKUS UND AUSWAHL
   ========================================================== */

::selection {
    background: var(--vv-yellow);
    color: var(--vv-black);
}

::-moz-selection {
    background: var(--vv-yellow);
    color: var(--vv-black);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--vv-yellow);
    outline-offset: 3px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 991px) {

    .cs-headerContent,
    .cs-headerContent > .cs-container {
        min-height: 145px !important;
    }

    .cs-headerContent .cs-logo,
    .cs-headerContent .cs-logo > a {
        width: 86px !important;
        height: 108px !important;
    }

    .cs-headerContent .cs-logo img {
        max-width: 86px !important;
        max-height: 103px !important;
    }

    footer .cs-footerNewsletter {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px 30px !important;
    }

    footer .cs-footerNewsletter form {
        grid-column: 1 / -1;
        max-width: none !important;
        margin-left: 0 !important;
    }
}


/* ==========================================================
   MOBIL
   ========================================================== */

@media (max-width: 767px) {

    .cs-container,
    .container {
        width: calc(100% - 28px) !important;
    }

    .cs-topBar {
        min-height: 38px !important;
    }

    .cs-topBar > .cs-container,
    .cs-topBar .cs-container {
        min-height: 38px !important;
    }

    .cs-headerContent,
    .cs-headerContent > .cs-container {
        min-height: 125px !important;
    }

    .cs-headerContent .cs-logo,
    .cs-headerContent .cs-logo > a {
        width: 72px !important;
        height: 90px !important;
    }

    .cs-headerContent .cs-logo img {
        max-width: 72px !important;
        max-height: 86px !important;
    }

    .cs-headerContent .cs-miniButtons {
        gap: 10px !important;
    }

    footer::before {
        min-height: 92px;
        padding: 20px 14px;

        border-bottom-width: 7px;

        font-size: 30px;
        line-height: 1.05;
    }

    footer .cs-footerRow.top .cs-footerInner {
        padding-top: 35px !important;
        padding-bottom: 30px !important;
    }

    footer .cs-footerNewsletter {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    footer .cs-footerNewsletter form {
        margin-top: 12px !important;
    }

    footer .cs-footerNewsletter input[type="email"] {
        min-width: 0 !important;
    }

    footer .cs-footerRow.payments .cs-footerInner,
    footer .cs-footerRow.payments.cs-footerInner {
        min-height: 58px !important;
    }

    footer .cs-footerRow.copyright .cs-footerInner,
    footer .cs-footerRow.copyright.cs-footerInner {
        min-height: 90px !important;
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }
}
/* ==========================================================
   FOOTER FINAL – NEWSLETTER, ZAHLUNGSARTEN, COPYRIGHT
   Durchgehend violett mit weißer Schrift
   Ganz unten in das bestehende CSS einfügen
   ========================================================== */


/* ----------------------------------------------------------
   GEMEINSAME BASIS
   ---------------------------------------------------------- */

footer .cs-footerRow.newsletter,
footer .cs-footerRow.payments,
footer .cs-footerRow.copyright {
    margin: 0 !important;
    padding: 0 !important;
    background: #440199 !important;
    border: 0 !important;
    color: #ffffff !important;
}

footer .cs-footerRow.newsletter *,
footer .cs-footerRow.payments *,
footer .cs-footerRow.copyright * {
    color: #ffffff !important;
}


/* ----------------------------------------------------------
   NEWSLETTER-BEREICH
   ---------------------------------------------------------- */

footer .cs-footerRow.newsletter {
    position: relative !important;
    overflow: hidden !important;
    background:
        linear-gradient(
            135deg,
            #2b0068 0%,
            #440199 48%,
            #5b00c5 100%
        ) !important;

    border-top: 8px solid #ffd400 !important;
}


/* dezente grafische Flächen */

footer .cs-footerRow.newsletter::before {
    content: "";
    position: absolute;
    top: -90px;
    left: -70px;

    width: 250px;
    height: 250px;

    border: 34px solid rgba(255, 212, 0, 0.10);
    transform: rotate(24deg);
    pointer-events: none;
}

footer .cs-footerRow.newsletter::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -120px;

    width: 290px;
    height: 290px;

    border: 42px solid rgba(255, 255, 255, 0.07);
    transform: rotate(40deg);
    pointer-events: none;
}


footer .cs-footerRow.newsletter .cs-footerInner {
    position: relative !important;
    z-index: 2 !important;

    padding-top: 42px !important;
    padding-bottom: 42px !important;

    background: transparent !important;
}


footer .cs-footerNewsletter {
    display: grid !important;
    grid-template-columns: minmax(230px, 0.9fr) minmax(280px, 1.15fr) minmax(390px, 1.35fr) !important;
    align-items: center !important;

    gap: 32px !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


/* ----------------------------------------------------------
   NEWSLETTER-ÜBERSCHRIFT
   ---------------------------------------------------------- */

footer .cs-footerNewsletter h2,
footer .cs-footerNewsletter h3,
footer .cs-footerNewsletter h4,
footer .cs-footerNewsletter strong {
    position: relative !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 0 0 22px !important;

    color: #ffffff !important;

    font-family: "Barlow Condensed", "Arial Narrow", Impact, sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
}


/* gelbe Linie links */

footer .cs-footerNewsletter h2::before,
footer .cs-footerNewsletter h3::before,
footer .cs-footerNewsletter h4::before,
footer .cs-footerNewsletter strong::before {
    content: "";
    position: absolute;

    top: 2px;
    bottom: 2px;
    left: 0;

    width: 7px;

    background: #ffd400;
}


/* kein altes Pseudo-Element */

footer .cs-footerNewsletter h2::after,
footer .cs-footerNewsletter h3::after,
footer .cs-footerNewsletter h4::after {
    display: none !important;
}


/* Beschreibung */

footer .cs-footerNewsletter p {
    margin: 0 !important;

    color: rgba(255, 255, 255, 0.88) !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
}


/* ----------------------------------------------------------
   NEWSLETTER-FORMULAR
   ---------------------------------------------------------- */

footer .cs-footerNewsletter form {
    display: flex !important;

    width: 100% !important;
    max-width: 540px !important;

    margin: 0 0 0 auto !important;
    padding: 5px !important;

    background: rgba(255, 255, 255, 0.12) !important;

    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 0 !important;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.18) !important;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


footer .cs-footerNewsletter input[type="email"] {
    flex: 1 1 auto !important;

    min-width: 0 !important;
    height: 58px !important;

    margin: 0 !important;
    padding: 0 20px !important;

    background: #ffffff !important;
    color: #111111 !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-size: 15px !important;
    font-weight: 500 !important;

    box-shadow: none !important;
}


footer .cs-footerNewsletter input[type="email"]::placeholder {
    color: #767676 !important;
    opacity: 1 !important;
}


footer .cs-footerNewsletter input[type="email"]:focus {
    outline: 0 !important;
    box-shadow: inset 0 0 0 2px #ffd400 !important;
}


/* Senden-Button */

footer .cs-footerNewsletter button,
footer .cs-footerNewsletter input[type="submit"] {
    flex: 0 0 72px !important;

    width: 72px !important;
    min-width: 72px !important;
    height: 58px !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffd400 !important;
    color: #111111 !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    transform: none !important;
}


footer .cs-footerNewsletter button svg,
footer .cs-footerNewsletter button path,
footer .cs-footerNewsletter input[type="submit"] {
    color: #111111 !important;
    fill: currentColor !important;
}


footer .cs-footerNewsletter button:hover,
footer .cs-footerNewsletter input[type="submit"]:hover {
    background: #ffffff !important;
    color: #440199 !important;

    transform: none !important;
    box-shadow: none !important;
}


/* ----------------------------------------------------------
   ZAHLUNGSARTEN
   ---------------------------------------------------------- */

footer .cs-footerRow.payments {
    background: #35007c !important;

    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}


footer .cs-footerRow.payments .cs-footerInner,
footer .cs-footerRow.payments.cs-footerInner {
    display: flex !important;
    align-items: center !important;

    min-height: 70px !important;

    padding-top: 17px !important;
    padding-bottom: 17px !important;

    background: transparent !important;
}


/* Zahlungslogos klar und sichtbar */

footer .cs-footerRow.payments img {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;
    max-height: 28px !important;

    margin-right: 9px !important;

    filter: brightness(0) invert(1) !important;
    opacity: 0.88 !important;

    transition: opacity 0.2s ease, transform 0.2s ease !important;
}


footer .cs-footerRow.payments img:hover {
    opacity: 1 !important;
    transform: translateY(-1px) !important;
}


/* ----------------------------------------------------------
   COPYRIGHT
   ---------------------------------------------------------- */

footer .cs-footerRow.copyright {
    background: #230052 !important;
}


footer .cs-footerRow.copyright .cs-footerInner,
footer .cs-footerRow.copyright.cs-footerInner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 88px !important;

    padding-top: 24px !important;
    padding-bottom: 24px !important;

    background: transparent !important;

    color: #ffffff !important;
    text-align: center !important;
}


footer .cs-footerRow.copyright,
footer .cs-footerRow.copyright *,
footer .cs-footerRow.copyright a,
footer .cs-footerRow.copyright span,
footer .cs-footerRow.copyright div,
footer .cs-footerRow.copyright p {
    color: rgba(255, 255, 255, 0.90) !important;
}


footer .cs-footerRow.copyright a:hover {
    color: #ffd400 !important;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 991px) {

    footer .cs-footerNewsletter {
        grid-template-columns: 1fr 1fr !important;
        gap: 20px 30px !important;
    }

    footer .cs-footerNewsletter form {
        grid-column: 1 / -1 !important;

        max-width: none !important;
        margin-left: 0 !important;
    }
}


/* ----------------------------------------------------------
   MOBIL
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    footer .cs-footerRow.newsletter .cs-footerInner {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    footer .cs-footerNewsletter {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 12px !important;
    }

    footer .cs-footerNewsletter h2,
    footer .cs-footerNewsletter h3,
    footer .cs-footerNewsletter h4,
    footer .cs-footerNewsletter strong {
        font-size: 25px !important;
    }

    footer .cs-footerNewsletter form {
        margin-top: 12px !important;
    }

    footer .cs-footerNewsletter input[type="email"] {
        height: 54px !important;
    }

    footer .cs-footerNewsletter button,
    footer .cs-footerNewsletter input[type="submit"] {
        flex-basis: 60px !important;

        width: 60px !important;
        min-width: 60px !important;
        height: 54px !important;
        min-height: 54px !important;
    }

    footer .cs-footerRow.payments .cs-footerInner,
    footer .cs-footerRow.payments.cs-footerInner {
        justify-content: center !important;
        min-height: 64px !important;
    }

    footer .cs-footerRow.copyright .cs-footerInner,
    footer .cs-footerRow.copyright.cs-footerInner {
        min-height: 82px !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
}
/* ==========================================================
   NEWSLETTER – FINALE KORREKTUR
   Überschrift wie "ONCE A VIKING"
   E-Mail-Feld vollständig sichtbar
   ========================================================== */


/* Newsletter-Layout neu aufteilen */

footer .cs-footerNewsletter {
    display: grid !important;
    grid-template-columns:
        minmax(240px, 0.9fr)
        minmax(280px, 1.1fr)
        minmax(480px, 1.5fr) !important;

    align-items: center !important;
    gap: 38px !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


/* ==========================================================
   NEWSLETTER-ÜBERSCHRIFT
   ========================================================== */

footer .cs-footerNewsletterBox.heading,
footer .cs-footerNewsletterBox.heading *,
footer .cs-footerNewsletterBox.heading div,
footer .cs-footerNewsletterBox.heading span {
    color: #ffffff !important;

    font-family:
        "Barlow Condensed",
        "Arial Narrow",
        Impact,
        sans-serif !important;

    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
}


/* gelber Akzent links */

footer .cs-footerNewsletterBox.heading {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    min-height: 54px !important;

    margin: 0 !important;
    padding: 0 0 0 22px !important;
}

footer .cs-footerNewsletterBox.heading::before {
    content: "";

    position: absolute;

    top: 3px;
    bottom: 3px;
    left: 0;

    width: 7px;

    background: #ffd400;
}


/* alte Überschriften-Stile sicher überschreiben */

footer .cs-footerNewsletterBox.heading::after,
footer .cs-footerNewsletterBox.heading *::after {
    display: none !important;
}


/* ==========================================================
   NEWSLETTER-BESCHREIBUNG
   ========================================================== */

footer .cs-footerNewsletterBox.text,
footer .cs-footerNewsletterBox.text *,
footer .cs-footerNewsletterBox.text div,
footer .cs-footerNewsletterBox.text span {
    color: rgba(255, 255, 255, 0.92) !important;

    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}


/* ==========================================================
   FORMULARBOX
   ========================================================== */

footer .cs-footerNewsletterBox.input {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


/* Formular selbst */

footer .cs-footerNewsletterBox.input form,
footer .cs-footerNewsletterBox.input > div {
    display: flex !important;
    align-items: stretch !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 5px !important;

    background: rgba(255, 255, 255, 0.12) !important;

    border: 1px solid rgba(255, 255, 255, 0.32) !important;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.18) !important;

    overflow: visible !important;
}


/* E-Mail-Feld */

footer input.cs-newsletterFooterInput,
footer .cs-footerNewsletterBox.input input[type="email"] {
    flex: 1 1 auto !important;

    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 58px !important;

    margin: 0 !important;
    padding: 0 20px !important;

    background: #ffffff !important;
    color: #111111 !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-family: "Inter", Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;

    box-shadow: none !important;
}


/* Placeholder */

footer input.cs-newsletterFooterInput::placeholder,
footer .cs-footerNewsletterBox.input input[type="email"]::placeholder {
    color: #767676 !important;
    opacity: 1 !important;
}


/* Senden-Button */

footer .cs-footerNewsletterBox.input button,
footer .cs-footerNewsletterBox.input input[type="submit"] {
    flex: 0 0 72px !important;

    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;

    height: 58px !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ffd400 !important;
    color: #111111 !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    transform: none !important;
}


/* Icon im Button */

footer .cs-footerNewsletterBox.input button svg,
footer .cs-footerNewsletterBox.input button path {
    color: #111111 !important;
    stroke: currentColor !important;
    fill: none !important;
}


/* Hover */

footer .cs-footerNewsletterBox.input button:hover,
footer .cs-footerNewsletterBox.input input[type="submit"]:hover {
    background: #ffffff !important;
    color: #440199 !important;
    transform: none !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {

    footer .cs-footerNewsletter {
        grid-template-columns:
            minmax(220px, 0.9fr)
            minmax(250px, 1fr)
            minmax(390px, 1.4fr) !important;

        gap: 24px !important;
    }

    footer .cs-footerNewsletterBox.heading,
    footer .cs-footerNewsletterBox.heading * {
        font-size: 27px !important;
    }
}


/* ==========================================================
   MOBIL
   ========================================================== */

@media (max-width: 767px) {

    footer .cs-footerNewsletter {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 15px !important;
    }

    footer .cs-footerNewsletterBox.heading,
    footer .cs-footerNewsletterBox.heading * {
        font-size: 27px !important;
    }

    footer .cs-footerNewsletterBox.input {
        width: 100% !important;
        margin-top: 8px !important;
    }

    footer input.cs-newsletterFooterInput,
    footer .cs-footerNewsletterBox.input input[type="email"] {
        height: 54px !important;
    }

    footer .cs-footerNewsletterBox.input button,
    footer .cs-footerNewsletterBox.input input[type="submit"] {
        flex-basis: 60px !important;

        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;

        height: 54px !important;
        min-height: 54px !important;
    }
}
/* ==========================================================
   STARTSEITEN-SLIDER ALS MODERNE KARTE
   Slogan oberhalb des Sliders
   ========================================================== */


/* ----------------------------------------------------------
   1. ALTEN FOOTER-SLOGAN AUSBLENDEN
   ---------------------------------------------------------- */

footer::before {
    display: none !important;
    content: none !important;
}


/* ----------------------------------------------------------
   2. STARTSEITENBEREICH
   ---------------------------------------------------------- */

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


/* ----------------------------------------------------------
   3. SLOGAN ÜBER DEM SLIDER
   ---------------------------------------------------------- */

/*
   Der Slogan wird direkt vor dem Slider erzeugt.
   Falls deine Sliderklasse leicht anders heißt,
   greifen die zusätzlichen Selektoren darunter.
*/

.cs-slider::before,
.cs-sliderContainer::before,
.cs-slideshow::before,
.cs-startSlider::before,
.slider::before {
    content: "ONCE A VIKING. ALWAYS A VIKING.";

    display: block !important;

    width: 100% !important;
    max-width: 1220px !important;

    margin: 0 auto 28px auto !important;
    padding: 0 20px !important;

    color: #111111 !important;

    font-family:
        "Barlow Condensed",
        "Arial Narrow",
        Impact,
        sans-serif !important;

    font-size: clamp(36px, 4vw, 62px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;

    text-align: center !important;
    text-transform: uppercase !important;
}


/* gelbe Zierlinien neben dem Slogan */

.cs-slider::after,
.cs-sliderContainer::after,
.cs-slideshow::after,
.cs-startSlider::after,
.slider::after {
    content: "";

    display: block !important;

    width: 90px !important;
    height: 5px !important;

    margin: -61px auto 56px auto !important;

    background: #ffd400 !important;

    pointer-events: none !important;
}


/* ----------------------------------------------------------
   4. SLIDER-HAUPTCONTAINER
   ---------------------------------------------------------- */

.cs-slider,
.cs-sliderContainer,
.cs-slideshow,
.cs-startSlider,
.slider {
    position: relative !important;

    width: calc(100% - 40px) !important;
    max-width: 1320px !important;

    margin: 45px auto 70px auto !important;
    padding: 0 !important;

    background: transparent !important;
    overflow: visible !important;
}


/* ----------------------------------------------------------
   5. EIGENTLICHE SLIDER-KARTE
   ---------------------------------------------------------- */

.cs-sliderInner,
.cs-sliderWrapper,
.cs-slideshowInner,
.cs-startSliderInner,
.slider-inner,
.slick-list,
.owl-stage-outer {
    position: relative !important;

    width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: #ffffff !important;

    border: 1px solid rgba(68, 1, 153, 0.12) !important;
    border-radius: 14px !important;

    overflow: hidden !important;

    box-shadow:
        0 18px 48px rgba(17, 17, 17, 0.16),
        0 5px 14px rgba(68, 1, 153, 0.08) !important;
}


/* ----------------------------------------------------------
   6. SLIDER-BILDER
   ---------------------------------------------------------- */

.cs-slider img,
.cs-sliderContainer img,
.cs-slideshow img,
.cs-startSlider img,
.slider img,
.slick-slide img,
.owl-item img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 14px !important;

    object-fit: cover !important;
}


/* ----------------------------------------------------------
   7. SLIDER ETWAS KLEINER UND LUFTIGER
   ---------------------------------------------------------- */

.cs-slider .cs-container,
.cs-sliderContainer .cs-container,
.cs-slideshow .cs-container,
.cs-startSlider .cs-container,
.slider .cs-container {
    width: 100% !important;
    max-width: 1320px !important;

    margin: 0 auto !important;
    padding: 0 !important;
}


/* ----------------------------------------------------------
   8. NAVIGATIONSPFEILE
   ---------------------------------------------------------- */

.cs-sliderPrev,
.cs-sliderNext,
.slick-prev,
.slick-next,
.owl-prev,
.owl-next,
.slider-prev,
.slider-next {
    position: absolute !important;
    top: 50% !important;
    z-index: 20 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 46px !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: rgba(255, 255, 255, 0.94) !important;
    color: #440199 !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18) !important;

    transform: translateY(-50%) !important;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease !important;
}

.cs-sliderPrev,
.slick-prev,
.owl-prev,
.slider-prev {
    left: 18px !important;
}

.cs-sliderNext,
.slick-next,
.owl-next,
.slider-next {
    right: 18px !important;
}

.cs-sliderPrev:hover,
.cs-sliderNext:hover,
.slick-prev:hover,
.slick-next:hover,
.owl-prev:hover,
.owl-next:hover,
.slider-prev:hover,
.slider-next:hover {
    background: #ffd400 !important;
    color: #111111 !important;
    transform: translateY(-50%) scale(1.06) !important;
}


/* ----------------------------------------------------------
   9. SLIDER-PUNKTE
   ---------------------------------------------------------- */

.cs-sliderDots,
.slick-dots,
.owl-dots,
.slider-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    margin: 20px 0 0 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.cs-sliderDots button,
.slick-dots button,
.owl-dot,
.slider-dots button {
    display: block !important;

    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    min-height: 11px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #d2d2d2 !important;

    border: 0 !important;
    border-radius: 50% !important;

    font-size: 0 !important;
    line-height: 0 !important;

    box-shadow: none !important;
    transform: none !important;
}

.cs-sliderDots .active button,
.slick-dots .slick-active button,
.owl-dot.active,
.slider-dots .active button {
    width: 28px !important;

    background: #440199 !important;

    border-radius: 8px !important;
}


/* ----------------------------------------------------------
   10. ABSTAND ZUM NÄCHSTEN BEREICH
   ---------------------------------------------------------- */

.cs-slider + *,
.cs-sliderContainer + *,
.cs-slideshow + *,
.cs-startSlider + *,
.slider + * {
    margin-top: 0 !important;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 991px) {

    .cs-slider,
    .cs-sliderContainer,
    .cs-slideshow,
    .cs-startSlider,
    .slider {
        width: calc(100% - 30px) !important;
        margin-top: 35px !important;
        margin-bottom: 55px !important;
    }

    .cs-slider::before,
    .cs-sliderContainer::before,
    .cs-slideshow::before,
    .cs-startSlider::before,
    .slider::before {
        margin-bottom: 22px !important;
        font-size: clamp(32px, 5vw, 48px) !important;
    }

    .cs-sliderPrev,
    .cs-sliderNext,
    .slick-prev,
    .slick-next,
    .owl-prev,
    .owl-next,
    .slider-prev,
    .slider-next {
        width: 40px !important;
        height: 40px !important;
    }
}


/* ----------------------------------------------------------
   MOBIL
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    .cs-slider,
    .cs-sliderContainer,
    .cs-slideshow,
    .cs-startSlider,
    .slider {
        width: calc(100% - 20px) !important;

        margin-top: 28px !important;
        margin-bottom: 42px !important;
    }

    .cs-slider::before,
    .cs-sliderContainer::before,
    .cs-slideshow::before,
    .cs-startSlider::before,
    .slider::before {
        margin-bottom: 18px !important;
        padding: 0 8px !important;

        font-size: 29px !important;
        line-height: 1.05 !important;
    }

    .cs-sliderInner,
    .cs-sliderWrapper,
    .cs-slideshowInner,
    .cs-startSliderInner,
    .slider-inner,
    .slick-list,
    .owl-stage-outer {
        border-radius: 9px !important;

        box-shadow:
            0 12px 28px rgba(17, 17, 17, 0.14),
            0 4px 10px rgba(68, 1, 153, 0.07) !important;
    }

    .cs-slider img,
    .cs-sliderContainer img,
    .cs-slideshow img,
    .cs-startSlider img,
    .slider img,
    .slick-slide img,
    .owl-item img {
        border-radius: 9px !important;
    }

    .cs-sliderPrev,
    .cs-sliderNext,
    .slick-prev,
    .slick-next,
    .owl-prev,
    .owl-next,
    .slider-prev,
    .slider-next {
        width: 35px !important;
        height: 35px !important;
    }

    .cs-sliderPrev,
    .slick-prev,
    .owl-prev,
    .slider-prev {
        left: 8px !important;
    }

    .cs-sliderNext,
    .slick-next,
    .owl-next,
    .slider-next {
        right: 8px !important;
    }
}
/* ===========================
   KATEGORIEN ALS PREMIUM-KARTEN
=========================== */

.cs-categoryPreview {
    transition: all .35s ease;
}

.cs-categoryPicture {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow:
        0 10px 30px rgba(0,0,0,.10),
        0 2px 8px rgba(0,0,0,.08);
    transition: all .35s ease;
}

.cs-categoryPicture img{
    display:block;
    width:100%;
    transition:transform .5s ease;
}

/* Hover */

.cs-categoryPreview:hover .cs-categoryPicture{
    transform:translateY(-8px);
    box-shadow:
        0 25px 60px rgba(0,0,0,.18),
        0 10px 25px rgba(0,0,0,.10);
}

.cs-categoryPreview:hover img{
    transform:scale(1.08);
}

/* leichter Verlauf unten */

.cs-categoryPicture::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:45%;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,0)
    );
    pointer-events:none;
}
/* ===========================
   GOLDENER TITEL-BUTTON
=========================== */

.cs-categoryPreview h2{

    background: linear-gradient(180deg,#FFD84A 0%,#F2C300 100%) !important;

    color:#fff !important;

    border:none !important;

    border-radius:40px !important;

    padding:12px 28px !important;

    font-size:15px !important;

    font-weight:700 !important;

    letter-spacing:1px !important;

    text-transform:uppercase;

    box-shadow:
        0 8px 20px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.35);

    transition:.3s;
}

.cs-categoryPreview:hover h2{

    background:linear-gradient(180deg,#FFE46A 0%,#F2C300 100%) !important;

    transform:translateX(-50%) translateY(-3px);

    box-shadow:
        0 14px 30px rgba(0,0,0,.35);
}
/* =====================================================
   AFC VIENNA VIKINGS - PREMIUM CATEGORY BUTTONS
===================================================== */

.cs-categoryPreview h2{

    background:#ffd400 !important;

    color:#ffffff !important;

    border:2px solid #4b2385 !important;

    border-radius:50px !important;

    padding:12px 30px !important;

    min-width:240px;

    font-size:15px !important;

    font-weight:800 !important;

    letter-spacing:1px !important;

    text-transform:uppercase !important;

    text-align:center;

    text-shadow:
        0 1px 2px rgba(0,0,0,.35);

    box-shadow:
        0 8px 20px rgba(0,0,0,.25),
        inset 0 2px 0 rgba(255,255,255,.45);

    transition:all .35s ease !important;
}

.cs-categoryPreview:hover h2{

    background:#ffe24d !important;

    color:#ffffff !important;

    border-color:#381a69 !important;

    transform:translateX(-50%) translateY(-4px) scale(1.03);

    box-shadow:
        0 16px 35px rgba(0,0,0,.35),
        0 0 18px rgba(255,212,0,.45);

}

/* Karte leicht hervorheben */

.cs-categoryPreview:hover .cs-categoryPicture{

    transform:translateY(-6px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.25);

}

.cs-categoryPicture{

    border-radius:20px;

    overflow:hidden;

    transition:all .35s ease;

}
/* =====================================================
   AFC VIENNA VIKINGS – KATEGORIE-TITEL
   Gelb #ffd400 erzwingen
===================================================== */

.cs-categoryPreview .cs-categoryName {
    background: #ffd400 !important;
    background-image: none !important;

    border: 2px solid #4b2385 !important;
    border-radius: 50px !important;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.28) !important;

    overflow: hidden !important;
}

/* Der eigentliche Link innerhalb des Titels */
.cs-categoryPreview .cs-categoryName > a {
    display: block !important;

    width: 100% !important;
    box-sizing: border-box !important;

    padding: 13px 24px !important;

    background: #ffd400 !important;
    background-color: #ffd400 !important;
    background-image: none !important;

    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;

    border: none !important;
    border-radius: 50px !important;

    transition: all 0.3s ease !important;
}

/* Hover */
.cs-categoryPreview:hover .cs-categoryName,
.cs-categoryPreview:hover .cs-categoryName > a {
    background: #ffe04a !important;
    background-color: #ffe04a !important;
    background-image: none !important;
}

.cs-categoryPreview:hover .cs-categoryName {
    transform: translateX(-50%) translateY(-4px) !important;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(255, 212, 0, 0.4) !important;
}
/* =========================================
   KATEGORIE-BUTTON IMMER GANZ VORNE
========================================= */

.cs-categoryPreview {
    position: relative !important;
}

.cs-categoryPreview .cs-categoryPicture {
    position: relative !important;
    z-index: 1 !important;
}

/* Bild-Overlay hinter den Button legen */
.cs-categoryPreview .cs-categoryPicture::before,
.cs-categoryPreview .cs-categoryPicture::after {
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Button vollständig über Bild und Overlay */
.cs-categoryPreview .cs-categoryName {
    position: absolute !important;
    left: 50% !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;

    z-index: 20 !important;

    background: #ffd400 !important;
    background-image: none !important;

    border: 2px solid #4b2385 !important;
    border-radius: 50px !important;

    overflow: hidden !important;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.32) !important;
}

/* Link ebenfalls nach vorne */
.cs-categoryPreview .cs-categoryName > a {
    position: relative !important;
    z-index: 21 !important;

    display: block !important;

    background: #ffd400 !important;
    background-image: none !important;

    color: #ffffff !important;

    opacity: 1 !important;
    filter: none !important;
}

/* Hover */
.cs-categoryPreview:hover .cs-categoryName {
    transform: translateX(-50%) translateY(-4px) !important;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.38),
        0 0 18px rgba(255, 212, 0, 0.45) !important;
}
/* =====================================================
   AFC VIENNA VIKINGS
   PREMIUM CATEGORY BUTTON V2
   (einfach ans Ende des CSS einfügen)
===================================================== */

.cs-categoryPreview .cs-categoryName{

    position:absolute !important;

    left:50% !important;

    bottom:18px !important;

    transform:translateX(-50%) !important;

    z-index:50 !important;

    width:auto !important;

    min-width:260px !important;

    max-width:78% !important;

    background:#ffd400 !important;

    background-image:none !important;

    border:2px solid #440199 !important;

    border-radius:60px !important;

    overflow:hidden !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.30);

    transition:.35s ease !important;

}


.cs-categoryPreview .cs-categoryName>a{

    display:block !important;

    padding:16px 30px !important;

    background:#ffd400 !important;

    background-image:none !important;

    color:#440199 !important;

    font-size:19px !important;

    font-weight:900 !important;

    letter-spacing:.5px !important;

    text-transform:uppercase !important;

    text-align:center !important;

    text-decoration:none !important;

    line-height:1 !important;

    text-shadow:none !important;

    border-radius:60px !important;

}


/* Hover */

.cs-categoryPreview:hover .cs-categoryName{

    background:#ffe24d !important;

    border-color:#440199 !important;

    transform:translateX(-50%) translateY(-5px) scale(1.02) !important;

    box-shadow:
        0 18px 38px rgba(0,0,0,.35),
        0 0 18px rgba(255,212,0,.45);

}


.cs-categoryPreview:hover .cs-categoryName>a{

    background:#ffe24d !important;

    color:#440199 !important;

}


/* Karte */

.cs-categoryPreview:hover .cs-categoryPicture{

    transform:translateY(-6px);

}
/* =====================================================
   AFC VIENNA VIKINGS
   PREMIUM SECTION HEADING
===================================================== */

.cs-betHeading{

    text-align:center;
    margin:30px 0 15px;

}

.cs-betHeading span{

    display:inline-flex;
    flex-direction:column;
    align-items:center;

    position:relative;

}

/* SHOP */

.cs-betHeading span small{

    display:block;

    font-size:18px;

    font-weight:800;

    letter-spacing:6px;

    color:#ffd400;

    text-transform:uppercase;

    margin-bottom:6px;

}

/* KATEGORIEN */

.cs-betHeading span{

    font-size:48px;

    font-weight:900;

    letter-spacing:2px;

    color:#440199;

    text-transform:uppercase;

    line-height:1;

}

/* Gelber Balken */

.cs-betHeading span::after{

    content:"";

    margin-top:18px;

    width:0;

    height:6px;

    border-radius:50px;

    background:#ffd400;

    animation:vikingsHeadingLine .9s ease forwards;

    box-shadow:0 0 12px rgba(255,212,0,.45);

}

/* Animation */

@keyframes vikingsHeadingLine{

    from{

        width:0;

    }

    to{

        width:120px;

    }

}

/* Untertitel */

.cs-subtitle{

    max-width:750px;

    margin:20px auto 70px;

    font-size:18px;

    color:#666;

    line-height:1.7;

}
/* =====================================================
   AFC VIENNA VIKINGS
   PREMIUM SECTION HEADING
===================================================== */

.cs-betHeading{

    text-align:center;
    margin:45px 0 15px;

}

.cs-betHeading span{

    display:flex;
    flex-direction:column;
    align-items:center;

    position:relative;

}

/* ===========================
   SHOP
=========================== */

.cs-betHeading span small{

    display:block;

    color:#ffd400;

    font-size:20px;

    font-weight:900;

    letter-spacing:8px;

    text-transform:uppercase;

    margin-bottom:6px;

    line-height:1;

    text-shadow:
        0 2px 8px rgba(0,0,0,.18);

}

/* ===========================
   KATEGORIEN
=========================== */

.cs-betHeading span{

    font-size:56px;

    font-weight:900;

    letter-spacing:2px;

    color:#440199;

    text-transform:uppercase;

    line-height:1;

}

/* ===========================
   GELBER BALKEN
=========================== */

.cs-betHeading span::after{

    content:"";

    display:block;

    width:0;

    height:6px;

    margin-top:18px;

    border-radius:50px;

    background:#ffd400;

    box-shadow:
        0 0 12px rgba(255,212,0,.45);

    animation:vikingsHeading .9s ease forwards;

}

@keyframes vikingsHeading{

    from{

        width:0;

    }

    to{

        width:130px;

    }

}

/* ===========================
   UNTERTITEL
=========================== */

.cs-subtitle{

    max-width:900px;

    margin:28px auto 75px;

    font-size:22px;

    font-weight:500;

    color:#555;

    line-height:1.7;

}