footer.bg-dark {
  font-size: 16px;
  background-color: transparent !important;
  margin-top: 25px;
}

footer.bg-dark .social-link { 
  margin: 0 12px;
  font-size: 28px !important;
  line-height: 1;
  padding: 6px;
  display: inline-block;
  transition: color .3s, transform .3s;
}

footer.bg-dark .social-link i {
  font-size: inherit;
  display: inline-block;
  vertical-align: middle;
}


footer.bg-dark .social-link:hover i {
  color: #daa520;   
  fill: #daa520;     
  stroke: #daa520; 
  transform: scale(1.12);
}

/* Shazam Doppelbild */
.shazam-link {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
}

/* Beide Bilder übereinanderlegen */
.shazam-link img {
  position: absolute;
  top: 8px;
  left: 0;
  width: 32px;
  height: 32px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover-Bild zunächst ausblenden */
.shazam-link .shazam-hover {
  opacity: 0;
}

/* Beim Hover: Gold-Version einblenden */
footer.bg-dark .social-link:hover .shazam-hover {
  opacity: 1;
  transform: scale(1.12);
}

/* Gleichzeitig die normale Version ausblenden */
footer.bg-dark .social-link:hover .shazam-normal {
  opacity: 0;
}


/* Optionale Performance-/Accessibility-Verbesserung */
@media (prefers-reduced-motion: reduce) {
  .social-link,
  .shazam-link img  {
    transition: none;
  }
}

@media (max-width: 847px) {

  /* Block-7 Höhe +40px erhöhen */
  .block-7 {
    /* min-height: calc(100vh + 40px); */
	/* min-height: 420px !important; */
	height: 325px;
    /* padding-top: 20px; */
    /* padding-bottom: 20px; */
  }

  /* Container erlaubt mehrere Reihen */
  footer .d-flex {
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 20px;
	/* gap: 10px; !important; */
	
  }
}

////////////////////////////////////////////////////////

/* Logo zentrieren */
.logo-fire-wrapper {
    display: flex;
    justify-content: center;
    padding: 40px 0 20px;
}

/* Container für Logo + Flammen */
.logo-fire {
    position: relative;
    display: inline-block;
}

/* ---------- Flammen hinter dem Logo ---------- */

.logo-fire::before {
    content: "";
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    height: 60%;

    background:
      radial-gradient(circle at 50% 110%, rgba(255,255,255,0.9) 0, transparent 55%),
      radial-gradient(circle at 30% 90%,  rgba(255,220,  0,0.9) 0, transparent 60%),
      radial-gradient(circle at 70% 85%,  rgba(255,140,  0,0.8) 0, transparent 60%),
      radial-gradient(circle at 50% 60%,  rgba(255, 80,  0,0.7) 0, transparent 65%);

    filter: blur(10px);
    opacity: 0.9;
    mix-blend-mode: screen;
    z-index: 1;

    animation: flameFlicker 1.3s infinite alternate ease-in-out;
}

.logo-fire::after {
    content: "";
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;
    height: 50%;

    background:
      radial-gradient(circle at 50% 120%, rgba(255,180,0,0.5) 0, transparent 60%),
      radial-gradient(circle at 20% 95%,  rgba(255,120,0,0.5) 0, transparent 60%),
      radial-gradient(circle at 80% 95%,  rgba(255,120,0,0.5) 0, transparent 60%);

    filter: blur(18px);
    opacity: 0.7;
    mix-blend-mode: screen;
    z-index: 0;

    animation: heatWave 2.3s infinite ease-in-out;
}

/* Flacker-Animation */
@keyframes flameFlicker {
    0% {
        transform: translateX(-50%) scaleY(0.95) translateY(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(-50%) scaleY(1.05) translateY(-4px);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scaleY(0.9) translateY(2px);
        opacity: 0.6;
    }
}

/* Langsame Hitze-Welle */
@keyframes heatWave {
    0% {
        transform: translateX(-50%) scale(0.95);
        opacity: 0.5;
    }
    50% {
        transform: translateX(-50%) scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.4;
    }
}

/* ---------- optionale Funken-Partikel ---------- */

.fire-particles {
    position: absolute;
    bottom: 18%;
    left: 50%;
    width: 140px;
    height: 120px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1; /* über Basisflamme, unter Logo */
}

.fire-particles span {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 220, 120, 0.9);
    filter: blur(0.5px);
    animation: sparkRise 1.4s linear infinite;
}

/* verschiedene Startpositionen */
.fire-particles span:nth-child(1) { left: 10%; animation-delay: 0s; }
.fire-particles span:nth-child(2) { left: 30%; animation-delay: .3s; }
.fire-particles span:nth-child(3) { left: 50%; animation-delay: .6s; }
.fire-particles span:nth-child(4) { left: 70%; animation-delay: .9s; }
.fire-particles span:nth-child(5) { left: 90%; animation-delay: 1.1s; }

@keyframes sparkRise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    70% {
        transform: translateY(-60px) scale(0.9);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-90px) scale(0.6);
        opacity: 0;
    }
}


/* @media (max-width: 847px) { */
  /* .block-7 {	 */
	/* height: 395px; */
 /* }	 */
/* } */

  /* Jedes Icon: automatische Breite, aber min. 25% */
  /* footer .social-link, */
  /* footer .shazam-link { */
    /* flex: 1 1 25%;  */
    /* text-align: center; */
  /* } */
/* } */


/* @media (prefers-reduced-motion: reduce) { */
  /* .social-link, */
  /* .shazam-link img, */
  /* .col-2 a, */
  /* .col-2 .menu-label, */
  /* .col-2 [class^="font-"], */
  /* .col-2 [class*=" font-"] { */
    /* transition: none; */
  /* } */
/* } */