.bg-back {
    background-color: rgba(0, 0, 0, 0.3);
}

.bg-main {
    background-color: rgba(60, 45, 107, 0.8);
}

.bg-tweet {
    background-color: rgba(60, 45, 107, 0.5);
}


.head-color {
    color: rgba(166, 66, 130);
}

.txt-color {
    color: rgba(150, 66, 44);
}

.bg-button {
    background-color: rgba(33, 33, 33);
}

.bg-beitrag {
    background-color: rgba(23, 23, 23);
}

.bg-hintergrund {
    background-color: rgba(16, 16, 16);
}

.bg-forum {
    background-color: rgba(29, 29, 29);
}

.aquire {
    font-family: 'aquire'; }
    @font-face {
    font-family: aquire;
    src: url("../webfonts/Aquire-BW0ox.otf");
}

.font-montserrat {
    font-family: 'montserrat'; }
    @font-face {
    font-family: montserrat;
    src: url("../webfonts/Montserrat-Medium.otf");
}

.font-rubik {
    font-family: 'rubik'; }
    @font-face {
    font-family: rubik;
    src: url("../webfonts/Rubik-Medium.ttf");
}

/* Farben Profil */
.bg-aqua { background-color: rgba(0, 255, 255, 0.5); } 
.txt-aqua { color: rgba(0, 255, 255); } 
.hover\:txt-aqua:hover { --tw-text-opacity: 1; color: rgb(0 255 255 / var(--tw-text-opacity)); }

.bg-red { background-color: rgba(255, 0, 0, 0.5); } 
.txt-red { color: rgba(255, 0, 0); } 
.hover\:txt-red:hover { --tw-text-opacity: 1; color: rgb(255 0 0 / var(--tw-text-opacity)); }

.bg-lila { background-color: rgba(255, 0, 212, 0.5); } 
.txt-lila { color: rgba(255, 0, 212); } 
.hover\:txt-lila:hover { --tw-text-opacity: 1; color: rgb(255 0 212 / var(--tw-text-opacity)); }


.txt-black { color: rgb(0, 0, 0); } 

.bg-default { background-color: rgba(0, 0, 0, 0.5); } 
.txt-default { color: rgb(139, 139, 139); } 
.hover\:txt-default:hover { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); }



.btn {
    background-color: transparent;
    color: #333;
    border: 2px solid rgba(4, 120, 87);
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  
  .btn:hover {
    background-color: rgba(4, 120, 87, var(--tw-bg-opacity));
    color: #fff;
    border-color: rgba(4, 120, 87, var(--tw-bg-opacity));
  }
  
  .btn:hover::before {
    transform: scaleX(1);
  }
  
  .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background-color: #4CAF50;
    z-index: -1;
    transition: transform 0.3s ease;
  }
  
  .btn-gray {
    color: rgb(212 212 216);
    border-color: rgba(4, 120, 87);
  }
  
  .btn-gray:hover {
    background-color: rgba(4, 120, 87);
    border-color: rgba(4, 120, 87);
  }
  
  .btn-gray:hover::before {
    background-color: rgba(4, 120, 87);
  }


  .item-card {
    padding: 10px;
    text-align: center;
  }
  
  
  
  .item-card h5 {
    font-size: 18px;
  }
  
  .item-card p {
    margin-bottom: 10px;
  }
  
  .item-card .btn {
    color: rgb(212 212 216);
  }
  
  .container {
    margin-top: 50px;
  }
  
  .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  
  .col-md-2 {
    flex: 0 0 25%;
    max-width: 25%;
    padding-right: 15px;
    padding-left: 15px;
  }

  [type='email'], [type='text'], [type='password'] {
    background-color: rgb(24 24 27) !important;
    color: rgb(212 212 216) !important;
  }

  [type='email']:focus, [type='text']:focus, [type='password']:focus {
    border-color: rgb(245 158 11) !important;
  }


.center-image {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 10vh; /* Füllt den gesamten Viewport */
  margin: 0;
  text-align: center;
}
.center-image img {
    max-width: 100%;
    height: auto; /* Responsive Bildgröße */
}

.snowflake {
  position: fixed;
  top: 0;
  color: rgb(255, 255, 255) !important;
  user-select: none;
  pointer-events: none;
  z-index: 9999;
  animation: fall ease-in infinite, shake ease-in-out infinite;
  transition: opacity 500ms;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); /* Glüheffekt */
}

@keyframes fall {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100vh;
    opacity: 1;
  }
}

@keyframes shake {
  0% {
    margin-left: 0;
  }
  10% {
    margin-left: 25px;
  }
  25% {
    margin-left: 50px;
  }
  40% {
    margin-left: -25px;
  }
  50% {
    margin-left: -50px;
  }
  65% {
    margin-left: 25px;
  }
  75% {
    margin-left: 50px;
  }
  100% {
    margin-left: 0;
  }
}

@keyframes regen {
  0% {
    transform: translate(0);
    opacity: 1;
  }
  20% {
    transform: translate(4px, 100px);
    opacity: 0.8;
  }
  40% {
    transform: translate(-7px, 200px);
    opacity: 0.7;
  }
  60% {
    transform: translate(10px, 400px);
    opacity: 0.5;
  }
  80% {
    transform: translate(-14px, 700px);
    opacity: 0.2;
  }
  100% {
    transform: translate(16px, 900px);
    opacity: 0;
  }
}


@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}



.remove-arrows {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}

.remove-arrows::-webkit-outer-spin-button,
.remove-arrows::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@keyframes flash {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.flash-effect {
  animation: flash 0.4s ease-in-out;
}

/* Wackeln der Lootbox */
@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(-2deg); }
  75% { transform: rotate(1deg); }
}
.animate-shake { animation: shake 0.5s ease-in-out 2; }

/* Deckel-Animation */
@keyframes openLid {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-60px) rotateX(30deg); opacity: 0; }
}
.animate-open-lid { animation: openLid 0.8s forwards; }

/* Partikeleffekte */
.spark {
  width: 6px;
  height: 6px;
  background-color: gold;
  position: absolute;
  border-radius: 50%;
  animation: spark-fly 1s linear forwards;
}
@keyframes spark-fly {
  from { transform: translate(0, 0); opacity: 1; }
  to { opacity: 0; }
}

.tooltip:hover::after {
  content: attr(title);
  position: absolute;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 4px 8px;
  font-size: 10px;
  border-radius: 4px;
  white-space: nowrap;
}