/* ===========================================================================
   Vorschau-Leiste fuer Kunden-Pitches.
   Bewusst generisch dunkel, nicht in der Marke des Kunden, damit klar ist:
   das hier gehoert nicht zur Website, sondern zur Praesentation.
   =========================================================================== */
/* Platz schaffen, damit die Leiste weder Fusszeile noch die Unterkante
   eines formatfuellenden Kopfbereichs verdeckt. Die Hoehe steht als
   Variable bereit, damit die Seiten sie einrechnen koennen. */
body:has(.vk-bar){--vk-hoehe:66px;padding-bottom:var(--vk-hoehe)}
@media(max-width:760px){body:has(.vk-bar){--vk-hoehe:60px}}

.vk-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px clamp(14px,3vw,26px);
  background:#101218;border-top:1px solid rgba(255,255,255,.14);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  color:#fff;
  box-shadow:0 -10px 30px rgba(0,0,0,.28);
}
.vk-tag{
  display:inline-flex;align-items:center;gap:7px;
  background:#6C4BF4;color:#fff;
  padding:6px 11px;border-radius:100px;
  font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  flex:none;
}
.vk-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:vkpulse 2s ease-in-out infinite}
@keyframes vkpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.vk-kind{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);flex:none}

.vk-seg{display:flex;gap:3px;background:rgba(255,255,255,.08);padding:3px;border-radius:100px}
.vk-seg > *{
  display:inline-flex;align-items:center;
  padding:7px 15px;border-radius:100px;
  font-size:.74rem;font-weight:600;letter-spacing:.01em;
  color:rgba(255,255,255,.66);text-decoration:none;
  transition:background .22s ease,color .22s ease;
  white-space:nowrap;
}
.vk-seg > a:hover{background:rgba(255,255,255,.12);color:#fff}
.vk-seg .vk-p{background:#fff;color:#101218}
.vk-bar :focus-visible{outline:2px solid #6C4BF4;outline-offset:2px}

.vk-note{font-size:.7rem;color:rgba(255,255,255,.42);margin-left:auto;flex:none}
@media(max-width:760px){
  .vk-note{display:none}
  .vk-kind{display:none}
  .vk-bar{gap:10px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.vk-tag::before{animation:none}}