/* Basis-Styles für die Jahreszusammenfassung */
.YearlyContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px auto;
    padding: 20px;
    max-width: 800px;
    border-radius: 8px;
    background: linear-gradient(135deg, #252545 0%, #1a2a48 50%, #0f3460 100%);
    color: #fff;
    height: 60vh;
    position: relative;
    overflow: hidden;
}

/* Confetti decoration - festive! */
.YearlyContainer::before,
.YearlyContainer::after {
    content: '';
    position: absolute;
    width: 2px;
    border-radius: 1px;
    opacity: 0.6;
    pointer-events: none;
}

.YearlyContainer::before {
    top: 5%;
    left: 4%;
    height: 12px;
    background: #F3091E;
    transform: rotate(-25deg);
    box-shadow:
        /* Top area - varied thickness */
        60px -5px 0 1px #ffd700,
        140px 10px 0 0 #fff,
        220px -8px 0 1px #F3091E,
        320px 5px 0 0 #ffd700,
        /* Right side */
        calc(90vw - 30px) 20px 0 1px #ffd700,
        calc(88vw - 20px) 80px 0 0 #fff,
        calc(92vw - 25px) 150px 0 1px #F3091E,
        calc(85vw - 30px) 220px 0 0 #ffd700,
        /* Bottom area */
        30px 52vh 0 1px #fff,
        100px 55vh 0 0 #F3091E,
        200px 50vh 0 1px #ffd700,
        calc(80vw - 40px) 48vh 0 0 #fff,
        calc(70vw - 30px) 53vh 0 1px #F3091E;
}

.YearlyContainer::after {
    top: 8%;
    right: 6%;
    height: 10px;
    background: #ffd700;
    transform: rotate(35deg);
    box-shadow:
        /* Left side - varied thickness */
        calc(-85vw + 50px) 30px 0 1px #F3091E,
        calc(-80vw + 40px) 100px 0 0 #fff,
        calc(-88vw + 60px) 180px 0 1px #ffd700,
        calc(-82vw + 45px) 250px 0 0 #F3091E,
        /* Middle scattered */
        -150px 120px 0 1px #fff,
        -250px 80px 0 0 #ffd700,
        -100px 200px 0 1px #F3091E,
        -300px 160px 0 0 #fff,
        /* Bottom left */
        calc(-75vw + 40px) 45vh 0 1px #ffd700,
        calc(-70vw + 35px) 50vh 0 0 #F3091E;
}

.YearlyContainer .CloseIcon {
    top: 10px;
    right: 10px;
}

.YearlyContainer .MediumButton .Label {
    font-size: 13pt;
}

.YearlyContainer.StatsTable {
    padding: 15px;
    height: auto;
    align-items: start;
}

.box-text {
    font-size: 1.2em;
    align-items: center;
    justify-content: center;
    line-height: 1.6em;
    text-align: center;
}

.highlight {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    text-align: center;
    padding: 40px;
    font-size: 1.2em;
    align-items: center;
    justify-content: center;
    line-height: 1.6em;
    width: 100%;
    height: 80%;
}

.highlight.active {
    display: flex;
    animation: slideUpFade 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.share-with-friends {
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 90px;
}

.navigation {
    position: absolute;
    bottom: 20px;
    width: 92%;
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* Damit Klicks nur auf den Icons selbst möglich sind */
}

.navigation .icon,
.navigation .icon.OriginalColorIcon {
    width: 40px;
    height: 40px;
    cursor: pointer;
    pointer-events: auto;
    filter: brightness(0) invert(1) !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    padding: 5px;
    box-sizing: content-box;
}

.navigation .icon:hover,
.navigation .icon.OriginalColorIcon:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.25);
}

.navigation .icon:active,
.navigation .icon.OriginalColorIcon:active {
    opacity: 1 !important;
    transform: scale(1.1);
}

.progress {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #F3091E);
    width: 0%; /* Initialer Fortschritt */
    transition: width 0.3s ease;
}

/* Ready container - center the button */
.ReadyContainer {
    width: 100%;
    text-align: center;
}

.y-button {
    display: inline-block;
    padding: 14px 32px;
    box-sizing: border-box;
    border-radius: 8px;
    cursor: pointer;
    pointer-events: auto;
    background: var(--red);
    text-align: center;
    color: white;
    font-family: TTFmedium, sans-serif;
    font-size: 12pt;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: background 0.2s ease, transform 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.y-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.y-button:hover::before {
    left: 100%;
}

.y-button:hover {
    background: #d50818;
}

.y-button:active {
    background: #b80716;
    transform: scale(0.98);
}

.stats-button {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
}

.stats-button:hover {
    transform: translateX(-50%);
}

.restart-link {
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    color: #F3091E !important;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.restart-link:hover {
    color: #fff !important;
}

/* Loading Container */
.LoadingContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Spinner */
.YearlySpinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ff6b6b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Loading Text */
.LoadingText {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2em;
    line-height: 1.6em;
    text-align: center;
    transition: opacity 0.3s ease;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(1.2);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes gradientText {
    from {
        background-position: 200%;
    }
    to {
        background-position: 0%;
    }
}

/* ============================================
   YEARLY PAGE HEADER
   ============================================ */

.YearlyHeader .Title {
    background: linear-gradient(90deg, #F3091E, #ffd700, #F3091E);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerText 4s linear infinite;
}

.YearlyHeader .SubTitle {
    opacity: 0.7;
}

/* Container text - always white on dark background */
.YearlyContainer,
.YearlyContainer .box-text,
.YearlyContainer .highlight,
.YearlyContainer p,
.YearlyContainer span {
    color: #fff !important;
}

.YearlyContainer div:not(.restart-link):not(.y-button) {
    color: #fff !important;
}

.YearlyContainer .Beta, .YearlyContainer .Beta span {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Restart link - light coral/salmon, white on hover */
.YearlyContainer .restart-link {
    color: #ff6b6b !important;
}

.YearlyContainer .restart-link:hover {
    color: #fff !important;
}

/* Voucher button - fancy style */
.YearlyContainer .MediumButton {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%) !important;
    border: none !important;
    color: #252545 !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.YearlyContainer .MediumButton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.YearlyContainer .MediumButton:hover::before {
    left: 100%;
}

.YearlyContainer .MediumButton:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
    background: linear-gradient(135deg, #ffe44d 0%, #ffc107 100%) !important;
}

.YearlyContainer .MediumButton .Label {
    color: #252545 !important;
    font-family: TTFbold, sans-serif;
}

.YearlyContainer .MediumButton .SubTitleIcon {
    filter: none !important;
    opacity: 1 !important;
}

/* ============================================
   YEARLY SUMMARY BANNER - Modern & Flat
   ============================================ */

.YearlySummaryBanner {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, #252545 0%, #1a2a48 50%, #0f3460 100%);
    padding: 16px;
}

/* Confetti stripes decoration */
.YearlySummaryBanner .BannerStars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.YearlySummaryBanner .Star {
    position: absolute;
    width: 3px;
    border-radius: 2px;
    opacity: 0.6;
}

/* Confetti stripes with different colors, sizes and rotations */
.YearlySummaryBanner .Star:nth-child(1) { top: 8%; left: 8%; height: 14px; background: #F3091E; transform: rotate(-25deg); }
.YearlySummaryBanner .Star:nth-child(2) { top: 15%; left: 85%; height: 10px; background: #ffd700; transform: rotate(35deg); }
.YearlySummaryBanner .Star:nth-child(3) { top: 70%; left: 92%; height: 12px; background: #fff; transform: rotate(-15deg); }
.YearlySummaryBanner .Star:nth-child(4) { top: 75%; left: 5%; height: 8px; background: #ffd700; transform: rotate(45deg); }
.YearlySummaryBanner .Star:nth-child(5) { top: 25%; left: 70%; height: 10px; background: #F3091E; transform: rotate(-40deg); }
.YearlySummaryBanner .Star:nth-child(6) { top: 60%; left: 15%; height: 12px; background: #fff; transform: rotate(20deg); }
.YearlySummaryBanner .Star:nth-child(7) { top: 40%; left: 3%; height: 8px; background: #F3091E; transform: rotate(-10deg); }
.YearlySummaryBanner .Star:nth-child(8) { top: 50%; left: 95%; height: 14px; background: #ffd700; transform: rotate(30deg); }

/* Banner content wrapper */
.YearlySummaryBanner .BannerContent {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Year badge - flat style */
.YearlySummaryBanner .YearBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #d4a017 0%, #c4920a 100%);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.YearlySummaryBanner .YearBadge .YearIcon {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.YearlySummaryBanner .YearBadge .YearText {
    color: white;
    font-family: TTFmedium, sans-serif;
    font-size: 10pt;
}

/* Main title - clean gradient text */
.YearlySummaryBanner .BannerTitle {
    font-family: TTFbold, sans-serif;
    font-size: 13pt;
    background: linear-gradient(90deg, #fff, #ffd700, #fff);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerText 4s linear infinite;
    margin-bottom: 6px;
    line-height: 1.3;
}

/* Description text */
.YearlySummaryBanner .BannerDescription {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12pt;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* CTA Button - flat style */
.YearlySummaryBanner .BannerButton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--red);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: TTFmedium, sans-serif;
    font-size: 11pt;
    text-decoration: none;
    transition: background 0.2s ease;
}

.YearlySummaryBanner .BannerButton:hover {
    background: #d50818;
}

.YearlySummaryBanner .BannerButton:active {
    background: #b80716;
}

.YearlySummaryBanner .BannerButton .ButtonIcon {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

/* Close button - simple */
.YearlySummaryBanner .BannerClose {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    cursor: pointer;
    opacity: 0.5;
    filter: brightness(0) invert(1);
    transition: opacity 0.2s ease;
    z-index: 10;
}

.YearlySummaryBanner .BannerClose:hover {
    opacity: 0.8;
}

/* Title shimmer animation - subtle */
@keyframes shimmerText {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: -100% 50%;
    }
}

/* Light mode - lighter background for softer contrast */
@media (prefers-color-scheme: light) {
    .YearlyContainer {
        background: linear-gradient(135deg, #3d3d6b 0%, #384878 50%, #2d5a8a 100%);
    }

    .YearlySummaryBanner {
        background: linear-gradient(135deg, #3d3d6b 0%, #384878 50%, #2d5a8a 100%);
    }
}

/* Missing Banner - neutral variant */
.YearlySummaryBanner.MissingVariant {
    background: var(--bannerBackground);
}

.YearlySummaryBanner.MissingVariant .BannerStars {
    display: none;
}

.YearlySummaryBanner.MissingVariant .YearBadge {
    background: var(--gray);
}

.YearlySummaryBanner.MissingVariant .BannerTitle {
    background: none;
    -webkit-text-fill-color: var(--textColor);
    color: var(--textColor);
    animation: none;
}

.YearlySummaryBanner.MissingVariant .BannerDescription {
    color: var(--textColor);
    opacity: 0.7;
}

.YearlySummaryBanner.MissingVariant .BannerButton {
    background: var(--gray);
}

.YearlySummaryBanner.MissingVariant .BannerButton:hover {
    background: #6b7280;
}

.YearlySummaryBanner.MissingVariant .BannerClose {
    opacity: 0.4;
}

/* Light mode - MissingVariant close icon should be dark on light background */
@media (prefers-color-scheme: light) {
    .YearlySummaryBanner.MissingVariant .BannerClose {
        filter: brightness(0) invert(0);
    }
}

/* Responsive - slightly smaller on mobile */
@media (max-width: 480px) {
    .YearlySummaryBanner {
        padding: 14px;
    }

    .YearlySummaryBanner .BannerTitle {
        font-size: 12pt;
    }
}

/* ============================================
   NEW YEAR DISCOUNT TOPBANNER
   ============================================ */

.NewYearDiscountTopbanner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: rgba(0, 0, 0, 0.05);
    color: #666;
    padding: 8px 12px 8px 40px;
    text-decoration: none;
    font-size: inherit;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #efc892;
    box-shadow: 0 1px 2px rgb(50 50 50 / 8%);
    transition: background 0.2s ease;
    position: relative;
    overflow: hidden;
}

.NewYearDiscountTopbanner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    animation: bannerShine 10s ease-in-out infinite;
}

@keyframes bannerShine {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 150%;
    }
}

.NewYearDiscountTopbanner:hover {
    background: rgba(0, 0, 0, 0.08);
}

.NewYearTopContent {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 4px;
    white-space: nowrap;
}

.NewYearTopArrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-image: url('/images/icons/submit3.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.45;
}

.NewYearTopIcon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11pt;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    animation: emojiWobble 2s ease-in-out infinite;
}

@keyframes emojiWobble {
    0%, 100% {
        transform: translateY(-50%) rotate(0deg);
    }
    25% {
        transform: translateY(-50%) rotate(-3deg);
    }
    75% {
        transform: translateY(-50%) rotate(3deg);
    }
}

.NewYearTopText {
    color: inherit;
    white-space: nowrap;
}

.NewYearTopSeparator {
    color: rgba(0, 0, 0, 0.3);
    margin: 0 4px;
}

/* Last Day - Auffaelliges Styling */
.NewYearDiscountTopbanner.LastDay::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    animation: bannerShine 12s ease-in-out infinite;
}

.NewYearDiscountTopbanner.LastDay {
    background: linear-gradient(315deg, #efc892, #fff9f2, #efc892);
    border: 1px solid #efc892;
}

.NewYearDiscountTopbanner.LastDay:hover {
    background: linear-gradient(315deg, #e0b87a, #fff0e0, #e0b87a);
    background-size: 200% 100%;
}

.NewYearDiscountTopbanner.LastDay .NewYearTopText {
    color: #5a4a2a;
}

.NewYearDiscountTopbanner.LastDay .NewYearTopSeparator {
    color: rgba(90, 74, 42, 0.5);
}

.NewYearDiscountTopbanner.LastDay #newYearCountdown {
    font-family: monospace, sans-serif;
    font-size: 11pt;
    letter-spacing: 1px;
    margin-left: 6px;
    display: inline-block;
    animation: countdownPulse 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes countdownPulse {
    0%, 100% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.05);
    }
}

@keyframes lastDayPulse {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Responsive - mobile */
@media (max-width: 480px) {
    .NewYearDiscountTopbanner {
        padding: 8px 12px 8px 40px;
    }

}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .NewYearDiscountTopbanner {
        background: rgba(255, 255, 255, 0.1);
        color: #ccc;
        border-color: #9b6f2d;
        box-shadow: 0 1px 2px rgb(255 255 255 / 8%);
    }

    .NewYearDiscountTopbanner:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    .NewYearDiscountTopbanner::before {
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent
        );
    }

    .NewYearTopSeparator {
        color: rgba(255, 255, 255, 0.3);
    }

    .NewYearDiscountTopbanner.LastDay {
        background: linear-gradient(315deg, #9b6f2d, #2C2315, #9b6f2d);
        border-color: #9b6f2d;
    }

    .NewYearDiscountTopbanner.LastDay:hover {
        background: linear-gradient(315deg, #8a6228, #251e12, #8a6228);
    }

    .NewYearDiscountTopbanner.LastDay .NewYearTopText {
        color: #eee;
    }

    .NewYearDiscountTopbanner.LastDay .NewYearTopSeparator {
        color: rgba(255, 255, 255, 0.5);
    }

    .NewYearDiscountTopbanner.LastDay::before {
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.15),
            transparent
        );
    }

    .NewYearTopArrow {
        filter: invert(1);
        opacity:0.7;
    }
}