/* ============================================================
   MW der Handwerker – Anfrage-Buttons
   Ergänzung zu style.css. Wird auf allen Seiten eingebunden:
   <link rel="stylesheet" href="css/anfrage-cta.css">
   Änderungen an den Buttons nur hier vornehmen.
   ============================================================ */

:root{
  --mw-orange:#E8913A;
  --mw-orange-hover:#d17e2d;
}

/* ---------- Hauptbutton ---------- */
.cta-anfrage{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:20px 34px;
  background:var(--mw-orange); color:#fff; text-decoration:none;
  font-family:inherit; font-size:1.25rem; font-weight:700;
  letter-spacing:.01em; line-height:1.2; text-align:center;
  border:2px solid var(--mw-orange); border-radius:50px;
  box-shadow:0 8px 26px rgba(232,145,58,.38);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cta-anfrage:hover,
.cta-anfrage:focus{
  background:var(--mw-orange-hover); border-color:var(--mw-orange-hover);
  color:#fff; transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(232,145,58,.45);
}
.cta-anfrage svg{ width:26px; height:26px; flex:0 0 auto; }

/* schmalere Variante für Unterseiten */
.cta-anfrage.klein{ padding:15px 28px; font-size:1.08rem; }
.cta-anfrage.klein svg{ width:21px; height:21px; }

/* ---------- Hero der Startseite ---------- */
.hero-actions{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin:32px auto 8px; max-width:520px;
}
.hero-actions .cta-anfrage{ width:100%; }
.cta-untertext{
  font-size:.95rem; color:#413a30; opacity:.9;
  text-align:center; line-height:1.5; margin:0;
}
.hero-zweit{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:2px; }
.hero-zweit a{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:50px; text-decoration:none;
  font-size:.95rem; font-weight:600; color:#3D3D3D;
  background:rgba(255,255,255,.6); border:1.5px solid rgba(0,0,0,.12);
  transition:all .2s ease;
}
.hero-zweit a:hover{ background:#fff; border-color:var(--mw-orange); color:#3D3D3D; }
.hero-zweit svg{ width:18px; height:18px; }

/* ---------- Menüpunkt ---------- */
.nav-list .nav-cta a{
  background:var(--mw-orange); color:#fff !important;
  padding:9px 18px; border-radius:50px; font-weight:700;
}
.nav-list .nav-cta a:hover{ background:var(--mw-orange-hover); }
.nav-list .nav-cta a::after{ display:none !important; }

/* ---------- Anfrage-Block auf den Leistungsseiten ---------- */
.anfrage-block{
  margin-top:26px; padding:24px 26px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(0,0,0,.08);
  border-left:4px solid var(--mw-orange);
  border-radius:14px;
}
.anfrage-block h3{ margin:0 0 8px; font-size:1.15rem; }
.anfrage-block p{ margin:0 0 16px; font-size:.98rem; line-height:1.6; }
.anfrage-block .anfrage-alt-zeile{
  margin:14px 0 0; font-size:.92rem; line-height:1.6; opacity:.85;
}

/* ---------- Mobiler Balken ---------- */
.cta-leiste{ display:none; }
@media (max-width:900px){
  .cta-leiste{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:999;
    gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(245,240,235,.97);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    border-top:1px solid rgba(0,0,0,.10);
    box-shadow:0 -4px 18px rgba(0,0,0,.10);
  }
  .cta-leiste a{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    text-decoration:none; font-weight:700; font-size:1rem;
    padding:15px 12px; border-radius:50px;
  }
  .cta-leiste .lst-anfrage{ flex:1 1 auto; background:var(--mw-orange); color:#fff; }
  .cta-leiste .lst-tel{
    flex:0 0 auto; width:58px; background:#fff; color:#3D3D3D;
    border:1.5px solid rgba(0,0,0,.14);
  }
  .cta-leiste svg{ width:22px; height:22px; }

  /* Platz, damit der Balken den Footer nicht verdeckt */
  body{ padding-bottom:80px; }

  .cta-anfrage{ font-size:1.1rem; padding:18px 22px; }
  .anfrage-block{ padding:20px 18px; }
}

@media (prefers-reduced-motion:reduce){
  .cta-anfrage{ transition:none; }
  .cta-anfrage:hover{ transform:none; }
}