/* Banner System - Flexible Anzeige mit verschiedenen Stilen */

.page-banner {
    position: relative !important;
    width: 100% !important;
    color: white !important;
    padding: 18px 60px 18px 20px !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    z-index: 10000 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    border: none !important;
    line-height: 1.4 !important;
    display: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.page-banner.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Farbschemata */
.page-banner.color-earth {
    background: linear-gradient(135deg, #6B705C 0%, #8B7D6B 50%, #6B705C 100%);
    box-shadow: 0 4px 15px rgba(107, 112, 92, 0.4);
}

.page-banner.color-orange {
    background: linear-gradient(135deg, #EB5E28 0%, #FF8A50 50%, #EB5E28 100%);
    box-shadow: 0 4px 15px rgba(235, 94, 40, 0.4);
}

.page-banner.color-green {
    background: linear-gradient(135deg, #28a745 0%, #4CAF50 50%, #28a745 100%);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

.page-banner.color-blue {
    background: linear-gradient(135deg, #007bff 0%, #4da3ff 50%, #007bff 100%);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}

.page-banner.color-red {
    background: linear-gradient(135deg, #dc3545 0%, #ff6b7a 50%, #dc3545 100%);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}

.page-banner.color-purple {
    background: linear-gradient(135deg, #6f42c1 0%, #9b59b6 50%, #6f42c1 100%);
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.4);
}

.page-banner.color-pink {
    background: linear-gradient(135deg, #e83e8c 0%, #ff6fb5 50%, #e83e8c 100%);
    box-shadow: 0 4px 15px rgba(232, 62, 140, 0.4);
}

.page-banner.color-gold {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.page-banner.color-teal {
    background: linear-gradient(135deg, #20c997 0%, #48e3bd 50%, #20c997 100%);
    box-shadow: 0 4px 15px rgba(32, 201, 151, 0.4);
}

.page-banner.color-brown {
    background: linear-gradient(135deg, #8b4513 0%, #a0522d 50%, #8b4513 100%);
    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.4);
}

.page-banner.color-darkblue {
    background: linear-gradient(135deg, #1a3a5c 0%, #2c5f8d 50%, #1a3a5c 100%);
    box-shadow: 0 4px 15px rgba(26, 58, 92, 0.4);
}

.page-banner.color-wine {
    background: linear-gradient(135deg, #722f37 0%, #a0435e 50%, #722f37 100%);
    box-shadow: 0 4px 15px rgba(114, 47, 55, 0.4);
}

/* Neue Farbschemata */
.page-banner.color-warm-beige {
    background: linear-gradient(135deg, #D4C5B9 0%, #E8DDD0 50%, #D4C5B9 100%);
    box-shadow: 0 4px 15px rgba(212, 197, 185, 0.4);
}

.page-banner.color-sand {
    background: linear-gradient(135deg, #C9B896 0%, #D9C8A8 50%, #C9B896 100%);
    box-shadow: 0 4px 15px rgba(201, 184, 150, 0.4);
}

.page-banner.color-olive {
    background: linear-gradient(135deg, #6B7456 0%, #8B9475 50%, #6B7456 100%);
    box-shadow: 0 4px 15px rgba(107, 116, 86, 0.4);
}

.page-banner.color-forest {
    background: linear-gradient(135deg, #2d5016 0%, #4a7c2f 50%, #2d5016 100%);
    box-shadow: 0 4px 15px rgba(45, 80, 22, 0.4);
}

.page-banner.color-sage {
    background: linear-gradient(135deg, #9CAF88 0%, #B5C4A5 50%, #9CAF88 100%);
    box-shadow: 0 4px 15px rgba(156, 175, 136, 0.4);
}

.page-banner.color-moss {
    background: linear-gradient(135deg, #5a6b4d 0%, #7a8b6d 50%, #5a6b4d 100%);
    box-shadow: 0 4px 15px rgba(90, 107, 77, 0.4);
}

.page-banner.color-sky {
    background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 50%, #87CEEB 100%);
    box-shadow: 0 4px 15px rgba(135, 206, 235, 0.4);
}

.page-banner.color-navy {
    background: linear-gradient(135deg, #000080 0%, #1e3a8a 50%, #000080 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 128, 0.4);
}

.page-banner.color-rust {
    background: linear-gradient(135deg, #b7410e 0%, #cd5c29 50%, #b7410e 100%);
    box-shadow: 0 4px 15px rgba(183, 65, 14, 0.4);
}

.page-banner.color-terracotta {
    background: linear-gradient(135deg, #c86432 0%, #e07b4e 50%, #c86432 100%);
    box-shadow: 0 4px 15px rgba(200, 100, 50, 0.4);
}

.page-banner.color-copper {
    background: linear-gradient(135deg, #b87333 0%, #d4915e 50%, #b87333 100%);
    box-shadow: 0 4px 15px rgba(184, 115, 51, 0.4);
}

.page-banner.color-lavender {
    background: linear-gradient(135deg, #8a7ba8 0%, #b5a9c8 50%, #8a7ba8 100%);
    box-shadow: 0 4px 15px rgba(138, 123, 168, 0.4);
}

.page-banner.color-plum {
    background: linear-gradient(135deg, #8b4789 0%, #a85fa6 50%, #8b4789 100%);
    box-shadow: 0 4px 15px rgba(139, 71, 137, 0.4);
}

.page-banner.color-rose {
    background: linear-gradient(135deg, #c97c88 0%, #e699a6 50%, #c97c88 100%);
    box-shadow: 0 4px 15px rgba(201, 124, 136, 0.4);
}

.page-banner.color-champagne {
    background: linear-gradient(135deg, #f7e7ce 0%, #fdf3e0 50%, #f7e7ce 100%);
    box-shadow: 0 4px 15px rgba(247, 231, 206, 0.4);
}

.page-banner.color-silver {
    background: linear-gradient(135deg, #C0C0C0 0%, #E8E8E8 50%, #C0C0C0 100%);
    box-shadow: 0 4px 15px rgba(192, 192, 192, 0.4);
}

.page-banner.color-midnight {
    background: linear-gradient(135deg, #191970 0%, #2e4482 50%, #191970 100%);
    box-shadow: 0 4px 15px rgba(25, 25, 112, 0.4);
}

.page-banner.color-slate {
    background: linear-gradient(135deg, #708090 0%, #8fa3b3 50%, #708090 100%);
    box-shadow: 0 4px 15px rgba(112, 128, 144, 0.4);
}

.page-banner.color-charcoal {
    background: linear-gradient(135deg, #36454F 0%, #556672 50%, #36454F 100%);
    box-shadow: 0 4px 15px rgba(54, 69, 79, 0.4);
}

/* Hover-Effekte */
.page-banner.color-earth:hover {
    background: linear-gradient(135deg, #A99985 0%, #8B7D6B 50%, #A99985 100%);
    box-shadow: 0 6px 20px rgba(169, 153, 133, 0.5);
}

.page-banner.color-orange:hover {
    background: linear-gradient(135deg, #d54515 0%, #ff7a3d 50%, #d54515 100%);
    box-shadow: 0 6px 20px rgba(213, 69, 21, 0.5);
}

.page-banner.color-green:hover {
    background: linear-gradient(135deg, #218838 0%, #45a049 50%, #218838 100%);
    box-shadow: 0 6px 20px rgba(33, 136, 56, 0.5);
}

.page-banner.color-blue:hover {
    background: linear-gradient(135deg, #0056b3 0%, #3d8fd9 50%, #0056b3 100%);
    box-shadow: 0 6px 20px rgba(0, 86, 179, 0.5);
}

.page-banner.color-red:hover {
    background: linear-gradient(135deg, #c82333 0%, #ff5566 50%, #c82333 100%);
    box-shadow: 0 6px 20px rgba(200, 35, 51, 0.5);
}

.page-banner.color-purple:hover {
    background: linear-gradient(135deg, #5a32a3 0%, #8e44ad 50%, #5a32a3 100%);
    box-shadow: 0 6px 20px rgba(90, 50, 163, 0.5);
}

.page-banner.color-pink:hover {
    background: linear-gradient(135deg, #d6336c 0%, #ff5c9e 50%, #d6336c 100%);
    box-shadow: 0 6px 20px rgba(214, 51, 108, 0.5);
}

.page-banner.color-gold:hover {
    background: linear-gradient(135deg, #c19b2e 0%, #e6c347 50%, #c19b2e 100%);
    box-shadow: 0 6px 20px rgba(193, 155, 46, 0.5);
}

.page-banner.color-teal:hover {
    background: linear-gradient(135deg, #1aa876 0%, #3ccfa4 50%, #1aa876 100%);
    box-shadow: 0 6px 20px rgba(26, 168, 118, 0.5);
}

.page-banner.color-brown:hover {
    background: linear-gradient(135deg, #723a0f 0%, #8b4513 50%, #723a0f 100%);
    box-shadow: 0 6px 20px rgba(114, 58, 15, 0.5);
}

.page-banner.color-darkblue:hover {
    background: linear-gradient(135deg, #0f2438 0%, #1a3a5c 50%, #0f2438 100%);
    box-shadow: 0 6px 20px rgba(15, 36, 56, 0.5);
}

.page-banner.color-wine:hover {
    background: linear-gradient(135deg, #5a2329 0%, #8b3645 50%, #5a2329 100%);
    box-shadow: 0 6px 20px rgba(90, 35, 41, 0.5);
}

/* Banner Badge - Oben mittig über dem Banner */
.banner-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 6px 16px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    z-index: 20 !important;
    white-space: nowrap;
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.8);
    pointer-events: none;
}

/* Banner Inhalt */
.banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.banner-icon {
    font-size: 20px;
}

.banner-icon.twinkle {
    animation: twinkle 2s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.banner-text {
    font-family: var(--font-heading), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.5px;
}

.banner-text strong {
    font-weight: 700;
    color: #FFE5CC;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.banner-cta {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 16px;
    border-radius: 20px;
    margin-left: 8px;
    font-weight: 600;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.page-banner:hover .banner-cta {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
}

/* Schließen-Button - OBEN RECHTS in der Ecke */
.page-banner .close-banner {
    position: absolute;
    right: 10px;
    top: 10px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.page-banner .close-banner:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1) rotate(90deg);
}

/* Animationen */

/* 1. Fallender Vorhang (Curtain Fall) - VON OBEN NACH UNTEN AN DER SEITE */
.page-banner.animation-curtain {
    animation: curtainFallSide 2.5s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes curtainFallSide {
    0% {
        transform: translateY(-150%);
        opacity: 0;
    }
    70% {
        transform: translateY(5px);
    }
    85% {
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 2. Von oben gleiten (Slide) */
.page-banner.animation-slide {
    animation: slideDownSide 2s ease-out;
}

@keyframes slideDownSide {
    0% {
        transform: translateY(-120%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 3. Einblenden (Fade) */
.page-banner.animation-fade {
    animation: fadeInSide 2.5s ease-out;
}

@keyframes fadeInSide {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 4. Von rechts hereinschweben */
.page-banner.animation-slideright {
    animation: slideInFromRight 2.2s ease-out;
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 5. Bounce-Effekt von oben */
.page-banner.animation-bounce {
    animation: bounceDown 2.5s cubic-bezier(0.68, -0.35, 0.265, 1.35);
}

@keyframes bounceDown {
    0% {
        transform: translateY(-150%);
        opacity: 0;
    }
    55% {
        transform: translateY(10px);
    }
    75% {
        transform: translateY(-5px);
    }
    90% {
        transform: translateY(2px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 6. Pulsierender Eingang */
.page-banner.animation-pulse {
    animation: pulseIn 2.5s ease-out;
}

@keyframes pulseIn {
    0% {
        transform: scale(0.7) translateY(-50px);
        opacity: 0;
    }
    50% {
        transform: scale(1.05) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* 7. Sanftes Hereinrollen */
.page-banner.animation-roll {
    animation: rollIn 3s ease-out;
}

@keyframes rollIn {
    0% {
        transform: translateX(100%) rotate(180deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

/* Fade-out beim Schließen */
.page-banner.fade-out {
    animation: bannerFadeOut 0.6s ease-out forwards !important;
}

@keyframes bannerFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
        max-height: 100px;
    }
    100% {
        opacity: 0;
        transform: translateY(-100%);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Dezente Deko-Elemente (optional für earth/green Themes) */
.page-banner.color-earth::before,
.page-banner.color-green::before {
    content: '❄';
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: 0.3;
    animation: snowFloat 4s infinite;
    pointer-events: none;
}

.page-banner.color-earth::after,
.page-banner.color-green::after {
    content: '❄';
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0.25;
    animation: snowFloat 5s infinite 1s;
    pointer-events: none;
}

@keyframes snowFloat {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-45%) translateX(3px); }
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .page-banner {
        padding: 15px 15px 55px 15px !important;
        font-size: 13px !important;
        width: 95% !important;
        right: 2.5% !important;
    }
    
    .banner-badge {
        font-size: 10px;
        padding: 4px 12px;
        top: -8px;
    }
    
    .banner-content {
        gap: 8px;
    }
    
    .banner-icon {
        font-size: 18px;
    }
    
    .banner-cta {
        margin-left: 0;
        margin-top: 4px;
        padding: 5px 12px;
        font-size: 12px;
    }
    
    .page-banner .close-banner {
        font-size: 14px;
        padding: 6px 16px;
    }
    
    .page-banner.color-earth::before,
    .page-banner.color-earth::after,
    .page-banner.color-green::before,
    .page-banner.color-green::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .banner-text {
        font-size: 12px;
    }
    
    .banner-icon {
        font-size: 16px;
    }
}