/* Social-Media-Knöpfe unten auf der Seite */
.sm-leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sm-titel { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.sm-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
a.sm-knopf { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; text-decoration: none !important; border: 0 !important; padding: 0 !important;
  background: var(--sm-farbe); box-shadow: 0 8px 18px -10px #0009, inset 0 0 0 1px #ffffff33; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s, filter .25s;
  animation: sm-rein .5s calc(var(--i) * 70ms + .2s) cubic-bezier(.3, 1.4, .5, 1) both; }
a.sm-knopf svg { display: block; }
a.sm-knopf:hover, a.sm-knopf:focus-visible { transform: translateY(-3px) scale(1.08); box-shadow: 0 14px 26px -12px #000b, inset 0 0 0 1px #ffffff55; outline: none; filter: saturate(1.15); }
a.sm-knopf:focus-visible { box-shadow: 0 0 0 3px #c99a5b, 0 14px 26px -12px #000b; }
a.sm-knopf::after { content: attr(data-sm-name); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); padding: 4px 9px; border-radius: 8px; background: #14323a; color: #fff;
  font: 700 11.5px/1.2 Manrope, "Segoe UI", system-ui, sans-serif; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
a.sm-knopf:hover::after, a.sm-knopf:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@keyframes sm-rein { from { opacity: 0; transform: translateY(8px) scale(.7); } }
.sm-klein a.sm-knopf { width: 32px; height: 32px; } .sm-klein a.sm-knopf svg { width: 17px; height: 17px; }
/* Anmeldeseite: Leiste mittig zwischen Copyright und Rechtslinks */
#kontoTor .kt-recht .sm-leiste { gap: 10px; }
#kontoTor .kt-recht .sm-titel { color: #3d5258; }
/* Rechtsseiten */
.r-fuss .sm-leiste { order: 0; } .r-fuss .sm-titel { color: var(--leise); }
@media (max-width: 640px) { .kt-recht .sm-leiste, .r-fuss .sm-leiste { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { a.sm-knopf { animation: none; transition: none; } }