/* ==============================
   GRUNDFARBEN
============================== */

:root{
  --footer-dark: #37474f;
  --footer-main: #37474f;
  --accent-red: #c5534a;
}


/* ==============================
   BODY / GRUNDLAYOUT
============================== */

html,
body{
  margin:0;
  padding:0;
}

body{
  padding-bottom:96px; /* Platz für fixen Footer */
}


/* ==============================
   FOOTER – INSPIRO (FIXIERT & STABIL)
============================== */

#colophon{
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  background:var(--footer-dark);
  z-index:9999;
}

/* Footer Background überall erzwingen */
#colophon,
#colophon .inner-wrap,
#colophon .site-info,
#colophon .social-footer{
  background:var(--footer-dark);
}

/* Footer Layout */
#colophon .social-footer{
  display:flex;
  align-items:center;
}

/* Bereiche */
.footer-left,
.footer-center,
.footer-right{
  display:flex;
  align-items:center;
}

/* Icons mittig */
.footer-center{
  flex:1;
  justify-content:center;
}

.footer-center a{
  display:inline-flex;
  margin:0 12px;
}

.footer-center i{
  font-size:24px;
  line-height:0.5;
}

/* Rechter Bereich (Preis) */
.footer-right{
  justify-content:flex-end;
}


/* ==============================
   PREISANZEIGE (STANDARD)
============================== */

#footer-price{
  display:none;
  font-size:24px;
  font-weight:700;
  color:#ffffff;
  white-space:nowrap;

  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease;
}

/* Wenn Preis aktiv ist */
body.price-active .footer-center{
  justify-content:flex-start;
}

body.price-active #footer-price{
  display:block;
}


/* ==============================
   PREIS-HINWEIS – 10 SEKUNDEN AUFFALLEN
============================== */

body.price-active #footer-price{
  padding:2px 2px;
  border-radius:0px;

  background:rgba(197,83,74,0.22);
  color:#ffffff;

  animation:pricePulse 1.2s ease-in-out infinite;
}

/* Sanftes Pulsieren */
@keyframes pricePulse{
  0%{
    background:rgba(197,83,74,0.12);
    box-shadow:0 0 0 rgba(197,83,74,0);
  }
  50%{
    background:rgba(197,83,74,0.35);
    box-shadow:0 0 18px rgba(197,83,74,0.55);
  }
  100%{
    background:rgba(197,83,74,0.12);
    box-shadow:0 0 0 rgba(197,83,74,0);
  }
}


/* ==============================
   MOBILE
============================== */

@media (max-width:768px){
  .footer-center i{
    font-size:28px;
  }

  #footer-price{
    font-size:22px;
  }
}


/* ==============================
   CFF SUBMIT BUTTON – ROBUST
============================== */

#fbuilder input[type="submit"],
#fbuilder button[type="submit"],
#fbuilder .pbSubmit input,
#fbuilder .pbSubmit button,
#fbuilder .pbf-submit input,
#fbuilder .pbf-submit button{
  margin-bottom:40px !important;
}

#colophon {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 9999;
}

#colophon .inner-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 0;
	 position: relative;   /* ← NEU */
}

#colophon .social-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

#colophon .social-footer i {
  font-size: 22px;
}





@media (max-width: 768px) {
  input:focus ~ #colophon,
  textarea:focus ~ #colophon {
    display: none;
  }
}