:root {
    --font: 'Segoe UI', Tahoma, sans-serif;

    /* Typfarben */
    --color-inform: #4da6ff;
    --color-success: #4dff88;
    --color-error: #ff4d4d;
    --color-warning: #ffd24d;
    --color-flame: #ff6b00;
    --color-water: #4db8ff;

    

    --color-dog: #ffcc00; /* Hund */
    --color-cat: #ff66cc; /* Katze */
    --color-horse: #996633; /* Pferd */
    --color-fish: #33ccff; /* Fisch */
    --color-helicopter: #6666ff; /* Helikopter */
    --color-airplane: #33cc99; /* Flugzeug */
    --color-car: #ff3333; /* Auto */
    --color-person: #ffcc66; /* Person */
    --color-firefighter: #ff3300; /* Feuerwehr */
    --color-police: #0066ff; /* Polizei */
    --color-adac: #ff6600; /* ADAC */
    --color-drugs: #66ff66; /* Drogen */
    --color-smoking: #666666; /* Rauchen */

    --color-navigation: #00c3ff;
    --color-route: #ff8c1a;
    --color-world: #4de66b;
    --color-candy: #ff69b4;
    --color-restart: #b366ff;
    --color-attention: #ffcc00;
    --color-penalty: #ff3333;
    --color-discord: #5865F2;
    --color-youtube: #FF0000;
    --color-twitch: #9146FF;
    
    
    --color-winde: #5dade2;        /* hellblau – Wind */
    --color-wind: #5dade2;        /* hellblau – Wind */
    --color-rechnung: #27aeae;     /* türkis – Rechnung */

    --border-color: rgba(255,255,255,0.05);
  }


  #notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 18px;
    z-index: 9999;
    pointer-events: none;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    width: 520px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #notification-container::-webkit-scrollbar { display: none; }

  .notification {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    color: white;
    max-width: 520px;
    min-width: 320px;
    width: fit-content;
    font-size: 14px;
    overflow: hidden;
    user-select: none;
    animation: fadeInSlide 0.45s ease forwards;

    /* sanfter Schwarz-Übergang */
    background: linear-gradient(
      90deg,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.9) 50%,
      rgba(0,0,0,0.75) 75%,
      rgba(0,0,0,0.6) 100%
    );
    box-shadow: inset 0 0 8px rgba(0,0,0,0.8);
  }

  /* Farbstreifen links */
  .notification::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 12px 0 0 12px;
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
    opacity: 0.9;
  }

  /* Typfarben */
.notification.inform { color: var(--color-inform); }
.notification.success { color: var(--color-success); }
.notification.error { color: var(--color-error); }
.notification.warning { color: var(--color-warning); }
.notification.flame { color: var(--color-flame); }
.notification.water { color: var(--color-water); }

.notification.navigation { color: var(--color-navigation); }
.notification.route { color: var(--color-route); }
.notification.world { color: var(--color-world); }
.notification.candy { color: var(--color-candy); }
.notification.restart { color: var(--color-restart); }
.notification.attention { color: var(--color-attention); }
.notification.penalty { color: var(--color-penalty); }

.notification.dog { color: var(--color-dog); }
.notification.cat { color: var(--color-cat); }
.notification.horse { color: var(--color-horse); }
.notification.fish { color: var(--color-fish); }

.notification.helicopter { color: var(--color-helicopter); }
.notification.airplane { color: var(--color-airplane); }
.notification.car { color: var(--color-car); }
.notification.person { color: var(--color-person); }

.notification.firefighter { color: var(--color-firefighter); }
.notification.police { color: var(--color-police); }
.notification.adac { color: var(--color-adac); }
.notification.drugs { color: var(--color-drugs); }
.notification.smoking { color: var(--color-smoking); }

.notification.thunderstorm { color: var(--color-attention); }
.notification.lightning { color: var(--color-penalty); }

.notification.discord { color: var(--color-discord); }
.notification.youtube { color: var(--color-youtube); }
.notification.twitch { color: var(--color-twitch); }

.notification.winde { color: var(--color-winde); }
.notification.wind { color: var(--color-wind); }
.notification.rechnung { color: var(--color-rechnung); }


  

  
  .notification.wind {
    --accent: var(--color-winde);
    background: linear-gradient(135deg, rgba(93,173,226,0.15), rgba(93,173,226,0.05));
    border-left: 4px solid var(--color-winde);
    box-shadow: 0 0 10px rgba(93,173,226,0.3);
  }

  .notification.rechnung {
    --accent: var(--color-rechnung);
    background: linear-gradient(135deg, rgba(39,174,174,0.15), rgba(39,174,174,0.05));
    border-left: 4px solid var(--color-rechnung);
    box-shadow: 0 0 10px rgba(39,174,174,0.3);
  }


  /* === Social Notifications === */
  .notification.discord {
    --accent: var(--color-discord);
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.15), rgba(88, 101, 242, 0.05));
    border-left: 4px solid var(--color-discord);
    box-shadow: 0 0 10px rgba(88, 101, 242, 0.3);
  }

  .notification.youtube {
    --accent: var(--color-youtube);
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.15), rgba(255, 0, 0, 0.05));
    border-left: 4px solid var(--color-youtube);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  }

  .notification.twitch {
    --accent: var(--color-twitch);
    background: linear-gradient(135deg, rgba(145, 70, 255, 0.15), rgba(145, 70, 255, 0.05));
    border-left: 4px solid var(--color-twitch);
    box-shadow: 0 0 10px rgba(145, 70, 255, 0.3);
  }


  /* Icons */
  .notification .icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    z-index: 1;
  }

  .notification .icon emoji,
  .notification .icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    transform-origin: center;
  }

  /* Inhalt */
  .notification .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 1;
    color: white;
  }

  .notification .notif-header {
    font-weight: 700;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 3px;
  }

  .notification .message {
    max-width: 100%;
    word-break: break-word;
    line-height: 1.3;
  }

  .notification .notif-footer {
    font-size: 12px;
    opacity: 0.65;
    border-top: 1px solid var(--border-color);
    padding-top: 3px;
    font-style: italic;
  }

  /* Fade Animationen */
  @keyframes fadeInSlide {
    from { opacity: 0.3; transform: translateX(80%) scale(0.95); filter: blur(4px); }
    to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
  }
  @keyframes fadeOutSlide {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to { opacity: 0; transform: translateX(80%) scale(0.95); }
  }

  @keyframes windeFlow {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(5px); opacity: 0.8; }
  }

  @keyframes rechnungSlide {
    0% { transform: translateY(10px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(0); }
  }

  @keyframes fehlerFlash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.8); }
  }

  /* ICON ANIMATIONEN */
  @keyframes iconSpin { 0% { transform: rotate(-360deg) scale(0); opacity: 0; } 60% { transform: rotate(20deg) scale(1.3); opacity: 1; } 100% { transform: rotate(0deg) scale(1); opacity: 1; } }
  @keyframes iconBounce { 0% { transform: translateY(-30%) scale(0.5); opacity: 0; } 50% { transform: translateY(15%) scale(1.3); opacity: 1; } 70% { transform: translateY(-10%) scale(0.9); } 100% { transform: translateY(0) scale(1); opacity: 1; } }
  @keyframes iconPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 1; } }
  @keyframes flameFlicker { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255,100,0,0.8)); } 25% { transform: scale(1.1) rotate(-3deg); } 50% { transform: scale(0.95) rotate(2deg); } }
  @keyframes waterWave { 0%,100% { transform: translateY(0) rotate(0deg) scale(1); filter: drop-shadow(0 0 5px rgba(80,160,255,0.7)); } 50% { transform: translateY(3px) rotate(-3deg) scale(1.1); } }
  @keyframes compassSwing { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } }
  @keyframes routePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }
  @keyframes worldSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  @keyframes candyBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  @keyframes restartRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  @keyframes attentionBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
  @keyframes penaltyShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Neue Icon Animationen */
  @keyframes dogBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @keyframes catTwirl { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  @keyframes horseGallop { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10px); } }
  @keyframes fishSwim { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(15px); } }
  @keyframes helicopterSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  @keyframes airplaneFly { 0% { transform: translateX(0); } 100% { transform: translateX(20px); } }
  @keyframes carDrive { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
  @keyframes personWalk { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
  @keyframes firefighterBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  @keyframes policeBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  @keyframes adacFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
  @keyframes drugsPulsate { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
  @keyframes smokingShake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
  @keyframes thunderstormFlash { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
  @keyframes lightningFlash { 0%, 100% { opacity: 1;} 50% {opacity: 0.3;} }
  @keyframes discordWave { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(5deg) scale(1.05); } 50% { transform: rotate(-5deg) scale(1.05); } 75% { transform: rotate(3deg) scale(1.02); } }
  @keyframes youtubePulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(255,0,0,0.6)); } 50% { transform: scale(1.3); filter: drop-shadow(0 0 10px rgba(255,0,0,0.9)); } }
  @keyframes twitchGlow { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(145,70,255,0.7)); } 50% { transform: scale(1.15); filter: drop-shadow(0 0 12px rgba(145,70,255,1)); } }