/* ============================================================
   footer.css – Globaler Footer + schwebende Buttons + Toast
   Verwendet in: footer.php
   Abhängig von: tokens.css, base.css
   ============================================================ */

/* ---------- Footer ---------- */
/* .ht-footer – dunkler Seitenfuß. */
.ht-footer{background:var(--bg0);color:#fff;position:relative;padding-top:5rem}
/* .ht-footer__rule – oranger Verlaufsstrich oben. */
.ht-footer__rule{position:absolute;top:0;left:0;right:0;height:0.125rem;background:linear-gradient(90deg,var(--orange),rgba(249,115,22,0))}
/* .footer-grid – 4-spaltiges Raster (Marke + 3 Spalten). */
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3.5rem}
/* .ht-footer__logo(-link) – weißes Logo in der Markenspalte, verlinkt zur Startseite. */
.ht-footer__logo-link{display:inline-block}
.ht-footer__logo{height:3.375rem;width:auto;display:block}
/* .ht-footer__tagline – Slogan unter dem Logo. */
.ht-footer__tagline{font-size:0.875rem;line-height:1.7;color:var(--muted-dark);margin:1.125rem 0 1.5rem;max-width:17.5rem}
/* .footer-social – Reihe der Icon-Links (Telefon/E-Mail/Karte). */
.footer-social{display:flex;gap:0.625rem}
.footer-social a{width:2.5rem;height:2.5rem;border-radius:0;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;color:var(--muted-dark);transition:color .2s ease,border-color .2s ease,background .2s ease}
.footer-social a:hover{color:#fff;border-color:var(--orange);background:var(--orange)}
/* .ht-footer__head – Spaltenüberschrift. */
.ht-footer__head{font-size:0.8125rem;font-weight:700;letter-spacing:.06em;margin-bottom:1.125rem;color:#fff}
/* .ht-footer__col – Linkspalte. */
.ht-footer__col{display:flex;flex-direction:column;gap:0.75rem}
/* .ht-footer__link – Textlink im Footer. */
.ht-footer__link{font-size:0.875rem;color:var(--muted-dark);text-decoration:none;transition:color .2s ease}
.ht-footer__link:hover{color:var(--orange)}
/* .ht-footer__addr – Anschrift. */
.ht-footer__addr{font-size:0.875rem;color:var(--muted-dark);line-height:1.55}
/* .foot-bottom – untere Leiste (Copyright + Credit + Rechtslinks). */
.foot-bottom{border-top:1px solid var(--line-dark);padding:1.625rem 0;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.ht-footer__copy{font-size:0.8125rem;color:var(--muted-dark)}
/* .credit-link – „Umgesetzt von gernhard". */
.credit-link{display:inline-flex;align-items:center;gap:0.625rem;text-decoration:none;opacity:.85;transition:opacity .2s ease}
.credit-link:hover{opacity:1}
.ht-footer__credit-txt{font-size:0.8125rem;color:var(--muted-dark)}
.ht-footer__credit-img{height:1.125rem;width:auto;display:block}
/* .ht-footer__legal – Rechtslinks unten rechts. */
.ht-footer__legal{display:flex;gap:1.625rem}
.foot-bottom a{font-size:0.8125rem;color:var(--muted-dark);text-decoration:none;transition:color .2s ease}
.foot-bottom a:hover{color:var(--orange)}

/* ---------- Schwebender Anruf-/Nach-oben-Button ---------- */
/* .ht-fab – Container unten rechts; JS blendet ihn beim Scrollen ein. */
.ht-fab{position:fixed;right:1.375rem;bottom:1.375rem;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:0.75rem;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
/* .fab-top – „Nach oben". */
.fab-top{width:3.125rem;height:3.125rem;border-radius:0;background:#fff;border:1px solid var(--line-light);box-shadow:0 8px 22px rgba(10,10,10,.16);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease}
.fab-top:hover{transform:translateY(-3px)}
/* .fab-call – Anruf-Button. */
.fab-call{display:flex;align-items:center;gap:0.875rem;background:var(--orange);color:#fff;text-decoration:none;padding:0.6875rem 1.375rem 0.6875rem 0.6875rem;box-shadow:0 12px 28px rgba(247,148,30,.42);transition:background .2s ease,transform .12s ease}
.fab-call:hover{background:var(--orange-2)}
.fab-call:active{transform:translateY(1px)}
.fab-call__icon{flex:none;width:2.75rem;height:2.75rem;border-radius:0;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.fab-call__txt{display:flex;flex-direction:column;line-height:1.15}
.fab-call__small{font-size:0.75rem;font-weight:600;letter-spacing:.04em;opacity:.92}
.fab-call__num{font-size:1.125rem;font-weight:800}

/* ---------- Toast (Versandbestätigung) ---------- */
/* .ht-toast – Einblendung nach erfolgreichem Versand; JS steuert Sichtbarkeit. */
.ht-toast{position:fixed;bottom:1.875rem;left:50%;transform:translateX(-50%) translateY(24px);z-index:120;background:#fff;color:#0a0a0a;padding:1rem 1.375rem;border-radius:0;box-shadow:0 18px 50px rgba(0,0,0,.35);display:flex;align-items:center;gap:0.75rem;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.ht-toast__icon{flex:none;width:1.875rem;height:1.875rem;border-radius:0;background:var(--orange);display:flex;align-items:center;justify-content:center}
.ht-toast__title{font-weight:700;font-size:0.9375rem}
.ht-toast__sub{font-size:0.8125rem;color:var(--muted-light)}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.25rem}
  /* Schwebende Buttons (Anruf + Nach oben) ab iPad deutlich kleiner */
  .ht-fab{right:1rem;bottom:1rem;gap:0.625rem}
  .fab-top{width:2.5rem;height:2.5rem}
  .fab-top svg{width:1.125rem;height:1.125rem}
  .fab-call{gap:0.625rem;padding:0.5rem 1rem 0.5rem 0.5rem}
  .fab-call__icon{width:2.25rem;height:2.25rem}
  .fab-call__icon svg{width:1.125rem;height:1.125rem}
  .fab-call__small{font-size:0.6875rem}
  .fab-call__num{font-size:1rem}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  /* Anruf-Button auf dem Phone nur als Telefon-Icon (Text aus) */
  .fab-call__txt{display:none}
  .fab-call{padding:0.75rem;gap:0}
  .fab-call__icon{width:auto;height:auto;background:transparent}
}