/* ============================================================
   Frontida Tagespflege – Floating CTA-Buttons
   1:1 portiert vom Pflegedienst (css/index.css Block 8):
   Desktop = Eck-Buttons unten rechts, Mobile = Vollbreite-Leiste
   am unteren Rand (orange + blau gestapelt, WhatsApp rechts).
   Blau hier = #2165AE (TP-Konvention fuer Pflegedienst-Links).
   ============================================================ */
.fpf-wrap {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  width: 260px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.13));
}
.fpf-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  text-align: center;
  transition: transform 0.2s, opacity 0.2s;
}
.fpf-btn:hover { transform: translateY(-2px); opacity: 0.93; }

.fpf-orange {
  background: #F47522;
  animation: fpf-pulse-o 2.5s ease-in-out infinite;
}
.fpf-blue {
  background: #2165AE;
  animation: fpf-pulse-b 2.5s ease-in-out infinite;
  animation-delay: 1.25s;
}
@keyframes fpf-pulse-o {
  0%,100% { box-shadow: 0 3px 14px rgba(244,117,34,0.4); }
  50%      { box-shadow: 0 3px 22px rgba(244,117,34,0.7), 0 0 0 5px rgba(244,117,34,0.12); }
}
@keyframes fpf-pulse-b {
  0%,100% { box-shadow: 0 3px 14px rgba(33,101,174,0.4); }
  50%      { box-shadow: 0 3px 22px rgba(33,101,174,0.7), 0 0 0 5px rgba(33,101,174,0.12); }
}
.fpf-icons {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.fpf-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
  flex-shrink: 0;
}
.fpf-icon:hover { transform: scale(1.1); opacity: 0.9; }
.fpf-wa    { background: #25D366; box-shadow: 0 3px 14px rgba(37,211,102,0.45); }

/* Button-Geometrie (wie Pflegedienst) */
.fpf-orange {
  width: 240px; padding: 0.6rem 0.85rem; font-size: 0.78rem;
  border-radius: 8px; white-space: nowrap; font-weight: 700; line-height: 1.2;
}
.fpf-blue { width: 90%; align-self: flex-end; padding: 0.42rem 0.8rem; font-size: 0.7rem; }

/* Sichtbarkeit: ausgeblendet ueber Hero und Footer (Toggle per JS) */
.fpf-wrap { transition: opacity 0.25s ease; }
.fpf-wrap.fpf-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 600px) {
  /* Mobile: full-width bar attached to the very bottom edge
     (orange + blue stacked left, WhatsApp square spanning both rows right) */
  .fpf-wrap {
    display: grid;
    grid-template-columns: 1fr 56px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    border-radius: 0;
    gap: 0;
    filter: none;
    box-shadow: 0 -3px 14px rgba(0,0,0,0.16);
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;
    overflow: visible;
  }
  .fpf-btn {
    display: flex;
    width: auto;
    max-width: none;
    align-self: stretch;
    border-radius: 0;
    font-size: 0.78rem;
    padding: 0.65rem 0.5rem;
    line-height: 1.3;
    white-space: nowrap;
    animation: none;
    box-shadow: none;
    box-sizing: border-box;
  }
  .fpf-orange { grid-column: 1; grid-row: 1; }
  .fpf-blue   { grid-column: 1; grid-row: 2; }
  .fpf-icons {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    display: flex;
    gap: 0;
    width: auto;
    align-items: stretch;
    justify-content: flex-end;
  }
  .fpf-icon {
    border-radius: 0;
    height: auto;
    width: auto;
    flex: 1 1 auto;
    padding: 0;
    margin: 0;
    box-shadow: none;
  }
  .fpf-icon svg { width: 24px; height: 24px; flex-shrink: 0; }
  /* Platz am Seitenende reservieren, damit die Leiste nichts verdeckt */
  body { padding-bottom: 84px !important; }
}
@media (max-width: 380px) {
  .fpf-btn { font-size: 0.76rem; padding: 0.75rem 0.5rem; }
}


/* ===== Floating-CTA am Desktop: kompaktes Icon-Dock (wie Pflegedienst) =====
   Runde Icon-Knoepfe (Sonne = Probetag, Haus = Hilfe zu Hause), Text
   faehrt bei Hover aus. Mobil unveraendert (Icons dort ausgeblendet). */
.fpf-ico { display: none; }
@media (min-width: 901px) {
  .fpf-wrap { width: auto; gap: 0.5rem; align-items: flex-end; }
  .fpf-wrap .fpf-btn { width: auto; max-width: 52px; height: 52px; padding: 0 16px; border-radius: 26px; white-space: nowrap; overflow: hidden; animation: none; transition: max-width 0.3s ease; align-self: flex-end; justify-content: flex-start; box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
  .fpf-ico { display: flex; flex-shrink: 0; }
  .fpf-lbl { margin-left: 0.6rem; opacity: 0; transition: opacity 0.2s ease 0.05s; }
  .fpf-wrap .fpf-btn:hover { max-width: 380px; }
  .fpf-wrap .fpf-btn:hover .fpf-lbl { opacity: 1; }
}