/* Kontakt-Dock – Anrufen · E-Mail · Anfrage
   Premium heißt Zurückhaltung: klein, ruhig, immer erreichbar.
   Liegt unter dem Cookie-Banner (z-index 99999) und weicht ihm aus. */

.kds-dock{
  position:fixed; z-index:90;
  right:clamp(16px,2vw,28px);
  bottom:clamp(16px,2.4vw,30px);
  display:flex; flex-direction:column; gap:10px;
  /* Wird per JS gesetzt, solange der Cookie-Banner sichtbar ist. */
  transform:translateY(calc(-1 * var(--kds-dock-lift, 0px)));
  transition:transform .3s var(--ease,ease);
}

.kds-dock__item{
  display:flex; align-items:center; justify-content:flex-end;
  height:52px; width:52px; padding:0;
  background:var(--bg,#fff); color:var(--ink,#111);
  border:1px solid var(--line,#e7e4df);
  border-radius:999px; overflow:hidden;
  text-decoration:none; white-space:nowrap;
  box-shadow:0 2px 14px rgba(0,0,0,.07);
  transition:width .28s var(--ease,ease), background .2s ease, color .2s ease, border-color .2s ease;
}
.kds-dock__item:hover,
.kds-dock__item:focus-visible{
  width:150px; background:var(--ink,#111); color:#fff; border-color:var(--ink,#111);
  outline:none;
}
.kds-dock__item:focus-visible{ box-shadow:0 0 0 3px rgba(17,17,17,.25); }

/* Der Haupt-Weg ist von Anfang an sichtbar dunkel. */
.kds-dock__item--primary{ background:var(--ink,#111); color:#fff; border-color:var(--ink,#111); }
.kds-dock__item--primary:hover,
.kds-dock__item--primary:focus-visible{ background:#000; border-color:#000; }

.kds-dock__icon{
  flex:0 0 50px; display:grid; place-items:center;
  order:2; /* Icon bleibt rechts stehen, Label wächst nach links */
}
.kds-dock__icon svg{ width:21px; height:21px; display:block; }

.kds-dock__label{
  order:1; opacity:0; padding-right:2px;
  font-size:.9rem; letter-spacing:.02em;
  transition:opacity .2s ease .06s;
}
.kds-dock__item:hover .kds-dock__label,
.kds-dock__item:focus-visible .kds-dock__label{ opacity:1; }

/* --- Mobil: feste Leiste in der Daumenzone --------------------------- */
@media (max-width:720px){
  .kds-dock{
    right:0; left:0; bottom:0;
    flex-direction:row; gap:0;
    background:var(--ink,#111);
    border-top:1px solid rgba(255,255,255,.14);
    transform:none;
  }
  .kds-dock__item{
    flex:1 1 0; width:auto; height:60px; border-radius:0; border:0;
    flex-direction:column; justify-content:center; gap:3px;
    background:transparent; color:#fff; box-shadow:none;
  }
  .kds-dock__item + .kds-dock__item{ border-left:1px solid rgba(255,255,255,.14); }
  .kds-dock__item:hover,
  .kds-dock__item:focus-visible{ width:auto; background:rgba(255,255,255,.08); color:#fff; }
  .kds-dock__item--primary{ background:rgba(255,255,255,.1); }
  .kds-dock__icon{ order:1; flex:0 0 auto; }
  .kds-dock__icon svg{ width:19px; height:19px; }
  .kds-dock__label{ order:2; opacity:1; padding:0; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }

  /* Footer nicht unter der Leiste verstecken. */
  body{ padding-bottom:60px; }
}

@media (prefers-reduced-motion:reduce){
  .kds-dock, .kds-dock__item, .kds-dock__label{ transition:none; }
}

/* Beim Drucken irrelevant. */
@media print{ .kds-dock{ display:none; } }