/* =============================================================================
   QRTasse – Footer + Footer-CTA (CI-pur)
   Abhängigkeiten: base.css (Tokens), buttons.css (btn), socials.css (Basis)
   ========================================================================== */

/* ---------- Hero-CTA oberhalb des Footers ---------- */
.footer-cta{
  background:
    radial-gradient(1200px 400px at 20% -20%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 350px at 80% 0%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, #17181a 0%, #121315 100%);
  color: var(--white);
  padding: clamp(2.4rem, 4vw, 3.2rem) 0;
  position: relative;
  isolation: isolate;
  box-shadow: var(--shadow-soft);
}
.footer-cta .wrap{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2rem);
}

/* Eyebrow wie im Hero – inkl. goldenem Punkt */
.footer-cta .eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-1);
  padding:.25rem .6rem;
  border:1px solid rgba(255,255,255,.14);
  background:#fff0; /* leicht transparentes Weiß war bewusst; hier noch cleaner */
  background: rgba(255,255,255,.03);
  border-radius:999px;
  font-size:.86rem; color:rgba(255,255,255,.9);
  margin-bottom:.7rem;
}
.footer-cta .eyebrow i{
  width:8px; height:8px; border-radius:50%;
  background: var(--gold);
  display:inline-block; flex:0 0 8px;
}

.footer-cta h2{
  color:var(--white);
  margin:.2rem 0 .7rem;
}
.footer-cta p{
  color:rgba(255,255,255,.9);
  margin:0 0 1rem;
}
.footer-cta .cta-actions{
  display:flex; flex-wrap:wrap; gap:.8rem;
}
.footer-cta .btn{ padding: 10px 18px; }

/* rechter CTA-Bereich leer = Freiraum */
.footer-cta .wrap > :last-child{ min-height: 1px; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--ink);
  color: var(--white);
  padding: var(--space-6) 0 var(--space-4);
  margin: 0;
  border: 0;
  position: relative;
}

/* dezente Gold-Linie oben als CI-Akzent */
.site-footer::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, rgba(201,165,72,.0), rgba(201,165,72,.9), rgba(201,165,72,.0));
  opacity:.85;
}

/* Grid: Brand | Rechtliches | Kontakt */
.footer-grid{
  display: grid;
  grid-template-columns: 1.25fr .9fr .9fr;
  gap: clamp(18px, 4vw, 36px);
  align-items: start;
}

/* ---------- Brand ---------- */
.footer-brand .brand{
  display: inline-flex; align-items: center; gap: 12px; font-weight: 600;
}
.footer-brand .brand img{
  height: clamp(28px, 4vw, 40px); width: auto; display: block;
}
.footer-brand .claim{
  margin-top: .8rem;
  font-size: .95rem; line-height: 1.45;
  opacity: .9; color:#fff;
  max-width: 42ch;
}
.footer-brand .sub{
  margin-top:.35rem; font-size:.9rem; color:rgba(255,255,255,.8);
}

/* ---------- Headings ---------- */
.site-footer h3{
  margin: 0 0 .6rem; font-size: .95rem; font-weight: 600; letter-spacing: .2px; color: #fff;
}

/* ---------- Link Reset im Footer ---------- */
.site-footer a{
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; display: inline !important;
  color: rgba(255,255,255,.9); text-decoration: none; border-radius: 0;
  transition: color .2s var(--ease), opacity .2s var(--ease);
}
.site-footer a:hover{ color: var(--gold); }

/* ---------- Rechtliches ---------- */
.footer-legal ul{
  list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem;
}
.footer-legal li{ margin:0; }

/* ---------- Kontakt ---------- */
.footer-contact p{
  margin: 0 0 .45rem; color: rgba(255,255,255,.9);
}
.footer-contact .contact-block{ margin-bottom:.6rem; }
.footer-contact .contact-links a{
  font: inherit; /* CI-Schrift, keine Monospace/Alternativen */
  color: rgba(255,255,255,.92);
}

/* ---------- Sub-Footer ---------- */
.sub-footer{
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,.15);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
}
.sub-footer .copy{
  margin: 0; font-size: .9rem; color: rgba(255,255,255,.85);
}

/* Socials: wie HERO – weiße Kachel, dunkle Icons */
.socials--white-tiles a{
  background:#fff; border-color: rgba(0,0,0,.10); box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.socials--white-tiles a:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  background: #f7f6f3;
}
.socials--white-tiles i{ color:#222; opacity:.9; }

/* ---------- A11y Utility ---------- */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .footer-cta .wrap{ grid-template-columns: 1fr; }
}
@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-brand .claim{ max-width: none; }
  .sub-footer{ grid-template-columns: 1fr; }
}