/* Depot Vergleich page styles (Figma-inspired) */
:root {
    --bg-default: #161431;
    /* Figma BG Default (Darkmode) */
    --surface: #121031;
    --surface-2: #121031;
    --supersoft: #403c65;
    --soft: #615d89;
    --medium: #9a98b6;
    --link: #63ffda;
    --text: #ffffff;
    --light-transparent: rgba(217, 217, 217, 0.05);
}

body .page-content {
    background: transparent;
}

main.main,
main.main p,
main.main span {
    color: #D8D6E8 !important;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
}

main.main {
    padding-right: 0 !important;
    margin-left: 30px;
}

main.main ul {

    list-style: none;
    margin: 32px 0;
    padding-left: 0;
}

main.main ul li:before {
    position: absolute;
    content: url(img/bullet.png);
    width: 12px;
    height: 12px;
    left: 0;
    top: 3px;
    transform: scale(.65);
}

main.main ul h4 {
    margin-top: 4px;
    margin-bottom: 6px;
}

main.main ul li {
    margin-bottom: 18px;
    position: relative;
    padding-left: 42px;
}

main.main h3,
main.main h6 {
    position: relative;
    font-weight: 800;
    font-size: 34px;
    letter-spacing: -0.3px;
    margin-bottom: 30px;
    margin-top: 24px;
    padding-bottom: 30px;
}

main.main h2 {
    position: relative;

    letter-spacing: -0.3px;
    margin-bottom: 30px;
    margin-top: 24px;
    padding-bottom: 30px;
}

main.main h6 {
    font-weight: 800;
    font-size: 24px;
}

main.main h3::after,
main.main h6::after,
main.main h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #1A1736 0%, #646088 33.65%, #646088 70.67%, #191736 100%);
    opacity: 0.6;
}

main.main p {

    color: var(--medium);
}

#js-page-content {
    align-items: center;
}

.depot-vergleich-container[v-cloak] {
    display: none;
}



.depot-vergleich-container,
.broker-page-container {
    color: var(--text);
    font-family: 'Inter', sans-serif;
    padding: 40px;
    box-sizing: border-box;
    max-width: 1370px;
    width: 100%;
}

.admin-clear-cache-link {
    color: var(--link);
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
}

.admin-clear-cache-link:hover {
    text-decoration: underline !important;
}

.blocks-section section {
    border-radius: 30px;
    background: #121031;
    padding: 30px 60px;
    margin-bottom: 32px;
}

.vergleich-menu,
.mod-skin-dark .vergleich-menu {
    background-color: var(--surface) !important;
    border-radius: 12px;
    padding: 24px 30px;
    margin-bottom: 56px;
    border: 0px solid #2C2A51;
    text-align: left;
    margin-bottom: 22px;
}

.trustbox,
.mod-skin-dark .trustbox {
    background: var(--surface) !important;
    box-shadow: none;
    border-radius: 20px;
    margin-bottom: 56px;
    border: 0px solid #2C2A51;
    text-align: left;
    margin-bottom: 22px;
    height: 264px;
    margin-top: 20px;
}

.trustbox h2 {
    font-weight: 800;
    font-size: 24px;
    line-height: 31px;
    margin-bottom: 20px;
    text-align: left;
    margin-left: 6px;
}

.vorteile li {
    position: relative;
    color: #A9A7BD;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 6px;
}

@media (max-width: 1199px) {

    .vergleich-team,
    .vergleich-team2 {

        top: -152px;
    }
}

.mod-skin-dark .vergleichs-box .testsieger {
    color: rgba(255, 188, 41, 1);
    font-weight: 700;
    font-size: 14px;
    flex: 0 0 20px;
}

.ideal-fuer {
    color: #63FFDA;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 19px;
    font-style: italic;
    font-weight: 500;
    line-height: 25px;

    /* 131.579% */
}

a.vergleichs-link-oben {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #FFF !important;
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 24px;
    border-radius: 5px;
    background: #1E1C3B;
    height: 47px;
    gap: 4px;
    font-family: Inter;

}

@media (min-width: 1200px) {
    .vergleich-team {

        right: 2% !important;
        bottom: 0px !important;
        top: auto;
        left: auto;
    }
}

.vergleich-header-text {
    color: #7E7B98;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    /* 171.429% */
}

@media (max-width: 1340px) {
    .vergleich-header-text {
        max-width: 60%;
    }
}

.vergleich-menu .vergleichs-headline {
    margin-bottom: 10px;
    color: #fff;
}

.vergleichs-kategorie {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    margin-top: 42px;
    row-gap: 30px;
}

.depot-vergleich-container .text-area {
    margin: 22px 0 0 0 !important;
    padding: 0;
}

@media (max-width: 1150px) {
    .vergleichs-kategorie {
        grid-template-columns: 1fr 1fr;

    }
}

@media (max-width: 768px) {
    .vergleichs-kategorie {
        grid-template-columns: 1fr;

    }

    .depot-vergleich-container .text-area {
        padding: 0;
        margin: 22px 0 0 0;
    }

    .blocks-section section {
        padding: 20px 30px;

    }

    main.main {
        padding: 0;
        margin-left: 0 !important;
        width: 100% !important;
    }
}

.mod-skin-dark .vergleichs-box {
    background-color: var(--surface) !important;
    border-radius: 12px;
    border: 0px solid #2C2A51;
    padding-bottom: 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.vergleichs-box h2 {
    font-size: 21px;
    font-weight: 700;
    line-height: 23px;
    margin-bottom: 12px;

}

@media (min-width: 760px) {
    .vergleichs-box h2 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


.vergleichs-icon {
    height: 110px;
}

.mod-skin-dark .vergleichs-link {
    color: #63FFDA !important;
}

/* Page layout: sidebar (left) + content */
.page-layout {
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.depot-links {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}

.depot-links a {
    color: #FFF !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    text-decoration: none;
    margin-right: 20px;
}

.depot-links a:hover {
    text-decoration: underline !important;
}

@media (max-width: 1150px) {
    .page-layout {
        display: flex !important;
        flex-direction: column-reverse;
        align-items: center;
    }
}

.header-section {
    text-align: center;
    margin-bottom: 20px;
}

/* Depot Filter Bubbles */
.depot-filter-bubbles {
    display: flex;
    gap: 9px;
    align-items: center;
    justify-content: cenflex-startter;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.filter-bubble {
    background-color: #403c65;
    border-radius: 60px;
    padding: 8px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-bubble span {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    color: white;
    text-align: center;
    white-space: nowrap;
}

.filter-bubble.active {
    background-color: #63ffda;
}

.filter-bubble.active span {
    font-weight: 700;
    color: #161431;
}

.filter-bubble:hover:not(.active) {
    background-color: #4f4a7a;
}

.header-section-content {
    background-color: var(--surface);
    border-radius: 12px;
    padding: 24px 30px;
    margin-bottom: 0px;
    text-align: left;
}

.header-section h1 {
    font-size: 21px;
    font-weight: 700;
}

.header-section .highlight2 {
    color: var(--link);
}

.header-section p {
    color: var(--medium);
    margin: 10px auto;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

/* Filter Section */
.filter-section {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.filter-dropdown {
    position: relative;
}

.filter-dropdown select {
    background-color: #232145 !important;
    border: 1px solid #232145 !important;
    border-radius: 12px !important;
    padding: 14px 45px 14px 18px !important;
    color: var(--medium) !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    min-width: 180px;

    cursor: pointer;
    appearance: none;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 7.5L10 12.5L15 7.5' stroke='%238a87b0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-dropdown select:hover {
    border-color: var(--medium);
    background-color: #1a1747;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filter-dropdown select:focus {
    outline: none;
    border-color: var(--link);
    box-shadow: 0 0 0 2px rgba(99, 255, 218, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filter-dropdown select option {
    background-color: #121031;
    color: var(--text);
    padding: 12px 18px;
    border: none;
    font-size: 14px;
    font-weight: 500;
}

.filter-dropdown select option:hover,
.filter-dropdown select option:checked {
    background-color: var(--link);
    color: var(--bg-default);
}

/* Custom Dropdown */
.custom-dropdown {
    position: relative;
    min-width: 180px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--medium);
}

.dropdown-selected {
    background-color: #232145;
    border: 1px solid #2c2a51;
    border-radius: 12px;
    padding: 12px 45px 12px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 7.5L10 12.5L15 7.5' stroke='%238a87b0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.custom-dropdown.open .dropdown-selected {
    box-shadow: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

.dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #232145;
    border-radius: 12px;
    margin-top: 8px;
    z-index: 10;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #2c2a51;
}

.custom-dropdown.open .dropdown-options {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

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

.dropdown-options li {
    padding: 12px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.2s ease;
}

.dropdown-options li:hover {
    background-color: #403c65;
}

.dropdown-options li.selected {
    background-color: #403c65;
    font-weight: 500;
    color: var(--text);
}


.checkbox {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.checkbox.checked {
    background-color: #63FFDA;
}


/* Responsive filter section */
@media (max-width: 768px) {
    .filter-section {
        flex-direction: column;
        gap: 12px;
    }

    .filter-dropdown select {
        min-width: 100%;
        width: 100%;
    }
}

/* Sidebar */
.sidebar {
    background: var(--surface);
    border-radius: 21px;
    padding: 24px;
    position: sticky;
    top: 0px;
    width: 360px;
    max-width: 360px;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
    padding-top: 150px;
}



.sidebar .sidebar-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.sidebar-hero {
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.sidebar-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent 0%, var(--surface) 100%);
    z-index: 1;
}

.sidebar-hero img {
    max-width: 90%;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .25));
    transform: rotate(-1.253deg);
    opacity: 0.9;
}

.deal-banner {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    padding: 18px;
    background: linear-gradient(270deg, #282647 6.5%, #262444 96.5%);
}

.deal-banner .deal-sub {
    color: var(--medium);
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 4px;
}

.deal-banner .deal-title {
    color: var(--link);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 6px;
}

.deal-banner .deal-cta {
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    opacity: .9;
    text-decoration: none;
}

.deal-banner .deal-cta:hover {
    text-decoration: underline;
}

/* Content */
.broker-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.broker-card {
    position: relative;
    background-color: var(--surface-2);
    border-radius: 20px 20px 20px 20px;
    margin-bottom: 10px;
    margin-top: 10px;
}

/* Figma colorful border for featured card (Platz 1) - simple gradient border */
.broker-card.featured {
    position: relative;
    background: var(--surface-2);
    border-radius: 20px 20px 20px 20px;
    border: 3px solid transparent;
    background-image:
        linear-gradient(var(--surface-2), var(--surface-2)),
        linear-gradient(154deg, #FF63EF 10.1%, #58FFD8 39.44%, #EB66FF 102%);


    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.broker-card-header {
    display: flex;
    position: absolute;
    left: 20px;
    top: -37px;
}

/* Compare checkbox in the top-right corner of the card */
.compare-checkbox {
    position: absolute;
    top: -34px;
    right: 0px;
    bottom: auto;
    left: auto;
    border-radius: 9px;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 6px;


    padding: 6px 10px;
    cursor: pointer;
}

.compare-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.compare-checkbox span {
    font-size: 12px;
    color: var(--text);
}


/* Simple tab badges that sit on top of the card */
.tab-badges {
    display: flex;
    gap: 16px;
    align-items: center;
}

.tab-badges span {
    font-size: 13px;
    font-weight: 700;
    line-height: 13px;
}
div.broker-card.tabSecondary  {
    margin-top: 20px !important;
}

.tab-badges span.ghost {
    background: linear-gradient(90deg, #E8469D 0%, #CA55C7 100%);
    padding: 12px 24px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
}


.badge {
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    border: 1px solid var(--supersoft);
}

/* Primary tab - colorful like in Figma */
.featured .badge--primary {
    background: linear-gradient(135deg, #ca86d8, #944be9);
    color: var(--text);
    border: none;
    border-radius: 9px 9px 0 0;
    padding: 8px 16px;
}

.badge--primary {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--surface);
    border-radius: 9px 9px 0 0;
}

/* Ghost tab */
.badge--ghost {
    background-color: #424068;
    color: var(--text);
    border-color: #424068;
    border-radius: 9px 9px 0 0;
}

/* Adjust card body padding to make space for the tabs */
.broker-card-body {
    display: grid;
    grid-template-columns: 240px 1fr 280px;
    gap: 20px;
    padding: 26px 24px 26px 24px;
}

.broker-card-header {
    padding: 18px 0px 0px 20px;
}

@media (max-width: 1300px) {
    .broker-card-body {
        grid-template-columns: 220px auto 200px;
        gap: 16px;
        padding: 26px 20px 26px 20px;
    }

}

.vergleich-header {
    background-color: transparent;
    padding: 0px;
    border-radius: 16px;
}

.trustbox {
    margin-left: 30px;
}

.overview-box .sticky-menu {
    background-color: transparent;
}

/* Responsive filter section */
@media (max-width: 768px) {
    .broker-card-body {
        grid-template-columns: auto auto auto;
        gap: 16px;
        padding: 26px 16px 26px 16px;
    }

    .broker-card-header {
        padding: 16px 16px 0px 16px;
        left: 0;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .broker-card-body {
        display: flex;
        flex-direction: column;
    }

    .depot-vergleich-container {
        padding: 40px 12px;
    }

    .compare-checkbox {
        top: -34px;
        right: 0px;
        bottom: auto;
        left: auto;
        border-radius: 9px;
    }
}

/* Responsive filter section */
@media (max-width: 468px) {}


.broker-logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.broker-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.broker-section .broker-rating {
    margin-bottom: 6px;
}

.broker-rating-container {
    text-align: center;
    color: #fdbc32;
    background-color: var(--light-transparent);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 14px;
}


@media (max-width: 468px) {
    .broker-section {
        flex-direction: column;
    }

    .broker-page-container {
        padding: 12px 0px !important;
    }

    .broker-section .broker-rating,
    .broker-section .broker-main-card {
        margin: 0px !important;
    }
}

.broker-logo-container {
    background-color: var(--light-transparent);
    border-radius: 12px;
    padding: 22px 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    margin-bottom: 0px;
}

.broker-title {
    font-weight: 700;
    font-size: 24px;
    text-align: center;
    color: var(--text);
    margin-bottom: 0;
}

.broker-logo {
    max-width: 100%;
    max-height: 60px;
}

.broker-rating {
    text-align: center;
    color: var(--text);
    margin-top: 6px;
    background-color: var(--light-transparent);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
}

/* Star rating container */
.broker-rating .stars {
    display: flex;
    justify-content: center;
    gap: 2px;
    font-size: 22px;
    margin-bottom: 0px;
    line-height: 26px;
}

/* Individual star container for layering */
.star-container {
    position: relative;
    display: inline-block;
}

/* Background star (gray/empty) */
.star-background {
    color: #403c65;
    position: relative;
    z-index: 1;
}

/* Filled star (teal) overlaying the background */
.star-filled {
    color: var(--link);
    /* #63ffda */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
}

.broker-rating span {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0px;
}

.last-updated {
    text-align: center;
    font-style: italic;
    opacity: 0.5;
    font-size: 13px;
    margin-top: 0px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0.27px;
    color: var(--medium);
}

.broker-details-section {
    background-color: rgba(196, 195, 212, 0.05);
    border-radius: 16px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.broker-details-section .detail-item {
    border-bottom: 2px solid var(--surface-2);
    padding: 12px 20px;
}

.broker-details-section .detail-item-more-info {
    padding: 12px 20px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
}

.detail-item:last-of-type {
    border-bottom: none;
}

.detail-item span:first-child {
    color: var(--text);
    font-weight: 600;
}

.detail-item .value {
    color: var(--link);
    font-weight: 500;
    font-size: 13px;
    text-align: right;
}

.detail-item .value .icon-check , .assets-grid i.icon-check {
    color: var(--link);
    /* Green */
}

.detail-item .value .fa-circle-info {
    color: rgb(93, 91, 123);
    cursor: pointer;
}

.detail-item .value .icon-times, .assets-grid i.icon-times {
    color: #dc3545;
    /* Red */
}
.detail-item .fa-brands {
    color: #fff;
}
.detail-item .value i {
    margin: 0 4px;
}

.detail-item-more-info {
    padding: 12px 0 0 0;
    text-align: left;
}

.detail-item-more-info a {
    color: var(--medium);
    text-decoration: underline;
    font-size: 13px;
    opacity: 0.8;
}

.detail-item-more-info a:hover {
    color: var(--link);
    opacity: 1;
}

.broker-bonus-section {
    border: 2px solid var(--link);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bonus-header {
    color: var(--link);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}

.bonus-details {
    font-weight: 700;
    font-size: 18px;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 16px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bonus-details-2 {
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    line-height: 20px;
    margin-bottom: 16px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bonus-details-2 i {
    margin-left: 4px;
}

.bonus-details-2 .fa-circle-info {
    font-size: 13px;
    font-weight: 300;
    vertical-align: middle;
}

a[target]:not(.btn).cta-button,
div.cta-button {
    display: block;
    background-color: var(--link);

    text-align: center;
    padding: 13px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s ease;
    margin-top: auto;
    color: #000 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

a[target]:not(.btn).cta-button:hover,
div.cta-button:hover {
    background-color: #4ce6c7;
    transform: translateY(-1px);
}

/* Floating compare action button */
.compare-fab {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    border: none;
    border-radius: 0;
    background: rgba(18, 16, 49, 0.85);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.compare-fab__badge {
    min-width: 26px;
    height: 26px;
    border-radius: 13px;
    background: var(--link);
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.sidebar-top-deal {
    border: 1px solid #2C2A51;
    border-radius: 10px;
    padding: 13px 16px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Sidebar headline and bullets */
.sidebar-headline {
    text-align: center;
    font-weight: 800;
    font-size: 36px;
    line-height: 37px;
    margin: 8px 0 12px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.sidebar-headline .accent {
    color: var(--link);
}

.sidebar-bullets {
    list-style: none;
    padding: 0 20px;
    margin: 20px 0 20px 0;
    position: relative;
    z-index: 2;
}

.sidebar-bullets li {
    color: #a9a7bd;
    font-size: 13.5px;
    line-height: 18px;
    margin: 8px 0;
    position: relative;
    padding-left: 24px;
}

.sidebar-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--link);
    font-weight: bold;
    font-size: 14px;
}

/* Sidebar description and action text */
.sidebar-description {
    color: var(--medium);
    font-size: 13px;
    line-height: 18px;
    margin: 12px 0;
}

.sidebar-action-text {
    color: var(--medium);
    font-size: 13px;
    margin: 10px 0 8px;
}

/* Deal banner with fire background and icon */
.deal-banner {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    padding: 9px;
    background: url('../img/depotvergleich/fire-background.png') center/cover, linear-gradient(270deg, #F64E24 3%, #E86239 8.98%, #4F4D73 44%, #262444 96.5%);
    display: flex;
    align-items: center;
    gap: 12px;
}

.deal-icon {
    width: 50px;
    height: 50px;
    background: #2c5530;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.deal-icon .plus-icon {
    color: #63ffda;
    font-size: 24px;
    font-weight: bold;
}

.deal-content {
    flex: 1;
}

.deal-content p {
    padding: 0;
    margin: 0;
}

.deal-content .deal-sub {
    color: var(--medium);
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 2px;
}

.deal-content .deal-title {
    color: var(--link);
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 4px;
}

.deal-content .deal-cta a,
.deal-content .deal-cta a u {
    color: var(--text) !important;
    text-decoration: none !important;
}

.deal-content .deal-cta {
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    opacity: .9;
}

.deal-arrow {
    color: #fff;
    font-size: 16px;
    opacity: .7;
}

/* Sticky Menu (Blocks Section Navigation) */
.sticky-menu {
    background-color: var(--surface);
    border-radius: 21px;
    padding: 17px;
    z-index: 1020;
    left: 0;
    height: auto;
    overflow: auto;
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
    min-height: auto;
    width: 360px;
    flex: 0 0 360px;
}

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

.sticky-menu ul li {
    list-style: none;
    margin-bottom: 8px;
}

.mod-skin-dark:not(.mod-skin-light) .sticky-menu ul li a {
    display: block;
    color: var(--medium);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    background-color: transparent;
    border: none !important;
    font-weight: 700;
    font-size: 14px;
    border-radius: 8px !important;

}

.dein-team-goldesel {
    margin: -10px 0 0px 10px;
    width: 231px;
    height: 28px;
}


@media (max-width: 1199px) {

    .vergleich-menu,
    .mod-skin-dark .vergleich-menu {
        margin-top: 170px;
        margin: 170px 0 0 0;
    }

    .vergleich-team {
        top: -152px;
    }

    .goldesel-bigcontentarea {
        padding: 12px 32px 0;
    }

    .trustbox {
        padding: 24px 22px 306px 22px;
        margin: 0;
        max-width: 100%;
        height: auto !important;
        width: 100% !important;
        margin-top: 24px !important;
    }

    .trustbox h2 {
        font-size: 24px;
        line-height: 28px;
        text-align: center
    }

    .trustbox-michael {
        left: -10px;
        right: 10px;
        margin-left: auto;
        margin-right: auto;
    }

    .disclaimer-text {
        margin: -20px 0 20px;
        padding: 0 6%;
    }

}

.mod-skin-dark:not(.mod-skin-light) .sticky-menu ul li a:hover {
    background: linear-gradient(90deg, rgba(115, 111, 154, 0.40) 11.54%, rgba(99, 255, 218, 0.80) 100%) !important;
    color: var(--link);
}

.mod-skin-dark:not(.mod-skin-light) .sticky-menu ul li a.active {
    background: linear-gradient(90deg, rgba(115, 111, 154, 0.40) 11.54%, rgba(99, 255, 218, 0.80) 100%) !important;

    color: var(--link);
    font-weight: 700;
    font-size: 14px;

}

/* Tooltip Styles */
.tooltip-inner {
    background-color: #595581 !important;
    max-width: 350px !important;
    padding: 10px 15px !important;
    text-align: left !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .tooltip-arrow::before {
    border-top-color: #595581 !important;
}

.tooltip.bs-tooltip-right .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="right"] .tooltip-arrow::before {
    border-right-color: #595581 !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #595581 !important;
}

.tooltip.bs-tooltip-left .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="left"] .tooltip-arrow::before {
    border-left-color: #595581 !important;
}

body .tooltip .tooltip-arrow::before {
    border-top-color: #595581 !important;
}

.v1v1-selector-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

@media (max-width: 500px) {
    .v1v1-selector-row {

        flex-direction: column;

    }
}

.mod-skin-dark:not(.mod-skin-light) .bs-tooltip-top .arrow::before,
.mod-skin-dark:not(.mod-skin-light) .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #595581;
}

.vergleich-menu {
    height: auto;
}

.more-info-content {
    padding: 0 20px 20px 20px;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    max-height: 3000px;
    /* Set a large max-height for open state */
}

.broker-card:not(.expanded) .more-info-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}


.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 991px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}

.broker-description {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    margin-top: 20px;
}


/* Quote styling for description paragraphs with large quotation marks */
.broker-description p {
    position: relative;
    padding: 16px 8px;
    margin-bottom: 0;
    text-align: center;
    color: #fff;
    font-style: italic;
    line-height: 17px;
    text-align: center;
    font-style: italic;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
}

.broker-description p::before {
    content: "\201C";
    /* “ */
    position: absolute;
    left: -6px;
    top: -8px;
    font-size: 42px;
    line-height: 1;
    font-weight: 800;
    color: var(--medium);
    opacity: 0.6;
}

.broker-description p::after {
    content: "\201D";
    /* ” */
    position: absolute;
    right: -6px;
    bottom: -14px;
    font-size: 42px;
    line-height: 1;
    font-weight: 800;
    color: var(--medium);
    opacity: 0.6;
}

.info-box {
    background-color: rgba(196, 195, 212, 0.05);
    border-radius: 0;
    padding: 20px;
}

.info-box:first-of-type {
    border-radius: 16px 0 0 0;
}

.info-box:last-of-type {
    border-radius: 0 0 16px 0;
}

.info-box:nth-of-type(2) {
    border-radius: 0 16px 0 0;
}

.info-box:nth-of-type(5) {
    border-radius: 0 0 0 16px;
}

@media (max-width: 991px) {
    .info-box {
        border-radius: 16px !important;
    }
}

.info-box h4 {
    color: var(--link);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
}

.info-box p,
.info-box div {
    color: var(--medium);
    font-size: 14px;
    line-height: 1.6;
}

.info-box a {
    font-size: 14px;
   
}

.info-box ul {
    padding-left: 20px;
    margin-top: 10px;
}

.info-box li {
    margin-bottom: 5px;
}

.detailed-report-box {
    background-color: transparent;
    border-radius: 16px;
    padding: 0;
}

.detailed-report-box h4 {
    color: var(--link);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
}

.detailed-report-box p {
    color: var(--medium);
    font-size: 14px;
    line-height: 1.6;
}

.report-link {
    color: var(--link);
    text-decoration: underline;
    font-weight: 600;
    display: inline-block;
    margin-top: 10px;
}

.report-link:hover {
    color: #fff;
}

.detail-item-more-info {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 0 0;
    text-align: left;
    transition: color 0.2s ease;
}

.detail-item-more-info:hover span {
    color: var(--link);
}

.detail-item-more-info span {
    color: var(--medium);
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    font-size: 14px;
}

.detail-item-more-info i {
    color: var(--medium);
    opacity: 0.8;
    font-size: 13px;
}

.broker-card.expanded {
    border-radius: 20px;
}

.broker-card.featured.expanded {
    border-radius: 20px;
}

.more-info-content ul,
.more-info-content li,
.more-info-content p {
    color: var(--medium) !important;
}

.more-info-content h1,
.more-info-content h2,
.more-info-content h3,
.more-info-content h4,
.more-info-content h5 {
    color: var(--text) !important;
}

.v1v1-comparison-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.v1v1-comparison-column {
    display: flex;
    flex-direction: column;
}

.flex-growth {
    flex-grow: 2;
}

.flex-growth-3 {
    flex-grow: 3;
}

@media (max-width: 991px) {
    .v1v1-comparison-section {
        grid-template-columns: 1fr;
    }
}

.more-details-card {
    background-color: var(--surface-2);
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
}

.more-details-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}



main.main h2.faq-title {
    font-size: 18px !important;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 24px;
    margin-top: 0px !important;
    margin-left: 0px !important;
    text-align: left !important;
    padding-bottom: 0px !important;
}

main.main h2.faq-title main.main h3::after,
main.main h6::after,
main.main h2::after {
    height: 0px;
}

.faq-item {
    background: rgba(48, 45, 81, 0.4);
    border-radius: 10px;
    padding: 20px 24px;
}

main.main .faq-q,
main.main .faq-q span {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 20px;
}

.faq-q .bar {
    display: inline-block;
    width: 5px;
    height: 22px;
    background: #34D399;
    border-radius: 1px;
}

main.main .faq-a,
main.main .faq-a p {
    color: rgba(161, 159, 188, 1) !important;
    line-height: 27px;
    font-weight: 400;
    font-size: 16px;
}

.vergleichs-box .broker-logo-container {
    margin-bottom: 0px;
    border-radius: 12px 12px 0 0;
    padding: 0px 20px;
    flex: 0 0 100px;
}

.vergleichs-box .broker-logo {
    max-width: 60%;
}

.vergleichs-box .broker-rating {
    margin-bottom: 0px;
    border-radius: 0 0 0 0;
    margin-top: 2px;
}

.vergleichs-box .broker-details-section {
    margin-top: 2px;
    border-radius: 0 0 0 0;
}

.vergleichs-box .broker-bonus-section {

    border-radius: 0 0 12px 12px;
    border: 1px solid #63FFDA;
    background-color: rgba(196, 195, 212, 0.05);
    margin-top: 3px;
    margin-bottom: 8px;
}

.vergleichs-box a.vergleichs-link {
    color: #63FFDA;
    font-size: 14px;
    text-decoration: underline !important;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;

}

.vergleichs-box>div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Mobile collapsible styles */
@media (min-width: 769px) {

    .mobile-collapsible-menu>summary,
    .mobile-collapsible-content>summary {
        display: none;
    }

    .mobile-collapsible-content>p {
        display: none;
    }

    .mobile-collapsible-menu,
    .mobile-collapsible-content {
        display: contents;
    }
}



.swiper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .swiper-slide {
    width: auto;  /* oder: width: calc(100% / 3); je nach slidesPerView */
  }

.swiper-pagination-bullets {
    margin-bottom: -50px;
}

.swiper-pagination-bullet-active {
    background: #63FFDA !important;
}

.swiper-slide {
    display: flex !important;
    justify-content: center;
    align-items: center;

}

.swiper-slide img {
    max-width: 100%;
    max-height: 600px;
    /* Max height set to 600px */
    height: auto;
    max-height: 600px;
    height: auto;
    object-fit: contain;
    /* Ensures the image retains its aspect ratio */
    border-radius: 15px;

}



@media (max-width: 768px) {

    .mobile-collapsible-menu>summary,
    .mobile-collapsible-content>summary {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-weight: bold;
        padding: 0.5rem 1rem;
        background-color: var(--light-transparent);
        border-radius: 8px;
        text-align: center;
        margin-bottom: 10px;
        list-style: none;
        user-select: none;
    }

    .mobile-collapsible-content[open]>summary i {
        transform: rotate(180deg);
    }

    .mobile-collapsible-content>summary i {
        transition: transform 0.2s ease-in-out;
        font-size: 13px;
    }

    .mobile-collapsible-menu>summary::-webkit-details-marker,
    .mobile-collapsible-content>summary::-webkit-details-marker {
        display: none;
    }

    .mobile-collapsible-menu .depot-links,
    .mobile-collapsible-content p {
        margin-top: 15px;
    }

    .description-desktop {
        display: none;
    }
}

.detail-item.assets-container {
    flex-direction: column;
    align-items: flex-start;
}

.assets-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    width: 100%;
    margin-top: 10px;
}

.asset-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.asset-item>span:first-child {
    color: var(--medium);
}