.material-symbols-outlined
 {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: #cb8a61;
}


/*==================================================
 * Effect 7
 * ===============================================*/
.effect7
{
    position:relative;
    -webkit-box-shadow:0 11px 23px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 11px 23px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 11px 23px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
  content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after
{
  right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}


.text {
    color: #ffffff;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: .25em .5em;
    background-color: #51b4be;
    font-weight: bold;
    font-size: 1.4em;
}

.swiper-pagination {
    position: relative !important;

}

.icon-anim {
  display: inline-block;
  font-size: 40px;
  color: #555;
  transition: transform 0.3s ease, color 0.3s ease;
  animation: pulse 4s ease-in-out infinite;
}

.icon-anim:hover {
  transform: scale(1.3) rotate(15deg);
  color: #ff5722;
}

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

.icon-gradient {
  font-size: 40px;
  /* Mehrfarbiger Verlauf */
  background: linear-gradient(
    45deg,
    #ff3cac,
    #784ba0,
    #2b86c5,
    #ff3cac
  );
  background-size: 400% 400%;
  /* Text mit Verlauf füllen */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 6s ease infinite;
  transition: filter 0.3s ease;
}

/* Hover: leichter Glüheffekt */
.icon-gradient:hover {
  filter: drop-shadow(0 0 8px rgba(255, 60, 172, 0.8));
}

/* Keyframes: Hintergrund verschiebt den Farbverlauf */
@keyframes gradientShift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

.float-card {




  text-align: center;
  /* Start ohne Animation */
  transform: translateY(0);
  will-change: transform;
}

/* Sobald die Card zu 20% im Viewport ist… */
.float-card.in-view {
  animation: floatUpDown 4s ease-in-out infinite;
}

/* Keyframes: sanftes Auf‑ und Abbewegen */
@keyframes floatUpDown {
  0%, 100%   { transform: translateY(0); }
  50%        { transform: translateY(-10px); }
}

.float-card.in-view:hover {
  animation-play-state: paused;
}


.parallax {
  will-change: transform;
  /* optional: sanfte Übergänge, falls du Nachziehen magst */
  transition: transform 0.1s ease-out;
}