/* =========================================================
   BRADA Website — Politur-Schicht (Animationen & Feinschliff)
   Lädt NACH den Basis-Styles; alles rein additiv, damit die
   bestehenden Styles unangetastet bleiben.
   ========================================================= */

/* ---------- Hero-Entrance (nur Startseite: .hero) ----------
   Bild: langsamer Ken-Burns-Zoom beim Laden. Die Animation endet
   nach 2,4 s — danach greift wieder das Parallax-transform aus site.js. */
.hero > img.hero-img { animation: hero-zoom 2.4s cubic-bezier(0.2, 0.6, 0.2, 1); }
@keyframes hero-zoom {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

/* Text steigt gestaffelt auf */
.hero-content .eyebrow,
.hero-content .hero-title,
.hero-content .hero-sub,
.hero-content .hero-cta { opacity: 0; animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.hero-content .eyebrow    { animation-delay: 0.15s; }
.hero-content .hero-title { animation-delay: 0.3s; }
.hero-content .hero-sub   { animation-delay: 0.5s; }
.hero-content .hero-cta   { animation-delay: 0.68s; }
.hero-foot { opacity: 0; animation: hero-fade 1s ease 1.1s forwards; }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-fade { to { opacity: 1; } }

/* ---------- Bilder in Karten: ruhiger Zoom bei Hover ---------- */
.proj-media img,
.service-media img,
.aud-card img {
  transition: transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: transform;
}
.proj-card:hover .proj-media img,
.service-row:hover .service-media img { transform: scale(1.045); }

/* ---------- Textlinks: goldene Linie wischt durch ---------- */
.txtlink { position: relative; }
.txtlink::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.txtlink:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Header: Milchglas, sobald er deckend wird ---------- */
.site-header.solid,
.site-header:not(.over-hero) {
  backdrop-filter: saturate(1.1) blur(10px);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
}

/* ---------- Buttons: sanftes Anheben ---------- */
.btn { transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(23, 35, 35, 0.14); }

/* ---------- Tastatur-Fokus deutlich, aber elegant ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px;
}

/* ---------- Zahlen zählen hoch (site.js setzt .counted) ---------- */
.proj-stats b { font-variant-numeric: tabular-nums; }

/* ---------- Ruhe für alle, die es wünschen ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero > img.hero-img,
  .hero-content .eyebrow, .hero-content .hero-title,
  .hero-content .hero-sub, .hero-content .hero-cta, .hero-foot {
    animation: none; opacity: 1; transform: none;
  }
  .proj-media img, .service-media img, .txtlink::after, .btn { transition: none; }
}

/* ---------- FAQ (Häufige Fragen) ---------- */
.faq-list { border-top: 1px solid var(--gold-line); }
.faq-item { border-bottom: 1px solid var(--gold-line); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: baseline; gap: 24px; padding: 22px 0;
  font-family: var(--serif); font-size: clamp(19px, 2vw, 24px); color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: var(--font-sans); font-size: 22px; font-weight: 300;
  color: var(--gold-deep); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  flex: 0 0 auto;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin: 0; padding: 0 0 24px; max-width: 62ch;
  font-size: 16px; line-height: 1.7; color: #3d4c4e;
}