/* ============================================================
   Social-Buttons im Footer als Liquid-Glass-Icons
   Glas mit Lichtreflex, Instagram/LinkedIn mit zarter Markenfarbe im Glas, Teilen/Kopieren neutral. Nur index-liquid-2.html.
   ============================================================ */
.ftip__btn--app{
  position: relative; width: 44px; height: 44px; border-radius: 14px; overflow: hidden; isolation: isolate;
  color: #fff; border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.28);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}
/* Lichtreflex oben links wie bei Glas, folgt beim Drüberfahren leicht der Maus (--mx/--my aus social.js) */
.ftip__btn--app::before{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 90% at var(--mx, 25%) var(--my, 0%), rgba(255,255,255,.32), transparent 55%);
}
/* Markenfarbe nur als zarter Schein im Glas */
.ftip__btn--app::after{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: .55;
  background: var(--tint, transparent); transition: opacity .3s;
}
.ftip__btn--app svg{ position: relative; z-index: 2; width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.ftip__btn--app:hover, .ftip__btn--app:focus-visible{
  transform: translateY(-3px) scale(1.05); color: #fff; border-color: rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.35);
}
.ftip__btn--app:hover::after{ opacity: .85; }
.ftip__btn--app:active{ transform: translateY(0) scale(.97); }

/* Instagram / LinkedIn: Markenfarben als Tönung im Glas */
.ftip__btn--ig{ --tint: radial-gradient(circle at 25% 105%, #fdf497 0%, #fd5949 40%, #d6249f 65%, #285aeb 100%); }
.ftip__btn--in{ --tint: linear-gradient(150deg, #3f8fff, #0a66c2); }

/* Helles Design: helles Glas, dunkle Zeichen bei den neutralen Knöpfen */
:root[data-theme="light"] .ftip__btn--app{ border-color: rgba(255,255,255,.7); background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,255,255,.35)); box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(40,40,30,.14); }
:root[data-theme="light"] .ftip__btn--app:not(.ftip__btn--ig):not(.ftip__btn--in){ color: #17180f; }
:root[data-theme="light"] .ftip__btn--app:not(.ftip__btn--ig):not(.ftip__btn--in) svg{ filter: none; }
@media (prefers-reduced-motion: reduce){ .ftip__btn--app{ transition: none; } }

/* Ziel des Dock-Knopfs „Socials“: kurzes Aufleuchten der Icons */
#socials{ scroll-margin-bottom: 140px; }
#socials.is-flash .ftip__btn--ig, #socials.is-flash .ftip__btn--in{ animation: socialFlash 1.6s var(--ease-out); }
@keyframes socialFlash{ 30%{ transform: translateY(-4px) scale(1.12); box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 14px 30px rgba(0,0,0,.35); } }
button.dock__item{ border: 0; padding: 0; font: inherit; cursor: pointer; }

/* Navbar oben + Dock unten nicht doppelt: sobald das Dock erscheint, schrumpft die Navbar auf Logo, Hell/Dunkel und „Zur Plattform“ */
.liquid .nav__links{ max-width: 640px; overflow: hidden; white-space: nowrap; transition: max-width .55s var(--ease-out), opacity .3s ease, margin .55s var(--ease-out); }
body.dock-on .nav__links{ max-width: 0; opacity: 0; pointer-events: none; margin-left: -26px; }   /* -gap, damit keine Lücke bleibt */
body.dock-on .nav__inner{ max-width: 520px; }