/* =========================================================
   TR BAU, Version 6 (index-v6.html, projekte-v5.html)
   Social Media als Logos statt als Wörter: runde Knöpfe mit Rand in der
   Textfarbe, im Kontakt dunkel auf hell, im Footer hell auf dunkel.
   ========================================================= */

.social { display: flex; gap: 10px; margin: 0; }
.social a {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid currentColor;
  color: var(--tinte);
  transition: background-color .2s, color .2s, border-color .2s;
}
.social svg { width: 22px; height: 22px; }
.social a:hover { background: var(--blau); border-color: var(--blau); color: #fff; }
.social a:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }

.contact__list .social { margin-top: 8px; }

/* ---------- Anfrageformular (Versand über anfrage.php) ---------- */
/* Fallenfeld für Bots: aus dem Bild, aber nicht display:none (das überspringen manche Bots) */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .form__status:focus { outline: none; }
.form__status.is-error { background: #fdecea; color: #8a1c12; }
.cta--submit:disabled { cursor: progress; opacity: .7; }

.site-footer .social { margin-top: 20px; max-width: none; }
/* seite-v2.css gibt Footer-Links Abstand und inline-block, hier wieder aufheben */
.site-footer .social a { display: inline-grid; padding: 0; color: rgba(255, 255, 255, .78); border-color: rgba(255, 255, 255, .35); }
.site-footer .social a:hover { color: #fff; border-color: var(--blau); background: var(--blau); }
.site-footer .social a:focus-visible { outline-color: #fff; }