/* === FUND BANNER STYLES === */
.fund-banner {
   position: fixed;
   /* Für ::after Pseudo-Element Positionierung */
   /* --- Positionierung ganz oben (über Warning Banner) --- */
   top: var(--navbar-height, 70px);
   left: 0;
   right: 0;
   z-index: 1000; /* Höher als Warning Banner (1050) */
   
   /* --- Fund-Banner Design (dunkelgrün mit Clippy-Pattern) --- */
   background: 
       linear-gradient(135deg, rgba(30, 86, 49, 0.9), rgba(15, 61, 31, 0.9)),
       url('/images/clippy.png'), url('/images/clippy.png'), url('/images/clippy.png'), url('/images/clippy.png'), url('/images/clippy.png'),
       url('/images/clippy.png'), url('/images/clippy.png'), url('/images/clippy.png'), url('/images/clippy.png'), url('/images/clippy.png'),
       url('/images/clippy.png'), url('/images/clippy.png'), url('/images/clippy.png'), url('/images/clippy.png'), url('/images/clippy.png'),
       url('/images/clippy.png'), url('/images/clippy.png'), url('/images/clippy.png'), url('/images/clippy.png'), url('/images/clippy.png');
   background-size: 
       cover,
       18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px,
       18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px, 18px 18px; /* 20 kleine Clippys */
   background-position: 
       center,
       2% 5px, 7% 22px, 12% 8px, 17% 25px, 22% 12px, 27% 18px, 32% 6px, 37% 24px, 42% 10px, 47% 20px,
       52% 15px, 57% 7px, 62% 23px, 67% 11px, 72% 19px, 77% 9px, 82% 26px, 87% 13px, 92% 21px, 97% 16px;
   background-repeat: 
       no-repeat,
       no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
       no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
   color: white;
   padding: 12px 20px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   
   /* Statisches Clippy-Pattern - keine Animation */
   
   /* --- Animation (gleich wie Warning Banner) --- */
   transform: translateY(-100%) translateZ(0); /* Initial versteckt + Hardware-Beschleunigung */
   opacity: 0;
   visibility: hidden;
   transition: transform 0.4s ease, 
               opacity 0.4s ease,
               visibility 0s linear 0.4s;
               
   /* --- Layout (gleich wie Warning Banner) --- */
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.fund-banner.visible {
   transform: translateY(0); /* Endposition */
   opacity: 1;
   visibility: visible;
   transition: transform 0.4s ease, 
               opacity 0.4s ease,
               visibility 0s linear 0s;
}

.fund-banner.hidden-by-user {
   transform: translateY(-100%);
   opacity: 0;
   visibility: hidden;
   transition: transform 0.4s ease, 
               opacity 0.4s ease,
               visibility 0s linear 0.4s;
}

.fund-content {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   flex: 1;
}

.fund-icon {
   font-size: 1rem; /* Kleiner: 1rem statt 1.2rem */
   color: #2ecc71; /* Gleiche Farbe wie Text und Button-Oberfläche */
   flex-shrink: 0;
   line-height: 1;
   animation: heartPulse 2s ease-in-out infinite;
}

.fund-text {
    font-family: 'Unbounded', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #2ecc71; /* Gleiche Farbe wie die Button-Oberfläche */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 
                 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Spezielle Hervorhebung für "Community Projekt" */
.fund-text .highlight-bold {
   font-weight: 700;
}

.fund-text a {
   color: #ffcccb;
   font-weight: 500;
   text-decoration: underline;
   text-decoration-color: rgba(255, 204, 203, 0.6);
   transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.fund-text a:hover,
.fund-text a:focus {
   color: #ffffff;
   text-decoration-color: #ffffff;
}

.close-fund-button {
   background: rgba(255, 255, 255, 0.1);
   border: none;
   border-radius: 50%;
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   font-weight: bold;
   color: rgba(255, 255, 255, 0.8);
   cursor: pointer;
   flex-shrink: 0;
   transition: background-color 0.2s ease, color 0.2s ease;
}

.close-fund-button:hover,
.close-fund-button:focus {
   background-color: rgba(255, 255, 255, 0.2);
   color: #ffffff;
   outline: none;
}

/* Initial verstecken */
.fund-banner.initial-hidden {
   visibility: hidden;
   opacity: 0;
   transform: translateY(-100%);
}

/* === Fund-Banner Gestreifte Linie (grün) === */
.fund-banner::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0; /* Positioniert am unteren Rand */
   width: 100%;
   height: 8px; /* Höhe des "Bandes" - gleich wie Warning Banner */
   background: repeating-linear-gradient(
       -45deg, /* Schräger Winkel der Streifen - gleich wie Warning Banner */
       #27ae60, /* Helles Grün (ohne Transparenz) */
       #27ae60 20px, /* Breite des ersten Streifens */
       #1e8449 20px, /* Dunkles Grün */
       #1e8449 40px /* Dunkles Grün (insgesamt 40px) */
   );
   /* Optional: Einen leichten Schatten hinzufügen, um es abzuheben */
   box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}

/* === 3D Knete Support Button === */
.support-button {
   background: linear-gradient(145deg, #2ecc71, #27ae60);
   border: none;
   border-radius: 12px;
   color: #1a5d3a;
   font-family: 'Unbounded', sans-serif;
   font-size: 14px;
   font-weight: 700;
   padding: 10px 20px;
   cursor: pointer;
   position: relative;
   transition: all 0.15s ease;
   
   /* Button noch höher positionieren */
   transform: translateY(-6px);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 
                0 -1px 0 rgba(0, 0, 0, 0.3);
   
   /* 3D Knete-Effekt */
   box-shadow: 
       0 6px 0 #229954,           /* Unterer 3D-Schatten */
       0 8px 15px rgba(0, 0, 0, 0.2), /* Weicher Schatten */
       inset 0 1px 0 rgba(255, 255, 255, 0.4), /* Oberer Glanz */
       inset 0 -1px 0 rgba(0, 0, 0, 0.2);      /* Unterer Schatten */
   
   /* Verhindert Textauswahl */
   user-select: none;
   -webkit-user-select: none;
}

.support-button:hover {
   background: linear-gradient(145deg, #58d68d, #2ecc71);
   transform: translateY(-4px); /* Von -6px auf -4px (2px runter) */
   box-shadow: 
       0 4px 0 #229954,           /* Reduzierter 3D-Schatten */
       0 6px 12px rgba(0, 0, 0, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.4),
       inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.support-button:active {
   transform: translateY(0px); /* Von -6px auf 0px (6px runter insgesamt) */
   box-shadow: 
       0 0px 0 #229954,           /* Komplett gedrückt */
       0 2px 5px rgba(0, 0, 0, 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.2),
       inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* === Herz Pulsier-Animation === */
@keyframes heartPulse {
   0% {
       transform: scale(1);
       opacity: 1;
   }
   50% {
       transform: scale(1.2);
       opacity: 0.8;
   }
   100% {
       transform: scale(1);
       opacity: 1;
   }
}