/**
 * GayPlat.com – individuelle Template-Anpassungen
 * Joomla 6.1.x / Helix Ultimate / lt_chain
 *
 * Hinweis:
 * Die bisherige user.css enthielt überwiegend Helix-Template-/Basisregeln
 * (z. B. Header, Offcanvas, Profilmodul, Formulare, Preloader). Diese Regeln
 * werden nicht noch einmal in diese Datei kopiert, um Doppelungen zu vermeiden.
 */

/* =========================================================
   1. Grundsätzliches
   ========================================================= */

:root {
    --gp-primary: #1997d7;
    --gp-primary-dark: #135b85;
    --background-color: currentColor;
    --background: currentColor;
    --text-color: currentColor;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.9em;
    font-family: 'alumni-sans', sans-serif !important;
}

body,
p,
span,
li {
    font-family: 'alumni-sans', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.sp-megamenu-parent > li > a {
    font-family: 'indie-flower', sans-serif !important;
}

@font-face {
    font-family: 'indie-flower';
    src: url('../templates/lt_chain/fonts/indie-flower.woff2') format('woff2'),
         url('../templates/lt_chain/fonts/indie-flower.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.modul-zentriert {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    width: 100%;
}

select:not(.form-select):not(.form-control) {
    padding: 0.1rem 0.75rem !important;
}

#t3-mainbody,
#sp-main-body,
.site-content,
main {
    flex: 1;
}

/* =========================================================
   2. Header / Navigation
   ========================================================= */

#sp-top-bar {
    position: relative;
    z-index: 9999;
}

#sp-header {
    top: 0;
    padding: 0;
    height: inherit;
    box-shadow: none;
}

#sp-header.header-sticky {
    position: fixed;
    top: 0;
    box-shadow: 0 0 10px 0 rgb(255 255 255 / 10%);
}

body:not(.home) #sp-header {
    position: static;
}

body:not(.home) #sp-header.header-sticky {
    position: fixed;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 10px 0;
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    position: relative;
}

.sp-megamenu-parent > li > span {
    color: #fff;
}

#modal-menu-toggler.active.offcanvas-active .burger-icon > span,
#modal-menu-toggler.active .burger-icon > span {
    background-color: var(--gp-primary);
}

.burger-icon > span {
    background-color: #fff;
}

.active .burger-icon > span {
    background-color: var(--gp-primary);
}

/* Offcanvas-Menü */
.offcanvas-menu .offcanvas-inner .menu-child > li a {
    padding: 12px 10px !important;
    border-bottom: 1px solid rgb(197 153 153 / 21%);
    display: inherit;
}

.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
    font-size: 15px;
    font-weight: 500;
}

/* =========================================================
   3. Profilmodul neben dem Haupt-Menüburger
   ========================================================= */

.sp-profile-wrapper {
    position: relative;
    font-size: 14px;
}

.sp-profile-wrapper .arrow-icon {
    font-size: 11px;
}

.sp-profile-wrapper .sp-profile-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10001;
    display: none !important;
    min-width: 100px;
    padding: 10px 15px !important;
    list-style: none !important;
    font-size: 14px;
    background: #000;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
}

.sp-profile-wrapper .sp-profile-dropdown > li:not(:last-child) {
    padding-bottom: 5px;
    margin-bottom: 5px;
    line-height: 1.3;
    border-bottom: 1px solid #e4e4e4;
}

.sp-profile-wrapper:hover .sp-profile-dropdown,
.sp-profile-wrapper:focus-within .sp-profile-dropdown {
    display: block !important;
    animation: spFadeInDown 0.5s;
}

/*
 * Helix blendet den gesamten .header-modules-Container auf Mobilgeräten
 * mit "d-none d-lg-flex" aus. Das Profilmodul befindet sich dort.
 *
 * Nur der Profilbereich wird wieder eingeblendet.
 * Das normale Mega-Menü bleibt auf Mobilgeräten verborgen.
 */
@media (max-width: 991.98px) {
    #sp-header .header-modules {
        display: flex !important;
        align-items: center;
        margin-left: 10px;
        margin-right: 10px;
    }

    #sp-header .header-modules .sp-module {
        display: flex !important;
        align-items: center;
        margin-left: 0;
    }

    #sp-header .header-modules .sp-profile-wrapper {
        display: block !important;
        position: relative;
    }

    #sp-header .header-modules .sp-profile-wrapper .sp-sign-in {
        display: inline-flex !important;
        align-items: center;
        white-space: nowrap;
    }

    #sp-header .header-modules .sp-profile-dropdown {
        top: calc(100% + 8px);
        right: 0;
    }
}

/* =========================================================
   4. Allgemeine Block-Stile
   ========================================================= */

#mod-custom132 {
    background-color: rgb(0 0 0 / 40%);
    background-image: url('/images/1608x600png.png');
    background-blend-mode: darken;
    min-block-size: 600px;
    max-block-size: 600px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
    padding-inline: 50px;
}

.cb_template .img-thumbnail {
    background-color: #000;
    border: 1px solid #000;
    border-radius: 0.25rem;
    height: auto;
    max-width: 100%;
    padding: 0.25rem;
}

/* Buttons */
.btn,
.slider-btn a,
#sp_qc_submit {
    position: relative;
    padding: 15px 30px;
    cursor: pointer;
    color: #fff;
    background-color: var(--gp-primary);
    font-weight: 600;
    border: 0;
    border-radius: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn:hover,
.btn:focus-visible,
.slider-btn a:hover,
.slider-btn a:focus-visible,
a.hikabtn.hikacart:hover,
a.hikabtn.hikacart:focus-visible {
    background-color: var(--gp-primary-dark);
    color: #fff;
}

.sp-module ul > li > a {
    color: var(--gp-primary);
}

.sp-module ul > li > a:hover,
.sp-module ul > li > a:focus-visible {
    color: var(--gp-primary-dark);
}

/* =========================================================
   5. Services
   ========================================================= */

.services .sppb-row.sppb-no-gutter {
    background: #ffffff1a;
    border-radius: 10px;
    padding: 50px 30px;
}

.services-item img {
    width: 100px;
}

.services-column {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

/* =========================================================
   6. Check List
   ========================================================= */

.check-list ul.right,
.check-list ul.left {
    float: left;
    width: 50%;
}

.check-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.check-list ul li {
    margin-bottom: 10px;
}

.check-list strong {
    display: none;
}

.check-list em {
    padding-right: 10px;
    color: #ffba43;
}

/* =========================================================
   7. Feature
   ========================================================= */

.feature .sppb-row.sppb-no-gutter {
    background: #341f44;
    border-radius: 10px;
}

.feature-item i {
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
    border-radius: 5px;
}

.feature-column.white .feature-item i {
    color: #fff;
}

.feature-column.white .clearfix:first-child {
    background-image: linear-gradient(140deg, #135b85 18%, #ef7bfe 100%);
}

/* =========================================================
   8. Explore
   ========================================================= */

.explore-item img {
    width: 70px;
}

.explore-column .clearfix {
    width: 30%;
    float: left;
    margin-right: 3%;
    transition: 0.5s ease-in-out;
}

.explore-column .clearfix:first-child {
    width: 100%;
}

.explore-column .clearfix:first-child:hover {
    background: transparent;
}

.explore-column .clearfix:hover,
.explore-column .clearfix:last-child {
    background-image: linear-gradient(150deg, #135b85 35%, #ef7bfe 100%);
}

/* =========================================================
   9. Testimonials / Subscribe
   ========================================================= */

.testimonials-column {
    background-image: linear-gradient(180deg, #1d062f 0%, #341f44 100%);
    border-radius: 10px;
}

.subscribe-column {
    background-image: linear-gradient(150deg, #1d062f 0%, #341f44 100%);
    border-radius: 10px;
}

/* =========================================================
   10. Team
   ========================================================= */

.team-item {
    background-image: linear-gradient(160deg, #7373ff 35%, #ef7bfe 100%);
    padding: 50px 30px;
    border-radius: 10px;
}

.team-item img {
    background-color: #135b85;
    width: 90px;
    border-radius: 50%;
}

.team-item .shrewd_solution_icon {
    margin-top: 12px;
}

.team-item .shrewd_solution_icon ul,
.team-item .shrewd_solution_icon ul li {
    display: inline-block !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.team-item .shrewd_solution_icon ul li a {
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-right: 5px;
    font-size: 16px;
    line-height: 35px;
    color: #fff !important;
    text-align: center;
    border: none;
    border-radius: 50%;
    background-color: #7373ff;
    transition: background-color 0.5s, color 0.5s;
}

.team-item .shrewd_solution_icon ul li a:hover,
.team-item .shrewd_solution_icon ul li a:focus-visible {
    background-color: #2462fe;
    color: #fff !important;
}

.team-item .shrewd_solution_icon ul li a em {
    font-family: 'Font Awesome 5 Brands';
}

.team-item .shrewd_solution_icon ul li strong {
    display: none;
}

/* =========================================================
   11. Blog
   ========================================================= */

.jmm-item .jmm-image.mod-article-image {
    overflow: hidden;
}

.jmm-image.mod-article-image img {
    transform: scale(1);
    transition: transform 0.5s ease-in-out;
}

.jmm-item:hover .jmm-image.mod-article-image img {
    transform: scale(1.12);
    filter: grayscale(100%);
}

.blog .jm-category-module.default .jmm-intortext {
    color: #ffffffad;
}

.jm-category-module.default .jmm-rows.rows-3 > div > .jmm-item {
    width: 31%;
    margin: 1%;
    background: #fff;
}

/* =========================================================
   12. Kontakt
   ========================================================= */

.contact-info h2,
.contact-info h3 {
    font-size: 25px;
}

button.btn.btn-primary.validate {
    color: #000;
    padding: 13px 20px;
}

/* =========================================================
   13. Bottom / Social Icons
   ========================================================= */

#sp-bottom {
    position: relative;
    font-size: 16px;
}

#sp-bottom1 h1 {
    font-size: 40px;
    margin-bottom: 20px;
    font-weight: 600;
}

#sp-bottom .shrewd_solution_icon {
    margin-top: 12px;
}

#sp-bottom .shrewd_solution_icon ul,
#sp-bottom .shrewd_solution_icon ul li {
    display: inline-block !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

#sp-bottom .shrewd_solution_icon ul li a {
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-right: 5px;
    font-size: 16px;
    line-height: 35px;
    color: #fff !important;
    text-align: center;
    border: none;
    border-radius: 50%;
    background-color: #ffffff2b;
    transition: background-color 0.5s, color 0.5s;
}

#sp-bottom .shrewd_solution_icon ul li a:hover,
#sp-bottom .shrewd_solution_icon ul li a:focus-visible {
    background-color: #fff;
    color: #7373ff !important;
}

#sp-bottom .shrewd_solution_icon ul li a em {
    font-family: 'Font Awesome 5 Brands';
}

#sp-bottom .shrewd_solution_icon ul li strong {
    display: none;
}

#sp-footer {
    text-align: center;
}

/* =========================================================
   14. Farben / Komponenten
   ========================================================= */

.page-item.active .page-link,
.slider-item .sppb-btn-success,
.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info:hover,
.sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-overlay-wrapper .sp-simpleportfolio-overlay,
.feature-item i {
    background-color: var(--gp-primary);
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li.active > a,
.article-list .article .readmore a:hover,
.article-list .article .readmore a:active,
.article-list .article .article-header h2 a:hover,
#sp-bottom1 .shrewd_solution_icon ul li a:hover,
.contact-item i {
    color: var(--text-color);
}

.product-text::after {
    border-color: var(--text-color) !important;
}

/* =========================================================
   15. Responsive Layout
   ========================================================= */

@media (min-width: 1400px) {
    .sppb-row-container {
        max-width: 1320px;
    }
}

@media (max-width: 768px) {
    #sp-header,
    #sp-header .logo {
        height: 70px;
    }

    #sp-footer p {
        text-align: center;
    }

    body #sp-header {
        padding: 0;
    }

    #sp-header {
        top: 0;
    }

    .services-column {
        border-left: none;
        border-right: none;
    }
}

@media (max-width: 480px) {
    .explore-column .clearfix {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }
}